/* Team of SI: landing v1. Static, no build step. */

@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --bg: #050506;
  --fg: #EDEDED;
  --soft: #C6C6CB;
  --mute: #9A9AA1;
  --dim: #55555B;
  --line: rgba(237, 237, 237, .13);
  --red: #FF3B2F;
  --volt: #D4FF00;
  --ice: #9FF7FF;
  --accent: var(--red);
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pad: clamp(16px, 4.2vw, 56px);
  --pad-l: max(var(--pad), env(safe-area-inset-left));
  --pad-r: max(var(--pad), env(safe-area-inset-right));
  --top: 56px;
  --ease: cubic-bezier(.7, 0, .2, 1);
}
[data-team="off"] { --accent: var(--volt); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + env(safe-area-inset-top) + 8px); overflow-x: clip; }
body { margin: 0; font: 400 17px/1.5 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html:has(dialog[open]) { overflow: hidden; }
img, svg, canvas { display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
.v { color: var(--volt); }
.dim { color: #8E8E95; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 16px; background: var(--volt); color: #000; font: 600 14px/1 var(--f-mono); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }
::selection { background: var(--volt); color: #000; }

@media (pointer: fine) {
  body { cursor: crosshair; }
  a, button, select, input, label, [role="switch"] { cursor: pointer; }
  input[type="text"], input[type="email"] { cursor: text; }
}

/* State-dependent text pairs */
.st-off { display: none; }
[data-team="off"] .st-on { display: none; }
[data-team="off"] .st-off { display: inline; }

/* Film: scanlines + grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
body::after {
  content: ""; position: fixed; inset: -120px; z-index: 81; pointer-events: none; opacity: .085;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (pointer: fine) { body::after { animation: grain 1.1s steps(5) infinite; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 26px); } 40% { transform: translate(28px, -50px); }
  60% { transform: translate(-64px, -14px); } 80% { transform: translate(50px, 40px); } 100% { transform: translate(0, 0); }
}

/* ---------- Top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: calc(var(--top) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--pad-r) 0 var(--pad-l); display: flex; align-items: center; gap: 14px;
  background: rgba(5, 5, 6, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; margin-right: auto; }
.wm { display: inline-flex; align-items: flex-end; font: 800 15px/1 var(--f-display); letter-spacing: .03em; white-space: nowrap; }
.wm > span { display: inline-block; }
.wm-sp { width: .42em; }
.wm-si { transition: color .4s, text-shadow .4s; }
[data-team="off"] .wm-si { color: var(--volt); text-shadow: 0 0 14px rgba(212, 255, 0, .65); }
.top-status { display: none; margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.top-status .st-on { color: var(--red); }
.top-status .st-off { color: var(--volt); }
.top-nav { display: none; gap: 22px; }
.top-nav a { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--soft); padding: 8px 0; }
.top-nav a:hover { color: var(--fg); }
.snd { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); background: transparent; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; background: currentColor; height: 5px; }
.snd-bars i:nth-child(2) { height: 12px; }
.snd-bars i:nth-child(3) { height: 8px; }
.snd[aria-pressed="false"] .snd-bars i { height: 2px; }
.snd[aria-pressed="false"] { color: var(--dim); }
.top-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--fg); color: #000; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
[data-team="off"] .top-cta { background: var(--volt); }
@media (max-width: 380px) { .snd-l { display: none; } }
@media (pointer: coarse) { .snd, .top-cta, .letter input, .letter select { min-height: 44px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--top) + env(safe-area-inset-top)) var(--pad-r) calc(18px + env(safe-area-inset-bottom)) var(--pad-l);
}
.hud { display: flex; margin: 0 calc(-1 * var(--pad)); border-bottom: 1px solid var(--line); font: 500 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hud-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-right: 1px solid var(--line); }
.hud-cell:first-child { padding-left: var(--pad); }
.hud-cell:last-child { border-right: 0; padding-right: var(--pad); }
.hud .v { font-size: 13px; letter-spacing: .02em; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-meet { display: none; }
.hud-status .v { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; }
.hud .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1s steps(1) infinite; }
[data-team="off"] .hud .v { color: var(--volt); }
[data-team="off"] .hud .dot { background: var(--volt); box-shadow: 0 0 8px var(--volt); animation: none; }

.stage { position: relative; flex: 1 1 auto; min-height: 250px; margin: 0 calc(-1 * var(--pad)); overflow: hidden; }
.noise { position: absolute; inset: 0; }
.chip { position: absolute; left: var(--x, 0); top: var(--y, 0); }
.chip-in {
  transform: rotate(var(--r, 0deg)); animation: jitter var(--jd, 3.4s) ease-in-out var(--jl, 0s) infinite alternate;
  font: 500 11.5px/1.25 var(--f-mono); color: #B9B9BF; background: #121215; border: 1px solid #2A2A30;
  border-radius: 10px; padding: 8px 10px; white-space: nowrap; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  transition: filter .25s, color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.chip:nth-child(3n) .chip-in { --jd: 2.6s; --jl: -1.1s; }
.chip:nth-child(3n+1) .chip-in { --jd: 3.9s; --jl: -2.3s; }
.chip:nth-child(4n) .chip-in { --jd: 2.2s; --jl: -.4s; }
@keyframes jitter {
  0% { transform: rotate(var(--r, 0deg)) translate(0, 0); }
  35% { transform: rotate(calc(var(--r, 0deg) * -.5)) translate(3px, -5px); }
  70% { transform: rotate(var(--r, 0deg)) translate(-4px, 2px); }
  100% { transform: rotate(calc(var(--r, 0deg) * .6)) translate(2px, 4px); }
}
.chip .k { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #75757C; margin-bottom: 5px; }
.c-inbox .chip-in { padding: 10px 14px 12px; border-color: #3a1512; background: linear-gradient(180deg, #1a0d0c, #121215); }
.c-inbox b { display: block; font: 800 34px/1 var(--f-display); color: var(--red); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255, 59, 47, .45); }
.c-inbox .u { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.c-cal .chip-in { padding: 6px; display: grid; gap: 4px; background: #0e0e10; }
.c-cal span { display: block; padding: 6px 9px; border-left: 3px solid #4a4a52; background: #1a1a1e; color: #CFCFD4; font-size: 11px; }
.c-cal time { display: inline-block; min-width: 3.4em; color: #7c7c84; }
.c-cal .hot { border-left-color: var(--red); background: #241110; color: #fff; }
.c-ping .chip-in { display: flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f-text); color: #E4E4E8; border-radius: 18px 18px 18px 4px; padding: 10px 13px; background: #18181c; }
.c-ping.alt .chip-in { border-radius: 18px 18px 4px 18px; background: #222227; }
.c-ping .av { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #5c5c64, #2a2a30); flex: none; }
.c-ping .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); flex: none; }
.c-clock .chip-in { padding: 10px 14px; background: #0c0c0e; border-color: #3a1512; }
.c-clock b { display: block; font: 700 38px/1 var(--f-mono); color: var(--red); letter-spacing: -.02em; text-shadow: 0 0 20px rgba(255, 59, 47, .5); }
.c-clock .colon { animation: blink 1s steps(1) infinite; }
.c-file .chip-in { background: #101013; color: #D0D0D5; }
.c-alert .chip-in { color: var(--red); border-color: rgba(255, 59, 47, .6); background: #160908; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.c-chan .chip-in { color: #CFCFD4; }
.c-chan b { color: var(--red); }
.m-hide { display: none; }

/* Blackout states for the noise */
.chip.dead .chip-in { animation-play-state: paused; filter: grayscale(1) brightness(.35); box-shadow: none; }
.chip.fly .chip-in { animation-play-state: paused; filter: none; color: var(--volt); border-color: var(--volt); background: #0b0d03; box-shadow: 0 0 26px rgba(212, 255, 0, .35); }
.chip.fly .chip-in * { color: inherit !important; text-shadow: none !important; }
.chip.gone { visibility: hidden; }
[data-team="off"][data-phase="settled"] .chip { visibility: hidden; }
.chip.pop .chip-in { animation: pop .5s cubic-bezier(.2, .9, .2, 1.3) both, jitter var(--jd, 3.4s) ease-in-out .5s infinite alternate; }
@keyframes pop { 0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.4); } 100% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); } }

/* SI layer */
.si-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; pointer-events: none; }
[data-team="off"] .si-canvas { opacity: 1; }
.glyph-slot { position: absolute; left: 7%; right: 7%; top: 5%; height: 58%; pointer-events: none; }
.glyph-slot::before { content: ""; position: absolute; inset: -14%; background: radial-gradient(closest-side, rgba(212, 255, 0, .13), transparent 72%); opacity: 0; transition: opacity 1s; }
[data-team="off"] .glyph-slot::before { opacity: 1; }
.nodes { position: absolute; left: var(--pad); right: var(--pad); bottom: 10px; height: 27%; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; opacity: 0; transition: opacity .3s; }
[data-team="off"] .nodes { opacity: 1; }
.node { position: relative; border: 1px solid rgba(237, 237, 237, .1); background: rgba(255, 255, 255, .015); transition: border-color .35s, background .35s, box-shadow .35s; }
.node .nid { position: absolute; left: 5px; top: 5px; font: 500 8.5px/1 var(--f-mono); letter-spacing: .06em; color: #4d4d53; transition: color .35s; }
.node .ck { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; max-width: 26px; max-height: 26px; fill: none; stroke: var(--volt); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .4s ease-out; }
.node.lit, [data-team="off"][data-phase="settled"] .node { border-color: rgba(212, 255, 0, .5); background: rgba(212, 255, 0, .045); box-shadow: inset 0 0 14px rgba(212, 255, 0, .07); }
.node.lit .nid, [data-team="off"][data-phase="settled"] .node .nid { color: rgba(212, 255, 0, .75); }
.node.done .ck, [data-team="off"][data-phase="settled"] .node .ck { stroke-dashoffset: 0; }
.node.done { animation: hit .6s ease-out; }
@keyframes hit { 0% { background: rgba(212, 255, 0, .55); box-shadow: 0 0 30px rgba(212, 255, 0, .6); } 100% { background: rgba(212, 255, 0, .045); } }
.boot { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(27% + 18px); margin: 0; font: 500 10px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--volt); opacity: 0; transition: opacity .3s; white-space: pre; }
[data-team="off"] .boot { opacity: .8; }

/* Copy */
.copy { position: relative; z-index: 2; margin-top: 10px; }
.kicker { margin: 0 0 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.hl { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; }
.hl .w { display: inline-block; }
.hl-on { display: block; font-size: clamp(31px, 9.6vw, 84px); line-height: 1.02; }
.hl-on em { font-style: normal; color: var(--red); text-shadow: 0 0 34px rgba(255, 59, 47, .35); }
.hl-on em .w { animation: glitch 3.6s steps(1) infinite; }
.hl-on em .w + .w { animation-delay: .08s; }
@keyframes glitch {
  0%, 91%, 100% { transform: none; text-shadow: 0 0 34px rgba(255, 59, 47, .35); }
  92% { transform: translate(-3px, 1px) skewX(-8deg); text-shadow: 3px 0 rgba(237, 237, 237, .55); }
  94% { transform: translate(4px, -1px); text-shadow: -4px 0 rgba(255, 59, 47, .9); }
  96% { transform: translate(-1px, 0); }
}
.hl-off { display: none; font-size: clamp(50px, 15.4vw, 200px); line-height: .9; letter-spacing: -.045em; }
.hl-off .v { text-shadow: 0 0 40px rgba(212, 255, 0, .35); }
[data-team="off"] .hl-on { display: none; }
[data-team="off"] .hl-off { display: block; }
.sub { margin: 14px 0 0; max-width: 36ch; font-size: clamp(16px, 4.3vw, 21px); line-height: 1.4; color: var(--soft); }
.sub-off, .ctas { display: none; }
[data-team="off"] .sub-on { display: none; }
[data-team="off"] .sub-off { display: block; }
[data-team="off"] .ctas { display: flex; }
.ctas { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 599px) {
  [data-team="off"] .stage { min-height: 210px; }
  .ctas .btn { min-height: 46px; padding: 0 12px; font-size: 11px; letter-spacing: .06em; }
  .ctas .btn span { display: none; }
  .c-cal span { font-size: 10px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 0; background: none; font: 600 13px/1 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-volt { background: var(--volt); color: #070707; box-shadow: 0 12px 40px -12px rgba(212, 255, 0, .7); }
.btn-volt:hover { background: #e2ff4d; }
.btn-ghost { border-color: rgba(237, 237, 237, .4); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-line { border-color: rgba(212, 255, 0, .55); color: var(--volt); }
.btn-line:hover { background: var(--volt); color: #070707; }
.btn-xl { min-height: 64px; padding: 0 30px; font-size: 15px; }

/* ---------- THE SWITCH ---------- */
.switch-wrap { position: relative; z-index: 60; margin-top: 22px; }
.switch {
  --h: 96px; --kx: 0%; --ks: 1;
  position: relative; display: grid; grid-template-columns: .74fr 1fr; gap: 10px; width: 100%; max-width: 580px; height: var(--h);
  padding: 10px; border: 0; border-radius: 24px; color: var(--fg); text-align: left;
  background: linear-gradient(180deg, #2c2c31 0%, #17171b 42%, #0d0d0f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .6), 0 0 0 1px #000, 0 2px 0 1px #222226, 0 30px 60px -18px rgba(0, 0, 0, .95), 0 0 70px -20px rgba(255, 59, 47, .35);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: box-shadow .5s;
}
.switch::before {
  content: ""; position: absolute; inset: 7px; border-radius: 18px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #6a6a72 0 1.5px, #1a1a1e 2px 3.2px, transparent 3.6px) 0 0 / 8px 8px no-repeat,
    radial-gradient(circle at 100% 0, #6a6a72 0 1.5px, #1a1a1e 2px 3.2px, transparent 3.6px) 100% 0 / 8px 8px no-repeat,
    radial-gradient(circle at 0 100%, #6a6a72 0 1.5px, #1a1a1e 2px 3.2px, transparent 3.6px) 0 100% / 8px 8px no-repeat,
    radial-gradient(circle at 100% 100%, #6a6a72 0 1.5px, #1a1a1e 2px 3.2px, transparent 3.6px) 100% 100% / 8px 8px no-repeat;
}
.switch:focus-visible { outline: 3px solid var(--ice); outline-offset: 5px; }
.switch[aria-checked="false"] { --kx: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .6), 0 0 0 1px #000, 0 2px 0 1px #222226, 0 30px 60px -18px rgba(0, 0, 0, .95), 0 0 80px -16px rgba(212, 255, 0, .4); }
.switch:active { --ks: .965; }
.sw-plate { display: flex; flex-direction: column; justify-content: center; padding-left: 14px; font: 900 clamp(26px, 8.4vw, 46px)/1 var(--f-display); letter-spacing: .02em; color: #DCDCE0; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255, 255, 255, .14); }
.sw-plate small { display: block; margin-bottom: 6px; font: 500 8.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #6b6b72; text-shadow: none; }
.sw-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; background: linear-gradient(180deg, #030304, #111114); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .95), inset 0 -1px 0 rgba(255, 255, 255, .07), 0 0 0 1px #000; overflow: hidden; }
.sw-lbl { display: flex; align-items: center; justify-content: center; font: 700 clamp(13px, 3.8vw, 18px)/1 var(--f-mono); letter-spacing: .14em; color: #3c3c42; }
.sw-knob {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 9px; padding-left: 22px;
  background: linear-gradient(180deg, #45454c 0%, #28282d 46%, #1b1b1f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .55), 0 8px 16px rgba(0, 0, 0, .8), 0 0 0 1px #000;
  transform: translateX(var(--kx)) scale(var(--ks));
  transition: transform .36s cubic-bezier(.75, -.4, .25, 1.4);
}
.switch[aria-checked="true"] .sw-knob { animation: tease 5.5s ease-in-out 2.4s infinite; }
@keyframes tease { 0%, 84%, 100% { translate: 0 0; } 88% { translate: 9% 0; } 91% { translate: 0 0; } 94% { translate: 5% 0; } 97% { translate: 0 0; } }
.sw-grip { position: absolute; left: 10px; top: 24%; bottom: 24%; width: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .7) 0 2px, rgba(255, 255, 255, .12) 2px 4px); }
.kn { font: 800 clamp(15px, 4.6vw, 22px)/1 var(--f-mono); letter-spacing: .12em; }
.kn-on { color: var(--red); text-shadow: 0 0 12px rgba(255, 59, 47, .8); }
.kn-off { display: none; color: var(--volt); text-shadow: 0 0 12px rgba(212, 255, 0, .8); }
.switch[aria-checked="false"] .kn-on { display: none; }
.switch[aria-checked="false"] .kn-off { display: inline; }
.sw-led { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px 2px rgba(255, 59, 47, .8); }
.switch[aria-checked="false"] .sw-led { background: var(--volt); box-shadow: 0 0 12px 3px rgba(212, 255, 0, .8); }
.sw-hint { margin: 10px 0 0; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.switch.locked .sw-knob { animation: nope .3s; }
@keyframes nope { 25% { translate: -3% 0; } 75% { translate: 3% 0; } }

/* Blackout + CRT */
.blackout { position: fixed; inset: 0; z-index: 50; background: #000; opacity: 0; pointer-events: none; transition: opacity .12s linear; }
[data-phase="blackout"] .blackout { opacity: 1; }
[data-phase="boot"] .blackout { opacity: 0; transition: opacity .55s ease-out; }
.crt-line { position: absolute; inset: 0; background: #fff; opacity: 0; transform-origin: 50% 50%; box-shadow: 0 0 40px 10px rgba(255, 255, 255, .6); }
.glitch-flash { position: fixed; inset: 0; z-index: 55; pointer-events: none; background: rgba(255, 59, 47, .22); mix-blend-mode: screen; }

/* Reveal of B headline during the sequence */
[data-phase="blackout"] .copy, [data-phase="boot"] .copy { opacity: 0; }
[data-phase="reveal"] .hl-off .w { animation: slamIn .55s cubic-bezier(.2, .9, .15, 1) both; }
[data-phase="reveal"] .hl-off .w:nth-child(2) { animation-delay: .09s; }
[data-phase="reveal"] .hl-off .w:nth-child(4) { animation-delay: .2s; }
[data-phase="reveal"] .hl-off .w:nth-child(5) { animation-delay: .28s; }
[data-phase="reveal"] .sub-off, [data-phase="reveal"] .ctas, [data-phase="reveal"] .kicker { animation: fadeUp .5s .35s both; }
@keyframes slamIn { 0% { opacity: 0; transform: scale(1.7) translateY(-6%); filter: blur(12px); } 60% { opacity: 1; transform: scale(.97); filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Sections ---------- */
.sec { position: relative; padding: clamp(80px, 13vw, 170px) var(--pad-r) clamp(80px, 13vw, 170px) var(--pad-l); border-top: 1px solid var(--line); }
.label { margin: 0 0 22px; font: 500 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--volt); }
.h2 { margin: 0; font: 800 clamp(38px, 10.6vw, 148px)/.95 var(--f-display); letter-spacing: -.045em; }
.h2 > span { display: block; }
.h2-sm { font-size: clamp(28px, 6.6vw, 84px); line-height: 1.02; max-width: 16ch; }
.lead { margin: 0; max-width: 46ch; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.45; color: var(--soft); }

/* Candidates */
.cands-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; margin-top: 30px; }
.cands-nav { display: flex; align-items: center; gap: 8px; }
.cands-count { margin-right: 10px; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; color: var(--mute); }
.cands-count b { color: var(--volt); font-weight: 600; }
.navbtn { width: 48px; height: 48px; border: 1px solid var(--line); background: transparent; font: 500 20px/1 var(--f-mono); color: var(--fg); }
.navbtn:hover { border-color: var(--volt); color: var(--volt); }
.cv-track { list-style: none; display: flex; gap: 14px; margin: 34px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cv-track:focus-visible { outline-offset: -3px; }
.cv { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; }
.cv-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #0d0d10 0%, #070708 100%); }
.cv-in::before, .cv-in::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--volt); pointer-events: none; }
.cv-in::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.cv-in::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.cv-top { display: flex; justify-content: space-between; gap: 10px; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.cv-status { display: inline-flex; align-items: center; gap: 6px; color: var(--volt); }
.cv-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 8px var(--volt); animation: blink 1.4s steps(1) infinite; }
.cv-id { display: flex; align-items: center; gap: 14px; }
.sigil { flex: none; width: 62px; height: 62px; color: var(--volt); }
.sigil svg { width: 100%; height: 100%; }
.sigil.sm { width: 44px; height: 44px; }
.cv-name { margin: 0; font: 800 clamp(34px, 9.4vw, 46px)/1 var(--f-display); letter-spacing: -.02em; }
.cv-role { margin: 6px 0 0; font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.cv-quote { margin: 0; font: 500 19px/1.3 var(--f-text); color: var(--volt); }
.cv-facts { margin: 0; border-top: 1px solid var(--line); }
.cv-facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cv-facts dt { font: 500 10.5px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cv-facts dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg); }
.cv-cta { margin-top: auto; width: 100%; }

/* Process */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; }
.step { position: relative; padding: 26px 0 30px 62px; border-top: 1px solid var(--line); }
.step-no { position: absolute; left: 0; top: 24px; font: 800 26px/1 var(--f-display); color: var(--volt); letter-spacing: -.03em; }
.step h3 { margin: 0 0 10px; font: 700 clamp(22px, 5.8vw, 30px)/1.1 var(--f-display); letter-spacing: -.02em; }
.step p { margin: 0; max-width: 40ch; color: var(--soft); }
.step .step-was { margin-top: 16px; font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.step-was s { color: #8b8b92; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.step-was span { color: var(--volt); }

/* Manifesto */
.sec-manifesto { overflow: hidden; padding-bottom: clamp(90px, 14vw, 180px); }
.wall { list-style: none; margin: 10px 0 0; padding: 0; }
.wall li { display: block; font: 900 44px/.98 var(--f-display); letter-spacing: -.05em; white-space: nowrap; transform-origin: 0 50%; }
.wall li.r { text-align: right; transform-origin: 100% 50%; }
.wall .no { color: var(--red); }
.wall li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.wall li:nth-child(even) .no { -webkit-text-stroke: 1.5px var(--red); }
.punch { margin: clamp(60px, 10vw, 130px) 0 0; font: 800 clamp(40px, 11vw, 150px)/.95 var(--f-display); letter-spacing: -.045em; transform-origin: 0 50%; }
.split { display: grid; gap: 10px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: clamp(18px, 4.8vw, 30px); line-height: 1.3; color: var(--soft); }
.split b { color: var(--fg); font-weight: 600; }
.split b.v { color: var(--volt); }

/* Simulation */
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sim { display: flex; flex-direction: column; gap: 10px; padding: 20px 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sim-n { font: 700 clamp(40px, 11vw, 112px)/1 var(--f-mono); letter-spacing: -.04em; color: var(--volt); font-variant-numeric: tabular-nums; }
.sim-k { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.sim-note { margin: 20px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.tag { display: inline-block; margin-right: 8px; padding: 4px 7px; border: 1px solid var(--ice); color: var(--ice); font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; }

/* Final */
.sec-final { padding-bottom: clamp(90px, 12vw, 150px); }
.h-final { margin: 0; font: 900 44px/.92 var(--f-display); letter-spacing: -.05em; }
.h-final .fit { display: block; white-space: nowrap; }
.h-final .v { text-shadow: 0 0 60px rgba(212, 255, 0, .35); }
.final-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 40px; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; padding: 26px var(--pad-r) calc(30px + env(safe-area-inset-bottom)) var(--pad-l); border-top: 1px solid var(--line); font: 500 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.foot p { margin: 0; }
.foot b { color: var(--fg); font-weight: 600; }

/* ---------- Modals ---------- */
.modal { padding: 0; margin: auto; width: min(620px, calc(100vw - 16px)); max-height: min(760px, calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-height: min(760px, calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); border: 1px solid rgba(212, 255, 0, .4); border-radius: 0; background: #09090b; color: var(--fg); box-shadow: 0 40px 120px rgba(0, 0, 0, .85), 0 0 0 1px #000, 0 0 60px -20px rgba(212, 255, 0, .35); overflow: hidden; }
.modal::backdrop { background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modalIn .28s cubic-bezier(.2, .9, .2, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-in { display: flex; flex-direction: column; max-height: inherit; }
.modal-head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--line); }
.modal-title { flex: 1; min-width: 0; }
.modal-kicker { margin: 0 0 6px; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--volt); }
.modal h2 { margin: 0; font: 800 26px/1 var(--f-display); letter-spacing: -.02em; }
.modal-sub { margin: 6px 0 0; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.x { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; font: 400 26px/1 var(--f-text); color: var(--fg); }
.x:hover { border-color: var(--fg); }
.chat { flex: 1 1 auto; min-height: 240px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 11px 14px 12px; font-size: 15.5px; line-height: 1.45; }
.msg .who { display: block; margin-bottom: 6px; font: 500 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.msg.you { align-self: flex-end; background: #19191d; border: 1px solid #2b2b31; }
.msg.si { align-self: flex-start; background: rgba(212, 255, 0, .06); border: 1px solid rgba(212, 255, 0, .32); }
.msg.si .who { color: var(--volt); }
.msg.sys { align-self: center; max-width: 100%; padding: 0; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: center; }
.msg.typing .tw::after { content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--volt); animation: blink .8s steps(1) infinite; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--volt); animation: blink 1s steps(1) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
.chat-foot { display: grid; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: #070708; }
.qs { display: flex; flex-wrap: wrap; gap: 8px; }
.qs:empty { display: none; }
.q { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(237, 237, 237, .3); background: transparent; font: 500 14px/1.2 var(--f-text); color: var(--fg); text-align: left; }
.q:hover { border-color: var(--volt); color: var(--volt); }
.q[aria-disabled="true"] { opacity: .4; cursor: default; }
.q[data-used="1"] { text-decoration: line-through; text-decoration-color: rgba(237, 237, 237, .4); }

/* Offer letter */
.letter { padding: 20px 18px 18px; overflow-y: auto; font-size: 17px; line-height: 1.95; color: var(--soft); }
.letter p { margin: 0 0 12px; }
.letter input, .letter select { max-width: 100%; min-height: 38px; margin: 2px; padding: 4px 6px 3px; vertical-align: middle; border: 0; border-bottom: 1.5px dashed var(--volt); border-radius: 0; background: rgba(212, 255, 0, .06); color: var(--volt); font: 600 16px/1.5 var(--f-text); }
.letter select { -webkit-appearance: none; appearance: none; padding-right: 18px; background-image: linear-gradient(45deg, transparent 50%, var(--volt) 50%), linear-gradient(-45deg, transparent 50%, var(--volt) 50%); background-size: 5px 5px; background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-repeat: no-repeat; }
.letter select option { background: #111; color: var(--fg); }
.letter input::placeholder { color: rgba(212, 255, 0, .45); }
.letter input:focus-visible, .letter select:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.sign { position: relative; margin: 18px 0 8px; padding-top: 58px; }
.sig { position: absolute; left: 0; top: 0; width: 220px; height: 60px; fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sign-line { display: block; padding-top: 8px; border-top: 1px solid rgba(237, 237, 237, .35); font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.stamp { position: absolute; right: 4px; top: 4px; padding: 6px 10px; border: 3px solid var(--volt); color: var(--volt); font: 900 20px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: rotate(-12deg) scale(2.2); }
.letter.signed .sig path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease-in-out; }
.letter.signed .stamp { animation: stamp .38s 1.15s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.letter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.fineprint { margin: 0; flex: 1 1 220px; font: 500 11px/1.5 var(--f-mono); letter-spacing: .04em; color: var(--mute); }
.result { margin: 14px 0 0; min-height: 1px; font: 500 14px/1.5 var(--f-mono); color: var(--volt); }
.result:empty { margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Scroll reveal (only with JS) ---------- */
.js [data-reveal]:not(.slam) { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal].in:not(.slam) { opacity: 1; transform: none; }
.js .slam { opacity: 0; }
.js .slam.in { animation: slam .62s cubic-bezier(.2, .85, .15, 1) both; }
@keyframes slam {
  0% { opacity: 0; transform: scale(1.55) translateY(-8%); filter: blur(10px); }
  55% { opacity: 1; transform: scale(.975); filter: blur(0); }
  72% { transform: scale(1.008) translateX(-4px); }
  86% { transform: translateX(3px); }
  100% { opacity: 1; transform: none; }
}
.js .steps .step { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .steps.in .step { opacity: 1; transform: none; }
.js .steps.in .step:nth-child(2) { transition-delay: .12s; }
.js .steps.in .step:nth-child(3) { transition-delay: .24s; }
.js .steps.in .step:nth-child(4) { transition-delay: .36s; }
.js .steps[data-reveal] { opacity: 1; transform: none; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 600px) {
  .top-status { display: block; }
  .hud-meet { display: flex; }
}
@media (min-width: 900px) {
  :root { --top: 64px; }
  .top { gap: 26px; }
  .wm { font-size: 17px; }
  .top-status { margin-right: auto; }
  .wordmark { margin-right: 0; }
  .top-nav { display: flex; }
  .m-hide { display: block; }
  .chip { left: var(--X, 0); top: var(--Y, 0); }
  .chip-in { font-size: 12.5px; }
  .c-inbox b { font-size: 46px; }
  .c-clock b { font-size: 52px; }
  .c-ping .chip-in { font-size: 16px; }

  .hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(220px, 1fr) auto auto; column-gap: 24px; padding-bottom: 0; }
  .stage { grid-column: 1 / -1; grid-row: 1 / 3; margin: 0 calc(-1 * var(--pad)); min-height: 0; }
  [data-team="off"] .stage { grid-row: 1 / 2; }
  .copy { grid-column: 1 / 8; grid-row: 2; align-self: end; margin: 0 0 34px; }
  .switch-wrap { grid-column: 8 / 13; grid-row: 2; align-self: end; justify-self: end; width: 100%; max-width: 560px; margin: 0 0 34px; }
  .hud { grid-column: 1 / -1; grid-row: 3; border-bottom: 0; border-top: 1px solid var(--line); font-size: 10px; }
  .hud-cell { padding: 12px 18px; }
  .hud .v { font-size: 16px; }
  .hud-status .v { font-size: 13px; }

  .hl-on { font-size: clamp(44px, 5.4vw, 96px); line-height: 1; }
  .hl-off { font-size: clamp(72px, 7.4vw, 150px); }
  .sub { max-width: 40ch; }
  .switch { --h: 148px; padding: 14px; border-radius: 30px; gap: 14px; }
  .switch::before { inset: 9px; border-radius: 22px; }
  .sw-plate { padding-left: 22px; font-size: 50px; }
  .sw-plate small { font-size: 10px; margin-bottom: 10px; }
  .sw-track { border-radius: 20px; }
  .sw-knob { top: 7px; bottom: 7px; left: 7px; width: calc(50% - 7px); border-radius: 15px; }
  .sw-grip { left: 14px; width: 16px; }
  .sw-knob { padding-left: 30px; }
  .kn { font-size: 24px; }
  .sw-lbl { font-size: 19px; }

  .glyph-slot { left: 54%; right: 3%; top: 9%; height: 84%; }
  .nodes { left: var(--pad); right: auto; width: 42%; top: 22%; bottom: auto; height: 68%; gap: 8px; }
  .node .nid { font-size: 9.5px; left: 7px; top: 7px; }
  .boot { left: var(--pad); right: auto; bottom: auto; top: calc(22% - 28px); font-size: 11px; }
  .cv-facts > div { grid-template-columns: 118px 1fr; }
  .sec-cands .h2 { font-size: clamp(38px, 8.2vw, 132px); }

  .cv { flex-basis: 380px; }
  .cv-in { padding: 24px 22px 22px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 80px; border-top: 1px solid var(--line); }
  .step { padding: 92px 28px 0 0; border-top: 0; }
  .step::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--volt); box-shadow: 0 0 12px var(--volt); }
  .step-no { top: 26px; font-size: 44px; }
  .split { grid-template-columns: 1fr 1fr; gap: 30px; }
  .split span + span { padding-left: 30px; border-left: 1px solid var(--line); }
  .sim-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sim { padding: 28px 22px 24px; }
  .sim-n { font-size: clamp(48px, 5.6vw, 96px); }
  .letter { padding: 26px 28px 24px; }
  .modal-head { padding: 18px 18px 16px 26px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hl-off { font-size: min(6.6vw, 12vh); }
  .hl-on { font-size: clamp(40px, 4.6vw, 80px); }
  .switch { --h: 124px; }
}
@media (min-width: 1500px) {
  .copy { grid-column: 1 / 8; }
}

/* ---------- Reduced motion: static states, fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none; }
  .chip-in, .chip.pop .chip-in, .hl-on em .w, .switch[aria-checked="true"] .sw-knob, .c-clock .colon, .hud .dot, .cv-status i, .msg.typing .tw::after, .dots i { animation: none !important; }
  .sw-knob { transition: transform .15s linear; }
  .js .slam.in, [data-phase="reveal"] .hl-off .w, [data-phase="reveal"] .sub-off, [data-phase="reveal"] .ctas, [data-phase="reveal"] .kicker { animation: fadeOnly .4s ease-out both !important; }
  .js [data-reveal]:not(.slam), .js .steps .step { transform: none !important; }
  .node.done { animation: none; }
  .modal[open] { animation: fadeOnly .2s ease-out; }
  .letter.signed .sig path { transition: none; }
  .letter.signed .stamp { animation: fadeOnly .3s ease-out both; transform: rotate(-12deg); }
}
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }