:root{
  --accent:#BB73E6; /* brand accent: scribble, live dot, collision burst, final rocket flame */
  --black:#000;--white:#fff;--g1:#0a0a0a;--g2:#141414;--g3:#262626;--g4:#737373;--g5:#a3a3a3;--g6:#e5e5e5;--g7:#f5f5f5;
  --display:'Inter Tight',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--hand:'Caveat',cursive;
  --gutter:16px;--max:1180px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--display);background:var(--black);color:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.panel>*,.card-table,.hero-in,.price-card{min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* themes */
.dark{--bg:var(--black);--fg:var(--white);--mut:var(--g5);--line:#262626;background:var(--bg);color:var(--fg)}
.light{--bg:var(--white);--fg:var(--black);--mut:var(--g4);--line:var(--g6);background:var(--bg);color:var(--fg)}
.dim{color:var(--mut)}
.logo .dim{color:var(--g4)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #1c1c1c;--bg:#000}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:16px}
.nav-links{display:none;gap:28px;font-size:14px;color:var(--g5)}
.nav-links a{text-decoration:none}.nav-links a:hover{color:#fff}
@media(min-width:760px){.nav-links{display:flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 15px var(--display);padding:12px 20px;border-radius:999px;border:1px solid #3a3a3a;background:transparent;color:#fff;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,color .15s}
.btn:hover{background:#fff;color:#000}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-solid:hover{background:color-mix(in srgb,var(--accent) 85%,#fff);color:#fff;transform:translateY(-1px)}
.btn-block{width:100%}

/* type */
h1{font-size:clamp(40px,8.4vw,92px);line-height:1.02;letter-spacing:-.025em;font-weight:600}
h2{font-size:clamp(32px,5.4vw,60px);line-height:1.06;letter-spacing:-.03em;font-weight:600;margin-bottom:48px}
h3{font-size:20px;letter-spacing:-.02em;font-weight:600;margin-bottom:8px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g5);margin-bottom:24px}
.eyebrow.dark-text{color:var(--g4)}
.lede{font-size:clamp(17px,2vw,21px);color:var(--g5);max-width:600px;margin:28px 0 36px;line-height:1.5}
.micro,.fine{font:400 12px var(--mono);color:var(--g4);margin-top:16px}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}
.pulse{width:8px;height:8px;border-radius:50%;background:#fff;--pulse:rgba(255,255,255,.6);box-shadow:0 0 0 0 var(--pulse);animation:pulse 2s infinite;display:inline-block}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ct-live .pulse{background:var(--accent);--pulse:color-mix(in srgb,var(--accent) 65%,transparent)}

/* hero */
.hero{position:relative;padding:72px 0 80px;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(#161616 1px,transparent 1px),linear-gradient(90deg,#161616 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 80%)}
.hero-in{position:relative;padding-bottom:64px}
.doodle{position:absolute;color:#fff;pointer-events:none}
.doodle-hero{display:none;width:170px;right:48px;top:30px;transform:rotate(12deg);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(4deg) translateY(-12px)}}
@media(min-width:1000px){.doodle-hero{display:block}}

/* waitlist */
.waitlist{position:relative;display:flex;flex-direction:column;gap:10px;max-width:520px}
.center .waitlist{margin:0 auto}
@media(min-width:560px){.waitlist{flex-direction:row;flex-wrap:wrap}.waitlist input{flex:1}}
.waitlist input{font:400 16px var(--display);padding:13px 18px;border-radius:999px;border:1px solid #3a3a3a;background:#0b0b0b;color:#fff;min-width:0}
.waitlist input::placeholder{color:#777}
.waitlist input:focus{outline:none;border-color:#fff}
.form-msg{flex-basis:100%;font:400 13px var(--mono);color:var(--g5);min-height:18px;text-align:left}
.form-msg.ok{color:var(--accent);font-size:14px;font-weight:500}
.waitlist input.hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0;flex:none}
.waitlist button:disabled{opacity:.6;cursor:wait}

/* data card */
.card-table{position:relative;background:var(--g1);border:1px solid #2a2a2a;border-radius:16px;overflow:visible;box-shadow:0 40px 120px rgba(255,255,255,.05)}
.ct-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid #222;font:400 12px var(--mono);color:var(--g5)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#2c2c2c}
.ct-title{flex:1}.ct-live{display:flex;align-items:center;gap:8px}
.ct-scroll{overflow-x:auto;border-radius:0 0 16px 16px}
table{width:100%;border-collapse:collapse;font:400 13px var(--mono);white-space:nowrap}
th{text-align:left;font-weight:500;color:var(--g4);padding:12px 16px;border-bottom:1px solid #222;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
td{padding:14px 16px;border-bottom:1px solid #1a1a1a;color:#d4d4d4}
tr:last-child td{border-bottom:0}
td:nth-child(2){color:#fff;font-weight:500}
.num{text-align:right}td.num{color:#fff}
td .tag{border:1px solid #3a3a3a;border-radius:999px;padding:2px 9px;font-size:11px}
tbody tr{animation:rowin .5s}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}}
.scribble{color:var(--accent);display:none;position:absolute;right:28px;top:-58px;font:600 26px var(--hand);transform:rotate(-4deg)}
.scribble svg{position:absolute;width:56px;left:-30px;top:18px;transform:scaleX(-1) rotate(20deg)}
@media(min-width:900px){.scribble{display:block}}
.fine{text-align:center}

/* stats */
.stats-in{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 16px;padding-top:48px;padding-bottom:48px}
@media(min-width:760px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font-size:clamp(36px,5vw,56px);letter-spacing:-.04em;font-weight:600;line-height:1}
.stats span{display:block;margin-top:8px;font-size:14px;color:var(--mut)}

/* sections */
.sec{padding:96px 0}
@media(min-width:760px){.sec{padding:140px 0}}
.narrow{max-width:820px}


/* tabs */
.tabs{display:inline-flex;padding:4px;border:1px solid #2c2c2c;border-radius:999px;margin-bottom:32px}
.tabs button{font:500 14px var(--display);color:var(--g5);background:none;border:0;padding:9px 20px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:#000}
.panel{display:grid;gap:32px;align-items:center}
.panel[hidden]{display:none}
@media(min-width:900px){.panel{grid-template-columns:1fr 1.25fr;gap:56px}}
.panel-copy p{color:var(--g5);margin-bottom:20px}
.ticks{list-style:none;padding:0;display:grid;gap:10px;font-size:15px;text-align:left}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg) scale(.9)}
.code{background:#fff;border:1px solid var(--g6);box-shadow:0 12px 40px rgba(0,0,0,.06);border-radius:16px;padding:22px;overflow-x:auto;font:400 13px/1.7 var(--mono);color:var(--g4)}
.code b{color:#000;font-weight:600}


/* pricing */
.price-card{max-width:440px;margin:0 auto;border:1px solid #333;border-radius:24px;padding:36px 32px;background:linear-gradient(180deg,#0f0f0f,#000);box-shadow:0 0 0 6px #0a0a0a,0 40px 100px rgba(255,255,255,.06);text-align:center}
.plan{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g5)}
.price{font-size:88px;font-weight:600;letter-spacing:-.05em;line-height:1.1;margin:12px 0 28px}
.price span{font-size:36px;vertical-align:top;position:relative;top:14px;margin-right:4px;color:var(--g5)}
.price small{font-size:18px;letter-spacing:0;color:var(--g5);font-weight:400}
.price-card .ticks{margin:0 0 32px}
.price-card .fine{text-align:center}

/* faq */
details{border-bottom:1px solid var(--line);padding:22px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-size:20px;font-weight:500;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;color:var(--g4);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--g4);margin-top:12px;max-width:620px}

/* cta + footer */
.cta{padding:120px 0 100px;position:relative}
.cta h2{margin-bottom:0}
.doodle-rocket{position:static;display:block;width:90px;margin:0 auto 24px;animation:bob 4s ease-in-out infinite}
.foot{border-top:1px solid #1c1c1c;padding:28px 0;font-size:14px}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}
}

/* hero headline: accent fades left -> right */
.hero h1 .slant{text-shadow:-.04em .04em 0 var(--accent)}

/* italic accent */
.slant{font-style:italic}

/* stats centred */
.stats-in{justify-items:center;text-align:center}

/* delivery on light bg */
.light .tabs{border-color:var(--line)}
.light .tabs button{color:var(--mut)}
.light .tabs button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.light .panel-copy p{color:var(--mut)}

/* ---------- How it works: scroll-driven scene ---------- */
.how{padding:96px 0 40px}
.how h2{margin-bottom:40px}
.track{height:320vh;position:relative}
.stage{position:sticky;top:76px;height:min(720px,calc(100vh - 100px));min-height:520px;width:calc(100% - 2*var(--gutter));max-width:var(--max);margin:0 auto;background:#050505;border:1px solid #262626;border-radius:24px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#121212 1px,transparent 1px),linear-gradient(90deg,#121212 1px,transparent 1px);background-size:48px 48px}
.field,.chips{position:absolute;inset:0;margin:0;padding:0;list-style:none}

.art{position:absolute;left:0;top:0;width:190px;padding:10px 12px 12px;background:#fff;color:#000;border-radius:3px;box-shadow:0 14px 36px rgba(0,0,0,.6);will-change:transform;display:none}
.art.hero{display:block}
.mast{font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding-bottom:5px;border-bottom:3px double #000;margin-bottom:8px}
.art .hl{font:700 15px/1.1 var(--display);letter-spacing:-.01em;margin-bottom:8px}
.ph{display:block;height:44px;margin-bottom:7px;background:repeating-linear-gradient(135deg,#e5e5e5 0 4px,#fff 4px 8px);border:1px solid #bbb}
.ln{display:block;height:4px;margin-top:5px;background:#d4d4d4;border-radius:2px}
.ln.s{width:62%}

.rk{position:absolute;left:0;top:0;width:84px;color:#fff;opacity:0;will-change:transform;display:none}
.burst{position:absolute;left:0;top:0;width:150px;color:var(--accent);opacity:0;display:none}
.doodle-rocket .flame,.doodle-rocket .window{stroke:var(--accent)}

.chip{display:flex;gap:10px;align-items:baseline;width:max-content;max-width:calc(100% - 48px);margin:0 0 8px 24px;padding:8px 14px;background:#fff;color:#000;border-radius:10px;font:500 13px var(--mono);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.chip span{font-weight:400;color:#737373}
.chips{position:relative;padding:24px 0}

.shade{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(#000 25%,transparent);pointer-events:none}
.caps{position:absolute;left:28px;right:28px;top:26px;display:grid}
.cap{grid-area:1/1;max-width:520px}
.cap .n{font:500 12px var(--mono);color:var(--g5);letter-spacing:.08em}
.cap h3{font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;margin:4px 0 6px}
.cap p{color:var(--g5);font-size:15px;max-width:440px}
.how .fine{margin-top:20px}

/* live (JS-positioned) mode */
.stage.live .art,.stage.live .rk,.stage.live .burst{display:block}
.stage.live .chips{padding:0}
.stage.live .chip{position:absolute;left:0;top:0;margin:0;opacity:0;will-change:transform}
.stage.live .cap{opacity:0}

@media(max-width:700px){
  .m-hide{display:none!important}
  .art{width:140px;padding:8px 9px 9px}
  .art .hl{font-size:12px}
  .ph{height:30px}
  .chip{font-size:12px;padding:7px 11px}
  .rk{width:64px}
  .track{height:280vh}
  .caps{left:18px;right:18px;top:20px}
}
@media(prefers-reduced-motion:reduce){.track{height:auto}.stage{position:relative;height:640px;top:0}}

/* SEO/AEO additions */
.how h2.eyebrow{margin-bottom:24px}
.hero .define{font-size:15px;line-height:1.6;color:var(--g5);max-width:600px;margin:0 0 24px}
.hero .define strong{color:var(--fg);font-weight:600}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.uses>div{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--g1)}
.uses p{color:var(--mut);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:16px}
.foot-links a{color:var(--g5)}
.foot-links a:hover{color:#fff}