@font-face{font-family:"Jakarta";src:url(assets/fonts/jakarta.ttf) format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"InterV";src:url(assets/fonts/inter.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--bgd:#0A0F1E;--bg2:#111832;--panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.10);--ink:#EEF1F8;--mute:#9AA4BF;--dim:#6B7593;
--coral:#FF7A55;--coral2:#FFB199;--teal:#3DD6C6;--violet:#8B7CFF;--amber:#FFC857;--brand:#FF7A55;--brand-d:#ff5f35;--ok:#3DD6C6;--err:#ff8a80;--r:22px;
--head:"Jakarta","Plus Jakarta Sans",system-ui,sans-serif;--body:"InterV","Inter",system-ui,sans-serif}
html{background:var(--bgd)}
body{font-family:var(--body);color:var(--ink);background:radial-gradient(1200px 800px at 85% -10%,rgba(139,124,255,.22),transparent 60%),radial-gradient(1000px 700px at -10% 30%,rgba(255,122,85,.16),transparent 60%),var(--bgd);position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px}
.orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;animation:float 18s ease-in-out infinite}
.orb.a{width:520px;height:520px;background:var(--coral);top:-160px;left:-160px}
.orb.b{width:600px;height:600px;background:var(--violet);top:500px;right:-260px;animation-delay:-6s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
main,footer,header{position:relative;z-index:1}
h1,h2,h3,.brand{font-family:var(--head);letter-spacing:-.025em}
h1{font-weight:800;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05}
h1{background:linear-gradient(100deg,#fff 0%,#fff 55%,var(--coral2) 80%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:750}
p,li{color:var(--mute)} h3{color:var(--ink)} strong{color:var(--ink)}
.band{background:rgba(255,255,255,.025);border-block:1px solid var(--line)}
.top{background:rgba(10,15,30,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top.stuck{box-shadow:0 8px 30px rgba(0,0,0,.4)}
.brand,nav a{color:var(--ink)} nav a:hover,nav a[aria-current=true]{color:var(--coral2)}
.mark{background:linear-gradient(135deg,var(--coral),var(--violet));border-radius:9px;font-family:var(--head)}
.burger{color:var(--ink);border-color:var(--line)}
.btn{background:linear-gradient(100deg,var(--coral),#ff9470);color:#1a0e0a;border-radius:999px;box-shadow:0 8px 24px rgba(255,122,85,.3);transition:transform .2s,box-shadow .2s}
nav a.btn{color:#1a0e0a}
.btn:hover{background:linear-gradient(100deg,#ff8a68,var(--coral2));transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.eyebrow{color:var(--coral);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;display:flex;gap:12px;align-items:center}
.eyebrow::before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--coral),transparent);flex:none}
.lead{color:#C9D0E3}
.card,.steps li,details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(6px);color:var(--ink)}
.card.soon{background:var(--panel)}
.steps li::before{background:linear-gradient(135deg,var(--coral),var(--violet));color:#fff}
.steps li:hover,.tiers .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35);border-color:rgba(255,122,85,.35)}
.tag{background:rgba(255,200,87,.08);color:var(--amber);border:1px solid rgba(255,200,87,.35)}
.tag.built,.tag.now{background:rgba(61,214,198,.08);color:var(--teal);border-color:rgba(61,214,198,.35)}
.tag.prog{background:rgba(139,124,255,.12);color:#b9b0ff;border-color:rgba(139,124,255,.4)}
.draft{background:rgba(255,200,87,.08);border:1px dashed rgba(255,200,87,.55);color:#f3e2b5;border-radius:14px}
.callout{background:rgba(255,122,85,.08);border:1px solid rgba(255,122,85,.35);border-radius:14px}
.fact{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--coral),var(--violet)) 1}
.cap{color:var(--mute)}
.demo{background:rgba(17,24,50,.85);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(139,124,255,.15)}
.demo-head{background:rgba(255,255,255,.04);border-bottom-color:var(--line)}
.demo-btn,.scene-btn,.tabs [role=tab]{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--line)}
.scene-btn[aria-pressed=true],.tabs [role=tab][aria-selected=true]{background:var(--coral);color:#1a0e0a;border-color:var(--coral)}
.badge{background:rgba(61,214,198,.15);color:var(--teal)}
.dot{background:var(--teal)}
.m.cust{background:linear-gradient(135deg,var(--coral),#ff9470);color:#1a0e0a}
.m.bot{background:rgba(255,255,255,.06);border:1px solid rgba(139,124,255,.35);color:var(--ink)}
.m.bot.approved{background:rgba(61,214,198,.08);border-color:rgba(61,214,198,.4)}
.m .lbl.wait{color:var(--amber)} .m .lbl.ro{color:var(--dim)}
.m .cite{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--mute)}
.chip{background:rgba(255,255,255,.07);color:#C9D0E3}
.chip.win{background:rgba(61,214,198,.12);color:var(--teal);border-color:rgba(61,214,198,.4)}
.demo-foot{color:var(--dim);border-top-color:var(--line)}
.approve.tapped .a-ok{background:var(--teal)}
summary{color:var(--ink)} details summary::after{color:var(--coral)}
input,textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink)}
input:focus,textarea:focus,summary:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(255,122,85,.6)}
footer{background:#05080F;border-top:1px solid var(--line)} footer .draft{color:#f3e2b5}
.skip:focus{background:var(--bgd);color:var(--ink)}
.demo-col{position:relative}
.mascot{display:block;pointer-events:none}
.hero-bot{position:absolute;right:-40px;top:-120px;width:170px;height:auto;z-index:2;filter:drop-shadow(0 16px 30px rgba(0,0,0,.4))}
.hero-grid{padding-top:40px}
.mascot.side{float:right;width:160px;height:auto;margin:-20px 0 10px 24px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.steps.six{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tabs,.panels,.grid,.steps{clear:both}
nav{gap:16px} nav a{font-size:.95rem}
@media (max-width:1100px){nav a{font-size:.88rem} nav{gap:12px}}
@media (max-width:900px){.hero-bot{right:0;top:-90px;width:120px}}
@media (max-width:720px){nav{background:transparent}.mascot.side{width:96px;margin:-8px 0 6px 12px}.hero-bot{display:none}}
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}