/* ══════════════════════════════════════════════════════════════════════════
   $CHRGBULL — The Charged Bull
   A substation bay photographed in the dark. Every glow has an emitter.

   COLOUR LAW (60 / 30 / 8 / 2):
     obsidian + cool concrete carry the page · off-white carries the words
     LIME is foreground — small, sharp, informational: labels, borders,
       numerals, the active state, the CTA.
     MAGENTA is environment — large, soft, out of focus: washes, rim light,
       the far end of the tunnel. It is never crisp and never small.
     RED is rationed to under half a percent: his eyes, and one disclaimer.
     Lime and magenta never touch; route every transition through near-black.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — neutral blue-black, never warmed toward purple */
  --void:   #07080B;
  --pit:    #0B0D12;
  --slab:   #101319;
  --conc:   #171B23;
  --conc-2: #1E232D;
  --line:   #232833;
  --line-2: #2E3440;

  /* lime ramp — the interface */
  --lime:    #A8FF1F;
  --lime-lt: #CCFF66;
  --lime-pl: #E8F5D8;
  --lime-md: #8FE000;
  --lime-dk: #5E9400;
  --lime-w:  rgba(168,255,31,.13);

  /* magenta ramp — the room */
  --mag:    #D633FF;
  --mag-lt: #E98BFF;
  --mag-dk: #6E14A0;
  --mag-w:  rgba(214,51,255,.16);

  --red:   #FF3B2F;
  --amber: #FFA51F;

  --txt:    #DDE3DA;
  --txt-hi: #EEF3EA;
  --txt-2:  #A9B2AA;
  --txt-3:  #7E867F;   /* 4.6:1+ on every ground it is used on */

  --fd: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --fb: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fm: 'B612 Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1220px;
  --ease: cubic-bezier(.22,.72,.24,1);
  --out:  cubic-bezier(.16,1,.3,1);
  --nav:  64px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
[hidden]{ display:none !important }

body{
  margin:0;
  background:var(--void);
  color:var(--txt);
  font:400 16px/1.62 var(--fb);
  font-synthesis-weight:none;
  overflow-x:clip;
}
body.preload *{ animation-play-state:paused !important }

img,svg{ max-width:100%; display:block }
/* font-synthesis-weight is off, so bold needs a weight we actually ship */
b, strong{ font-weight:600 }
a{ color:inherit }
::selection{ background:var(--lime); color:#06070A }
:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:2px }

/* cool concrete scrollbar */
*{ scrollbar-color:var(--line-2) var(--void); scrollbar-width:thin }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:var(--void) }
::-webkit-scrollbar-thumb{ background:var(--line-2); border:3px solid var(--void); border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:var(--lime-dk) }

.wrap{ width:min(var(--wrap), 100% - 44px); margin-inline:auto }
.mono{ font-family:var(--fm); font-variant-numeric:tabular-nums; letter-spacing:.04em }

.skip{
  position:fixed; left:12px; top:-60px; z-index:200; padding:10px 16px;
  background:var(--lime); color:#06070A; font:600 13px/1 var(--fd);
  letter-spacing:.1em; text-decoration:none; transition:top .2s;
}
.skip:focus{ top:12px }

/* ═════════════ BOOT ═════════════ */
#boot .bootline{ letter-spacing:.26em }
#bootCable{ overflow:visible }
#bootLive{ filter:drop-shadow(0 0 5px rgba(168,255,31,.85)) drop-shadow(0 0 16px rgba(168,255,31,.4)) }
#bootSpark{ filter:drop-shadow(0 0 7px #EAFFC2) drop-shadow(0 0 20px rgba(168,255,31,.9)) }

/* ═════════════ AMBIENT LAYERS ═════════════ */
#bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.92;
}
.vig{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(214,51,255,.10), transparent 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(168,255,31,.05), transparent 60%),
    radial-gradient(140% 110% at 50% 50%, transparent 42%, rgba(4,5,7,.72) 100%);
}
main, #nav, #foot, .bus, .hazrule, .progress{ position:relative; z-index:2 }

.conduit{
  position:fixed; left:11px; top:0; width:40px; height:100vh; z-index:3;
  pointer-events:none; overflow:visible;
}
#conduitLive{ filter:drop-shadow(0 0 5px rgba(168,255,31,.8)) drop-shadow(0 0 15px rgba(168,255,31,.35)) }
@media (max-width:1439px){ .conduit{ display:none } }

/* ═════════════ NAV ═════════════ */
#nav{
  position:sticky; top:0; z-index:60;
  background:rgba(7,8,11,.82);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(2px)){
  #nav{ backdrop-filter:blur(14px) saturate(1.1) }
}
.nav__in{ display:flex; align-items:center; gap:22px; height:var(--nav) }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; flex:none }
.brand__mark{ width:19px; color:var(--lime); filter:drop-shadow(0 0 6px rgba(168,255,31,.75)) }
.brand__txt{ font:700 17px/1 var(--fd); letter-spacing:.1em; color:var(--txt-hi) }
.brand__tag{
  font-size:9.5px; letter-spacing:.2em; color:var(--txt-3);
  border:1px solid var(--line-2); padding:3px 6px;
}
.nav__links{ display:flex; gap:26px; margin-left:auto }
.nav__links a{
  font:500 11.5px/1 var(--fd); letter-spacing:.15em; color:var(--txt-2);
  text-decoration:none; padding:11px 0; position:relative; transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background:var(--lime); box-shadow:0 0 7px rgba(168,255,31,.8);
  transition:right .32s var(--out);
}
.nav__links a:hover{ color:var(--lime-lt) }
.nav__links a:hover::after, .nav__links a.is-here::after{ right:0 }
.nav__links a.is-here{ color:var(--txt-hi) }

.burger{ display:none; width:40px; height:40px; background:none; border:1px solid var(--line-2); padding:0; cursor:pointer }
.burger span{ display:block; width:17px; height:1.5px; background:var(--txt); margin:4px auto; transition:transform .28s var(--ease) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(2.75px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-2.75px) rotate(-45deg) }

.nav__drawer{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--pit); border-bottom:1px solid var(--line);
  padding:8px 22px 20px; flex-direction:column;
}
.nav__drawer.is-open{ display:flex }
.nav__drawer a{
  font:600 13px/1 var(--fd); letter-spacing:.16em; color:var(--txt-2);
  text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line);
}
.nav__drawer a:last-child{ border-bottom:0 }

.progress{ position:sticky; top:var(--nav); z-index:59; height:2px; background:transparent; margin-bottom:-2px }
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--lime-dk),var(--lime));
  box-shadow:0 0 8px rgba(168,255,31,.75);
}

/* ═════════════ SHARED FURNITURE ═════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  font:400 10.5px/1 var(--fm); letter-spacing:.24em; color:var(--txt-3);
  text-transform:uppercase;
}
.dot{
  width:6px; height:6px; background:var(--lime); flex:none;
  box-shadow:0 0 7px rgba(168,255,31,.9);
  animation:blip 2.6s infinite steps(1,end);
}
@keyframes blip{ 0%,72%,100%{opacity:1} 76%{opacity:.15} 80%{opacity:1} }

.eyebrow--danger{ color:var(--txt-2) }
.eyebrow--danger .dot{ background:var(--red); box-shadow:0 0 8px rgba(255,59,47,.9) }

.hazrule{
  height:6px;
  background:repeating-linear-gradient(-45deg, var(--lime) 0 10px, var(--void) 10px 20px);
  opacity:.62;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; min-height:46px; border:1px solid var(--line-2);
  font:600 12.5px/1 var(--fd); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--txt-hi); background:var(--slab);
  cursor:pointer; position:relative; transition:transform .18s var(--ease), border-color .2s, background .2s, color .2s;
}
.btn img{ width:16px; height:16px; opacity:.9; filter:brightness(0) invert(1) }
.btn:hover{ transform:translateY(-2px) }
.btn--pri{
  background:var(--lime); color:#06070A; border-color:var(--lime);
  box-shadow:0 0 0 1px rgba(168,255,31,.28), 0 0 18px rgba(168,255,31,.32), 0 0 48px rgba(110,190,0,.17);
}
.btn--pri img{ filter:none }
.btn--pri:hover{ background:var(--lime-lt); border-color:var(--lime-lt) }
.btn--gho:hover{ border-color:var(--lime-dk); color:var(--lime-lt) }
.btn--sm{ min-height:34px; padding:0 15px; font-size:11px; letter-spacing:.13em; flex:none }

/* the corner-bracket panel — HUD language, no rounded cards */
.plate{ border:1px solid var(--line); background:var(--pit); margin-bottom:52px }
.plate__band{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:11px 18px; background:var(--slab); border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3);
}
.plate__sig{ color:var(--lime-md) }
.plate__ref{ text-align:right }
.plate__body{ padding:30px 26px 32px }
.plate__body h2{
  margin:0; font:800 clamp(2.1rem,5.4vw,3.6rem)/.99 var(--fd);
  letter-spacing:-.012em; color:var(--txt-hi); text-transform:uppercase;
}
.plate__body .sub{ margin:18px 0 0; max-width:62ch; color:var(--txt-2); font-size:16.5px }

.sec{ padding:96px 0 }
.sec--cta{ padding-bottom:112px }

/* the nav is sticky, so anchor jumps must clear it or the heading lands under it */
#hero, .sec, #foot{ scroll-margin-top:calc(var(--nav) + 14px) }

/* reveal — things POWER ON, they don't slide up */
.rev{ opacity:0; transform:translateY(9px); filter:brightness(.55) }
.rev.in{
  opacity:1; transform:none; filter:none;
  transition:opacity .34s steps(3,end) var(--d,0ms), transform .5s var(--out) var(--d,0ms), filter .44s ease var(--d,0ms);
}

/* ═════════════ HERO ═════════════ */
.hero{ padding:74px 0 0; position:relative }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:54px; align-items:center; min-height:calc(100vh - var(--nav) - 130px);
}
.hero h1{
  margin:0 0 24px; font:800 clamp(2.9rem,7.6vw,5.9rem)/.92 var(--fd);
  letter-spacing:-.026em; color:var(--txt-hi); text-transform:uppercase;
}
.h1l{ display:block }
.h1l.neon{
  color:#F2FFE0;
  text-shadow:
    0 0 1px  #FBFFF2,
    0 0 4px  #DFFFA8,
    0 0 11px rgba(168,255,31,.95),
    0 0 26px rgba(168,255,31,.5),
    0 0 58px rgba(143,224,0,.3),
    0 0 112px rgba(110,190,0,.16);
}
@media (prefers-reduced-motion:no-preference){
  body:not(.preload) .h1l.neon{ animation:hum 6.4s infinite steps(1,end) }
}
@keyframes hum{ 0%,85%,100%{opacity:1} 86%{opacity:.52} 87.5%{opacity:1} 92%{opacity:.72} 93%{opacity:1} }

.lede{ margin:0 0 30px; max-width:52ch; font-size:17.5px; color:var(--txt-2) }
.cta{ display:flex; flex-wrap:wrap; gap:13px }

.ca{ margin-top:38px; max-width:520px }
.ca__lab{
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-size:10px; letter-spacing:.22em; color:var(--txt-3);
}
.ca__pill{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:13px 15px; background:var(--slab);
  border:1px solid var(--line-2); border-left:2px solid var(--lime-dk);
  color:var(--txt); font-size:13.5px; cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s;
}
.ca__pill:hover{ border-color:var(--line-2); border-left-color:var(--lime); background:var(--conc) }
.ca__pill.is-live{ border-left-color:var(--lime) }
.ca__ico{ width:17px; color:var(--txt-3); flex:none }
.ca__pill:hover .ca__ico{ color:var(--lime) }
.ca__note{ margin:11px 0 0; font-size:12.5px; line-height:1.55; color:var(--txt-3); max-width:46ch }

/* the bull stage */
.hero__art{ position:relative }
.bullstage{ position:relative; isolation:isolate }
.bullstage__glow{
  position:absolute; inset:-6% -14% -18%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 26%, rgba(214,51,255,.20), transparent 70%),
    radial-gradient(48% 34% at 50% 72%, rgba(168,255,31,.11), transparent 72%);
  filter:blur(6px);
}
.bullstage__floor{
  position:absolute; left:6%; right:6%; bottom:-2%; height:74px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(168,255,31,.16), transparent 72%);
  filter:blur(11px);
}
.bull{ width:100%; height:auto; overflow:visible }
.bull #hornLeft, .bull #hornRight{ transition:opacity .3s }
.bull .bar{ transition:opacity .16s linear }
.artcap{
  margin:20px 0 0; text-align:center; font-size:9.5px;
  letter-spacing:.2em; color:var(--txt-3);
}

/* live grid load — real market data, in the bay's own instrument grammar */
.load{
  margin-top:52px; border-top:1px solid var(--line); background:var(--slab);
}
.load__in{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 30px; padding:14px 0 }
.load__tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.2em; color:var(--lime-md);
}
.load__i{ display:inline-flex; align-items:baseline; gap:9px; font-size:10.5px }
.load__i b{ letter-spacing:.18em; color:var(--txt-3); font-weight:400 }
.load__i .v{ color:var(--txt-hi); letter-spacing:.05em; font-size:13px }
.load__note{
  margin-left:auto; font-size:9.5px; letter-spacing:.18em; color:var(--txt-3);
}
.load[data-state="warming"] .load__tag{ color:var(--amber) }
.load[data-state="warming"] .load__tag .dot{ background:var(--amber); box-shadow:0 0 7px rgba(255,165,31,.9) }
.load[data-state="error"] .load__tag{ color:var(--txt-3) }
.load[data-state="error"] .load__tag .dot{ background:var(--txt-3); box-shadow:none; animation:none }
.load[data-state="live"] .load__note{ color:var(--lime-md) }
.v.is-up{ color:var(--lime) }
.v.is-down{ color:var(--red) }
@media (max-width:640px){
  .load__in{ gap:8px 20px }
  .load__note{ margin-left:0; width:100% }
}

/* telemetry rail */
.tele{ margin-top:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--pit) }
.tele__in{ display:flex; flex-wrap:wrap; gap:8px 34px; padding:13px 0 }
.tele__i{ display:inline-flex; align-items:baseline; gap:9px; font-size:10.5px }
.tele__i b{ letter-spacing:.18em; color:var(--txt-3); font-weight:400 }
.tele__i .v{ color:var(--lime-md); letter-spacing:.06em }
.tele__i.is-warn .v{ color:var(--amber) }

/* ═════════════ 02 · THE RIG (centrepiece) ═════════════ */
.bay{ padding-top:88px }
.rig{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:34px; align-items:stretch;
}
.rig__socket{ position:relative; border:1px solid var(--line); background:var(--pit); padding:18px;
  display:flex; flex-direction:column; justify-content:center }
.rig__socket::before,
.rig__socket::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--lime); opacity:.55;
}
.rig__socket::before{ left:-1px; top:-1px; border-right:0; border-bottom:0 }
.rig__socket::after{ right:-1px; bottom:-1px; border-left:0; border-top:0 }
#socketSvg{ width:100%; height:auto; overflow:visible; touch-action:pan-y; max-width:560px; margin-inline:auto }
.svgmono{ font:400 12px/1 var(--fm); letter-spacing:.22em }
#plugLed{ filter:drop-shadow(0 0 6px rgba(168,255,31,.9)) }
#cablePath{ transition:none }

.rig__hold{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:100%; margin-top:16px; padding:15px 18px; cursor:pointer;
  background:var(--slab); border:1px solid var(--line-2); border-top:2px solid var(--lime-dk);
  color:var(--txt-hi); transition:background .18s, border-color .18s, transform .12s;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.rig__hold:hover{ background:var(--conc); border-top-color:var(--lime) }
.rig__hold.is-down{ transform:translateY(2px); background:var(--conc-2); border-top-color:var(--lime) }
.rig__hold-l{ font-size:11px; letter-spacing:.22em; color:var(--lime) }
.rig__hold-s{ font:500 12px/1 var(--fd); letter-spacing:.14em; color:var(--txt-3); text-transform:uppercase }

.rig__hud{ border:1px solid var(--line); background:var(--pit); padding:22px; display:flex; flex-direction:column; gap:20px }
.hud__row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding-bottom:11px; border-bottom:1px solid var(--line) }
.hud__k{ font-size:10px; letter-spacing:.2em; color:var(--txt-3) }
.hud__v{ font-size:13px; letter-spacing:.12em; color:var(--lime) }
.hud__v.is-warn{ color:var(--amber) }
.hud__v.is-bad{ color:var(--red) }
.hud__instr{ margin:0; font-size:14px; line-height:1.55; color:var(--txt-2); min-height:3.1em }

.gauge__lab{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.2em; color:var(--txt-3); margin-bottom:9px }
.gauge__lab i{ font-style:normal; color:var(--lime) }
.gauge__cells{ display:flex; gap:3px }
.gauge__cells i{
  flex:1; height:26px; background:#141821; box-shadow:inset 0 0 0 1px var(--line);
  transition:background .12s linear, box-shadow .12s linear;
}
.gauge__cells i.on{
  background:linear-gradient(180deg,var(--lime-lt),var(--lime-md));
  box-shadow:0 0 6px rgba(168,255,31,.8), 0 0 18px rgba(168,255,31,.3), inset 0 1px 0 #EAFFC2;
}
.gauge__cells i.warn{
  background:linear-gradient(180deg,#FFD489,var(--amber));
  box-shadow:0 0 6px rgba(255,165,31,.75), inset 0 1px 0 #FFE9C4;
}
.gauge__cells i.dead{
  background:#0A0B0F; box-shadow:inset 0 0 0 1px #2A1416;
}
.gauge__cells i.bad{
  background:linear-gradient(180deg,#FF8C82,var(--red));
  box-shadow:0 0 6px rgba(255,59,47,.75), inset 0 1px 0 #FFC9C4;
}
.gauge__scale{ display:flex; justify-content:space-between; margin-top:7px; font-size:9px; letter-spacing:.2em; color:var(--txt-3) }

.odo{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0 }
.odo__k{ display:block; font-size:9.5px; letter-spacing:.2em; color:var(--txt-3) }
.odo__v{ display:flex; align-items:baseline; gap:7px; margin:5px 0 6px }
.odo__v b{
  font:700 clamp(2.1rem,4.6vw,2.9rem)/1 var(--fd); letter-spacing:-.01em; color:var(--txt-hi);
  font-variant-numeric:tabular-nums;
}
.odo__v span{ font-size:14px; color:var(--lime-md) }

.hud__tel{ list-style:none; margin:0; padding:0; display:grid; gap:7px }
.hud__tel li{ display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.14em }
.hud__tel span{ color:var(--txt-3) }
.hud__tel i{ font-style:normal; color:var(--txt-2) }
.hud__tel i.is-warn{ color:var(--amber) }
.hud__tel i.is-bad{ color:var(--red) }
.hud__tel i.is-on{ color:var(--lime) }

.rig__foot{ margin:26px 0 0; font-size:9.5px; letter-spacing:.19em; color:var(--txt-3); text-align:center }

/* shake when the plate tears */
@keyframes rigShake{
  0%,100%{ transform:translate3d(0,0,0) }
  15%{ transform:translate3d(-6px,2px,0) } 30%{ transform:translate3d(5px,-2px,0) }
  45%{ transform:translate3d(-4px,-1px,0) } 60%{ transform:translate3d(3px,2px,0) }
  80%{ transform:translate3d(-2px,0,0) }
}
.rig.is-torn{ animation:rigShake .5s var(--ease) }

/* ═════════════ BUS BAND — light travels, text stays put ═════════════ */
.bus{
  position:relative; overflow:hidden; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); background:var(--slab); padding:17px 0;
}
.bus__dots{
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px);
  background-size:6px 6px;
}
.bus__slots{
  position:relative; z-index:2; display:flex; justify-content:space-around;
  align-items:center; gap:18px; width:min(var(--wrap),100% - 44px); margin-inline:auto;
}
.bus__s{
  font:400 11px/1 var(--fm); letter-spacing:.22em; color:var(--txt-2);
  text-transform:uppercase; white-space:nowrap; transition:opacity .1s steps(2,end), color .2s;
}
.bus__s.flip{ opacity:.12 }
.bus__s.lit{ color:var(--lime-lt); text-shadow:0 0 8px rgba(168,255,31,.6) }
.bus__pulse{
  position:absolute; top:0; bottom:0; width:170px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(168,255,31,.16), rgba(168,255,31,.05), transparent);
  transform:translateX(-200px);
}
/* the pulse is positioned by JS so that it can carry the words with it */
.bus__s.spent{ opacity:.14 }

/* ═════════════ 03 · INCIDENT ═════════════ */
.inc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:46px; align-items:start }
.inc__log{ list-style:none; margin:0; padding:0; position:relative }
.inc__log::before{
  content:''; position:absolute; left:5px; top:12px; bottom:14px; width:2px;
  background:linear-gradient(180deg, var(--lime-dk), var(--line-2) 60%, transparent);
}
.inc__log li{ position:relative; padding:0 0 30px 34px }
.inc__log li::before{
  content:''; position:absolute; left:0; top:9px; width:12px; height:12px;
  background:var(--void); border:2px solid var(--line-2);
}
.inc__log li.in::before{ border-color:var(--lime); box-shadow:0 0 9px rgba(168,255,31,.7) }
.inc__log li.is-bad.in::before{ border-color:var(--red); box-shadow:0 0 11px rgba(255,59,47,.75) }
.inc__t{ display:block; font-size:10px; letter-spacing:.22em; color:var(--txt-3); margin-bottom:6px }
.inc__log p{ margin:0; color:var(--txt-2); font-size:16px }
.inc__log li.is-bad p{ color:var(--txt-hi); font-size:19px }
.inc__aside{ margin-top:7px !important; color:var(--txt-3) !important; font-size:14.5px !important; font-style:italic }
.inc__log li.is-bad b{ color:var(--red); font-weight:600 }

.inc__fig{ margin:0; border:1px solid var(--line); background:var(--pit); padding:10px }
.inc__fig img{ width:100%; height:auto }
.inc__fig figcaption{ padding:11px 4px 3px; font-size:9.5px; letter-spacing:.18em; color:var(--txt-3) }

/* ═════════════ 04 · SPECS ═════════════ */
.specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line) }
.spec{ background:var(--pit); padding:26px 24px 28px; position:relative; transition:background .25s }
.spec::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--out);
}
.spec:hover{ background:var(--slab) }
.spec:hover::after{ transform:scaleX(1) }
.spec__k{ display:block; font-size:9.5px; letter-spacing:.22em; color:var(--txt-3); margin-bottom:12px }
.spec__v{
  display:block; font:700 clamp(1.45rem,2.6vw,1.9rem)/1.08 var(--fd);
  letter-spacing:-.005em; color:var(--lime-lt); margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.spec p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--txt-2) }

/* ═════════════ 05 · OPERATION ═════════════ */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line) }
.step{ background:var(--pit); padding:28px 24px 30px; position:relative }
.step__n{
  display:block; font-size:11px; letter-spacing:.22em; color:var(--lime-md); margin-bottom:20px;
}
.step__ic{
  width:62px; height:62px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--conc); border:1px solid var(--line-2);
}
.step__ic img{ width:32px; height:32px; opacity:1 }
.step h3{ margin:0 0 9px; font:600 14px/1.25 var(--fd); letter-spacing:.1em; color:var(--txt-hi); text-transform:uppercase }
.step p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--txt-2) }
.steps__foot{ margin:26px 0 0; font-size:9.5px; letter-spacing:.19em; color:var(--txt-3); text-align:center }

/* ═════════════ 06 · SCHEDULE ═════════════ */
.road{ position:relative; display:grid; gap:1px; background:var(--line); padding-left:0 }
.road__rail{
  position:absolute; left:-22px; top:8px; bottom:8px; width:2px; background:var(--line-2);
}
.road__rail i{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,var(--lime),var(--lime-dk));
  box-shadow:0 0 9px rgba(168,255,31,.6);
}
.ph{ background:var(--pit); padding:26px 26px 28px }
.ph header{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:14px }
.ph__n{ font-size:10px; letter-spacing:.22em; color:var(--txt-3) }
.ph h3{ margin:0; font:700 clamp(1.35rem,2.6vw,1.8rem)/1 var(--fd); letter-spacing:.01em; color:var(--txt-hi); text-transform:uppercase }
.ph__load{ margin-left:auto; font-size:10px; letter-spacing:.18em; color:var(--lime-md) }
.ph ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.ph li{ position:relative; padding-left:19px; font-size:15px; color:var(--txt-2) }
.ph li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:2px; background:var(--lime-dk) }

/* ═════════════ 07 · HAZARDS ═════════════ */
.faq{ display:grid; gap:1px; background:var(--line) }
.q{ background:var(--pit) }
.q summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:21px 24px; cursor:pointer; list-style:none;
  font:600 15.5px/1.35 var(--fd); letter-spacing:.02em; color:var(--txt-hi);
}
.q summary::-webkit-details-marker{ display:none }
.q summary::after{
  content:''; width:11px; height:11px; flex:none;
  border-right:2px solid var(--lime); border-bottom:2px solid var(--lime);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease);
}
.q[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.q summary:hover{ background:var(--slab) }
.q p{ margin:0; padding:0 24px 23px; color:var(--txt-2); font-size:15.5px; max-width:70ch }

/* ═════════════ 08 · CTA ═════════════ */
.cta2{ border:1px solid var(--line); background:var(--pit); padding:56px 34px 60px; text-align:center; position:relative; overflow:hidden }
.cta2::before{
  content:''; position:absolute; left:50%; top:-60%; width:min(640px,110%); height:180%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 42% at 50% 50%, rgba(214,51,255,.16), transparent 70%);
  filter:blur(8px);
}
.cta2 > *{ position:relative }
.cta2 h2{ margin:0 0 16px; font:800 clamp(2rem,5.2vw,3.4rem)/1 var(--fd); letter-spacing:-.014em; color:var(--txt-hi); text-transform:uppercase }
.cta2 .lede{ margin:0 auto 30px }
.cta2 .cta{ justify-content:center }

/* ═════════════ FOOTER ═════════════ */
#foot{ border-top:1px solid var(--line); background:var(--pit); padding:52px 0 40px }
.foot__grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center }
.foot__brand{ display:flex; align-items:center; gap:16px }
.foot__brand img{ width:74px; height:74px; border:1px solid var(--line-2) }
.foot__name{ display:block; font:700 19px/1 var(--fd); letter-spacing:.08em; color:var(--txt-hi) }
.foot__sub{ display:block; margin-top:6px; font-size:9.5px; letter-spacing:.2em; color:var(--txt-3) }

.foot__socket{ display:flex; flex-direction:column; align-items:center; gap:9px }
.foot__k{ font-size:9.5px; letter-spacing:.2em; color:var(--txt-3) }
.foot__hint{ font-size:9px; letter-spacing:.2em; color:var(--txt-3); opacity:.7 }
.socket{ position:relative; width:132px; touch-action:pan-y; cursor:grab }
.socket:active{ cursor:grabbing }
.socket svg{ width:100%; height:auto; overflow:visible }
.socket .socket__led{ filter:drop-shadow(0 0 5px rgba(168,255,31,.85)) }
#footPlug{ transition:transform .18s var(--out) }
.socket.is-dragging #footPlug{ transition:none }
.socket.is-out #footPlug{ filter:grayscale(1) brightness(.7) }
#footCable{ filter:drop-shadow(0 0 5px rgba(168,255,31,.55)) }
.socket__key{
  margin-top:2px; padding:8px 14px; min-height:34px; background:var(--slab);
  border:1px solid var(--line-2); color:var(--txt-2);
  font:600 10px/1 var(--fd); letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.socket__key:hover{ border-color:var(--lime-dk); color:var(--lime-lt) }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:flex-end }
.foot__links a{ font-size:13.5px; line-height:32px; color:var(--txt-3); text-decoration:none; transition:color .2s }
.foot__links a:hover{ color:var(--lime-lt) }

.foot__legal{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line) }
.foot__legal p{ margin:0; font-size:13px; line-height:1.7; color:var(--txt-2); max-width:100ch }
.foot__legal b{ color:var(--txt-2) }
.foot__off{ margin-top:16px !important; font-size:9.5px !important; letter-spacing:.2em; color:var(--txt-3) }

/* ═════════════ TOAST ═════════════ */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:110; transform:translate(-50%,14px);
  padding:13px 20px; background:var(--slab); border:1px solid var(--line-2);
  border-left:2px solid var(--lime); color:var(--txt-hi);
  font:500 13px/1.4 var(--fd); letter-spacing:.09em; text-transform:uppercase;
  max-width:min(520px,90vw); opacity:0; transition:opacity .26s, transform .26s var(--out);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.toast.on{ opacity:1; transform:translate(-50%,0) }
.toast.is-mag{ border-left-color:var(--mag) }

/* ═════════════ BROWNOUT (egg door 2) ═════════════ */
.brownout{
  position:fixed; inset:0; z-index:105; pointer-events:none;
  background:rgba(3,4,6,.9); opacity:0; transition:opacity .55s ease;
}
.brownout.on{ opacity:1 }
body.is-dark{ filter:brightness(.3) saturate(.35) }
body.is-dark #foot, body.is-dark .toast{ filter:none }

@media (max-height:560px) and (orientation:landscape){
  .hero{ padding-top:28px }
  .bullstage{ max-width:min(100%, 46vh); margin-inline:auto }
  .sec{ padding:56px 0 }
}

/* ═════════════ PRINT ═════════════
   The page is a dark neon room; printed it would be eight sheets of ghost text.
   Print the document underneath it instead. */
@media print{
  @page{ margin:16mm }
  html, body{ background:#fff !important; color:#111 !important }
  body{ font-size:11pt; line-height:1.5 }
  #bg, .vig, .conduit, #boot, .progress, .hazrule, .bus, .toast, .brownout,
  .hero__art, .rig, .rig__foot, .inc__fig, .foot__socket, .skip,
  .burger, .nav__drawer, #navBuy, .cta, .cta2 .cta{ display:none !important }
  #nav{ position:static; background:none; border:0; backdrop-filter:none }
  .nav__links{ display:none }
  .brand__txt{ color:#111 }
  main, .sec, .plate, .spec, .step, .ph, .q, .cta2, #foot{
    background:none !important; border-color:#bbb !important; box-shadow:none !important;
  }
  h1, h2, h3, .spec__v, .plate__body h2{ color:#111 !important; text-shadow:none !important }
  .h1l.neon{ color:#111 !important; text-shadow:none !important }
  p, li, .lede, .spec p, .step p, .ph li, .q p{ color:#222 !important }
  .eyebrow, .mono, .spec__k, .step__n, .ph__n, .inc__t, .foot__legal p{ color:#555 !important }
  .rev{ opacity:1 !important; transform:none !important; filter:none !important }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#666 }
  .specs, .steps, .faq, .road{ gap:0; background:none }
  .spec, .step, .ph, .q{ border:1px solid #ddd; break-inside:avoid }
  section{ break-inside:auto }
  .plate{ break-after:avoid }
}

/* ═════════════ CAPTURE MODE ═════════════
   A full-page screenshot resizes the viewport to the whole document height,
   which would blow any 100vh box up to document height and centre its content
   thousands of pixels down. ?shot= neutralises viewport-relative sizing. */
body.is-shot .hero__grid{ min-height:0 }
body.is-shot .hero{ padding-bottom:8px }

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1040px){
  .rig__socket{ padding:14px }
  #socketSvg{ max-width:440px }
  .specs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero__grid{ grid-template-columns:1fr; gap:44px; min-height:0; padding-bottom:8px }
  .hero__art{ max-width:560px; margin-inline:auto; width:100% }
  .rig{ grid-template-columns:1fr }
  .inc{ grid-template-columns:1fr; gap:34px }
  .road__rail{ display:none }
  .foot__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:32px }
  .foot__links{ justify-content:center }
}
@media (max-width:860px){
  .nav__in{ gap:12px }
  .nav__links{ display:none }
  .burger{ display:block }
  #navBuy{ margin-left:auto }
  .brand__tag{ display:none }
  .bus__slots{ justify-content:space-around; overflow:hidden }
  .bus__s:nth-child(n+4){ display:none }
}
@media (max-width:640px){
  .specs, .steps{ grid-template-columns:1fr }
  .wrap{ width:calc(100% - 32px) }
  .sec{ padding:70px 0 }
  .hero{ padding-top:48px }
  .plate__band{ flex-direction:column; align-items:flex-start; gap:4px }
  .plate__ref{ text-align:left }
  .plate__body{ padding:24px 18px 26px }
  .tele__in{ gap:8px 22px }
  .rig__socket{ padding:12px }
  .rig__hud{ padding:18px }
  .inc__fig{ padding:7px }
  .bus__s:nth-child(n+2){ display:none }
  .bus__slots{ justify-content:center }
  .cta2{ padding:42px 20px 46px }
  .btn:not(.btn--sm){ width:100% }
  .cta{ width:100% }
}

/* ═════════════ REDUCED MOTION ═════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  body:not(.motion-force) *,
  body:not(.motion-force) *::before,
  body:not(.motion-force) *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  body:not(.motion-force) .rev{ opacity:1; transform:none; filter:none }
}