/* ── fonts ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── tokens ────────────────────────────────────────────────────────── */
:root{
  --ink:#08060f;          /* ground */
  --ink-2:#0b0817;        /* section ground */
  --panel:rgba(255,255,255,.022);
  --panel-hi:rgba(255,255,255,.045);
  --line:rgba(167,139,250,.14);
  --line-soft:rgba(255,255,255,.06);
  --text:#f4f2ff;
  --muted:#a49dc4;
  --dim:#6f688f;
  --violet:#a78bfa;
  --fuchsia:#e879f9;
  --deep:#6d28d9;

  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:min(1180px,100% - 3rem);
  --r:18px;
}

/* the brand is a dark aurora deck — the page commits to one visual world */
:root[data-theme="light"]{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--display); font-size:17px; line-height:1.62; font-weight:350;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Space Grotesk is variable 300–700; the display voice sits at its thinnest.
   Thin type at scale needs air, so tracking opens and leading grows slightly. */
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.032em; font-weight:300; line-height:1.09}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:4px}

/* ── atmosphere ────────────────────────────────────────────────────── */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58vw 46vw at 8% -6%, rgba(232,121,249,.20), transparent 62%),
    radial-gradient(70vw 55vw at 22% 8%, rgba(109,40,217,.34), transparent 66%),
    radial-gradient(46vw 40vw at 78% 34%, rgba(76,29,149,.22), transparent 70%),
    radial-gradient(52vw 44vw at 50% 100%, rgba(88,28,135,.18), transparent 68%);
  filter:blur(6px);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(2%,-1.5%,0) scale(1.06) } }
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(80vw 60vh at 30% 0%,#000,transparent 75%);
}
@media (prefers-reduced-motion:reduce){ .aurora{animation:none} }

/* ── shell ─────────────────────────────────────────────────────────── */
.wrap{position:relative; z-index:1; width:var(--shell); margin-inline:auto}
section{position:relative; z-index:1; padding-block:clamp(4.5rem,9vw,8rem)}
.rule{border:0; height:1px; background:linear-gradient(90deg,var(--line),transparent 70%); margin:0}

/* eyebrow */
.eyebrow{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--violet);
  display:block; margin-bottom:1.15rem;
}
.eyebrow .n{color:var(--dim); margin-right:.85em}
.lede{color:var(--muted); font-size:clamp(1rem,1.35vw,1.12rem); max-width:62ch; margin-top:1.5rem}
.em{font-style:italic; color:var(--violet); font-weight:400}
.foot-note{color:var(--dim); font-size:.9rem; margin-top:2.5rem; max-width:70ch}
.foot-note em{color:var(--muted)}

/* ── nav ───────────────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(8,6,15,.82),rgba(8,6,15,.34));
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex; align-items:center; gap:1.5rem; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:450; letter-spacing:-.03em}
.mark{width:30px; height:30px; border-radius:9px; background:#fff; display:grid; place-items:center; flex:none}
.mark svg{width:19px; height:auto; display:block}
.nav nav{margin-left:auto; display:flex; gap:1.6rem}
.nav nav a{font-size:.88rem; color:var(--muted); text-decoration:none; transition:color .2s}
.nav nav a:hover{color:var(--text)}
@media(max-width:760px){ .nav nav{display:none} }

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(4rem,7vw,6rem)}
.hero-inner{border-left:2px solid transparent; border-image:linear-gradient(180deg,var(--fuchsia),var(--violet) 45%,transparent) 1;
  padding-left:clamp(1.25rem,3vw,2.5rem)}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.9rem)}
.hero h1 span{display:block}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.22rem); color:#cec8e8; max-width:52ch}

/* install chip */
.install{display:flex; align-items:center; gap:.85rem; margin-top:2.5rem; flex-wrap:wrap}
.cmd{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.95rem; color:var(--text);
  background:var(--panel-hi); border:1px solid var(--line); border-radius:12px;
  padding:.78rem 1rem .78rem 1.1rem; cursor:pointer; transition:border-color .2s,background .2s;
}
.cmd:hover{border-color:rgba(232,121,249,.42); background:rgba(255,255,255,.06)}
.cmd .dollar{color:var(--dim)}
.cmd .copy{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); border-left:1px solid var(--line); padding-left:.85rem}
.ghost{font-family:var(--mono); font-size:.8rem; color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
.ghost:hover{color:var(--violet)}

.facts{display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:3.5rem}
.fact b{display:block; font-family:var(--mono); font-size:1.35rem; font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fact span{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}

/* ── cards ─────────────────────────────────────────────────────────── */
.grid{display:grid; gap:1rem; margin-top:3rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card{
  position:relative; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:1.6rem 1.5rem; overflow:hidden;
  transition:border-color .25s, background .25s, transform .25s;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.card h3{font-size:1.06rem; letter-spacing:-.015em}
.card p{color:var(--muted); font-size:.93rem; margin-top:.6rem}
.card:hover{border-color:var(--line); background:var(--panel-hi)}

/* service tiles */
.svc{display:flex; flex-direction:column; min-height:172px}
.svc:hover{transform:translateY(-3px)}
.svc .tag{position:absolute; top:1.15rem; right:1.25rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; color:var(--dim)}
.svc .price{margin-top:auto; padding-top:1.2rem; font-family:var(--mono); font-size:.85rem; color:var(--violet)}
.svc.soon .price{color:var(--dim)}

/* steps */
.step .k{font-family:var(--mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:.9rem}
.step .k b{color:var(--violet); font-weight:500}
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; align-items:stretch; margin-top:3rem}
.flow .arrow{display:none}
@media(max-width:900px){ .flow{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .flow{grid-template-columns:1fr} }

/* paths */
.pill{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); border:1px solid var(--line); border-radius:999px; padding:.34rem .8rem; margin-bottom:1.2rem}
pre{margin:1.2rem 0 0; font-family:var(--mono); font-size:.82rem; line-height:1.9; color:var(--muted);
  background:rgba(0,0,0,.35); border:1px solid var(--line-soft); border-radius:12px; padding:1rem 1.1rem; overflow-x:auto}
pre .c{color:var(--dim)}
pre .a{color:var(--fuchsia)}
pre .v{color:var(--violet)}

/* checklist */
.checks{display:grid; gap:.9rem; margin-top:2.75rem; max-width:78ch}
.check{display:flex; gap:.95rem; align-items:flex-start; font-size:.97rem; color:var(--muted)}
.check b{color:var(--text); font-weight:500}
.check .tick{flex:none; width:20px; height:20px; border-radius:6px; margin-top:.22rem;
  background:rgba(167,139,250,.13); border:1px solid var(--line); display:grid; place-items:center;
  font-size:.62rem; color:var(--violet)}
.check code{font-family:var(--mono); font-size:.87em; color:var(--violet)}
.lead-in{margin-top:3.2rem; margin-bottom:-.6rem}
/* the same checklist, inverted: these are the non-answers */
.no-checks .tick{background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.26); color:#f87171}
.no-checks .check em{color:var(--muted); font-style:normal}

/* roadmap */
.rm .when{font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:.95rem}
.rm.now{background:linear-gradient(160deg,rgba(232,121,249,.10),rgba(167,139,250,.04) 55%,transparent);
  border-color:rgba(232,121,249,.28)}
.rm.now .when{color:var(--fuchsia)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
@media(max-width:640px){ .stats{grid-template-columns:1fr} }
.stat b{display:block; font-family:var(--mono); font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat span{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-top:.55rem}

/* cta */
.cta{background:linear-gradient(180deg,transparent,rgba(109,40,217,.14))}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.cta-panel{margin-top:2.5rem; border:1px solid var(--line); border-radius:22px; padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(140deg,rgba(232,121,249,.09),rgba(255,255,255,.02) 60%); position:relative; overflow:hidden}
.cta-panel .bar{position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--fuchsia),var(--violet))}
.cta-panel h3{font-family:var(--mono); font-size:clamp(1.25rem,3vw,1.9rem); font-weight:500; letter-spacing:-.02em}

footer{border-top:1px solid var(--line-soft); padding-block:2.5rem; position:relative; z-index:1}
.foot{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center;
  font-family:var(--mono); font-size:.78rem; color:var(--dim)}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--violet)}
.foot .sp{margin-left:auto}
.foot-legal{margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line-soft); font-size:.72rem}
.foot-legal strong{color:var(--muted); font-weight:450}

/* ── the live grid band ────────────────────────────────────────────── */
/* Canvas sits behind the copy and is masked at the edges so the grid
   dissolves into the section rather than ending on a hard rectangle. */
.gridband{position:relative; overflow:hidden; background:var(--ink-2);
  min-height:min(82vh,760px); display:flex; align-items:center}
.gridband-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0;
  mask-image:radial-gradient(115% 92% at 62% 50%, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(115% 92% at 62% 50%, #000 30%, transparent 76%)}
.gridband-inner{position:relative; z-index:1; max-width:46ch}
.gridband h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.gridband .lede{max-width:44ch}
.legend{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2.6rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.lg{display:inline-flex; align-items:center; gap:.6rem}
.lg i{width:7px; height:7px; border-radius:2px; display:block; flex:none}
.lg-live i{background:var(--violet); box-shadow:0 0 12px rgba(167,139,250,.9)}
.lg-ok i{background:#34d399; box-shadow:0 0 12px rgba(52,211,153,.8)}
.lg-bad i{background:#f87171; box-shadow:0 0 12px rgba(248,113,113,.8)}
@media(max-width:820px){
  .gridband{min-height:auto; padding-block:clamp(4.5rem,9vw,8rem)}
  .gridband-inner{max-width:none; background:linear-gradient(90deg,rgba(11,8,23,.86),rgba(11,8,23,.45) 78%,transparent);
    border-radius:var(--r)}
}

/* ── legal / long-form pages ───────────────────────────────────────── */
.doc{max-width:74ch; padding-block:clamp(3rem,6vw,5rem)}
.doc h1{font-size:clamp(2.1rem,4.6vw,3.2rem); margin-bottom:1.1rem}
.doc h2{font-size:1.35rem; margin-top:3.2rem; letter-spacing:-.02em}
.doc h3{font-size:1rem; margin-top:1.9rem; color:var(--text)}
.doc p,.doc li{color:var(--muted); font-size:.97rem; margin-top:1rem}
.doc ul{margin:.4rem 0 0; padding-left:1.15rem}
.doc li{margin-top:.55rem}
.doc li::marker{color:var(--violet)}
.doc a{color:var(--violet); text-decoration:none; border-bottom:1px solid var(--line)}
.doc a:hover{border-bottom-color:var(--violet)}
.doc strong{color:var(--text); font-weight:500}
.doc code{font-family:var(--mono); font-size:.87em; color:var(--violet)}
.doc .meta{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:1.5rem}
.doc .note{border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem; margin-top:1.8rem;
  background:var(--panel)}
.doc .note p{margin-top:0}
.doc .note p + p{margin-top:.8rem}
.doc dl{margin:1.2rem 0 0}
.doc dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin-top:1.4rem}
.doc dd{margin:.4rem 0 0; color:var(--muted); font-size:.95rem}
/* unfilled legal identifiers should be impossible to miss, never quietly wrong */
.doc dd em{color:var(--fuchsia); font-style:normal; font-family:var(--mono); font-size:.85em}
.foot-brand{font-size:.9rem}
.mark-sm{width:22px; height:22px; border-radius:7px}
.mark-sm svg{width:14px}

/* reveal */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

/* utilities lifted from inline style attributes (strict-CSP build) */
.u-h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.u-bg2{background:var(--ink-2)}
.u-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.u-vio{color:var(--violet)}
.u-mono-vio{font-family:var(--mono);color:var(--violet)}
.u-listing{color:var(--muted);font-family:var(--mono);font-size:.86rem;line-height:2}
.u-fuchsia{color:var(--fuchsia);border-color:rgba(232,121,249,.3)}
.u-mark22{width:22px;height:22px;border-radius:7px}
.u-w14{width:14px}
.u-pre-flush{padding:0;background:rgba(0,0,0,.3)}
.u-row-mid{margin-top:0;align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.u-h2s{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.u-fs90{font-size:.9rem}
.u-vio-upright{color:var(--violet);font-style:normal}
.u-sub{color:var(--muted);margin-top:.9rem;max-width:60ch}
.u-bline{border-color:var(--line)}