@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Syne:wght@500;700&display=swap");
:root{
  --brand:#e91e8a;
  --deep:#b5156b;
  --accent:#ff6ec7;
  --bg:#050308;
  --bg1:#0a070c;
  --t1:rgba(255,247,250,.94);
  --t2:rgba(255,230,240,.62);
  --muted:rgba(255,210,230,.38);
  --bd:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.03);
  --font:"Syne",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:4px;
  --nav-bg:rgba(5,3,8,.72);
}
:root[data-theme=light]{
  --bg:#f4f0f2;--bg1:#fff;--t1:rgba(12,6,10,.92);--t2:rgba(12,6,10,.72);--muted:rgba(12,6,10,.55);
  --bd:rgba(12,6,10,.16);--glass:rgba(12,6,10,.06);
  --nav-bg:rgba(255,247,250,.92);
}
:root[data-theme=light] .vignette{background:radial-gradient(80% 70% at 50% 40%,transparent 20%,#f4f0f2 82%)}
:root[data-theme=light] .film img{opacity:.16;filter:saturate(.7) contrast(1.05) brightness(1.15)}
:root[data-theme=light] .btn-g:hover{color:var(--t1);background:rgba(233,30,138,.08)}
:root[data-theme=light] .icon{color:var(--t1);border-color:var(--bd)}
:root[data-theme=light] .grain{opacity:.04;mix-blend-mode:multiply}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--t1);font-family:var(--font)}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#e91e8a;color:#fff}

.grain{pointer-events:none;position:fixed;inset:0;z-index:80;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}
.film{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.film img{width:120%;height:120%;object-fit:cover;opacity:.42;animation:ken 28s ease-in-out infinite alternate;filter:saturate(1.1) contrast(1.15)}
@keyframes ken{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(2%,1%) scale(1.08)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 70% at 50% 40%,transparent 20%,#050308 78%)}

.nav{position:fixed;inset:0 0 auto;height:56px;z-index:40;display:flex;align-items:center;
  border-bottom:1px solid var(--bd);background:var(--nav-bg);backdrop-filter:blur(18px)}
.nav-in{width:min(1280px,calc(100% - 40px));margin:0 auto;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.brand img{width:22px;height:22px;opacity:.9}
.links{display:flex;gap:18px;margin-left:8px}
.links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.links a:hover,.links a.on{color:var(--t1)}
.nav-r{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:12px}
.icon{width:32px;height:32px;border:1px solid var(--bd);background:transparent;color:var(--t2);cursor:pointer;border-radius:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  padding:12px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border-radius:0}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{filter:brightness(1.08)}
.btn-g{background:transparent;color:var(--t1);border:1px solid var(--bd)}
.btn-g:hover{border-color:var(--brand);color:#fff}
.btn-sm{padding:8px 12px;font-size:11px}

.wrap{width:min(1280px,calc(100% - 40px));margin:0 auto;position:relative;z-index:2}
.hero{min-height:100vh;padding:100px 0 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand)}
.kicker .dot{display:none}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.2vw,88px);line-height:.95;letter-spacing:-.03em;margin:18px 0 18px}
h1 em{font-style:italic;color:var(--brand)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,48px);margin:0 0 12px}
.sub{font-size:16px;line-height:1.55;color:var(--t2);max-width:38ch;margin:0 0 22px}
.trust{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:18px;max-width:52ch}
.how-ol{margin:0 0 22px;padding:0;list-style:none;max-width:44ch}
.how-ol li{display:grid;grid-template-columns:1.6ch 1fr;gap:10px;margin:0 0 10px;color:var(--t2);font-size:15px;line-height:1.45}
.how-ol b{font-family:var(--mono);color:var(--brand);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:8px}

.stage{perspective:1200px}
.lc{width:100%;aspect-ratio:1/1;position:relative;overflow:hidden;color:#fff;border:1px solid rgba(233,30,138,.35);
  transform:rotateY(-14deg) rotateX(8deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 80px rgba(233,30,138,.18)}
.stage:hover .lc{transform:rotateY(-6deg) rotateX(2deg) scale(1.02)}
.lc .bg{position:absolute;inset:0;background:
  radial-gradient(70% 50% at 88% 0%,rgba(233,30,138,.55),transparent 55%),
  linear-gradient(180deg,#12010c,#000)}
.lc .inner{position:relative;z-index:1;padding:28px;height:100%;display:flex;flex-direction:column}
.lc .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lc .amt{font-family:var(--mono);font-size:clamp(44px,7vw,76px);font-weight:500;letter-spacing:-.06em;margin:22px 0 10px;font-variant-numeric:tabular-nums}
.lc .loop{font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(255,255,255,.86);max-width:18ch}
.lc .meta{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.lc .meta b{display:block;color:#fff;font-size:12px;margin-top:6px;letter-spacing:0;text-transform:none;font-weight:500}
.lc .wm{position:absolute;right:12px;bottom:28px;font-size:11px;letter-spacing:.4em;opacity:.35;pointer-events:none}

.tools{margin-top:16px;display:grid;gap:8px}
.drop{border:1px solid var(--bd);padding:14px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.drop input{display:none}
.manual{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.manual input,.manual textarea,select{width:100%;background:transparent;border:1px solid var(--bd);border-radius:0;padding:10px 12px}
.manual textarea{grid-column:1/-1;min-height:70px;resize:vertical}

.section{padding:72px 0;position:relative;z-index:2}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd)}
.tile{background:var(--bg);padding:28px 22px}
.tile h3{margin:0 0 10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.tile p,.prose p,.prose li{color:var(--t2);line-height:1.6}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin:0 0 14px;border:1px solid var(--bd);background:#000}
.how-video{margin:0 0 36px}
.how-video video{width:100%;aspect-ratio:16/9;display:block;background:#000;border:1px solid var(--bd)}
.how-video figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.04em}
@media (prefers-reduced-motion: reduce){
  .how-video video{display:none}
}
.prose{max-width:72ch}.prose h2{margin-top:32px}
.prose code,.saas-mono,.saas-token{font-family:var(--mono);font-size:12px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--bd);vertical-align:top}
.table th{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.ticker{position:relative;z-index:2;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden;padding:10px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticker-track{display:flex;gap:48px;white-space:nowrap;animation:tick 40s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker b{color:var(--brand);font-weight:500}

footer{position:relative;z-index:2;border-top:1px solid var(--bd);padding:48px 0 28px;font-size:13px;color:var(--t2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.fine{color:var(--muted);font-size:11px;max-width:72ch;margin-top:22px;font-family:var(--mono)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#000;color:#fff;border:1px solid var(--brand);padding:10px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;z-index:120;display:none;max-width:min(92vw,420px);text-align:center}
.lc-flash{outline:2px solid var(--brand);outline-offset:4px}
.pub-out{font-family:var(--mono);font-size:11px;color:var(--t2);margin:8px 0 0;word-break:break-all}
.pub-out a{color:var(--brand);text-decoration:underline}
.price{font-family:var(--mono);font-size:32px;font-weight:500}

.saas-page{padding:110px 0 64px;max-width:560px}
.saas-page.saas-wide{max-width:960px}
.saas-form{display:grid;gap:12px;margin-top:20px}
.saas-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--t2)}
.saas-form input[type=email],.saas-form input[type=password],.saas-form input[type=text]{width:100%;background:transparent;border:1px solid var(--bd);border-radius:0;padding:10px 12px}
.saas-form input:focus{outline:none;border-color:var(--brand)}
.saas-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;color:var(--t2);line-height:1.45}
.saas-check input{accent-color:var(--brand);margin-top:3px;flex:0 0 auto}
.saas-err{color:#ef4444;font-size:13px;min-height:1.2em}
.saas-hint,.saas-switch{color:var(--muted);font-size:13px}
.saas-switch a{color:var(--t1);font-weight:600}
.saas-badge{display:inline-flex;align-items:center;padding:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--bd)}
.saas-badge-pro,.saas-badge-studio{color:#fff;background:var(--brand);border:0}
.saas-token{background:transparent;border:1px dashed var(--brand);padding:14px;word-break:break-all;margin-top:12px}
.saas-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.saas-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.saas-list{margin-top:28px}
.saas-empty{color:var(--muted);font-size:14px}
.saas-note{margin:0;color:var(--t2);font-size:14px;line-height:1.55}
.saas-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.saas-hidden{display:none}

.life-vitals,.crew-grid,.mod-grid{display:grid;gap:1px;background:var(--bd);margin:28px 0}
.life-vitals{grid-template-columns:repeat(4,1fr)}
.crew-grid{grid-template-columns:repeat(5,1fr)}
.mod-grid{grid-template-columns:repeat(4,1fr)}
.life-card{background:var(--bg);padding:22px 18px}
.life-card h3{margin:0 0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.life-card p,.life-card .meta{margin:0;color:var(--t2);font-size:13px;line-height:1.5}
.life-card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:8px}
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:8px;box-shadow:0 0 12px #22c55e;vertical-align:middle}
.pulse-dot.off{background:#ef4444;box-shadow:0 0 12px #ef4444}
.body-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.life-log{white-space:pre-wrap;max-height:280px;overflow:auto}

@media(max-width:900px){
  .hero,.grid3,.foot-grid,.manual,.saas-grid,.life-vitals,.crew-grid,.mod-grid{grid-template-columns:1fr}
  .links{display:none}
  h1{font-size:40px}
  .lc{transform:none}
  .film img{opacity:.28}
  .nav{height:auto}
  .nav-in{flex-wrap:wrap;gap:8px;width:calc(100% - 24px);padding:8px 0}
  .nav-r{gap:6px}
}
.cta-short{display:none}
@media(max-width:420px){
  .nav-in{width:calc(100% - 16px);gap:6px}
  .nav-r a[href="/signup"]{display:none}
  .nav-r a.btn-p{padding:8px 10px;font-size:10px;letter-spacing:.08em;white-space:nowrap}
  .brand{letter-spacing:.1em}
  .btn-sm{padding:8px 10px}
  .cta-full{display:none}
  .cta-short{display:inline}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .lc{transform:none}
}