:root{
  --void:#07080A;
  --steel:#0D1012;
  --steel-2:#12171A;
  --line:rgba(233,240,244,.14);
  --line-2:rgba(233,240,244,.07);
  --ink:#EDF2F5;
  --dim:#8B969C;
  --acid:#B7FF2E;
  --pad:clamp(18px,4.2vw,64px);
  --ease:cubic-bezier(.16,.84,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0}
.mono{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.dim{color:#5D6A70}
.dim-2{color:var(--dim)}
.eyebrow{color:var(--acid);margin:0 0 20px}
.big{font-size:clamp(30px,4.6vw,58px);line-height:1.02}
.lead{font-size:clamp(16px,1.4vw,19px);color:#C7D0D5;max-width:56ch;margin:20px 0 0}

/* cursor + progress */
.cur{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid rgba(233,240,244,.6);border-radius:50%;
  pointer-events:none;z-index:9000;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s;
  mix-blend-mode:difference;opacity:0}
.cur.on{opacity:1}
.cur.big{width:64px;height:64px;background:rgba(183,255,46,.9);border-color:transparent}
.pbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:8000;background:transparent}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5C6A70,var(--acid));transform-origin:0 50%}

/* header */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:7000;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--pad);border-bottom:1px solid transparent;
  transition:transform .45s var(--ease),background .45s,border-color .45s,padding .45s;backdrop-filter:blur(0px);
}
.hdr.solid{background:rgba(7,8,10,.82);border-bottom-color:var(--line-2);backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
.hdr.hide{transform:translateY(-104%)}
.mark{display:flex;flex-direction:column;gap:3px;line-height:1}
.mark-a{font-family:Syne,sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em}
.mark-b{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.34em;color:var(--dim)}
.hdr-nav{display:flex;gap:30px}
.hdr-nav a{font-size:13.5px;color:#B9C3C9;position:relative;padding-bottom:3px}
.hdr-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--acid);transition:width .35s var(--ease)}
.hdr-nav a:hover{color:#fff}
.hdr-nav a:hover::after{width:100%}
.hdr-cta{display:flex;align-items:center;gap:18px}
.tel{color:#D6DEE3;font-size:11.5px}
.tel:hover{color:var(--acid)}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--acid);color:#0A0C0A;
  background:var(--acid);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;border-radius:2px;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px var(--acid)}
.btn-line{background:transparent;color:var(--ink);border-color:rgba(233,240,244,.34)}
.btn-line:hover{border-color:var(--acid);color:var(--acid);box-shadow:none}
.btn-big{padding:17px 26px;font-size:11.5px}

/* hero */
.hero{position:relative;height:150vh}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.hero-media{position:absolute;inset:0;will-change:clip-path,transform;clip-path:inset(16% 30% 16% 30%)}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform;filter:saturate(.92) contrast(1.05)}
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 40%,rgba(7,8,10,0) 20%,rgba(7,8,10,.55) 62%,rgba(7,8,10,.94) 100%),
  linear-gradient(180deg,rgba(7,8,10,.86),rgba(7,8,10,.18) 40%,rgba(7,8,10,.92));opacity:.55;will-change:opacity}
.hero-type{position:relative;z-index:3;text-align:center;padding:0 var(--pad);max-width:1180px;will-change:transform,opacity}
.hero-type .kicker{color:var(--acid);margin:0 0 26px}
.hero h1{font-size:clamp(38px,8.6vw,116px);line-height:.92;letter-spacing:-.035em;will-change:letter-spacing,transform}
.hero h1 span{display:block}
.chrome{
  background:linear-gradient(178deg,#FFFFFF 6%,#D6DEE3 30%,#7D868C 46%,#F2F7F9 58%,#A8B2B8 74%,#5C666C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin:24px auto 0;max-width:52ch;color:#B7C1C7;font-size:clamp(14.5px,1.35vw,17px)}
.hero-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--dim);display:flex;align-items:center;gap:10px;z-index:4}
.hero-hint span{display:block;width:34px;height:1px;background:var(--acid);animation:pull 2.4s var(--ease) infinite}
@keyframes pull{0%{transform:scaleX(.2);opacity:.4}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.2);opacity:.4}}

/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--steel);padding:14px 0}
.ticker-track{display:flex;align-items:center;gap:34px;white-space:nowrap;will-change:transform}
.ticker-track span{font-family:Syne,sans-serif;font-weight:700;font-size:clamp(16px,2.1vw,26px);color:#DFE7EB;letter-spacing:-.01em}
.ticker-track b{color:var(--acid);font-size:9px}

/* intro */
.intro{padding:clamp(64px,9vw,124px) 0}
.intro-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(20px,4vw,60px)}
.intro-grid .eyebrow{margin-bottom:0}
.facts{list-style:none;padding:0;margin:38px 0 0;display:grid;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2)}
.facts li{background:var(--void);padding:15px 0;color:#AFB9BF;display:flex;gap:12px}
.facts b{color:var(--acid);font-family:'Space Mono',monospace;letter-spacing:.1em;min-width:96px;display:inline-block}

/* reel */
.reel{position:relative;height:440vh;background:linear-gradient(180deg,var(--void),var(--steel) 30%,var(--void))}
.reel-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.reel-head{padding:78px var(--pad) 0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reel-head .eyebrow{margin-bottom:14px}
.reel-count{color:var(--dim);margin:0 0 8px}
.reel-count b{color:var(--acid);font-size:13px}
.reel-view{overflow:hidden;margin-top:clamp(18px,3vh,34px)}
.reel-track{display:flex;gap:clamp(12px,1.6vw,22px);padding:0 var(--pad);will-change:transform}
.card{margin:0;width:clamp(230px,26vw,330px);flex:0 0 auto}
.card-img{position:relative;overflow:hidden;background:var(--steel-2);border:1px solid var(--line-2)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,8,10,.5));opacity:.9}
.card-img img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.95);transition:transform .8s var(--ease),filter .5s}
.card:hover .card-img img{transform:scale(1.045);filter:saturate(1.05)}
.card figcaption{padding:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.card figcaption .mono{color:var(--acid);grid-row:span 2;font-size:10px}
.card h3{font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.01em}
.card p{margin:2px 0 0;font-size:13px;color:var(--dim);grid-column:2}
.reel-rail{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:1px;background:var(--line-2)}
.reel-rail i{display:block;height:100%;width:0;background:var(--acid);transform-origin:0 50%;transform:scaleX(0)}

/* board */
.board{position:relative;height:340vh;background:var(--void)}
.board-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;gap:clamp(16px,3vw,50px);padding:70px var(--pad);overflow:hidden}
.board-head .eyebrow{margin-bottom:14px}
.board-art{position:relative;width:100%}
#bp{width:100%;height:auto;overflow:visible}
.bp-grid path{stroke:rgba(233,240,244,.12);stroke-width:1;fill:none}
.bp-wheels .d,.bp-frame .d,.bp-tank .d,.bp-engine .d{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.d.thin{stroke:rgba(233,240,244,.5);stroke-width:1.3}
.bp-dims .dim{stroke:var(--acid);stroke-width:1;fill:none;opacity:.85}
.cal{position:absolute;display:grid;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.cal.on{opacity:1;transform:none}
.cal b{color:var(--ink);font-size:10px}
.cal i{font-family:Archivo,sans-serif;font-size:12px;color:var(--dim);font-style:normal;letter-spacing:0}
.cal .dot{position:absolute;left:-18px;top:6px;width:6px;height:6px;background:var(--acid);border-radius:50%;box-shadow:0 0 0 4px rgba(183,255,46,.14)}
.cal[data-at="0.22"]{top:6%;right:2%}
.cal[data-at="0.48"]{top:34%;left:52%}
.cal[data-at="0.70"]{top:62%;right:0}
.cal[data-at="0.88"]{bottom:2%;left:40%}
.board-note{position:absolute;left:var(--pad);bottom:26px;color:var(--dim);margin:0}

/* craft */
.craft{padding:clamp(64px,9vw,130px) 0;background:linear-gradient(180deg,var(--void),#0A0D0F)}
.craft-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px)}
.craft-copy{position:sticky;top:110px;align-self:start}
.craft-media{display:grid;gap:clamp(12px,1.6vw,20px)}
.craft-media figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line-2)}
.craft-media figcaption{position:absolute;left:14px;bottom:12px;color:#E6EDF1;font-size:9.5px;letter-spacing:.18em;
  background:rgba(7,8,10,.66);padding:6px 10px;backdrop-filter:blur(6px)}
.craft-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.rev img{transform:scale(1.1);transition:transform 1.1s var(--ease)}
.rev{clip-path:inset(0 0 100% 0)}
.rev.in{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
.rev.in img{transform:scale(1)}
.craft .btn{margin-top:30px}
.craft-media figure.tall img{aspect-ratio:4/5;object-fit:cover}

/* steps */
.steps{padding:clamp(60px,8vw,120px) 0;background:#0A0D0F;border-top:1px solid var(--line-2)}
.steps-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,70px)}
.steps-head{position:sticky;top:110px;align-self:start}
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.step{padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--line-2);opacity:.42;transition:opacity .5s var(--ease)}
.step:last-child{border-bottom:1px solid var(--line-2)}
.step.is-on{opacity:1}
.step .mono{color:var(--dim);display:block}
.step.is-on .mono{color:var(--acid)}
.step h3{font-size:clamp(21px,2.4vw,30px);margin:8px 0 8px;font-weight:700}
.step p{margin:0;color:#AEB8BE;max-width:52ch;font-size:15px}

/* stats */
.stats{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--steel)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px)}
.stat{display:grid;gap:6px}
.stat .num{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,60px);line-height:1;
  background:linear-gradient(180deg,#fff,#8E999F);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .mono{color:var(--dim);font-size:9.5px}

/* start */
.start{padding:clamp(64px,9vw,130px) 0}
.start-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:start}
.start-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.card-info{border:1px solid var(--line);background:linear-gradient(180deg,rgba(233,240,244,.05),rgba(233,240,244,.01));padding:clamp(20px,2.6vw,32px)}
.card-info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:baseline}
.card-info dt{color:var(--acid);font-size:9.5px}
.card-info dd{margin:0;color:#CBD4D9;font-size:15px}
.card-info dd a:hover{color:var(--acid)}
.fine{color:var(--dim);margin:24px 0 0;font-size:9.5px;letter-spacing:.14em}

/* footer */
.foot{border-top:1px solid var(--line-2);padding:34px 0 44px;background:var(--void)}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot .dim{max-width:44ch;margin:0;font-size:9px;letter-spacing:.12em;line-height:1.9}

/* reveal */
.fade{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade.in{opacity:1;transform:none}

@media(max-width:980px){
  .hdr-nav{display:none}
  .intro-grid,.board-stage,.craft-grid,.steps-grid,.start-grid{grid-template-columns:1fr}
  .board-stage{grid-template-rows:auto 1fr auto;align-items:start;padding-top:86px}
  .craft-copy,.steps-head{position:relative;top:0}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .cal[data-at="0.22"]{top:2%;right:0}
  .cal[data-at="0.70"]{top:58%;right:0}
  .cal[data-at="0.88"]{bottom:6%;left:32%}
}
@media(max-width:760px){
  body{font-size:16px}
  /* hero becomes a normal stacked block, no pinning, no scroll trap */
  .hero{height:auto}
  .hero-stage{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;
    justify-content:flex-start;align-items:stretch;padding:96px 0 40px;overflow:visible}
  .hero-type{order:1;text-align:left;padding:0 var(--pad);opacity:1!important;transform:none!important;will-change:auto}
  .hero-type .kicker{margin-bottom:18px;font-size:9.5px}
  .hero h1{font-size:clamp(28px,8.2vw,44px);line-height:1.06;letter-spacing:-.02em!important}
  .hero-sub{margin:18px 0 0;max-width:none;font-size:15.5px}
  .hero-media{order:2;position:relative;inset:auto;margin:24px var(--pad) 0;height:52svh;min-height:280px;
    clip-path:none!important;border:1px solid var(--line-2)}
  .hero-media img{transform:none!important;will-change:auto}
  .hero-scrim{display:none}
  .hero-hint{order:3;position:relative;left:0;bottom:auto;transform:none;margin:16px 0 0 var(--pad);justify-content:flex-start}
  .hdr-cta .tel{display:none}
  .hdr{padding:14px var(--pad)}
  .hdr.solid{backdrop-filter:blur(8px)}
  /* ticker runs on CSS so no JS work per frame */
  .ticker-track{animation:marq 30s linear infinite;will-change:auto}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* reel: native swipe */
  .reel{height:auto}
  .reel-stage{position:relative;height:auto;display:block;padding:56px 0 44px}
  .reel-head{padding-top:0}
  .reel-view{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .reel-track{transform:none!important;gap:14px;padding-bottom:10px;will-change:auto}
  .card{width:76vw;scroll-snap-align:center}
  .card-img img{transform:none}
  .reel-rail{display:none}
  /* board: static, the drawing still draws as it comes into view */
  .board{height:auto}
  .board-stage{position:relative;height:auto;padding:60px var(--pad) 56px}
  .board-note{position:relative;left:0;bottom:0;margin-top:14px}
  .cal{position:relative;opacity:1;transform:none;margin:12px 0 0 18px;left:0!important;right:auto!important;top:0!important;bottom:auto!important}
  .board-art{display:grid}
  .craft-pair{grid-template-columns:1fr}
  .craft-copy,.steps-head{position:relative;top:0}
  .cur{display:none}
  .stats-grid{grid-template-columns:1fr 1fr;gap:24px}
  .btn-big{width:100%;justify-content:center}
  .hdr-nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .hero-stage{position:relative;height:auto;min-height:88vh;padding:120px 0 80px}
  .hero-media{position:relative;clip-path:none!important;inset:auto;margin-top:34px}
  .hero-media img{transform:none!important}
  .reel,.board{height:auto}
  .reel-stage,.board-stage{position:relative;height:auto}
  .reel-view{overflow-x:auto}
  .reel-track{transform:none!important}
  .rev{clip-path:none!important}
  .rev img{transform:none!important}
  .hero-hint,#cur{display:none}
  .fade,.cal{opacity:1!important;transform:none!important}
  .step{opacity:1}
}