/* ==========================================================================
   main.css — layout, sections, motion
   Mobile-first. Every animation has an exit in prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv05","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
code,pre{font-family:var(--mono)}
code{font-size:.9em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html.booting body{overflow:hidden;height:100vh}
body.is-booting{overflow:hidden;height:100vh}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--accent);color:#07080C;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:700;transition:top .2s}
.skip-link:focus{top:16px}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

/* --------------------------------------------------------------- textures */
.grain{
  position:fixed;inset:-150%;z-index:3;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.42'/></svg>");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ------------------------------------------------------------- boot layer */
/* Displayed only while boot.js is running (html.booting). If that script never
   loads, the page is simply the page — never a curtain nobody can lift. */
.boot{
  display:none;position:fixed;inset:0;z-index:150;background:var(--bg);
  place-items:center;
  transition:opacity .5s var(--ease),visibility .5s;
}
html.booting .boot{display:grid}
.boot::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(145,162,255,.05) 78px 79px),
    repeating-linear-gradient(0deg,transparent 0 78px,rgba(145,162,255,.05) 78px 79px);
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{position:relative;z-index:1;width:min(420px,84vw)}
.boot__mark{
  color:var(--accent);font-size:26px;text-align:center;margin-bottom:18px;
  animation:pulseMark 1.4s var(--ease) infinite;
}
@keyframes pulseMark{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}
.boot__log{
  font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--muted);
  min-height:150px;white-space:pre-wrap;
}
.boot__log b{color:var(--accent-2);font-weight:500}
.boot__log i{color:var(--user);font-style:normal}
.boot__bar{height:2px;background:rgba(145,162,255,.14);margin-top:18px;overflow:hidden;border-radius:99px}
.boot__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px rgba(145,162,255,.7);transition:width .35s var(--ease)}

/* --------------------------------------------------------------- cursor */
.cursor{position:fixed;top:0;left:0;z-index:140;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(145,162,255,.5);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s}
.cursor.is-hot .cursor__ring{width:56px;height:56px;background:rgba(145,162,255,.1);border-color:var(--accent-2)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* thin right-hand scroll meter */
.scrollbar{position:fixed;top:0;right:0;width:3px;height:100vh;z-index:60;background:rgba(145,162,255,.07)}
.scrollbar span{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(145,162,255,.6)}

/* ------------------------------------------------------------------ nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(8,9,13,.78);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line)}
.nav__inner{
  width:min(100% - var(--pad)*2,1320px);margin-inline:auto;
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;font-size:13.5px}
.brand__mark{color:var(--accent);font-size:14px;filter:drop-shadow(0 0 8px rgba(145,162,255,.8))}
.brand__text i{font-style:normal;color:var(--accent);font-weight:500}
.nav__links{display:flex;gap:28px}
.nav__links a{
  font-size:13.5px;color:var(--muted);font-weight:500;position:relative;padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after,.nav__links a.is-current::after{width:100%}
.nav__links a.is-current{color:var(--text)}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__progress{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(145,162,255,.7)}

.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
  place-items:center;gap:5px;flex-direction:column}
.burger span{display:block;width:16px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s}
.burger.is-open span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobile-menu[hidden]{display:none}
.mobile-menu{
  position:fixed;inset:68px 0 auto 0;z-index:99;background:rgba(8,9,13,.97);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;padding:8px var(--pad) 26px;gap:2px;
  animation:slideDown .3s var(--ease);
}
.mobile-menu a{padding:14px 4px;font-size:17px;font-weight:600;border-bottom:1px solid rgba(145,162,255,.07)}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ section rail */
.rail{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;
}
.rail__item{display:flex;align-items:center;gap:9px;cursor:pointer;background:none}
.rail__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:0;transform:translateX(8px);transition:.3s var(--ease);white-space:nowrap;
}
.rail__dot{width:7px;height:7px;border-radius:50%;background:rgba(145,162,255,.3);
  transition:.3s var(--ease);flex:none}
.rail__item:hover .rail__label{opacity:1;transform:none}
.rail__item.is-active .rail__dot{background:var(--accent);box-shadow:0 0 0 4px rgba(145,162,255,.16);transform:scale(1.25)}
.rail__item.is-active .rail__label{opacity:.85;transform:none;color:var(--accent)}
@media (max-width:1499px){.rail{display:none}}

/* --------------------------------------------------------------- buttons */
.btn{
  --btn-bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:99px;font-weight:650;font-size:14.5px;letter-spacing:.01em;
  background:var(--btn-bg);border:1px solid transparent;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background .3s,color .3s;
  will-change:transform;
}
.btn--sm{padding:8px 16px;font-size:13px}
.btn--lg{padding:15px 30px;font-size:15.5px}
.btn--primary{
  background:linear-gradient(135deg,#91A2FF,#6E7BFF 55%,#62D6CC);color:#07080C;
  box-shadow:0 12px 34px -14px rgba(145,162,255,.85);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-130%);transition:transform .6s var(--ease);
}
.btn--primary:hover::after{transform:translateX(130%)}
.btn--primary:hover{box-shadow:0 18px 46px -14px rgba(145,162,255,1)}
.btn--outline{border-color:var(--line-2);color:var(--text);background:rgba(145,162,255,.05)}
.btn--outline:hover{border-color:var(--accent);background:rgba(145,162,255,.12)}
.btn--ghost{border-color:var(--line);color:var(--muted)}
.btn--ghost:hover{color:var(--text);border-color:var(--line-2)}
.btn:active{transform:scale(.97)}
.btn__star{color:var(--warning)}

/* copy chip */
.copy{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 13px;
  transition:.25s var(--ease);white-space:nowrap;
}
.copy:hover{color:var(--text);border-color:var(--accent);background:rgba(145,162,255,.1)}
.copy.is-done{color:var(--success);border-color:rgba(94,224,160,.55);background:rgba(94,224,160,.1)}
.copy--sm{padding:5px 11px;font-size:11px}

/* ------------------------------------------------------------ type helpers */
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.head{max-width:760px;margin:0 auto 56px;text-align:center}
.head--left{text-align:left;margin-inline:0}
.head__title{
  font-size:clamp(30px,5vw,54px);line-height:1.06;letter-spacing:-.03em;font-weight:800;
}
.head__title .char{display:inline-block;will-change:transform,opacity}
.head__sub{margin-top:18px;color:var(--muted);font-size:clamp(15px,1.6vw,17.5px);line-height:1.7}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
  border:1px solid rgba(98,214,204,.3);background:rgba(98,214,204,.07);
  padding:7px 14px;border-radius:99px;margin-bottom:26px;
}
.eyebrow__pulse{width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(98,214,204,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(98,214,204,0)}100%{box-shadow:0 0 0 0 rgba(98,214,204,0)}}

.section{position:relative;padding:clamp(84px,11vw,150px) 0}
section[id],[data-section]{scroll-margin-top:86px}
.section--alt{
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(145,162,255,.07),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-block:1px solid rgba(145,162,255,.08);
}

/* reveal base — hidden only when JS is running to un-hide it */
html.anim [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.anim [data-reveal].is-in{opacity:1;transform:none}

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px 0 70px;overflow:clip;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.hero__glow{
  position:absolute;left:50%;top:8%;width:min(1100px,120vw);height:640px;transform:translateX(-50%);
  background:
    radial-gradient(closest-side,rgba(145,162,255,.30),transparent 70%),
    radial-gradient(closest-side,rgba(98,214,204,.16),transparent 72%);
  filter:blur(30px);pointer-events:none;
  animation:floatGlow 16s ease-in-out infinite alternate;
}
@keyframes floatGlow{from{transform:translate(-50%,-14px) scale(1)}to{transform:translate(-46%,18px) scale(1.08)}}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(145,162,255,.055) 119px 120px),
    linear-gradient(180deg,transparent 60%,var(--bg));
}
.hero__inner{
  position:relative;z-index:2;width:min(100% - var(--pad)*2,1320px);margin-inline:auto;
  display:grid;gap:clamp(40px,5vw,64px);grid-template-columns:1fr;align-items:center;
}
.hero__title{
  font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:-.045em;font-weight:800;
  margin-bottom:26px;
}
.hero__title .line{display:block;overflow:hidden}
html.anim .hero__title .char{
  display:inline-block;transform:translateY(105%);opacity:0;
  will-change:transform,opacity;
}
html:not(.anim) .hero__title .char{display:inline-block}
.line--grad .char{
  background:linear-gradient(100deg,#91A2FF 10%,#62D6CC 55%,#FFB46B 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{font-size:clamp(16px,1.9vw,20px);color:var(--muted);max-width:620px;line-height:1.68}
.hero__lede em{color:var(--text);font-style:normal;font-weight:650;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__badges{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:30px;
}
.hero__badges li{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 12px;
  background:rgba(145,162,255,.045);
}

/* install switcher */
.install{
  margin-top:34px;width:min(100%,560px);border:1px solid var(--line-2);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(21,25,38,.92),rgba(13,15,22,.92));backdrop-filter:blur(10px);
  overflow:hidden;box-shadow:0 24px 70px -40px rgba(0,0,0,.9);
}
.install__tabs{display:flex;border-bottom:1px solid var(--line)}
.install__tab{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;color:var(--subtle);border-bottom:2px solid transparent;transition:.25s var(--ease);
}
.install__tab:hover{color:var(--muted)}
.install__tab.is-active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(145,162,255,.07)}
.install__row{display:flex;align-items:center;gap:12px;padding:15px 16px}
.install__row code{flex:1;font-size:13px;line-height:1.5;color:var(--text);overflow-x:auto;white-space:nowrap}
.install__row .prompt{color:var(--accent-2)}
.install__row .cmd-dim{color:var(--muted)}

/* ------------------------------------------------------- terminal (rebuilt) */
.hero__demo{position:relative;perspective:1400px}
.term{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#0C0E15 0%,#0A0B11 100%);
  border:1px solid rgba(145,162,255,.2);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 90px -40px rgba(0,0,0,.95),
    0 0 90px -40px rgba(145,162,255,.7);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}
.term::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}
.term__bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:linear-gradient(180deg,#141824,#10131C);border-bottom:1px solid rgba(145,162,255,.14);
}
.dot{width:10px;height:10px;border-radius:50%;background:#2A3040}
.dot--r{background:#FF7A90}.dot--y{background:#F3B45F}.dot--g{background:#5EE0A0}
.term__title{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:8px;
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__live{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--success);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.term__live i{width:6px;height:6px;border-radius:50%;background:var(--success);animation:ping 1.6s infinite}

.term__body{
  padding:20px 18px;min-height:340px;max-height:400px;overflow:hidden;
  font-family:var(--mono);font-size:12.6px;line-height:1.72;color:var(--muted);
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(145,162,255,.06),transparent 60%);
}
.t-line{white-space:pre-wrap;word-break:break-word;animation:lineIn .28s var(--ease-out)}
@keyframes lineIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.t-splash{text-align:center;font-size:15px;letter-spacing:.32em;color:var(--subtle);margin-bottom:2px}
.t-splash b{color:var(--accent);font-weight:700}
.t-rule{text-align:center;color:var(--accent-soft);letter-spacing:.1em}
.t-sub{text-align:center;color:var(--subtle)}
.t-path{text-align:center;color:var(--accent-2)}
.t-user{color:var(--user)}
.t-user .prompt{color:var(--accent-2)}
.t-ok{color:var(--success)}
.t-warn{color:var(--warning)}
.t-dim{color:var(--subtle)}
.t-key{color:var(--accent)}
.t-out{color:var(--muted)}
.t-diff-add{background:rgba(18,49,40,.75);color:#8DE9BA;border-left:2px solid var(--success);padding-left:8px}
.t-diff-del{background:rgba(59,28,37,.75);color:#FF9AAC;border-left:2px solid var(--danger);padding-left:8px}
.t-cmd{color:var(--text)}
.caret{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;
  animation:blink 1s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

.term__status{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;
  border-top:1px solid rgba(145,162,255,.12);background:rgba(145,162,255,.045);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.term__status .sep{color:var(--subtle)}
.term__hint{margin-left:auto;color:var(--user)}
.pill{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding:3px 9px;border-radius:5px;
}
.pill--mode{background:rgba(255,180,107,.14);color:var(--user);border:1px solid rgba(255,180,107,.35)}
.tok b{color:var(--accent);font-weight:500}

.term__foot{
  display:flex;gap:12px;justify-content:space-between;padding:9px 18px;
  background:#0A0C12;border-top:1px solid rgba(145,162,255,.1);
  font-family:var(--mono);font-size:10.6px;color:var(--subtle);
  white-space:nowrap;overflow:hidden;
}
.term__foot>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.term__foot b{color:var(--accent-2);font-weight:500}
.foot__right{opacity:.65;flex:none}
.foot__left{flex:none}
.foot__left b{color:var(--user)}
.term__reflection{
  height:70px;margin-top:6px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(145,162,255,.16),transparent 75%);
  filter:blur(22px);opacity:.7;
}
.term--flat{box-shadow:none;border-color:var(--line)}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--subtle);
}
.scroll-hint i{width:1px;height:36px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:hintDrop 1.9s var(--ease) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------------------------------------------------------------- marquee */
.marquee{
  overflow:hidden;border-block:1px solid rgba(145,162,255,.1);
  background:linear-gradient(90deg,var(--bg),var(--bg-3),var(--bg));
  padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;gap:34px;width:max-content;align-items:center;
  animation:slide 42s linear infinite;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track .dotsep{color:var(--accent);opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ stats */
.stats{padding:clamp(56px,7vw,84px) 0;border-bottom:1px solid rgba(145,162,255,.08)}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;text-align:center}
.stat b{
  display:block;font-family:var(--mono);font-size:clamp(30px,5vw,50px);font-weight:700;
  letter-spacing:-.03em;
  background:linear-gradient(140deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}

/* ---------------------------------------------------------------- features */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.card{
  position:relative;padding:28px 26px 30px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(21,25,38,.7),rgba(13,15,22,.55));
  border:1px solid rgba(145,162,255,.12);overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(340px 200px at var(--mx,50%) var(--my,0%),rgba(145,162,255,.16),transparent 70%);
  pointer-events:none;
}
.card:hover{transform:translateY(-6px);border-color:rgba(145,162,255,.4);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9),0 0 60px -40px rgba(145,162,255,.9)}
.card:hover::after{opacity:1}
.card h3{font-size:19px;letter-spacing:-.015em;margin:16px 0 10px;font-weight:700}
.card p{color:var(--muted);font-size:14.6px;line-height:1.68}
.card p code,.card em{color:var(--accent);font-style:normal}
.card__icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--accent);
  background:linear-gradient(140deg,rgba(145,162,255,.18),rgba(98,214,204,.1));
  border:1px solid rgba(145,162,255,.24);transition:.4s var(--ease);
}
.card__icon svg{width:22px;height:22px}
.card:hover .card__icon{transform:rotate(-6deg) scale(1.06);color:var(--accent-2);
  box-shadow:0 0 34px -12px rgba(98,214,204,.9)}
.card--accent{background:linear-gradient(180deg,rgba(145,162,255,.13),rgba(13,15,22,.6))}
.card__tag{
  display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);border-bottom:1px dashed rgba(98,214,204,.5);
}

/* ------------------------------------------------------------------ modes */
.modes__tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
.modes__tab{
  text-align:left;padding:16px 18px;border-radius:var(--r-md);
  border:1px solid rgba(145,162,255,.14);background:rgba(17,20,29,.6);
  transition:.35s var(--ease);display:flex;flex-direction:column;gap:5px;
}
.modes__tab b{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--muted);transition:.3s}
.modes__tab span{font-size:12.8px;color:var(--subtle);line-height:1.45}
.modes__tab:hover{border-color:rgba(145,162,255,.35);transform:translateY(-3px)}
.modes__tab.is-active{
  border-color:var(--accent);background:linear-gradient(140deg,rgba(145,162,255,.16),rgba(98,214,204,.06));
  box-shadow:0 22px 50px -34px rgba(145,162,255,1);
}
.modes__tab.is-active b{color:var(--accent)}
.modes__tab[data-mode="cook"].is-active{border-color:var(--user)}
.modes__tab[data-mode="cook"].is-active b{color:var(--user)}
.modes__tab[data-mode="auto"].is-active{border-color:var(--accent-2)}
.modes__tab[data-mode="auto"].is-active b{color:var(--accent-2)}

.modes__panel{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
.modes__demo .term__body{min-height:210px;justify-content:center}
.modes__note{
  padding:26px 24px;border-radius:var(--r-lg);border:1px solid rgba(145,162,255,.14);
  background:linear-gradient(180deg,rgba(21,25,38,.7),rgba(13,15,22,.5));
}
.modes__badge{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  padding:5px 11px;border-radius:6px;background:rgba(145,162,255,.14);color:var(--accent);
  border:1px solid rgba(145,162,255,.3);margin-bottom:14px;
}
.modes__note h3{font-size:23px;letter-spacing:-.02em;margin-bottom:10px}
.modes__note>p{color:var(--muted);font-size:15px}
.modes__note ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:9px}
.modes__note li{
  font-family:var(--mono);font-size:12.4px;color:var(--muted);padding-left:20px;position:relative;line-height:1.55;
}
.modes__note li::before{content:"◆";position:absolute;left:0;color:var(--accent);font-size:9px;top:4px}
.modes__note li b{color:var(--text);font-weight:600}

/* ------------------------------------------------------------ how it works */
.how{position:relative;height:420vh;background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg))}
.how__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.how__inner{width:min(100% - var(--pad)*2,var(--wrap));position:relative}
.how__rail{position:absolute;left:0;right:0;top:calc(50% - 190px);height:1px;pointer-events:none}
.how__line{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--user));
  transform-origin:left;transform:scaleX(var(--p,0));transition:transform .4s var(--ease);opacity:.5}
.how__cue{
  position:absolute;left:calc(var(--i) * 25%);top:50%;transform:translate(-50%,-50%);
  color:var(--accent);font-size:12px;opacity:.35;transition:.4s var(--ease);
}
.how__cue.is-lit{opacity:1;color:var(--accent-2);text-shadow:0 0 14px var(--accent-2);transform:translate(-50%,-50%) scale(1.5)}
.how__steps{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:24px;
  grid-template-columns:1fr;min-height:320px}
.how__step{
  grid-area:1/1;padding:24px 26px;border-radius:var(--r-lg);border:1px solid rgba(145,162,255,.1);
  background:linear-gradient(180deg,rgba(21,25,38,.72),rgba(13,15,22,.55));
  transition:.6s var(--ease-out);
  align-self:start;pointer-events:none;
}
html.anim .how__step{opacity:0;transform:translateY(30px) scale(.98)}
html:not(.anim) .how__step{opacity:1;pointer-events:auto}
/* Specificity note: the hidden start state is `html.anim .how__step`, so the
   active state has to outrank it or nothing ever appears on desktop. */
html.anim .how__step.is-active{opacity:1;transform:none;pointer-events:auto;
  border-color:rgba(145,162,255,.34);box-shadow:0 40px 80px -50px rgba(0,0,0,1)}
.how__num{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:12px;
}
.how__step h3{font-size:clamp(22px,3.2vw,34px);letter-spacing:-.025em;line-height:1.15;margin-bottom:12px}
.how__step p{color:var(--muted);font-size:15.4px;max-width:70ch}
.how__step code{color:var(--accent-2)}
.how__meter{height:3px;background:rgba(145,162,255,.12);border-radius:99px;margin-top:30px;overflow:hidden}
.how__meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(145,162,255,.7)}

/* ----------------------------------------------------------------- router */
.router{display:grid;gap:48px;grid-template-columns:1fr;align-items:start}
.ticks{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px}
.ticks li{
  position:relative;padding-left:30px;color:var(--muted);font-size:15.2px;
}
.ticks li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:700;
  width:20px;height:20px;border-radius:6px;background:rgba(94,224,160,.12);display:grid;place-items:center;font-size:11px;
}
.codeblock{
  border:1px solid rgba(145,162,255,.18);border-radius:var(--r-md);overflow:hidden;
  background:#0A0C12;box-shadow:0 30px 70px -46px #000;
}
.codeblock__bar{
  display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  background:rgba(145,162,255,.07);border-bottom:1px solid rgba(145,162,255,.14);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.codeblock pre{padding:18px 16px;font-size:12.4px;line-height:1.75;overflow-x:auto;color:var(--text)}
.c-dim{color:var(--subtle)}.c-str{color:var(--success)}.c-key{color:var(--accent)}
.c-num{color:var(--user)}.c-ok{color:var(--success)}

.dag{
  border:1px solid rgba(145,162,255,.2);border-radius:var(--r-lg);padding:18px;
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(145,162,255,.1),transparent 70%),
    linear-gradient(180deg,rgba(17,20,29,.9),rgba(10,12,18,.9));
  box-shadow:0 40px 90px -60px rgba(0,0,0,1);
}
.dag__head{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dag__status{color:var(--warning);border:1px solid rgba(243,180,95,.35);background:rgba(243,180,95,.1);
  padding:3px 9px;border-radius:99px}
.dag svg{width:100%;height:auto}
.dag__node rect{fill:rgba(145,162,255,.1);stroke:rgba(145,162,255,.5);stroke-width:1.2;
  transition:.5s var(--ease)}
.dag__node text{fill:var(--muted);font-family:var(--mono);font-size:11.5px;text-anchor:middle;
  transition:fill .5s var(--ease)}
.dag__node.is-lit rect{fill:rgba(98,214,204,.18);stroke:var(--accent-2);
  filter:drop-shadow(0 0 10px rgba(98,214,204,.75))}
.dag__node.is-lit text{fill:#DFFBF7}
.dag__foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;
  font-family:var(--mono);font-size:11px;color:var(--subtle)}
.dag__foot span{display:inline-flex;align-items:center;gap:7px}
.chip{width:8px;height:8px;border-radius:2px;display:inline-block}
.chip--indigo{background:var(--accent)}.chip--teal{background:var(--accent-2)}.chip--amber{background:var(--user)}
.dag__caption{margin-top:16px;color:var(--subtle);font-size:13.4px;line-height:1.6}

/* ---------------------------------------------------------------- gallery */
.shot{margin:0 auto;max-width:1000px;perspective:1200px}
.shot__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(145,162,255,.24);
  background:#07080C;
  box-shadow:0 50px 110px -55px rgba(0,0,0,1),0 0 90px -50px rgba(145,162,255,.9);
  transition:transform .4s var(--ease);transform-style:preserve-3d;
}
.shot__frame img{width:100%;height:auto;image-rendering:auto}
.shot__glare{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.07) 46%,transparent 58%);
  transform:translateX(var(--gx,-20%));transition:transform .5s var(--ease);
}
.shot figcaption{
  display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:wrap;
  margin-top:20px;color:var(--muted);font-size:14.4px;text-align:center;
}
.shot__label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-2);border:1px solid rgba(98,214,204,.35);padding:5px 11px;border-radius:99px;
}
.shots{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:44px}
.shotcard{
  padding:22px 20px;border-radius:var(--r-md);border:1px solid rgba(145,162,255,.12);
  background:rgba(17,20,29,.55);transition:.4s var(--ease);
}
.shotcard:hover{border-color:var(--accent);transform:translateY(-5px);background:rgba(145,162,255,.08)}
.shotcard b{font-family:var(--mono);font-size:13.5px;color:var(--accent);display:block;margin-bottom:8px}
.shotcard p{color:var(--muted);font-size:14px}

/* ------------------------------------------------------------ architecture */
.arch{display:grid;gap:20px;grid-template-columns:1fr;align-items:stretch}
.arch__col{
  padding:28px 26px;border-radius:var(--r-lg);border:1px solid rgba(145,162,255,.14);
  background:linear-gradient(180deg,rgba(21,25,38,.72),rgba(13,15,22,.55));
}
.arch__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.arch__head h3{font-size:20px;letter-spacing:-.02em}
.arch__lang{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:6px;
}
.arch__lang--go{background:rgba(98,214,204,.14);color:var(--accent-2);border:1px solid rgba(98,214,204,.35)}
.arch__lang--ts{background:rgba(145,162,255,.14);color:var(--accent);border:1px solid rgba(145,162,255,.35)}
.tree{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;
  font-family:var(--mono);font-size:12.6px;color:var(--muted);
  background:#0A0C12;border:1px solid rgba(145,162,255,.12);border-radius:var(--r-sm);padding:16px}
.tree li{position:relative;padding-left:16px;line-height:1.5}
.tree li::before{content:"├─";position:absolute;left:0;color:var(--accent-soft)}
.tree li:last-child::before{content:"└─"}
.tree span{color:var(--subtle)}
.arch__col p{color:var(--muted);font-size:14.6px}
.arch__col code{color:var(--accent-2)}
.arch__link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 0;
}
.arch__proto{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line-2);padding:6px 12px;border-radius:99px;background:rgba(145,162,255,.06);
}
.arch__proto b{color:var(--accent)}
.arch__proto--out{color:var(--user);border-color:rgba(255,180,107,.35);background:rgba(255,180,107,.07)}
.arch__wire{
  width:1px;height:46px;
  background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px);
  animation:wireFlow 1.2s linear infinite;
}
@keyframes wireFlow{to{background-position:0 12px}}
.quote{
  margin-top:48px;text-align:center;padding:36px 24px;border-radius:var(--r-lg);
  border:1px solid rgba(145,162,255,.14);
  background:radial-gradient(70% 120% at 50% 0%,rgba(145,162,255,.1),transparent 70%);
}
.quote blockquote{font-size:clamp(19px,2.7vw,28px);line-height:1.4;letter-spacing:-.02em;font-weight:650;
  max-width:26ch;margin-inline:auto}
.quote cite{display:block;margin-top:16px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-style:normal}

/* --------------------------------------------------------------- waitlist */
.section--cta{
  background:
    radial-gradient(60% 80% at 15% 20%,rgba(145,162,255,.14),transparent 70%),
    radial-gradient(50% 70% at 85% 80%,rgba(98,214,204,.1),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-block:1px solid rgba(145,162,255,.1);
}
.waitlist{display:grid;gap:44px;grid-template-columns:1fr;align-items:center}
.countdown{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.cd{
  min-width:82px;text-align:center;padding:14px 10px;border-radius:var(--r-md);
  border:1px solid rgba(145,162,255,.2);background:rgba(10,12,18,.7);backdrop-filter:blur(6px);
}
.cd b{display:block;font-family:var(--mono);font-size:clamp(24px,4vw,34px);font-weight:700;color:var(--text);
  line-height:1.1;font-variant-numeric:tabular-nums}
.cd span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--subtle)}
.waitlist__date{margin-top:18px;font-family:var(--mono);font-size:12.6px;color:var(--muted)}
.waitlist__date b{color:var(--accent)}

.form{
  padding:32px 28px;border-radius:var(--r-xl);
  border:1px solid rgba(145,162,255,.24);
  background:linear-gradient(180deg,rgba(21,25,38,.9),rgba(10,12,18,.9));
  box-shadow:0 50px 110px -60px rgba(0,0,0,1),0 0 80px -60px rgba(145,162,255,.9);
}
.form__label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.form__row{display:flex;gap:10px;flex-wrap:wrap}
.form__input{
  flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:99px;font-size:15px;
  background:rgba(8,9,13,.8);border:1px solid rgba(145,162,255,.22);color:var(--text);
  transition:.3s var(--ease);
}
.form__input::placeholder{color:var(--subtle)}
.form__input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(145,162,255,.16);background:rgba(8,9,13,1)}
.form__input.is-invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,122,144,.16)}
.form__hint{margin-top:12px;font-size:12.8px;color:var(--subtle)}
.form__hint.is-error{color:var(--danger)}
.form__success{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);font-size:14px;
  background:rgba(94,224,160,.1);border:1px solid rgba(94,224,160,.4);color:#BDF6DC;
  animation:lineIn .4s var(--ease-out);
}
.form__success span{color:var(--success);font-weight:700}
.form__list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;
  border-top:1px solid rgba(145,162,255,.12);padding-top:20px}
.form__list li{position:relative;padding-left:24px;font-size:14.2px;color:var(--muted)}
.form__list li::before{content:"→";position:absolute;left:0;color:var(--accent-2)}

/* -------------------------------------------------------------------- cta */
.cta{padding:clamp(90px,12vw,160px) 0;text-align:center;position:relative;overflow:clip}
.cta::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(900px,120vw);height:420px;
  background:radial-gradient(closest-side,rgba(145,162,255,.18),transparent 72%);filter:blur(20px);
}
.cta__inner{position:relative;z-index:1}
.cta__title{
  font-size:clamp(36px,7.5vw,86px);line-height:1;letter-spacing:-.04em;font-weight:800;
  margin-bottom:34px;
}
/* The gradient has to live on the split characters, not the parent: each .char
   paints its own text, and background-clip:text on an ancestor clips to the
   ancestor's glyphs — which are transparent. */
.cta__title .char{
  display:inline-block;will-change:transform,opacity;
  background:linear-gradient(100deg,#fff 25%,var(--accent) 60%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html.anim .cta__title .char{opacity:0;transform:translateY(60%)}
.cta__install{
  display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--r-md);border:1px solid rgba(145,162,255,.2);
  background:rgba(10,12,18,.85);width:min(100%,720px);margin:0 auto 26px;
}
.cta__install code{font-size:13px;color:var(--text);overflow-x:auto;white-space:nowrap;flex:1;text-align:left}
.cta__install .prompt{color:var(--accent-2)}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ----------------------------------------------------------------- footer */
.footer{border-top:1px solid rgba(145,162,255,.12);background:var(--bg-2);padding-top:64px}
.footer__grid{display:grid;gap:36px;grid-template-columns:1fr;padding-bottom:48px}
.footer__brand p{color:var(--muted);font-size:14.4px;margin-top:14px;max-width:34ch}
.swatches{display:flex;gap:7px;margin-top:20px}
.swatches i{width:22px;height:22px;border-radius:6px;background:var(--c);
  border:1px solid rgba(255,255,255,.12);transition:.3s var(--ease);cursor:crosshair}
.swatches i:hover{transform:translateY(-4px) scale(1.12);box-shadow:0 8px 20px -8px var(--c)}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px}
.footer__col a{color:var(--muted);font-size:14.4px;transition:.25s var(--ease);width:fit-content}
.footer__col a:hover{color:var(--text);transform:translateX(4px)}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid rgba(145,162,255,.1);
  font-family:var(--mono);font-size:11.6px;color:var(--subtle);
}
.footer__stamp{color:var(--accent-soft);letter-spacing:.1em}
.totop{
  font-family:var(--mono);font-size:11.6px;color:var(--muted);border:1px solid var(--line);
  padding:8px 14px;border-radius:99px;transition:.3s var(--ease);
}
.totop:hover{color:var(--text);border-color:var(--accent);background:rgba(145,162,255,.1)}

/* ------------------------------------------------------------- responsive */
@media (min-width:760px){
  .stats__grid{grid-template-columns:repeat(5,1fr)}
  .modes__tabs{grid-template-columns:repeat(4,1fr)}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.02fr .98fr}
  .modes__panel{grid-template-columns:1.25fr .75fr}
  .router{grid-template-columns:1.05fr .95fr;gap:56px}
  .arch{grid-template-columns:1fr auto 1fr}
  .waitlist{grid-template-columns:1.05fr .95fr;gap:60px}
  .how__steps{margin-top:64px}
}
@media (max-width:899px){
  .nav__links{display:none}
  .burger{display:grid}
  .how{height:auto;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
  .how__sticky{position:static;height:auto;padding:0}
  .how__rail{display:none}
  .how__steps{min-height:0;gap:16px}
  /* grid-area:auto — without it every step stacks in the same cell and only a
     sliver of each survives, because the desktop state is opacity-driven. */
  html.anim .how__step,.how__step{grid-area:auto;opacity:1;transform:none;pointer-events:auto;position:relative}
  .how__step::after{
    content:"";position:absolute;left:26px;bottom:-14px;width:1px;height:14px;background:rgba(145,162,255,.3)}
  .how__step:last-child::after{display:none}
  .how__meter{display:none}
}
@media (max-width:560px){
  .hero{padding-top:96px}
  .term__body{min-height:300px;font-size:11.6px}
  .term__foot{font-size:9.4px;gap:6px}
  .term__foot span:nth-child(2){display:none}
  .nav__actions .btn--ghost{display:none}
  .cta__install code{font-size:11.6px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  html.anim .hero__title .char,html.anim .cta__title .char{transform:none !important;opacity:1 !important}
  .how{height:auto}
  .how__sticky{position:static;height:auto}
  html.anim .how__step,.how__step{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
  .grain{display:none}
  .hero__canvas{display:none}
}