/* ==========================================================================
   CLANKER — industrial meme-coin system
   01 tokens  02 base  03 utilities  04 buttons  05 fx  06 boot  07 cursor
   08 nav  09 hero  10 band  11 manifesto
   14 buy  15 comms  16 faq  17 join  18 footer  19 motion  20 responsive
   21 droid rig
   ========================================================================== */

/* ---------- 01 tokens ---------- */
:root{
  --void:#08090B;
  --ink:#0B0D10;
  --panel:#101317;
  --panel-2:#161A20;
  --panel-3:#1D222A;

  --plate:#E8EAED;
  --plate-2:#C7CCD3;
  --steel:#5A626E;
  --steel-dk:#33383F;

  --txt:#B9C0CA;
  --txt-dim:#767E8B;
  --txt-hi:#F2F4F7;

  --cy:#22E1FF;
  --cy-2:#00B4DC;
  --cy-dk:#0A5D70;
  --cy-glow:rgba(34,225,255,.32);

  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.24);

  --amber:#FFB020;
  --good:#3DDC97;

  --f-disp:"Chakra Petch",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --r:4px;
  --r-lg:8px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --shadow-plate:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 20px 44px -24px rgba(0,0,0,.9);
}

/* ---------- 02 base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  font-size:16px;line-height:1.62;
  color:var(--txt);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
/* The `hidden` attribute must win over any component display rule. Without
   this, .lb{display:grid} and .drawer{display:flex} keep those full-viewport
   overlays laid out while invisible, and they swallow every click on the page. */
[hidden]{display:none !important}
img,picture,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--cy);color:#04252C}

:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:999;background:var(--cy);color:#04252C;padding:10px 16px;font-weight:700;transition:top .2s}
.skip:focus{top:16px}

/* ---------- 03 typography / utilities ---------- */
.h2{
  font-family:var(--f-disp);
  font-weight:700;
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  line-height:1.03;
  letter-spacing:-.022em;
  color:var(--txt-hi);
  text-wrap:balance;
}
.h2--xl{font-size:clamp(2.6rem,8vw,6rem)}
.h2 .hl{
  color:var(--cy);
  text-shadow:0 0 32px var(--cy-glow);
}
.sub{
  margin-top:18px;max-width:58ch;
  font-size:clamp(1rem,1.6vw,1.125rem);
  color:var(--txt-dim);line-height:1.7;
}
.sechead{margin-bottom:clamp(44px,6vw,76px)}
.sechead--center{text-align:center}
.sechead--center .sub{margin-inline:auto}
.sechead--center .eyebrow{justify-content:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cy);margin-bottom:20px;
}
.eyebrow .dot{
  width:6px;height:6px;background:var(--cy);border-radius:50%;
  box-shadow:0 0 0 3px rgba(34,225,255,.16),0 0 14px var(--cy);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.sec{position:relative;padding-block:clamp(80px,11vw,150px)}
.sec::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
}

/* ---------- 04 buttons ---------- */
.btn{
  --bh:50px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--bh);padding:0 24px;border-radius:7px;
  font-family:var(--f-disp);font-weight:600;font-size:.94rem;
  letter-spacing:.01em;white-space:nowrap;
  transition:transform .3s var(--ease),background .22s ease,color .22s ease,box-shadow .28s ease,border-color .22s ease;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .32s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--lg{--bh:58px;padding:0 30px;font-size:1.02rem}
.btn--sm{--bh:40px;padding:0 16px;font-size:.85rem}
.btn--block{width:100%}

.btn--primary{
  color:#04222A;
  background:var(--cy);
  box-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px -12px rgba(34,225,255,.7);
}
.btn--primary:hover{
  background:#5AEBFF;
  box-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px -12px rgba(34,225,255,.9);
  transform:translateY(-1px);
}

.btn--ghost{
  color:var(--txt-hi);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  color:var(--txt-hi);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- 05 fx overlays ---------- */
.fx-grain,.fx-scan{position:fixed;inset:0;pointer-events:none;z-index:400}
.fx-grain{
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-scan{
  opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:410;pointer-events:none}
.scrollbar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cy-2),var(--cy));
  box-shadow:0 0 12px var(--cy-glow);
  transition:width .12s linear;
}

/* ---------- 06 boot ---------- */
.boot{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 45%,#101318 0%,var(--void) 62%);
  transition:opacity .6s var(--ease),visibility .6s;
}
.boot.is-off{opacity:0;visibility:hidden}
.boot__inner{width:min(420px,82vw);text-align:center}
.boot__mark{
  display:flex;justify-content:center;gap:14px;
  padding:16px 22px;margin:0 auto 26px;width:fit-content;
  background:linear-gradient(180deg,var(--plate),var(--plate-2));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 0 2px var(--steel-dk),0 22px 50px -20px #000;
}
.boot__eye{
  width:26px;height:12px;background:var(--cy);
  clip-path:polygon(0 0,100% 38%,100% 62%,0 100%);
  box-shadow:0 0 18px var(--cy);
  animation:blink 1.5s steps(1) infinite;
}
.boot__eye:last-child{transform:scaleX(-1)}
@keyframes blink{0%,72%,100%{opacity:1}76%,82%{opacity:.12}}
.boot__log{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--cy);min-height:2.4em;margin-bottom:16px;opacity:.85;
}
.boot__bar{height:3px;background:rgba(255,255,255,.07);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0%;background:var(--cy);box-shadow:0 0 14px var(--cy)}
.boot__pct{margin-top:10px;font-family:var(--f-mono);font-size:.66rem;color:var(--txt-dim);letter-spacing:.2em}

/* ---------- 07 cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:800;pointer-events:none;opacity:0;transition:opacity .3s}
html.has-cursor .cursor{opacity:1}
html.has-cursor,html.has-cursor *{cursor:none !important}
.cursor__ring,.cursor__dot{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__ring{
  width:34px;height:34px;border:1px solid rgba(34,225,255,.55);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s;
}
.cursor__dot{width:5px;height:5px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
html.cursor-hot .cursor__ring{width:56px;height:56px;background:rgba(34,225,255,.1);border-color:var(--cy)}

/* ---------- 08 nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,12,15,.82);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 var(--line-2),0 18px 40px -30px #000;
}
.nav.is-hidden{transform:translateY(-102%)}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:78px;display:flex;align-items:center;gap:28px;
  transition:height .4s var(--ease);
}
.nav.is-stuck .nav__in{height:66px}
.brand{
  flex:none;display:inline-flex;align-items:center;gap:11px;
  transition:opacity .25s ease;
}
.brand__mark{display:block;width:35px;flex:none;transition:width .35s var(--ease)}
.brand__mark svg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand__eyes path{fill:var(--cy);transition:filter .3s ease}
.brand:hover .brand__eyes path{filter:drop-shadow(0 0 5px var(--cy))}
.brand__type{
  font-family:var(--f-disp);font-weight:700;font-size:1.22rem;
  letter-spacing:.015em;color:var(--txt-hi);text-transform:uppercase;
  transition:font-size .35s var(--ease);
}
.nav.is-stuck .brand__mark{width:31px}
.nav.is-stuck .brand__type{font-size:1.1rem}
.brand--lg{gap:13px;margin-bottom:20px}
.brand--lg .brand__mark{width:42px}
.brand--lg .brand__type{font-size:1.45rem}

.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;font-size:.85rem;font-weight:500;color:var(--txt-dim);
  transition:color .25s;
}
.nav__idx{font-family:var(--f-mono);font-size:.6rem;color:var(--cy);opacity:.5;transition:opacity .25s}
.nav__links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--cy);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--txt-hi)}
.nav__links a:hover .nav__idx,.nav__links a.is-active .nav__idx{opacity:1}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}

.nav__right{display:flex;align-items:center;gap:12px;margin-left:8px}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:var(--txt-hi);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:490;
  padding:110px var(--gut) 40px;
  background:rgba(8,9,11,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.drawer.is-open{opacity:1;transform:none}
.drawer__nav{display:flex;flex-direction:column;gap:2px}
.drawer__nav a{
  display:flex;align-items:baseline;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-disp);font-size:1.55rem;font-weight:600;color:var(--txt-hi);
}
.drawer__nav a span{font-family:var(--f-mono);font-size:.7rem;color:var(--cy)}
.drawer__foot{display:flex;flex-direction:column;gap:20px}
.drawer__social{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- 09 hero ---------- */
.hero{position:relative;padding-top:clamp(120px,15vh,168px);padding-bottom:clamp(74px,9vh,112px);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__grid{
  position:absolute;inset:-20% -10% 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(700px) rotateX(58deg) translateY(22%) scale(1.9);
  transform-origin:50% 100%;
  mask-image:radial-gradient(70% 60% at 50% 78%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 78%,#000 0%,transparent 72%);
  opacity:.85;
}
.hero__glow{
  position:absolute;left:50%;top:34%;width:min(1100px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(34,225,255,.16) 0%,rgba(34,225,255,.05) 32%,transparent 62%);
  filter:blur(10px);
  animation:breathe 9s var(--ease-io) infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}}
.hero__vignette{position:absolute;inset:0;background:radial-gradient(110% 80% at 50% 30%,transparent 40%,var(--void) 100%)}
#sparks{position:absolute;inset:0;width:100%;height:100%;opacity:.85}

.hero__in{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,60px);align-items:center;
}
.hero__title{margin:6px 0 0;line-height:0}
.hero__logo{
  width:min(100%,620px);height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.85)) drop-shadow(0 0 46px rgba(34,225,255,.16));
  animation:float 7s var(--ease-io) infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero__logo.is-glitch{animation:glitch .42s steps(2) 1}
@keyframes glitch{
  0%{transform:translate(0);filter:drop-shadow(0 26px 60px rgba(0,0,0,.85))}
  20%{transform:translate(-4px,2px);filter:drop-shadow(4px 0 0 rgba(255,0,80,.75)) drop-shadow(-4px 0 0 var(--cy))}
  40%{transform:translate(5px,-2px);filter:drop-shadow(-5px 0 0 rgba(255,0,80,.75)) drop-shadow(5px 0 0 var(--cy))}
  60%{transform:translate(-2px,1px);filter:drop-shadow(2px 0 0 var(--cy))}
  100%{transform:translate(0);filter:drop-shadow(0 26px 60px rgba(0,0,0,.85))}
}

.hero__lede{
  margin-top:26px;max-width:50ch;
  font-size:clamp(1.02rem,1.55vw,1.19rem);line-height:1.68;color:var(--txt-dim);
}
.hero__lede em{color:var(--cy);font-style:normal;font-weight:600}
.hero__lede strong{display:block;margin-top:10px;color:var(--txt-hi);font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.ca{
  display:flex;align-items:center;gap:12px;margin-top:26px;
  padding:11px 11px 11px 16px;width:fit-content;max-width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.11);border-radius:9px;
}
.ca__label{
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-dim);flex:none;
}
.ca__val{
  font-family:var(--f-mono);font-size:.78rem;color:var(--cy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ca__copy{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 13px;border-radius:6px;font-size:.75rem;font-weight:600;letter-spacing:.01em;
  color:var(--txt-hi);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:background .22s,color .22s,border-color .22s;
}
.ca__copy svg{width:13px;height:13px}
.ca__copy:hover{color:var(--cy);background:rgba(34,225,255,.09);border-color:rgba(34,225,255,.4)}

/* hero art */
.hero__art{position:relative;justify-self:center;display:flex;justify-content:center;width:100%}
.hero__figure{position:relative;display:block;width:fit-content;margin-inline:auto}
.hero__figure .rig{height:min(660px,70vh);width:auto;aspect-ratio:506/1448}
.hero__robot{
  width:auto;height:auto;max-width:100%;max-height:min(620px,66vh);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.9)) drop-shadow(0 0 60px rgba(34,225,255,.12));
  -webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.55) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.55) 90%,transparent 100%);
  will-change:transform;
}
.hero__halo{
  position:absolute;left:50%;top:46%;width:340%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(34,225,255,.15) 0%,rgba(34,225,255,.04) 38%,transparent 66%);
  z-index:-1;
}
.hero__pedestal{
  position:absolute;left:50%;bottom:-8px;width:320%;height:120px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(34,225,255,.32) 0%,rgba(34,225,255,.08) 38%,transparent 68%);
  filter:blur(12px);pointer-events:none;
}
.hero__scanline{
  position:absolute;left:-70%;right:-70%;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);
  box-shadow:0 0 18px var(--cy);opacity:.5;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__scanline{animation:scan 5.5s var(--ease-io) infinite}
}
@keyframes scan{0%,100%{top:2%;opacity:0}12%{opacity:.6}50%{top:92%;opacity:.6}62%{opacity:0}}

.hud{
  position:absolute;display:flex;flex-direction:column;gap:2px;
  padding:9px 13px;line-height:1.25;text-align:left;
  background:rgba(10,13,17,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(34,225,255,.22);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  animation:hudIn .8s var(--ease) both;
}
.hud b{font-family:var(--f-mono);font-size:.55rem;font-weight:400;letter-spacing:.2em;color:var(--txt-dim);line-height:1.4}
.hud span{font-family:var(--f-disp);font-size:.8rem;font-weight:700;color:var(--txt-hi);letter-spacing:.03em;line-height:1.25;white-space:nowrap}
.hud span.ok{color:var(--cy)}
.hud--1{top:7%;left:-72%;animation-delay:.9s}
.hud--2{top:38%;right:-76%;animation-delay:1.05s}
.hud--3{bottom:22%;left:-64%;animation-delay:1.2s}
@keyframes hudIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--txt-dim);opacity:.75;
}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--cy),transparent);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- 10 band / marquee ---------- */
.band{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.004));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.band__rail{
  overflow:hidden;padding:26px 0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.band__track{
  display:flex;align-items:center;
  gap:clamp(38px,6vw,86px);
  width:max-content;will-change:transform;
}
.band__track span{
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(1rem,1.7vw,1.32rem);
  letter-spacing:.005em;color:var(--txt);white-space:nowrap;
}
.band__track i{
  width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--cy);box-shadow:0 0 9px var(--cy-glow);
}

/* ---------- 11 manifesto ---------- */
.sec--manifesto{background:linear-gradient(180deg,var(--void),var(--ink) 60%,var(--void))}
.mani{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3.4vw,44px);align-items:start}

.term{
  background:#0A0D11;
  box-shadow:inset 0 0 0 1px var(--line-2),0 34px 70px -40px #000,0 0 70px -40px var(--cy);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  overflow:hidden;
}
.term__bar{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--line-2);
}
.term__dots{display:flex;gap:6px}
.term__dots i{width:9px;height:9px;border-radius:50%;background:var(--steel-dk)}
.term__dots i:first-child{background:#3A3F47}
.term__name{font-family:var(--f-mono);font-size:.66rem;color:var(--txt-dim);letter-spacing:.06em}
.term__lite{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;color:#FF5470;
}
.term__lite::before{content:"";width:6px;height:6px;border-radius:50%;background:#FF5470;box-shadow:0 0 8px #FF5470;animation:pulse 1.6s infinite}
.term__body{
  padding:26px clamp(18px,2.6vw,32px) 34px;margin:0;
  font-family:var(--f-mono);font-size:clamp(.74rem,1.15vw,.86rem);
  line-height:1.95;color:var(--txt);white-space:pre-wrap;word-break:break-word;
  min-height:430px;
}
.term__body .c-cy{color:var(--cy)}
.term__body .c-dim{color:var(--txt-dim)}
.term__body .c-hi{color:var(--txt-hi);font-weight:700}
.term__body .cur{
  display:inline-block;width:8px;height:1.05em;vertical-align:-2px;
  background:var(--cy);box-shadow:0 0 10px var(--cy);animation:caret 1s steps(1) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.mani__side{display:flex;flex-direction:column;gap:14px}
.plate{
  position:relative;padding:26px 26px 26px 28px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:var(--shadow-plate),inset 0 0 0 1px var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  overflow:hidden;
}
.plate::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cy),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
/* rivets */
.plate::after{
  content:"";position:absolute;right:14px;top:14px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8A919C,#31363D);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 34px 0 0 #31363D,0 34px 0 1px rgba(0,0,0,.5);
}
.plate:hover{transform:translateY(-4px);box-shadow:var(--shadow-plate),inset 0 0 0 1px rgba(34,225,255,.28)}
.plate:hover::before{transform:scaleY(1)}
.plate__num{
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--cy);
}
.plate h3{
  margin:10px 0 9px;font-family:var(--f-disp);font-weight:700;
  font-size:1.22rem;letter-spacing:-.01em;color:var(--txt-hi);
}
.plate p{font-size:.94rem;line-height:1.68;color:var(--txt-dim)}

/* ---------- 14 how to buy ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.step{
  position:relative;padding:30px 24px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:inset 0 0 0 1px var(--line-2);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s;
  overflow:hidden;
}
.step:hover{transform:translateY(-5px);background:rgba(34,225,255,.045);box-shadow:inset 0 0 0 1px rgba(34,225,255,.34)}
.step__n{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.24);letter-spacing:-.03em;
  transition:-webkit-text-stroke-color .4s,color .4s;
}
.step:hover .step__n{-webkit-text-stroke-color:var(--cy);color:rgba(34,225,255,.08)}
.step h3{margin:16px 0 10px;font-family:var(--f-disp);font-weight:700;font-size:1.16rem;color:var(--txt-hi)}
.step p{font-size:.9rem;line-height:1.66;color:var(--txt-dim)}
.step p b{color:var(--txt-hi);font-weight:600}

.buybar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(26px,3.5vw,42px);padding:22px clamp(20px,3vw,30px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:var(--shadow-plate),inset 0 0 0 1px rgba(34,225,255,.2);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.buybar__ca{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 320px}
.buybar__ca .ca__val{font-size:.86rem;color:var(--cy)}
.buybar__act{display:flex;flex-wrap:wrap;gap:12px}
.warn{
  margin-top:20px;padding:14px 18px;font-size:.83rem;line-height:1.6;color:var(--txt-dim);
  background:rgba(255,176,32,.05);box-shadow:inset 0 0 0 1px rgba(255,176,32,.22);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.warn b{color:var(--amber)}

/* ---------- 15 comms ---------- */
.sec--comms{background:linear-gradient(180deg,var(--void),var(--ink) 55%,var(--void))}
.comms{max-width:820px;margin-inline:auto}
.comms__screen{
  position:relative;padding:clamp(24px,4vw,40px);
  background:
    repeating-linear-gradient(180deg,rgba(34,225,255,.028) 0 1px,transparent 1px 4px),
    radial-gradient(120% 100% at 50% 0%,#0D1319,#080A0D);
  box-shadow:inset 0 0 0 1px rgba(34,225,255,.24),inset 0 0 90px -20px rgba(34,225,255,.22),0 40px 80px -50px #000;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  min-height:220px;display:flex;flex-direction:column;
}
.comms__hud{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid rgba(34,225,255,.16);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--cy);
}
.comms__hud span:last-child{margin-left:auto;color:var(--txt-dim)}
.comms__wave{display:flex;align-items:flex-end;gap:3px;height:16px}
.comms__wave i{width:2px;height:28%;background:var(--cy);opacity:.55;transform-origin:bottom}
.comms__wave i:nth-child(3n){height:52%}
.comms__wave i:nth-child(4n){height:38%}
.comms__wave i:nth-child(5n){height:70%}
.comms.is-live .comms__wave i{animation:wv .85s var(--ease-io) infinite}
.comms__wave i:nth-child(2){animation-delay:.07s}.comms__wave i:nth-child(3){animation-delay:.14s}
.comms__wave i:nth-child(4){animation-delay:.21s}.comms__wave i:nth-child(5){animation-delay:.28s}
.comms__wave i:nth-child(6){animation-delay:.35s}.comms__wave i:nth-child(7){animation-delay:.42s}
.comms__wave i:nth-child(8){animation-delay:.49s}.comms__wave i:nth-child(9){animation-delay:.56s}
.comms__wave i:nth-child(10){animation-delay:.63s}.comms__wave i:nth-child(11){animation-delay:.7s}
.comms__wave i:nth-child(12){animation-delay:.77s}
@keyframes wv{0%,100%{height:20%;opacity:.5}50%{height:100%;opacity:1}}
.comms__out{
  flex:1;display:flex;align-items:center;
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(1.1rem,2.6vw,1.72rem);line-height:1.42;
  color:var(--txt-hi);letter-spacing:-.01em;text-wrap:balance;
}
.comms__out::after{
  content:"";display:inline-block;width:10px;height:1.05em;margin-left:6px;
  background:var(--cy);box-shadow:0 0 12px var(--cy);animation:caret 1s steps(1) infinite;
}
.comms__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* ---------- 15b patrol ---------- */
.sec--patrol{background:linear-gradient(180deg,var(--void),var(--ink) 60%,var(--void));overflow:hidden}
.sec--patrol .sechead{margin-bottom:clamp(28px,4vw,44px)}
.patrol{position:relative}
.patrol__meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  margin-bottom:20px;font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);
}
.patrol__meta b{color:var(--cy);font-weight:400;margin-right:7px}
.patrol__meta i{font-style:normal;color:var(--txt-hi)}

.patrol__lane{
  position:relative;height:clamp(250px,26vw,330px);
  width:100vw;margin-left:calc(50% - 50vw);
}
.patrol__lane .rig{
  position:absolute;left:0;bottom:14px;
  height:clamp(210px,23vw,290px);width:auto;cursor:pointer;
}
/* floor plate + light pooling up off it */
.patrol__floor{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none}
.patrol__floor::before{                       /* the deck line */
  content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,225,255,.55) 10%,rgba(34,225,255,.55) 90%,transparent);
  box-shadow:0 0 16px rgba(34,225,255,.4);
}
.patrol__floor::after{                        /* receding grid under it */
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background-image:linear-gradient(90deg,rgba(34,225,255,.16) 1px,transparent 1px);
  background-size:60px 100%;
  mask-image:linear-gradient(180deg,transparent,#000),linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000),linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect;-webkit-mask-composite:source-in;
}
/* the two walls it will never learn about */
.patrol__lane::before,.patrol__lane::after{
  content:"";position:absolute;top:6%;bottom:13px;width:10px;pointer-events:none;
  background:
    repeating-linear-gradient(135deg,rgba(34,225,255,.5) 0 5px,transparent 5px 10px),
    linear-gradient(180deg,transparent,rgba(34,225,255,.12));
  border-inline:1px solid rgba(34,225,255,.4);
  mask-image:linear-gradient(180deg,transparent,#000 34%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);
}
.patrol__lane::before{left:0}
.patrol__lane::after{right:0}

/* contact shadow rides inside the rig so it tracks the walk */
.rig__shadow{
  position:absolute;left:50%;bottom:-2%;width:150%;height:5%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  z-index:0;pointer-events:none;
}
.patrol__lane .rig__shadow{
  background:radial-gradient(ellipse,rgba(34,225,255,.3) 0%,rgba(34,225,255,.08) 44%,transparent 72%);
  height:7%;bottom:-1%;
}

/* ---------- 15c reels ---------- */
.sec--reels{background:linear-gradient(180deg,var(--void),var(--ink) 55%,var(--void))}
.reels{
  display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(6,1fr);
}
/* first two run wide, the remaining three share the row below */
.reel:nth-child(-n+2){grid-column:span 3}
.reel:nth-child(n+3){grid-column:span 2}

.reel{display:flex;flex-direction:column;min-width:0}
.reel__play{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  padding:0;overflow:hidden;border-radius:10px;
  border:1px solid rgba(255,255,255,.11);
  background:var(--panel);
  transition:transform .4s var(--ease),border-color .3s ease,box-shadow .4s ease;
}
.reel__play img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s ease}
.reel__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,10,.05) 0%,rgba(6,8,10,.55) 100%);
  transition:opacity .35s ease;
}
.reel__icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;display:grid;place-items:center;border-radius:50%;
  color:#04222A;background:var(--cy);
  box-shadow:0 8px 28px -10px rgba(34,225,255,.9);
  transition:transform .4s var(--ease),background .3s ease;
}
.reel__icon svg{width:26px;height:26px;margin-left:3px}
.reel__dur{
  position:absolute;right:11px;bottom:11px;
  padding:3px 8px;border-radius:4px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--txt-hi);background:rgba(6,8,10,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.reel__play:hover{transform:translateY(-4px);border-color:rgba(34,225,255,.42);box-shadow:0 22px 44px -26px rgba(34,225,255,.7)}
.reel__play:hover img{transform:scale(1.045)}
.reel__play:hover .reel__scrim{opacity:.7}
.reel__play:hover .reel__icon{transform:translate(-50%,-50%) scale(1.09);background:#5AEBFF}

.reel__meta{padding:16px 2px 0}
.reel__tag{
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--cy);
}
.reel__meta h3{
  margin:8px 0 7px;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--txt-hi);letter-spacing:-.01em;
}
.reel__blurb{font-size:.9rem;line-height:1.62;color:var(--txt-dim);max-width:44ch}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:700;
  display:grid;place-items:center;padding:clamp(16px,4vw,54px);
  background:rgba(4,5,7,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .3s ease;
}
.lb.is-open{opacity:1}
.lb__stage{width:min(1180px,100%);display:flex;flex-direction:column;gap:14px}
.lb__video{
  width:100%;max-height:78vh;border-radius:10px;background:#000;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 90px -40px #000,0 0 90px -50px var(--cy);
}
.lb__cap{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--txt-dim);text-align:center;
}
.lb__close{
  position:absolute;top:clamp(14px,2.6vw,26px);right:clamp(14px,2.6vw,26px);
  width:46px;height:46px;display:grid;place-items:center;border-radius:9px;
  color:var(--txt-hi);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.lb__close svg{width:19px;height:19px}
.lb__close:hover{color:var(--cy);background:rgba(34,225,255,.1);border-color:rgba(34,225,255,.4)}

/* ---------- 16 faq ---------- */
.sec--faq .wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,72px);align-items:start}
.sec--faq .sechead{position:sticky;top:112px;margin-bottom:0}
.faq{display:flex;flex-direction:column;gap:10px}
.qa{
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.11);border-radius:10px;
  transition:border-color .3s,background .3s;
}
.qa[open]{background:rgba(34,225,255,.035);border-color:rgba(34,225,255,.28)}
.qa:hover{border-color:rgba(255,255,255,.2)}
.qa summary{
  display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:22px clamp(18px,2.6vw,28px);cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-weight:600;font-size:clamp(1rem,1.7vw,1.16rem);
  color:var(--txt-hi);transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--cy)}
.qa summary i{
  position:relative;flex:none;width:16px;height:16px;
}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--cy);
  transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s;
}
.qa summary i::before{width:16px;height:2px}
.qa summary i::after{width:2px;height:16px}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa__body{padding:0 clamp(18px,2.6vw,28px) 26px;max-width:74ch}
.qa__body p{font-size:.95rem;line-height:1.75;color:var(--txt-dim)}
.qa__body em{color:var(--txt);font-style:italic}
.qa[open] .qa__body{animation:qaIn .45s var(--ease) both}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 17 join ---------- */
.sec--join{position:relative;text-align:center;overflow:hidden;padding-block:clamp(90px,13vw,170px)}
.join__bg{position:absolute;inset:0;z-index:-1}
.join__glow{
  position:absolute;left:50%;top:55%;width:min(1000px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(34,225,255,.15),transparent 60%);
  animation:breathe 8s var(--ease-io) infinite;
}
.join__in{position:relative;display:flex;flex-direction:column;align-items:center}
.join__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:38px 0 34px}
.soc{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px;border-radius:7px;
  font-family:var(--f-disp);font-weight:600;font-size:.94rem;letter-spacing:.01em;
  color:var(--txt-hi);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.13);
  transition:transform .3s var(--ease),color .22s,background .22s,border-color .22s;
}
.soc svg{width:18px;height:18px;fill:currentColor;transition:transform .4s var(--ease)}
.soc:hover{transform:translateY(-2px);color:var(--cy);background:rgba(34,225,255,.07);border-color:rgba(34,225,255,.4)}
.soc:hover svg{transform:scale(1.12)}
.soc--icon{width:48px;height:48px;padding:0;justify-content:center}
.soc--txt{border:0}
.soc--txt{
  height:auto;padding:0;background:none;border:0;border-radius:0;
  font-family:var(--f-body);font-weight:400;font-size:.9rem;color:var(--txt-dim);
}
.soc--txt:hover{transform:none;background:none;color:var(--cy)}
.soc--txt svg{width:15px;height:15px}

/* ---------- 18 footer ---------- */
.foot{position:relative;padding-block:clamp(56px,7vw,80px) 34px;background:var(--ink);border-top:1px solid var(--line-2)}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,64px);padding-bottom:44px}
.foot__brand p{font-size:.9rem;color:var(--txt-dim);max-width:34ch;line-height:1.65}
.foot__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.foot__nav h4{
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cy);margin-bottom:16px;
}
.foot__nav > div > a{
  display:block;padding:5px 0;font-size:.9rem;color:var(--txt-dim);
  transition:color .25s,transform .3s var(--ease);
}
.foot__nav > div > a:hover{color:var(--cy);transform:translateX(3px)}
.foot__nav [data-social-text]{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.foot__nav [data-social-text] .soc{display:inline-flex;padding:4px 0;height:auto;justify-content:flex-start;gap:9px}
.foot__disc{
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.76rem;line-height:1.72;color:#7A828F;
}
.foot__disc b{color:var(--txt-dim)}
.foot__bot{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-top:22px;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.1em;color:#79818E;text-transform:uppercase;
}
.foot__sig{color:var(--cy);opacity:.75}

/* ---------- totop + toast ---------- */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:450;
  width:46px;height:46px;display:grid;place-items:center;
  color:var(--cy);background:rgba(13,17,22,.86);border-radius:9px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(34,225,255,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease),background .3s;
}
.totop svg{width:17px;height:17px}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:rgba(34,225,255,.15)}

.toast{
  position:fixed;left:50%;bottom:30px;z-index:700;
  padding:13px 24px;transform:translate(-50%,20px);
  font-family:var(--f-disp);font-weight:600;font-size:.88rem;letter-spacing:.04em;
  color:#04222A;background:var(--cy);border-radius:8px;
  box-shadow:0 18px 40px -18px var(--cy);
  opacity:0;visibility:hidden;transition:opacity .3s,transform .35s var(--ease),visibility .3s;
}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}


/* ---------- 21 droid rig (generated from src/rig-geo.json, canvas 506x1448) ---------- */
.rig{position:relative;width:100%;aspect-ratio:506/1448;cursor:pointer}
.rig__box{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.j{position:absolute;inset:0;will-change:transform}
.j>img{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.j--head{transform-origin:53.1621% 20.1657%}
.j--head>img{left:35.1779%;top:0.0000%;width:35.9684%}
.j--torso{transform-origin:49.4071% 50.7597%}
.j--torso>img{left:7.9051%;top:19.3370%;width:83.0040%}
.j--armL-up{transform-origin:15.2174% 30.1796%}
.j--armL-up>img{left:1.9763%;top:28.6602%;width:19.7628%}
.j--armL-fore{transform-origin:10.8696% 41.8508%}
.j--armL-fore>img{left:0.0000%;top:40.4006%;width:17.7866%}
.j--armR-up{transform-origin:83.0040% 30.1796%}
.j--armR-up>img{left:76.0870%;top:28.6602%;width:20.7510%}
.j--armR-fore{transform-origin:85.3755% 41.8508%}
.j--armR-fore>img{left:78.6561%;top:40.4006%;width:21.3439%}
.j--legL-up{transform-origin:33.9921% 51.3812%}
.j--legL-up>img{left:20.7510%;top:49.3785%;width:25.0988%}
.j--legL-lo{transform-origin:32.0158% 66.4365%}
.j--legL-lo>img{left:19.7628%;top:64.3646%;width:24.1107%}
.j--legL-ft{transform-origin:32.6087% 92.4033%}
.j--legL-ft>img{left:8.8933%;top:90.1243%;width:33.0040%}
.j--legR-up{transform-origin:65.6126% 51.3812%}
.j--legR-up>img{left:53.7549%;top:49.3785%;width:24.9012%}
.j--legR-lo{transform-origin:69.1700% 66.4365%}
.j--legR-lo>img{left:58.4980%;top:64.3646%;width:24.1107%}
.j--legR-ft{transform-origin:70.1581% 92.4033%}
.j--legR-ft>img{left:61.2648%;top:90.1243%;width:30.0395%}
.j--hips,.j--body{transform-origin:49.4071% 50.7597%}
.j--legL-up,.j--legR-up{z-index:1}
.j--body{z-index:2}
.j--armL-up,.j--armR-up{z-index:1}
.j--torso{z-index:2}
.j--head{z-index:3}

/* cyan photoreceptors — the one recolour that ties the droid to the palette */
.rig__eye{
  position:absolute;width:4.1502%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#EAFDFF 0%,#7FF0FF 30%,var(--cy) 52%,rgba(34,225,255,0) 74%);
  top:7.8039%;filter:blur(.3px);mix-blend-mode:screen;
  animation:eyeFlicker 5.5s steps(1) infinite;
}
.rig__eye--l{left:41.6996%}
.rig__eye--r{left:54.7431%}
.rig__eye::after{
  content:"";position:absolute;inset:-190%;border-radius:50%;
  background:radial-gradient(circle,rgba(34,225,255,.42),transparent 66%);
}
@keyframes eyeFlicker{0%,88%,100%{opacity:1}90%{opacity:.25}92%{opacity:.95}94%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.rig__eye{animation:none}}

/* relight the warm chassis so it sits in a cool scene without repainting it */
.rig__box{filter:saturate(.82) contrast(1.06) brightness(.97) drop-shadow(0 0 26px rgba(34,225,255,.13))}
.rig.is-bonk .rig__box{filter:saturate(.82) contrast(1.06) brightness(1.5) drop-shadow(0 0 30px rgba(34,225,255,.5))}

/* something is very wrong with the servos */
.rig.is-glitch .rig__box{
  filter:saturate(.82) contrast(1.18) brightness(1.06)
         drop-shadow(2px 0 0 rgba(255,0,86,.5)) drop-shadow(-2px 0 0 rgba(34,225,255,.6));
  animation:rigTear .07s steps(2) infinite;
}
@keyframes rigTear{0%{transform-origin:50% 100%}50%{filter:saturate(.4) contrast(1.5) brightness(1.3)}}
.rig.is-glitch .rig__eye{animation:eyeStrobe .08s steps(1) infinite}
@keyframes eyeStrobe{0%,100%{opacity:1}40%{opacity:.1}70%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .rig.is-glitch .rig__box{animation:none}
  .rig.is-glitch .rig__eye{animation:none}
}

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

/* ---------- 20 responsive ---------- */
@media (max-width:1080px){
  .nav__links{display:none}
  /* .nav__links carried the auto margin; hidden here, so nav__right takes it */
  .nav__right{margin-left:auto}
  .burger{display:flex}
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero__copy{order:2}
  .hero__art{order:1;margin-bottom:8px}
  .hero__figure .rig{height:min(430px,46vh)}
  .eyebrow{justify-content:center}
  .hero__lede{margin-inline:auto}
  .ca{margin-inline:auto;text-align:left}
  .hero__cta{justify-content:center}
  .hero__logo{margin-inline:auto}
  .hud--1{top:4%;left:-92%}
  .hud--2{top:32%;right:-96%}
  .hud--3{bottom:16%;left:-84%}
  .mani{grid-template-columns:1fr}
  .sec--faq .wrap{grid-template-columns:1fr;gap:36px}
  .sec--faq .sechead{position:static}
  .steps{grid-template-columns:repeat(2,1fr)}
  .reels{grid-template-columns:repeat(2,1fr)}
  .reel:nth-child(-n+2),.reel:nth-child(n+3){grid-column:span 1}
  .reel:nth-child(5){grid-column:span 2}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* HUD chips stay inside the figure so nothing runs off-screen */
  .hud--1{top:2%;left:-88%}
  .hud--2{top:28%;right:-92%}
  .hud--3{display:none}
  .steps{grid-template-columns:1fr}
  .reels{grid-template-columns:1fr}
  .reel:nth-child(5){grid-column:span 1}
  .reel__icon{width:52px;height:52px}
  .foot__nav{grid-template-columns:1fr 1fr}
  .hero__figure .rig{height:min(340px,38vh)}
  .hud{padding:6px 10px}
  .hud span{font-size:.7rem}
  .scrollcue{display:none}
  .buybar__act{width:100%}
  .buybar__act .btn{flex:1}
  .term__body{min-height:380px;line-height:1.85}
  .totop{right:14px;bottom:14px}
}
@media (max-width:560px){
  /* contract pill stacks: label on top, address + copy below */
  .ca{width:100%;flex-wrap:wrap;row-gap:10px;column-gap:10px;padding:12px}
  .ca__label{width:100%;order:1}
  .ca__val{order:2;flex:1 1 auto;min-width:0;text-align:left}
  .ca__copy{order:3;margin-left:auto}
  /* keep the nav from crowding on small handsets */
  .nav__right .btn{--bh:38px;padding:0 13px;font-size:.72rem}
  .nav__in{gap:12px}
  .nav__logo img{height:26px}
}
@media (max-width:420px){
  .btn{--bh:48px;padding:0 20px;font-size:.85rem}
  .btn--lg{--bh:54px;padding:0 24px;font-size:.9rem}
  .hero__cta .btn{width:100%}
  .nav__right .btn{padding:0 11px;font-size:.68rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__logo,.hero__glow,.join__glow{animation:none}
  html.has-cursor,html.has-cursor *{cursor:auto !important}
  .cursor{display:none}
}
@media (hover:none){
  html.has-cursor,html.has-cursor *{cursor:auto !important}
  .cursor{display:none}
}

/* ---------- 22 depth / atmosphere ----------
   Sections used to be a flat void->ink->void gradient stacked on each other,
   which read as one long dark page with seams. Each .sec now gets an injected
   .atmo stack (assets/js/main.js) whose layers parallax at different rates,
   plus a lit seam so sections meet on an edge instead of a fade. The scroll
   engine writes --enter (0..1) and --par (-1..1) per section; everything here
   reads those two numbers, so there is one source of motion for the page.     */

.sec{isolation:isolate}
.sec > .wrap{position:relative;z-index:1}

.atmo{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  contain:strict;
}
.atmo > span{position:absolute;display:block;will-change:transform,opacity}

/* far layer — drifting dust, moves least */
.atmo__dust{
  inset:-30% -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.30),transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 12%,rgba(34,225,255,.34),transparent 100%),
    radial-gradient(1px 1px   at 34% 61%,rgba(255,255,255,.22),transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 47%,rgba(255,255,255,.18),transparent 100%),
    radial-gradient(1px 1px   at 51% 84%,rgba(34,225,255,.26),transparent 100%),
    radial-gradient(1.5px 1.5px at 23% 92%,rgba(255,255,255,.16),transparent 100%),
    radial-gradient(1px 1px   at 92% 74%,rgba(255,255,255,.20),transparent 100%);
  background-size:520px 520px;
  opacity:calc(.35 + var(--enter,0) * .5);
  transform:translate3d(0,calc(var(--par,0) * 34px),0);
}

/* mid layer — volumetric bloom that lights the section as it enters */
.atmo__bloom{
  left:50%;top:44%;
  width:min(1180px,132vw);aspect-ratio:1.35;
  transform:translate3d(-50%,calc(-50% + var(--par,0) * -70px),0) scale(calc(.86 + var(--enter,0) * .18));
  background:radial-gradient(ellipse at center,
    rgba(34,225,255,.13) 0%,
    rgba(34,225,255,.05) 30%,
    rgba(10,93,112,.035) 50%,
    transparent 70%);
  filter:blur(14px);
  opacity:calc(.25 + var(--enter,0) * .75);
}

/* near layer — fog that sinks the section edges into the void */
.atmo__fog{
  inset:0;
  background:
    radial-gradient(120% 62% at 50% 0%,rgba(8,9,11,.92) 0%,transparent 58%),
    radial-gradient(120% 62% at 50% 100%,rgba(8,9,11,.94) 0%,transparent 58%),
    radial-gradient(96% 74% at 50% 50%,transparent 34%,rgba(8,9,11,.55) 100%);
  transform:translate3d(0,calc(var(--par,0) * -14px),0);
}

/* the lit seam where one section meets the next */
.atmo__seam{
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(34,225,255,.06) 18%,
    rgba(34,225,255,.38) 50%,
    rgba(34,225,255,.06) 82%,
    transparent 100%);
  opacity:calc(.18 + var(--enter,0) * .82);
}
.atmo__seam::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;
  background:linear-gradient(180deg,rgba(34,225,255,.055),transparent 78%);
  opacity:inherit;
}
.sec--manifesto .atmo__seam{opacity:0}

/* ---------- ghost numeral ----------
   A section index set at display scale behind the heading. Outlined rather
   than filled so it reads as structure, not decoration, and parallaxed
   against the copy so the header has a foreground and a background.          */
.sechead{position:relative}
.sechead__ghost{
  position:absolute;
  right:0;
  top:50%;
  z-index:-1;
  font-family:var(--f-disp);
  font-weight:700;
  font-size:clamp(7rem,17vw,15rem);
  line-height:.72;
  letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.045);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  opacity:calc(.3 + var(--enter,0) * .7);
  transform:translate3d(0,calc(-50% + var(--par,0) * 26px),0);
}
.sechead--center .sechead__ghost{
  right:auto;left:50%;
  transform:translate3d(-50%,calc(-50% + var(--par,0) * 26px),0);
}
/* the copy is left-aligned and the ghost lives in the gutter to its right --
   once the two would overlap, the ghost has nowhere to go, so drop it */
@media (max-width:900px){.sechead__ghost{display:none}}

/* ---------- pushed display type ----------
   The h2 sat at the same weight as the body plates. Give it scale, a metal
   sheen that matches the plate tokens, and a contact shadow so it lifts off
   the atmosphere behind it.                                                  */
.h2{
  font-size:clamp(2.35rem,5.9vw,4.5rem);
  background:linear-gradient(176deg,var(--txt-hi) 0%,var(--plate-2) 52%,var(--steel) 118%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:0 22px 48px rgba(0,0,0,.55);
}
.h2 .hl{
  background:linear-gradient(176deg,var(--cy) 0%,var(--cy-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.h2--xl{font-size:clamp(2.9rem,8.6vw,6.6rem)}

/* ---------- plate depth ----------
   One flat inset ring became a real material: contact shadow, ambient
   occlusion, and a rim light along the top edge that comes up as the
   section enters.                                                            */
:root{
  --shadow-deep:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 5px rgba(0,0,0,.42),
    0 12px 26px -14px rgba(0,0,0,.75),
    0 38px 70px -38px rgba(0,0,0,.95);
}
.plate,.step,.qa,.term,.phase,.card{box-shadow:var(--shadow-deep),inset 0 0 0 1px var(--line)}
.plate,.step,.qa{position:relative}
.plate::after,.step::after,.qa::after{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,225,255,.34),transparent);
  opacity:calc(var(--enter,0) * .9);
  transition:opacity .6s var(--ease);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .atmo > span,.sechead__ghost{transform:none !important}
  .atmo__dust,.atmo__bloom,.sechead__ghost{opacity:.6 !important}
}
.sechead__ghost--word{
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  letter-spacing:.02em;
}
/* the FAQ head is a narrow sticky column, so there is no gutter for a ghost
   to sit in -- it would land straight behind the heading */
.sec--faq .sechead__ghost{display:none}