/* ---- @font-face declarations ---- */
@font-face {
  font-family:"Mattoe Labs Original";
  src:url("../assets/fonts/Test-4-New-Original-Regular.2aae6ca4ad.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  /* The font's hhea (820/-220, used by iOS/CoreText) and OS/2 win metrics (682/0,
     used by Windows) disagree, so glyphs sat ~0.14em lower on iPhone and the
     em-tuned logo flares slid off the letters. Pin every engine to the Windows
     metrics the flare offsets were tuned against. */
  ascent-override:68.2%;
  descent-override:0%;
  line-gap-override:0%;
}
@font-face {
  font-family:"Mattoe Labs O Edge";
  src:url("../assets/fonts/Test-8-3x-Edge-Clean-Strong-Regular.aee591bbfd.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  ascent-override:68.2%;
  descent-override:0%;
  line-gap-override:0%;
}
/* ---- Design tokens (custom properties) ---- */
:root {
  /* Pure black (was #000b02, a green-tinted black). The page background is hidden
     behind the canvas on desktop, but on iOS the overscroll/rubber-band region and
     collapsing URL bar expose it at the bottom — the green tint read as a glow there. */
  --bg: #000000;
  --ink: #f1fff4;
  --muted: rgba(205,245,216,.8);
  --dim: rgba(116,230,158,.56);
  --acid: #00ff37;
  --cyan: #48f7ff;
  --gold: #ffe972;
  --danger: #ff4d6d;
  --glass: rgba(16, 32, 28, .62);
  --liquid-glass: linear-gradient(145deg, rgba(255,255,255,.16), rgba(91,128,114,.16) 24%, rgba(16,38,33,.7) 58%, rgba(3,17,16,.74));
  --liquid-rim: linear-gradient(135deg, rgba(255,255,255,.62), rgba(198,255,229,.2) 20%, rgba(72,247,255,.22) 46%, rgba(255,77,109,.1) 64%, rgba(255,233,114,.13) 82%, rgba(255,255,255,.24));
  --liquid-shine: rgba(244,255,247,.14);
  --liquid-shadow: 0 34px 100px rgba(0,0,0,.56), 0 0 42px rgba(72,247,255,.055), 1px 0 0 rgba(72,247,255,.1), -1px 0 0 rgba(255,77,109,.055), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(244,255,247,.07), inset 18px 0 26px rgba(72,247,255,.035), inset -18px 0 26px rgba(255,77,109,.025);
  --line: rgba(72,247,255,.24);
  --line-strong: rgba(72,247,255,.68);
  --line-acid: rgba(0,255,55,.34);
  --line-gold: rgba(255,233,114,.54);
  --theme-signal-rgb: 0,255,55;
  --theme-canvas-filter: hue-rotate(0deg);
  --shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  --readability-shadow: 0 2px 6px rgba(0,0,0,.96), 0 0 18px rgba(0,0,0,.88), 0 0 34px rgba(0,0,0,.72);
  --win-face: #c0c0c0;
  --win-hi: #ffffff;
  --win-soft: #dfdfdf;
  --win-mid: #808080;
  --win-dark: #404040;
  --win-black: #0a0a0a;
  --win-title: #003b16;
  --win-title-hot: #00782d;
  --quiet-radius: 10px;
  --quiet-radius-lg: 16px;
  /* Premium default: film, not arcade — effects support content instead of competing */
  --crt-glass-opacity: .52;
  --crt-vignette-alpha: .28;
  --crt-edge-alpha: .38;
  --crt-reflection-alpha: .04;
  --crt-phosphor-alpha: .028;
  --crt-danger-alpha: 0;
  --crt-mask-alpha: 0;
  --elev-0: none;
  --elev-1: 0 12px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  --elev-2: 0 22px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
  --elev-3: 0 30px 80px rgba(0,0,0,.48), 0 0 28px rgba(0,255,55,.06), inset 0 1px 0 rgba(255,255,255,.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --mono: "IBM Plex Mono", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --display: "Orbitron", "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", "Arial Black", sans-serif;
  --logo-display: "Mattoe Labs Original", var(--display);
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading: "Space Grotesk", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
/* ---- Theme variants (data-site-theme) — phosphor green band only ---- */
body[data-site-theme="mint"] {
  --acid:#3dff7a;
  --line:rgba(61,255,122,.26);
  --line-strong:rgba(61,255,122,.72);
  --line-acid:rgba(61,255,122,.4);
  --theme-signal-rgb:61,255,122;
  --theme-canvas-filter:hue-rotate(16deg) saturate(1.05);
}
body[data-site-theme="forest"] {
  --acid:#2fd65a;
  --line:rgba(47,214,90,.26);
  --line-strong:rgba(47,214,90,.72);
  --line-acid:rgba(47,214,90,.4);
  --theme-signal-rgb:47,214,90;
  --theme-canvas-filter:hue-rotate(-14deg) saturate(1.05);
}
/* ---- Base reset & document defaults ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; scroll-padding-top:92px; overflow-x: clip; background: var(--bg); color: var(--ink); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin: 0; min-height: 100vh; font-family: var(--sans); overflow-x: hidden; background: radial-gradient(circle at 88% 18%, rgba(var(--theme-signal-rgb),.08), transparent 24%), radial-gradient(circle at 14% 86%, rgba(var(--theme-signal-rgb),.045), transparent 28%), #000; }
body::before,
body::after {
  content:"";
  display:none;
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:3;
}
body::before {
  background:rgba(0,0,0,.16);
}
/* body::after previously painted a full-viewport green corner glow (enabled
   only on mobile). Removed per request — no green wash on any version. */
a { color: inherit; }
button, input, textarea { font: inherit; }
.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-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--acid); color: #001604; padding: 10px 14px; border-radius: 4px; }
.skip-link:focus { top: 12px; }
/* ── Accessibility audit fixes (WCAG 2.1 / 2.2 AA) ───────────────── */
/* #2 Focus appearance (2.4.11): a guaranteed high-contrast focus ring on
   every keyboard-focused control, overriding component-level outline:none. */
:focus-visible {
  outline:2px solid var(--cyan) !important;
  outline-offset:2px !important;
}
/* #5 Text over the animated ASCII field (1.4.3): reinforce hero + scroll
   legibility so bright glyphs drifting behind never drop contrast. */
.hero-copy .eyebrow,
.hero-titleline,
.lede { text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 16px rgba(0,0,0,.55); }
/* ---- Canvas layers (bg, feedback, signature, fx, ufo) ---- */
.bg-canvas, .feedback-field-canvas, .signature-field-canvas, .fx-canvas, .ufo-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }
.bg-canvas { z-index: 0; background:#000; image-rendering: auto; } /* auto (smooth) for photo bg; fx/ufo use pixelated for retro VFX */
.feedback-field-canvas {
  z-index: 1;
  opacity: .48;
  mix-blend-mode: screen;
  filter: saturate(1.1) contrast(1.04) blur(.2px);
  transition: opacity .3s ease;
}
/* Calm sections: let content breathe — quieter environment past the hero */
body[data-active-section="systems"] .feedback-field-canvas,
body[data-active-section="method"] .feedback-field-canvas,
body[data-active-section="videos"] .feedback-field-canvas,
body[data-active-section="contact"] .feedback-field-canvas {
  opacity: .28;
}
body[data-active-section="work"] .feedback-field-canvas {
  opacity: .4;
}
.signature-field-canvas {
  z-index: 2;
  opacity: .9;
  mix-blend-mode: screen;
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 18px rgba(0,255,55,.22));
  transition: opacity .3s ease;
}
.fx-canvas { z-index: 3; image-rendering: pixelated; }
.ufo-canvas { z-index: 90; image-rendering: pixelated; }
body.black-hole-active .fx-canvas { z-index: 30; }
body.black-hole-active .feedback-field-canvas { opacity: 0; }
body.black-hole-active .signature-field-canvas { opacity: 0; }
body.black-hole-active .liquid-glass-refraction { opacity: 0; }
body[data-signature-renderer="fallback-static"] .signature-field-canvas { display:none; }
body[data-feedback-renderer="fallback-static"] .feedback-field-canvas { display:none; }
/* ---- CRT shell, grain, scanlines, glass overlays ---- */
.crt-shell { position: relative; z-index: 4; min-height: 100vh; transform-origin: 50% 50%; } /* transform-origin pivot for crush/reboot scale anims */
.grain, .scanlines { pointer-events:none; position: fixed; inset:0; }
.grain { z-index:5; opacity:.08; background-image: radial-gradient(rgba(var(--theme-signal-rgb),.82) .6px, transparent .7px); background-size: 3px 3px; mix-blend-mode: screen; }
.scanlines { z-index:5; opacity:.1; background: repeating-linear-gradient(to bottom, rgba(var(--theme-signal-rgb),.13) 0 1px, transparent 1px 4px); }
/* ---- CRT aperture-grille phosphor mask ----
   Fine vertical RGB phosphor stripes (a "Trinitron" aperture grille) plus a second,
   slightly-wider grille. As the two slowly drift against each other (and the horizontal
   scanlines) a faint moiré *beat* emerges and travels — the live shimmer of a real tube,
   not a static texture that reads as a scaling bug. Kept very low-alpha so it never
   muddies the ASCII/text; the drift is disabled under prefers-reduced-motion. */
.crt-grille {
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:5;
  opacity:.28;
  mix-blend-mode:screen;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,46,46,.06) 0 1px,
      rgba(46,255,104,.065) 1px 2px,
      rgba(64,96,255,.06) 2px 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 3.5px);
  background-size:3px 100%, 3.5px 100%;
  animation:crtGrilleDrift 14s linear infinite;
  will-change:background-position;
}
@keyframes crtGrilleDrift {
  from { background-position:0 0, 0 0; }
  to   { background-position:3px 0, -3.5px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-grille { animation:none; }
}
.bg-canvas { filter:var(--theme-canvas-filter); } /* theme hue-rotate applied to background layer only, not UI */
.crt-glass-layer { /* vignette + reflection + phosphor + danger-edge composite; CSS-only CRT tube overlay */
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:29;
  overflow:hidden;
  opacity:var(--crt-glass-opacity);
  background:
    radial-gradient(ellipse 126% 96% at 50% 48%, transparent 0 42%, rgba(0,0,0,.1) 64%, rgba(0,0,0,var(--crt-vignette-alpha)) 100%),
    radial-gradient(ellipse 72% 42% at 24% 12%, rgba(244,255,247,var(--crt-reflection-alpha)) 0 12%, transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(0,255,55,var(--crt-phosphor-alpha)) 0, transparent 62%),
    linear-gradient(90deg, rgba(255,77,109,var(--crt-danger-alpha)), transparent 18% 82%, rgb(72 247 255 / calc(var(--crt-danger-alpha) * .62)));
  box-shadow:
    inset 0 0 42px rgba(0,0,0,var(--crt-edge-alpha)),
    inset 0 0 132px rgb(0 0 0 / calc(var(--crt-edge-alpha) * .68)),
    inset 0 0 24px rgba(244,255,247,.04);
}
.crt-glass-layer::before,
.crt-glass-layer::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
}
.crt-glass-layer::before {
  inset:-8%; /* overscan — glow extends past viewport to simulate CRT bezel refraction */
  background:
    radial-gradient(ellipse 62% 34% at 28% 16%, rgba(255,255,255,.1), transparent 58%),
    radial-gradient(ellipse 90% 20% at 50% -8%, rgba(255,255,255,.075), transparent 72%),
    linear-gradient(132deg, transparent 0 16%, rgba(255,255,255,.035) 28%, transparent 43%);
  mix-blend-mode:screen;
  transform:rotate(-2deg);
}
.crt-glass-layer::after {
  display:none;
}
/* ---- Liquid glass panels ([data-glass]) ---- */
/* Liquid DOM-inspired CSS shell; progressive WebGPU refraction when body.liquid-glass-webgpu. */
[data-glass] {
  position:relative;
  isolation:isolate; /* contain pseudo-element stack (::before/::after rim + shine) within each panel */
  overflow:hidden;
  background-color:rgba(12,28,24,.68);
  background:
    radial-gradient(ellipse 90% 58% at 18% 0%, rgba(255,255,255,.16), transparent 48%),
    radial-gradient(ellipse 64% 46% at 92% 14%, rgba(72,247,255,.075), transparent 58%),
    radial-gradient(ellipse 70% 60% at 48% 112%, rgba(0,255,55,.045), transparent 62%),
    var(--liquid-glass);
  border:1px solid rgba(218,255,235,.22);
  border-top-color:rgba(255,255,255,.38);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(36px) saturate(1.42) brightness(1.08) contrast(1.02); /* heavy blur = deepest glass depth; WebGPU variant reduces to 22px */
  -webkit-backdrop-filter: blur(36px) saturate(1.42) brightness(1.08) contrast(1.02);
}
[data-glass] > * { position:relative; z-index:1; }
[data-glass] > .liquid-glass-refraction {
  position:absolute;
  inset:calc(var(--liquid-pad, 22px) * -1);
  z-index:0 !important;
  width:calc(100% + (var(--liquid-pad, 22px) * 2));
  height:calc(100% + (var(--liquid-pad, 22px) * 2));
  pointer-events:none;
  border-radius:inherit;
  opacity:.96;
  mix-blend-mode:normal;
}
/* WebGPU primary class; liquid-glass-webgl kept as legacy alias for the same shell. */
body.liquid-glass-webgpu [data-glass],
body.liquid-glass-webgl [data-glass] {
  --liquid-rim:linear-gradient(135deg, rgba(255,255,255,.72), rgba(232,255,242,.2) 28%, rgba(255,255,255,.18) 52%, rgba(204,254,217,.14) 72%, rgba(255,255,255,.3));
  border-radius:var(--liquid-corner-radius, 30px);
  background:
    radial-gradient(ellipse 80% 50% at 18% 0%, rgba(255,255,255,.12), transparent 52%),
    linear-gradient(145deg, rgba(238,255,246,.10), rgba(10,28,24,.30) 44%, rgba(4,18,15,.42));
  background-color:rgba(12,28,24,.42);
  backdrop-filter:blur(22px) saturate(1.35) brightness(1.06) contrast(1.02);
  -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(1.06) contrast(1.02);
}
/* let the frosted fill read through the WebGPU refraction sheen */
body.liquid-glass-webgpu [data-glass] > .liquid-glass-refraction,
body.liquid-glass-webgl [data-glass] > .liquid-glass-refraction { opacity:.6; }
body.liquid-glass-webgpu [data-glass] > :not(.liquid-glass-refraction),
body.liquid-glass-webgl [data-glass] > :not(.liquid-glass-refraction) { position:relative; z-index:2; }
body.liquid-glass-webgpu [data-glass]::before,
body.liquid-glass-webgl [data-glass]::before { z-index:1; opacity:.35; }
body.liquid-glass-webgpu [data-glass]::after,
body.liquid-glass-webgl [data-glass]::after { z-index:1; opacity:.15; }
body.liquid-glass-webgpu [data-glass]:hover::after,
body.liquid-glass-webgpu [data-glass]:focus-within::after,
body.liquid-glass-webgl [data-glass]:hover::after,
body.liquid-glass-webgl [data-glass]:focus-within::after { opacity:.22; }
/* Border-only gradient via padding + -webkit-mask-composite:xor */
[data-glass]::before {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  padding:1px;
  background:var(--liquid-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.76;
}
[data-glass]::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 88% 38% at 20% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(ellipse 38% 70% at 100% 12%, rgba(72,247,255,.075), transparent 64%),
    radial-gradient(ellipse 34% 80% at 0% 88%, rgba(255,77,109,.035), transparent 68%),
    linear-gradient(128deg, rgba(255,255,255,.08), transparent 24% 70%, rgba(255,255,255,.035));
  mix-blend-mode:screen;
  opacity:.5;
  transform:translate3d(var(--liquid-x,0), var(--liquid-y,0), 0); /* light-shift position set via JS from pointer coords */
  transition:transform .36s ease, opacity .24s ease;
}
[data-glass]:hover::after,
[data-glass]:focus-within::after { --liquid-x: 1.5%; --liquid-y: -1%; opacity:.66; }
[data-glass]:hover { border-color: rgba(218,255,235,.34); box-shadow: var(--liquid-shadow), 0 0 34px rgba(72,247,255,.085); }
/* ---- Topbar ---- */
.topbar[data-glass] {
  position: fixed;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 20;
  display:grid;
  grid-template-columns:1fr; /* single column — brand/nav fill via grid-column:1 / -1 */
  gap:4px 6px;
  padding: 5px;
  border:1px solid rgba(218,255,235,.2);
  border-top-color:rgba(255,255,255,.36);
  border-radius:4px;
  background:
    radial-gradient(ellipse 72% 90% at 16% 0, rgba(255,255,255,.13), transparent 58%),
    radial-gradient(ellipse 34% 80% at 88% 18%, rgba(72,247,255,.075), transparent 62%),
    linear-gradient(145deg, rgba(30,62,54,.64), rgba(8,26,23,.72) 58%, rgba(1,13,12,.72));
  box-shadow:
    0 20px 64px rgba(0,0,0,.46),
    1px 0 0 rgba(72,247,255,.08),
    -1px 0 0 rgba(255,77,109,.04),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(244,255,247,.06);
  backdrop-filter:blur(28px) saturate(1.32) brightness(1.06) contrast(1.02);
  -webkit-backdrop-filter:blur(28px) saturate(1.32) brightness(1.06) contrast(1.02);
}
.topbar[data-glass]::before { display:block; opacity:.6; }
.topbar[data-glass]::after { display:block; opacity:.34; }
.topbar[data-glass]:hover { border-color:rgba(218,255,235,.32); border-top-color:rgba(255,255,255,.48); box-shadow:0 20px 64px rgba(0,0,0,.48), 1px 0 0 rgba(72,247,255,.11), -1px 0 0 rgba(255,77,109,.05), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(244,255,247,.08), 0 0 28px rgba(72,247,255,.08); }
body.liquid-glass-webgpu .topbar[data-glass],
body.liquid-glass-webgl .topbar[data-glass] { border-radius:4px; }
/* ---- Brand (logo mark + title) ---- */
.brand {
  grid-column:1 / -1;
  min-width:0;
  min-height:25px;
  display:flex;
  gap:7px;
  align-items:center;
  padding:3px 6px 3px 4px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg, #00140f 0%, #003836 42%, #0a5f54 70%, #00120f 100%); /* deep teal = terminal title bar */
  border:1px solid #001705;
  box-shadow:inset 1px 1px rgba(255,255,255,.32), inset -1px -1px rgba(0,0,0,.66), 0 0 16px rgba(72,247,255,.08);
}
/* (Removed the decorative "_ [] X" window chrome: it read as clickable controls
   sitting next to the real nav and did nothing.) */
.brand-copy { min-width:0; display:flex; align-items:baseline; gap:9px; color:inherit; text-decoration:none; }
.brand-mark {
  position:relative;
  isolation:isolate;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid;
  border-color:var(--win-hi) var(--win-dark) var(--win-dark) var(--win-hi); /* Win95 raised bevel: light top/left, dark bottom/right */
  color:var(--acid);
  background:#001506;
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  border-radius:0;
  box-shadow:inset 1px 1px rgba(255,255,255,.32), inset -1px -1px rgba(0,0,0,.84), 0 0 10px rgba(72,247,255,.08);
  cursor:pointer;
  user-select:none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}
.brand-mark-shader {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}
.brand-mark-shader.paper-logo-ready.is-hot,
.brand-mark:hover .brand-mark-shader.paper-logo-ready,
.brand-mark:focus-visible .brand-mark-shader.paper-logo-ready,
body.code-red-active .brand-mark-shader.paper-logo-ready,
body.code-red-warning .brand-mark-shader.paper-logo-ready {
  opacity:1;
}
.brand-mark-shader[data-paper-shader] canvas {
  z-index:0;
  pointer-events:none;
}
.brand-mark-label {
  position:relative;
  z-index:1;
}
.brand-mark:hover, .brand-mark:focus-visible { transform:none; border-color:var(--win-hi) var(--cyan) var(--cyan) var(--win-hi); box-shadow:inset 1px 1px rgba(255,255,255,.26), inset -1px -1px rgba(0,0,0,.82), 0 0 14px rgba(72,247,255,.22); outline:1px dotted #fff; outline-offset:1px; }
body.gravity-released .brand-mark { color:#001604; background:linear-gradient(135deg, #00ff37, #caffd1); box-shadow:0 0 36px rgba(0,255,55,.52); }
body.code-red-warning .brand-mark { color:var(--danger); border-color:var(--danger); animation: codeRedMarkPulse .42s steps(2) infinite; box-shadow:0 0 46px rgba(255,77,109,.42), inset 0 0 18px rgba(255,77,109,.12); }
body.code-red-warning #modeTxt { color:var(--danger); text-shadow:0 0 16px rgba(255,77,109,.55); }
body.black-hole-active { --crt-glass-opacity:.86; --crt-vignette-alpha:.5; --crt-edge-alpha:.68; --crt-reflection-alpha:.055; --crt-phosphor-alpha:.075; --crt-mask-alpha:.1; }
body.black-hole-active .scanlines { opacity:.42; animation: scanlinePanic .18s steps(2) infinite; }
body.black-hole-active .grain { opacity:.26; }
body.code-red-warning { --crt-danger-alpha:.055; --crt-reflection-alpha:.045; }
body.code-red-active { --crt-glass-opacity:.9; --crt-vignette-alpha:.56; --crt-edge-alpha:.76; --crt-reflection-alpha:.035; --crt-phosphor-alpha:.035; --crt-danger-alpha:.14; --crt-mask-alpha:.14; }
body.code-red-active .scanlines { opacity:.42; background: repeating-linear-gradient(to bottom, rgba(0,255,55,.13) 0 1px, transparent 1px 4px); animation: codeRedScanline .12s steps(2) infinite; }
body.code-red-active .grain { opacity:.32; }
body.code-red-active .brand-mark { color:#fff; border-color:var(--danger); background:linear-gradient(135deg, rgba(255,77,109,.24), rgba(0,0,0,.36)); box-shadow:0 0 54px rgba(255,77,109,.46), inset 0 0 20px rgba(255,255,255,.12); }
body.code-red-alert .topbar { border-color:rgba(255,77,109,.62); box-shadow:var(--liquid-shadow), 0 0 42px rgba(255,77,109,.22); }
body.code-red-resist .crt-shell [data-glass], body.code-red-resist .topbar { animation: codeRedResist .08s steps(2,end) infinite, codeRedOpacityFlicker .16s steps(2,end) infinite; border-color:rgba(255,77,109,.9); filter:hue-rotate(-46deg) saturate(2.65) contrast(1.48) drop-shadow(-3px 0 rgba(255,77,109,.58)) drop-shadow(3px 0 rgba(72,247,255,.34)); box-shadow:var(--liquid-shadow), 0 0 46px rgba(255,77,109,.38), inset 0 0 22px rgba(255,77,109,.18); }
body.code-red-impact .scanlines { opacity:.58; background: repeating-linear-gradient(to bottom, rgba(0,255,55,.2) 0 1px, transparent 1px 4px); animation: codeRedImpactSnap .08s steps(2) infinite; }
body.code-red-suck .scanlines, body.code-red-collapse .scanlines { background: repeating-linear-gradient(to bottom, rgba(0,255,55,.16) 0 1px, transparent 1px 4px); }
body.crt-poweroff { overflow:hidden; }
body.crt-poweroff { --crt-glass-opacity:.98; --crt-vignette-alpha:.82; --crt-edge-alpha:.9; --crt-reflection-alpha:0; --crt-phosphor-alpha:0; --crt-danger-alpha:.05; }
body.crt-poweroff .crt-shell { animation: crtShellCrush 1.18s cubic-bezier(.72,0,.24,1) both; opacity:0; filter: brightness(.08) contrast(2.8) saturate(.18); }
body.code-red-reboot { --crt-glass-opacity:.72; --crt-vignette-alpha:.34; --crt-edge-alpha:.48; --crt-reflection-alpha:.08; --crt-phosphor-alpha:.08; --crt-danger-alpha:0; }
body.code-red-deadhold .crt-shell { transform:scaleY(.002); opacity:0; filter:brightness(.04) contrast(3) saturate(.1); }
body.code-red-reboot .crt-shell { animation: crtShellReboot .96s steps(3,end) both; filter:brightness(.92) contrast(1.16) saturate(1); }
/* Moving bodies must be cheap to composite: kill backdrop-filter (re-blurs the
   background every frame as it moves) and all filter passes (per-frame re-raster).
   The layer is promoted via will-change; identity comes from cheap box-shadow.
   Descendants too: .case-detail/.case-file/.btn.ghost/.contact-basics chips carry
   their own 14-40px backdrop blurs, and each one re-samples the moving backdrop
   every frame while the panel flies — the main falling-phase framerate killer. */
.gravity-body { will-change: transform; transform-origin: 50% 50%; touch-action:none; outline:1px solid rgba(0,255,55,.34); box-shadow:0 0 22px rgba(0,255,55,.22), 0 0 2px rgba(255,255,255,.55) inset; }
.gravity-body, .gravity-body * { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; }
body.code-red-falling .gravity-body, body.code-red-shatter .gravity-body, body.code-red-suck .gravity-body { outline-color:rgba(255,77,109,.58); box-shadow:0 0 36px rgba(255,77,109,.34), 0 0 10px rgba(72,247,255,.16), 0 0 2px rgba(255,255,255,.72) inset; }
body.code-red-shatter .crt-shell [data-glass], body.code-red-suck .crt-shell [data-glass], body.code-red-collapse .crt-shell [data-glass], body.code-red-shatter .topbar, body.code-red-suck .topbar, body.code-red-collapse .topbar { animation: codeRedPanelJitter .18s steps(2,end) infinite; animation-delay:var(--panic-delay, 0s); }
body.code-red-quality-medium .crt-shell [data-glass] { backdrop-filter:blur(12px) saturate(1.12) contrast(1.02); -webkit-backdrop-filter:blur(12px) saturate(1.12) contrast(1.02); }
body.code-red-quality-low .crt-shell [data-glass] { backdrop-filter:none; -webkit-backdrop-filter:none; }
body.code-red-quality-low.code-red-resist .crt-shell [data-glass], body.code-red-quality-low.code-red-resist .topbar { animation:codeRedOpacityFlicker .22s steps(2,end) infinite; filter:saturate(1.35) contrast(1.08); box-shadow:var(--shadow), 0 0 20px rgba(255,77,109,.18); }
body.code-red-quality-low .gravity-body { box-shadow:0 0 18px rgba(255,77,109,.22), 0 0 2px rgba(255,255,255,.45) inset; }
/* Escape hatch while the sequence owns the page: keyboard users get the ESC hint,
   touch users get a tappable abort. Hidden from tab order when inactive, and again
   once the CRT powers off (the show is ending anyway). */
.code-red-abort { position:fixed; left:18px; top:18px; z-index:150; font:600 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.14em; color:#ffd8df; background:rgba(26,0,6,.78); border:1px solid rgba(255,77,109,.6); border-radius:999px; padding:11px 16px; cursor:pointer; box-shadow:0 0 24px rgba(255,77,109,.22), inset 0 0 12px rgba(255,77,109,.1); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .28s ease, transform .28s ease, visibility .28s; }
body.code-red-active .code-red-abort { opacity:1; visibility:visible; transform:none; }
body.code-red-poweroff .code-red-abort, body.code-red-deadhold .code-red-abort, body.code-red-reboot .code-red-abort { opacity:0; visibility:hidden; }
.code-red-abort:hover, .code-red-abort:focus-visible { color:#fff; border-color:rgba(255,77,109,.95); box-shadow:0 0 30px rgba(255,77,109,.42); outline:none; }
@media (max-width: 760px) { .code-red-abort { left:14px; top:14px; } } /* top-left, above the social dock */
body.code-red-active .topbar[data-glass],
body.code-red-alert .topbar[data-glass] {
  background:#2a0008;
  box-shadow:
    inset 1px 1px #ffd3dc,
    inset -1px -1px #140004,
    inset 2px 2px rgba(255,77,109,.58),
    inset -2px -2px #600013,
    0 0 34px rgba(255,77,109,.28),
    0 18px 52px rgba(0,0,0,.54);
}
body.code-red-active .brand,
body.code-red-alert .brand {
  color:#fff;
  background:linear-gradient(90deg, #5d0012, #c00028 48%, #110004);
  border-color:#1f0007;
}
body.code-red-active .brand-copy em,
body.code-red-alert .brand-copy em { color:#ffd8df; text-shadow:1px 1px #210006; }
body.code-red-active .nav,
body.code-red-alert .nav {
  background:#c9a9b0;
  border-color:#641322 #ffd3dc #ffd3dc #641322;
  box-shadow:inset 1px 1px #2c0008, inset -1px -1px rgba(255,255,255,.52);
}
body.code-red-active .nav a,
body.code-red-alert .nav a { color:#260007; }
body.code-red-active .nav a:hover,
body.code-red-alert .nav a:hover {
  background:#f0ccd3;
  border-color:#fff2f5 #5d0012 #5d0012 #fff2f5;
}
body.code-red-active .nav a.active,
body.code-red-active .nav a[aria-current="page"],
body.code-red-alert .nav a.active,
body.code-red-alert .nav a[aria-current="page"] {
  background:linear-gradient(180deg, #ffd3dc, #ef8aa0);
  border-color:#5d0012 #fff2f5 #fff2f5 #5d0012;
  color:#260007;
}
.gravity-body[data-dragging="true"] { cursor:grabbing; }
/* The code-red trigger lives below the CTA row now: discoverable, but no longer a
   15-second easter egg sitting between a recruiter and the contact button. */
.hero-egg-row { margin:12px 0 0; }
.hero-egg-row .btn { min-height:34px; padding:8px 13px; font-size:11px; opacity:.74; border-style:dashed; }
.hero-egg-row .btn:hover, .hero-egg-row .btn:focus-visible { opacity:1; border-style:solid; }
@keyframes scanlinePanic { 50% { transform: translateY(2px); opacity:.55; } }
@keyframes codeRedMarkPulse { 50% { transform: rotate(3deg) scale(1.09); background:rgba(255,77,109,.18); } }
@keyframes codeRedScanline { 50% { transform: translateY(3px); opacity:.74; } }
@keyframes codeRedImpactSnap { 50% { transform: translateY(-4px); opacity:.96; } }
@keyframes crtTextDesync {
  0%, 100% { text-shadow:1px 0 0 rgba(255,77,109,.78), -1px 0 0 rgba(72,247,255,.46), 0 0 16px rgba(255,77,109,.48); }
  50% { text-shadow:2px .5px 1px rgba(255,77,109,.84), -2px -.5px 1px rgba(57,255,136,.46), 0 0 22px rgba(255,77,109,.62); }
}
@keyframes codeRedResist { 0% { transform:translate3d(-1px,0,0); } 50% { transform:translate3d(2px,-1px,0); } 100% { transform:translate3d(-1px,1px,0); } }
@keyframes codeRedButtonThreat { 0%, 100% { transform:translate3d(-1px,0,0) rotate(-.3deg); } 50% { transform:translate3d(2px,-1px,0) rotate(.35deg); } }
@keyframes codeRedOpacityFlicker { 0%, 100% { opacity:1; } 33% { opacity:.52; } 66% { opacity:.86; } }
@keyframes codeRedPanelJitter { 0%, 100% { translate:0 0; scale:1 1; } 32% { translate:calc(var(--panic-shift, 3px) * -1) 1px; scale:1.006 .996; } 64% { translate:var(--panic-shift, 3px) -1px; scale:.997 1.004; } }
@keyframes crtShellCrush { 0% { transform:scaleY(1); opacity:1; } 52% { transform:scaleY(.045); opacity:.74; } 78% { transform:scaleY(.006); opacity:.28; } 100% { transform:scaleY(.002); opacity:0; } }
@keyframes crtShellReboot { 0% { transform:scaleY(.002); opacity:0; filter:brightness(1.7) contrast(2.4) saturate(.2); } 18% { transform:scaleY(.06); opacity:.62; } 34% { transform:scaleY(.002); opacity:.08; } 58% { transform:scaleY(.34); opacity:.72; } 72% { transform:scaleY(.018); opacity:.18; } 100% { transform:scaleY(1); opacity:1; filter:brightness(1) contrast(1) saturate(1); } }
@keyframes cowWalkTrack { from { left:0; } to { left:calc(100% - var(--cow-width)); } }
@keyframes cowStepBob { 50% { translate:0 -2px; filter:drop-shadow(0 4px 3px rgba(0,0,0,.78)); } }
@keyframes marqueeWalkerTrack { from { left:calc(var(--marquee-walker-width) * -.28); } to { left:calc(100% - var(--marquee-walker-width)); } }
@keyframes marqueeWalkerStep { 50% { translate:0 -2px; filter:drop-shadow(0 5px 3px rgba(0,0,0,.82)); } }
@keyframes cowAbductorSwoop {
  0% { opacity:0; transform:translateX(-50%) translate(-190px,-58px) scale(.56) rotate(-8deg); }
  16% { opacity:1; transform:translateX(-50%) translate(-82px,-22px) scale(.82) rotate(3deg); }
  30% { opacity:1; transform:translateX(-50%) translate(-7px,2px) scale(1.02) rotate(-1deg); }
  42%, 70% { opacity:1; transform:translateX(-50%) translate(0,0) scale(1) rotate(0deg); }
  84% { opacity:1; transform:translateX(-50%) translate(70px,-24px) scale(.86) rotate(4deg); }
  100% { opacity:0; transform:translateX(-50%) translate(205px,-72px) scale(.56) rotate(9deg); }
}
@keyframes cowAbductionBeam {
  0%, 30% { opacity:0; transform:translateX(-50%) scaleY(.02); }
  38% { opacity:.78; transform:translateX(-50%) scaleY(.42); }
  46%, 68% { opacity:.72; transform:translateX(-50%) scaleY(1); }
  76% { opacity:.22; transform:translateX(-50%) scaleY(.2); }
  84%, 100% { opacity:0; transform:translateX(-50%) scaleY(.02); }
}
@keyframes cowAbducted {
  0%, 38% { opacity:1; transform:translateX(-50%) translateY(0) scale(.5) rotate(0deg); filter:drop-shadow(0 2px 2px rgba(0,0,0,.82)); }
  47% { opacity:.7; transform:translateX(-50%) translateY(-14px) scale(.46) rotate(-2deg); filter:drop-shadow(0 0 8px rgba(202,255,210,.78)); }
  58% { opacity:.9; transform:translateX(-50%) translateY(var(--cow-abduct-mid, -42px)) scale(.36) rotate(2deg); filter:drop-shadow(0 0 13px rgba(202,255,210,.9)); }
  70% { opacity:.35; transform:translateX(-50%) translateY(var(--cow-abduct-high, -68px)) scale(.2) rotate(-1deg); filter:drop-shadow(0 0 17px rgba(202,255,210,.68)); }
  82%, 100% { opacity:0; transform:translateX(-50%) translateY(var(--cow-abduct-rise, -96px)) scale(.05) rotate(0deg); filter:drop-shadow(0 0 19px rgba(202,255,210,.36)); }
}
.brand-copy strong { display:block; min-width:0; color:#fff; font:700 13px/1 var(--mono); letter-spacing:0; text-shadow:1px 1px #000; white-space:nowrap; }
.brand-copy em { display:block; min-width:0; color:#caffd1; font:400 11px/1 var(--mono); font-style:normal; margin-top:0; text-shadow:1px 1px #001604; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- Navigation & theme menu ---- */
.nav {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  min-height:29px;
  padding:2px;
  color:rgba(218,255,225,.88);
  background:linear-gradient(180deg, rgba(9,22,20,.96), rgba(1,9,8,.92));
  border:1px solid;
  border-color:rgba(72,247,255,.22) rgba(244,255,247,.16) rgba(0,0,0,.7) rgba(0,255,55,.16);
  box-shadow:inset 1px 1px rgba(255,255,255,.08), inset -1px -1px rgba(0,0,0,.82), 0 16px 36px rgba(0,0,0,.3);
  font-family:"MS Sans Serif", "Segoe UI", var(--sans);
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
}
.nav a,
.theme-menu-button {
  min-height:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:rgba(205,245,216,.86);
  border:1px solid;
  border-color:rgba(232,255,236,.16) rgba(72,247,255,.16) rgba(0,0,0,.66) rgba(0,255,55,.12);
  background:linear-gradient(180deg, rgba(12,32,26,.82), rgba(2,11,9,.72));
  padding:4px 10px;
  border-radius:0;
  cursor:pointer;
  box-shadow:inset 1px 1px rgba(255,255,255,.1), inset -1px -1px rgba(0,0,0,.74);
}
.theme-menu-button {
  width:32px;
  min-width:32px;
  padding:0;
  gap:0;
  font-family:inherit;
  font-size:inherit;
}
.theme-menu-bars {
  display:grid;
  gap:3px;
  place-items:center;
}
.theme-menu-bars i {
  display:block;
  width:15px;
  height:2px;
  background:var(--acid);
  box-shadow:0 0 10px rgba(var(--theme-signal-rgb),.54);
}
.nav a:hover, .nav a:focus-visible, .theme-menu-button:hover, .theme-menu-button:focus-visible, .theme-menu-button[aria-expanded="true"] { color:#f4fff7; border-color:rgba(72,247,255,.58) rgba(0,0,0,.72) rgba(0,0,0,.72) rgba(232,255,236,.22); outline:1px dotted rgba(72,247,255,.7); outline-offset:-4px; background:linear-gradient(180deg, rgba(9,48,48,.92), rgba(3,20,18,.82)); box-shadow:inset 1px 1px rgba(255,255,255,.13), inset -1px -1px rgba(0,0,0,.72), 0 0 16px rgba(72,247,255,.12); }
.nav a.active, .nav a[aria-current="page"] { color:#001604; border-color:rgba(0,0,0,.78) rgba(255,233,114,.72) rgba(255,233,114,.72) rgba(0,0,0,.78); background:linear-gradient(180deg, #dfff93, var(--gold)); box-shadow:inset 1px 1px rgba(71,62,4,.44), inset -1px -1px rgba(255,255,255,.58), 0 0 18px rgba(255,233,114,.16); }
.nav a:active, .theme-menu-button:active { border-color:rgba(0,0,0,.78) rgba(232,255,236,.2) rgba(232,255,236,.2) rgba(0,0,0,.78); box-shadow:inset 1px 1px rgba(0,0,0,.82); translate:1px 1px; }
.theme-settings {
  position:relative;
  flex:none;
  display:flex;
  align-items:center;
  margin-right:auto;
}
.theme-menu-panel {
  position:fixed;
  top:0;
  left:0;
  right:auto;
  z-index:130;
  width:252px;
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid rgba(218,255,235,.22);
  border-top-color:rgba(255,255,255,.36);
  background:linear-gradient(145deg, rgba(14,34,30,.96), rgba(1,10,9,.96));
  box-shadow:0 22px 54px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12);
  color:var(--ink);
}
.theme-menu-panel[hidden] { display:none; }
.theme-menu-panel p {
  margin:0 0 3px;
  color:rgba(186,241,255,.72);
  font:800 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.theme-current {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:9px;
  border:1px solid rgba(var(--theme-signal-rgb),.24);
  background:rgba(var(--theme-signal-rgb),.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.theme-current-swatch {
  flex:none;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.66);
  background:var(--acid);
  box-shadow:0 0 18px rgba(var(--theme-signal-rgb),.62);
}
.theme-current-copy {
  min-width:0;
  display:grid;
  gap:3px;
}
.theme-current-copy strong {
  color:#fff;
  font:800 12px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-current-copy em {
  color:rgba(218,255,225,.68);
  font:700 11px/1 var(--mono);
  font-style:normal;
}
.theme-hue-control {
  display:grid;
  gap:8px;
}
.theme-hue-control span {
  color:rgba(186,241,255,.74);
  font:800 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.theme-hue-control input {
  width:100%;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.22);
  /* Phosphor greens only — no full-spectrum rainbow track */
  background:linear-gradient(90deg, #003b12 0%, #007a28 28%, #00ff37 58%, #7dffa0 82%, #c8ffd4 100%);
  cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.62), 0 0 18px rgba(var(--theme-signal-rgb),.1);
}
.theme-hue-control input::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:24px;
  border:1px solid rgba(255,255,255,.82);
  background:var(--acid);
  box-shadow:0 0 0 2px rgba(0,0,0,.62), 0 0 18px rgba(var(--theme-signal-rgb),.76);
}
.theme-hue-control input::-moz-range-thumb {
  width:14px;
  height:24px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:0;
  background:var(--acid);
  box-shadow:0 0 0 2px rgba(0,0,0,.62), 0 0 18px rgba(var(--theme-signal-rgb),.76);
}
.theme-hue-control input::-moz-range-track {
  height:18px;
  background:transparent;
}
.theme-menu-panel button {
  min-height:34px;
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  color:rgba(224,255,232,.88);
  border:1px solid rgba(72,247,255,.18);
  background:rgba(0,12,14,.46);
  padding:7px 9px;
  font:700 12px/1 var(--mono);
  cursor:pointer;
  text-align:left;
}
.theme-reset-button {
  justify-content:center;
  text-align:center;
}
.theme-menu-panel button:hover,
.theme-menu-panel button:focus-visible,
.theme-menu-panel button[aria-pressed="true"] {
  color:#fff;
  border-color:rgba(var(--theme-signal-rgb),.58);
  outline:1px dotted rgba(var(--theme-signal-rgb),.74);
  outline-offset:-4px;
  background:rgba(var(--theme-signal-rgb),.12);
  box-shadow:0 0 18px rgba(var(--theme-signal-rgb),.12), inset 0 1px 0 rgba(255,255,255,.12);
}
.theme-swatch {
  flex:none;
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 14px currentColor;
}
.theme-swatch-phosphor { color:#00ff37; background:#00ff37; }
.theme-swatch-cyan { color:#48f7ff; background:#48f7ff; }
.theme-swatch-gold { color:#ffe972; background:#ffe972; }
/* Rose/blue swatches removed — terminal palette only */
/* ---- Case texture stage ---- */
.case-texture-stage[hidden] { display:none !important; }
.case-texture-stage {
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:34; /* above CRT glass (29), below abort button (150) */
  overflow:hidden;
  opacity:0;
  transition:opacity .28s ease;
  mix-blend-mode:screen;
}
body.case-texture-active .case-texture-stage { opacity:1; }
.case-texture-stage::before,
.case-texture-stage::after {
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
}
.case-texture-stage::before {
  background:
    radial-gradient(ellipse at var(--case-texture-x,50%) var(--case-texture-y,45%), rgba(72,247,255,.18), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(0,255,55,.12), transparent 42%),
    repeating-linear-gradient(0deg, rgba(0,255,55,.11) 0 1px, transparent 1px 5px);
  animation:caseTextureFieldDrift 2.7s linear infinite;
}
.case-texture-stage::after {
  background:
    linear-gradient(90deg, rgba(255,77,109,.16), transparent 18% 82%, rgba(72,247,255,.18)),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(72,247,255,.06) 17px 18px);
  opacity:.55;
  transform:skewY(-2deg);
  animation:caseTextureChromaticSlip .82s steps(3,end) infinite;
}
.case-texture-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}
.case-texture-source {
  width:min(690px, calc(100vw - 48px));
  max-height:min(72vh, 760px);
  overflow:hidden;
  color:var(--ink);
  border-radius:24px;
  padding:clamp(20px, 4vw, 38px);
  background:linear-gradient(145deg, rgba(0,24,14,.88), rgba(0,7,8,.78) 58%, rgba(5,28,32,.84));
  border:1px solid rgba(72,247,255,.46);
  box-shadow:0 0 50px rgba(72,247,255,.18), inset 0 1px 0 rgba(255,255,255,.16);
  font-family:var(--sans);
}
.case-texture-fallback {
  position:absolute;
  left:50%;
  top:50%;
  width:min(690px, calc(100vw - 48px));
  max-height:min(72vh, 760px);
  overflow:hidden;
  transform:translate(-50%,-50%) perspective(900px) rotateX(var(--case-texture-rx, 8deg)) rotateY(var(--case-texture-ry, -11deg)) scale(.98);
  transform-origin:50% 50%;
  color:var(--ink);
  border:1px solid rgba(72,247,255,.42);
  border-top-color:rgba(232,255,236,.72);
  border-radius:24px;
  padding:clamp(20px, 4vw, 38px);
  background:
    radial-gradient(circle at 18% 0%, rgba(232,255,236,.16), transparent 34%),
    linear-gradient(145deg, rgba(0,24,14,.82), rgba(0,7,8,.72) 58%, rgba(5,28,32,.82));
  box-shadow:0 32px 120px rgba(0,0,0,.78), 0 0 70px rgba(72,247,255,.16), inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(1.24) contrast(1.12) drop-shadow(-5px 0 rgba(255,77,109,.28)) drop-shadow(5px 0 rgba(72,247,255,.28));
  animation:caseTexturePanelFloat 4.8s ease-in-out infinite, caseTextureGlitchClip 1.9s steps(4,end) infinite;
}
.case-texture-fallback::before,
.case-texture-fallback::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.case-texture-fallback::before {
  background:repeating-linear-gradient(to bottom, rgba(0,255,55,.12) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
}
.case-texture-fallback::after {
  background:linear-gradient(112deg, transparent 28%, rgba(255,255,255,.16) 43%, transparent 58%);
  opacity:.38;
  transform:translateX(-30%) rotate(6deg);
  animation:caseTextureShine 2.8s ease-in-out infinite;
}
.case-texture-fallback .case-actions { display:none; }
.case-texture-hud {
  position:absolute;
  left:24px;
  bottom:22px;
  display:grid;
  gap:5px;
  padding:12px 14px;
  min-width:220px;
  color:rgba(202,255,210,.86);
  border:1px solid rgba(72,247,255,.34);
  background:rgba(0,10,8,.72);
  box-shadow:0 0 30px rgba(72,247,255,.12), inset 0 1px 0 rgba(255,255,255,.1);
  font:700 10px/1.2 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.case-texture-hud strong { color:var(--gold); font-size:12px; }
.case-texture-hud em { color:rgba(186,241,255,.72); font-style:normal; letter-spacing:.08em; }
@keyframes caseTextureFieldDrift { 50% { transform:translate3d(2%, -1%, 0) scale(1.02); opacity:.76; } }
@keyframes caseTextureChromaticSlip { 50% { transform:translate3d(8px, -2px, 0) skewY(1deg); opacity:.76; } }
@keyframes caseTexturePanelFloat { 50% { transform:translate(-50%,-52%) perspective(900px) rotateX(var(--case-texture-rx, 8deg)) rotateY(var(--case-texture-ry, -11deg)) scale(1.01); } }
@keyframes caseTextureGlitchClip { 0%, 100% { clip-path:inset(0); } 47% { clip-path:inset(0 0 0 0); } 50% { clip-path:inset(9% 0 13% 0); } 53% { clip-path:inset(0); } }
@keyframes caseTextureShine { 50% { transform:translateX(24%) rotate(6deg); opacity:.58; } }
.section:not(.hero-section), .youtube-panel, .signal-link { content-visibility:auto; contain-intrinsic-size:1px 720px; }

body.code-red-active #modeTxt,
body.code-red-active #hudTxt,
body.code-red-active .eyebrow,
body.code-red-shatter .case-file span,
body.code-red-suck .case-file span,
body.code-red-collapse .case-file span {
  animation:crtTextDesync .13s steps(2,end) infinite;
  color:var(--danger);
}
.page-shell { position: relative; z-index: 2; display:flex; flex-direction:column; }
.section { position:relative; isolation:isolate; min-height: 100vh; padding: 130px clamp(20px, 5vw, 72px) 80px; display:grid; align-items:center; scroll-snap-align:start; scroll-margin-top:92px; }
.systems-section {
  min-height: 0;
  padding-top: clamp(72px, 9vw, 110px);
  padding-bottom: clamp(48px, 7vw, 80px);
  align-items: center;
}
.method-section {
  min-height: 0;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 72px);
  align-items: start;
}
/* ---- Signal strip (marquee + LED track) ---- */
.signal-strip-stage {
  --marquee-walker-width:63px;
  position:relative;
  z-index:6;
  width:100%;
  isolation:isolate;
}
.signal-strip {
  --signal-panel-x:0px;
  --signal-panel-top:7px;
  --signal-panel-bottom:8px;
  --led-hot:#f4fff1;
  --led-core:var(--acid);
  --led-mid:rgb(var(--theme-signal-rgb));
  --led-shadow:rgba(var(--theme-signal-rgb),.28);
  position:relative;
  z-index:6;
  width:100%;
  margin:0;
  min-height:88px;
  padding:8px 0 9px;
  overflow:hidden;
  border-left:0;
  border-right:0;
  border-radius:0;
  background:
    radial-gradient(ellipse 62% 120% at 50% 100%, rgba(var(--theme-signal-rgb),.14), transparent 43%),
    linear-gradient(180deg, #171b1e 0%, #070909 17%, #000 73%, #121719 100%);
  border-top:1px solid rgba(207,255,218,.16);
  border-bottom:1px solid rgba(0,0,0,.92);
  box-shadow:
    inset 0 1px 0 rgba(221,255,228,.13),
    inset 0 -13px 24px rgba(var(--theme-signal-rgb),.035),
    inset 0 0 0 1px rgba(0,0,0,.78),
    0 20px 70px rgba(0,0,0,.36),
    0 0 38px rgba(var(--theme-signal-rgb),.08);
}
.signal-strip::before,
.signal-strip::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
.signal-strip::before {
  inset:var(--signal-panel-top) var(--signal-panel-x) var(--signal-panel-bottom);
  z-index:0;
  border:1px solid rgba(var(--theme-signal-rgb),.13);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:
    repeating-linear-gradient(180deg, rgba(var(--theme-signal-rgb),.07) 0 1px, transparent 1px 4px),
    radial-gradient(circle, rgba(var(--theme-signal-rgb),.16) 0 1px, rgba(0,0,0,.24) 1.05px 1.55px, transparent 1.7px),
    linear-gradient(180deg, rgba(200,255,210,.055), rgba(0,0,0,.44) 44%, rgba(var(--theme-signal-rgb),.035));
  background-size:100% 4px, 7px 7px, 100% 100%;
  box-shadow:inset 0 0 30px rgba(0,0,0,.95), inset 0 1px 0 rgba(214,255,220,.09), inset 0 0 34px rgba(var(--theme-signal-rgb),.05);
}
.signal-strip::after {
  left:clamp(34px, 7vw, 120px);
  right:clamp(34px, 7vw, 120px);
  bottom:1px;
  z-index:1;
  height:28px;
  background:
    radial-gradient(ellipse 42% 90% at 18% 0%, rgba(var(--theme-signal-rgb),.52), transparent 72%),
    radial-gradient(ellipse 60% 90% at 58% 0%, rgba(var(--theme-signal-rgb),.34), transparent 76%);
  filter:blur(8px);
  opacity:.44;
  mix-blend-mode:screen;
  transform:translateY(12px);
}
.signal-strip-walker {
  position:absolute;
  top:auto;
  bottom:100%;
  left:0;
  z-index:7;
  width:var(--marquee-walker-width);
  height:0;
  overflow:visible;
  pointer-events:none;
  user-select:none;
  animation:
    marqueeWalkerTrack 16s linear infinite alternate,
    marqueeWalkerStep .44s steps(2,end) infinite;
}
.signal-strip-walker-art {
  position:absolute;
  left:0;
  bottom:-1px;
  display:block;
  width:max-content;
  margin:0;
  white-space:pre;
  color:rgba(202,255,210,.9);
  font-family:var(--mono);
  font-size:3.7px;
  line-height:.98;
  letter-spacing:0;
  text-align:left;
  text-shadow:0 0 5px rgba(0,255,55,.62), 0 0 15px rgba(57,255,136,.34), 0 0 1px rgba(244,255,247,.5);
  transform:scale(.21);
  transform-origin:0 100%;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.9));
}
.signal-marquee-canvas {
  position:absolute;
  top:var(--signal-panel-top);
  right:var(--signal-panel-x);
  bottom:var(--signal-panel-bottom);
  left:var(--signal-panel-x);
  z-index:3;
  display:block;
  width:calc(100% - (var(--signal-panel-x) * 2));
  height:calc(100% - var(--signal-panel-top) - var(--signal-panel-bottom));
  border-radius:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.signal-track {
  position:relative;
  z-index:2;
  display:flex;
  visibility:visible;
  width:max-content;
  min-height:64px;
  align-items:center;
  gap:20px;
  padding-inline:clamp(34px, 6vw, 86px);
  animation:signalTrackDrift 36s linear infinite;
  transition:opacity .18s ease;
}
body.signal-marquee-ready .signal-track {
  opacity:0;
  visibility:hidden;
  animation-play-state:paused;
}
.signal-track span {
  display:inline-flex;
  min-height:52px;
  align-items:center;
  padding:0;
  color:var(--led-core);
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle, var(--led-hot) 0 .9px, var(--led-core) .95px 1.75px, transparent 1.95px);
  background-size:6px 6px;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 2px rgba(234,255,223,.72))
    drop-shadow(0 0 8px rgba(var(--theme-signal-rgb),.78))
    drop-shadow(0 0 18px rgba(var(--theme-signal-rgb),.28))
    drop-shadow(0 16px 12px var(--led-shadow));
  font:900 32px/1 var(--mono);
  letter-spacing:0;
  text-transform:uppercase;
  white-space:nowrap;
}
.signal-track span:nth-child(4n+2),
.signal-track span:nth-child(4n+3) { color:var(--led-core); border-color:transparent; }
.signal-track span::after {
  content:"";
  display:inline-block;
  width:18px;
}
body.code-red-warning .signal-strip-stage,
body.code-red-active .signal-strip-stage {
  --theme-signal-rgb:255,77,109;
}
body.code-red-warning .signal-strip,
body.code-red-active .signal-strip {
  --led-hot:#fff2f5;
  --led-core:var(--danger);
  --led-mid:var(--danger);
  --led-shadow:rgba(255,77,109,.34);
  border-top-color:rgba(255,216,223,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,216,223,.16),
    inset 0 -13px 24px rgba(255,77,109,.06),
    inset 0 0 0 1px rgba(0,0,0,.78),
    0 20px 70px rgba(0,0,0,.38),
    0 0 42px rgba(255,77,109,.14);
}
body.code-red-warning .signal-strip-walker-art,
body.code-red-active .signal-strip-walker-art {
  color:rgba(255,216,223,.94);
  text-shadow:
    0 0 5px rgba(255,77,109,.8),
    0 0 16px rgba(255,77,109,.5),
    0 0 1px rgba(255,242,245,.62);
}
@keyframes signalTrackDrift { to { transform:translateX(-50%); } }
.section:not(.hero-section)::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.46) 18%, rgba(0,0,0,.64) 52%, rgba(0,0,0,.44) 84%, rgba(0,0,0,.1)),
    radial-gradient(ellipse 78% 46% at 50% 50%, rgba(0,255,55,.038), transparent 70%),
    radial-gradient(ellipse 38% 20% at 78% 18%, rgba(72,247,255,.035), transparent 72%);
}
/* ---- Hero section ---- */
.hero-section { --hero-content-drop:calc(clamp(8px, 1.6vh, 16px) + 30px); position:relative; min-height:calc(100svh - 96px); padding-top:clamp(115px, 12vh, 128px); padding-bottom:clamp(8px, 1.5vh, 16px); align-items:start; }
.hero-section::before {
  content:"";
  position:absolute;
  inset:clamp(56px, 8vh, 96px) 0 auto clamp(10px, 4vw, 48px);
  width:min(1240px, 92vw);
  height:clamp(380px, 54vh, 680px);
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 44% 28% at 74% 20%, rgba(72,247,255,.08), transparent 68%),
    radial-gradient(ellipse 96% 72% at 44% 50%, rgba(0,0,0,.82), rgba(0,0,0,.68) 44%, transparent 76%);
  filter:blur(2px);
  opacity:.94;
}
.hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 380px); gap: clamp(22px, 3vw, 42px); align-items:start; max-width: 1500px; margin: 0 auto; width:100%; min-width:0; transform:translateY(var(--hero-content-drop)); } /* 2-col: copy left, ASCII canvas right */
.hero-copy { position:relative; z-index:1; max-width:min(100%, 1040px); min-width:0; transform:none; }
.eyebrow {
  color: rgba(186,241,255,.72);
  font-family: var(--mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  margin:0 0 12px;
  text-shadow: var(--readability-shadow);
}
.hero-copy > .eyebrow { margin-bottom:24px; color:rgba(186,241,255,.68); }
/* ---- Flagship feature banner — GNAR + Discord (social linktree entry) ---- */
.hero-featured {
  position:relative;
  z-index:7;
  max-width:1500px;
  width:100%;
  margin:0 auto clamp(20px, 3vh, 34px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px, 2.4vw, 32px);
  padding:clamp(15px, 1.9vw, 22px) clamp(18px, 2.4vw, 28px);
  border-radius:20px;
  border:1px solid rgba(72,247,255,.34);
  border-top-color:rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 62% 130% at 6% 0%, rgba(72,247,255,.13), transparent 60%),
    radial-gradient(ellipse 52% 150% at 100% 100%, rgba(0,255,55,.11), transparent 62%),
    var(--glass);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 30px rgba(72,247,255,.08), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.hero-featured-main { min-width:0; flex:1 1 340px; }
/* GNAR's own boot-screen rider, framed as the banner's screen. Fixed-width tile
   (flex:0 0 auto) so it never competes with the copy for the flex row's slack. */
.hero-featured-art {
  position:relative;
  flex:0 0 auto;
  width:clamp(148px, 15.5vw, 240px);
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(72,247,255,.3);
  border-top-color:rgba(232,255,236,.5);
  background:#020403;
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 22px rgba(72,247,255,.1), inset 0 1px 0 rgba(255,255,255,.13);
  transition:border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
/* Diagonal glass sweep — same treatment as the proof-orbit cards. Sweeps on hover
   anywhere in the banner so the tile reads as part of the Play GNAR target. */
.hero-featured-art::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.2) 46%, transparent 58%);
  opacity:.12;
  transform:translateX(-30%);
  transition:.24s ease;
}
.hero-featured:hover .hero-featured-art::before,
.hero-featured:focus-within .hero-featured-art::before { opacity:.4; transform:translateX(20%); }
.hero-featured-art:hover,
.hero-featured:focus-within .hero-featured-art {
  border-color:rgba(72,247,255,.68);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 20px 46px rgba(0,0,0,.56), 0 0 30px rgba(72,247,255,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
/* pixelated: the source is a 200px-wide pixel-art loop upscaled — smooth filtering
   would blur the board's GNAR lettering into mush. */
.hero-featured-art-media {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.hero-featured-kicker {
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(186,241,255,.82);
  text-shadow:var(--readability-shadow);
}
.hero-featured-live { flex:none; width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
@media (prefers-reduced-motion: no-preference) { .hero-featured-live { animation:statusPulse 2.2s ease-in-out infinite; } }
.hero-featured-title {
  margin:0 0 7px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px, 4.4vw, 50px);
  line-height:.92;
  letter-spacing:.02em;
  color:#eafff0;
  text-shadow:0 0 22px rgba(0,255,55,.28), 0 2px 6px rgba(0,0,0,.7);
}
.hero-featured-sub {
  font-family:var(--heading);
  font-weight:600;
  font-size:clamp(14px, 1.3vw, 18px);
  letter-spacing:.01em;
  color:rgba(186,241,255,.78);
  text-shadow:var(--readability-shadow);
}
.hero-featured-tag {
  margin:0;
  max-width:54ch;
  font-family:var(--sans);
  font-size:clamp(14px, 1.05vw, 16px);
  line-height:1.5;
  color:rgba(224,255,232,.9);
  text-shadow:var(--readability-shadow);
}
.hero-featured-tag strong { color:#eafff0; font-weight:700; }
.hero-featured-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex:0 0 auto; }
.hero-featured-actions .btn { min-height:50px; padding:14px 22px; font-size:13px; }
.hero-featured-play { min-width:170px; }
/* Discord — recognizable blurple that still sits inside the neon CRT palette.
   Uses .btn.hero-featured-discord (0,2,0) so border-color wins over the base .btn rule. */
.btn.hero-featured-discord {
  color:#eef0ff;
  border-color:rgba(88,101,242,.6);
  background:linear-gradient(135deg, rgba(88,101,242,.34), rgba(88,101,242,.16));
  box-shadow:0 0 22px rgba(88,101,242,.26), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.hero-featured-discord:hover, .btn.hero-featured-discord:focus-visible {
  color:#fff;
  border-color:rgba(120,132,255,.92);
  background:linear-gradient(135deg, rgba(101,113,255,.46), rgba(88,101,242,.24));
  box-shadow:0 0 30px rgba(88,101,242,.42), inset 0 1px 0 rgba(255,255,255,.26);
  outline:none;
}
h1, h2, h3, p { margin-top:0; }
h1 { font-size: clamp(64px, 10.8vw, 166px); line-height:.82; letter-spacing:-.09em; margin:0 0 32px; max-width: 940px; text-wrap: balance; text-shadow:none; }
.unicode-title { /* logo wordmark — paint-order:stroke fill renders stroke behind fill; text-shadow stack = neon glow */
  --title-glow:#9effbc;
  --title-hot:#f4fff4;
  --title-core:#c9ffd9;
  --title-shadow:#001208;
  --title-glitch-x: clamp(3px, .55vw, 9px);
  --title-glitch-y: clamp(1px, .2vw, 3px);
  --title-glare: linear-gradient(90deg, transparent 0, rgba(218,255,226,.22) 13%, rgba(255,255,255,.98) 47%, rgba(202,255,216,.26) 73%, transparent 100%);
  position:relative;
  isolation:isolate;
  display:inline-block;
  width:max-content;
  max-width:min(100%, 7.8ch);
  padding:.02em .34em .18em .04em;
  overflow:visible;
  color:#f7fff8;
  background:none;
  -webkit-text-fill-color:currentColor;
  font-family:var(--logo-display);
  font-size:clamp(5.7rem, 8.9vw, 8.65rem);
  font-weight:400;
  font-synthesis-weight:none;
  font-stretch:condensed;
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 0;
  line-height:.82;
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:nowrap;
  word-break:keep-all;
  text-rendering:geometricPrecision;
  transform:none;
  transform-origin:0 0;
  -webkit-text-stroke:0;
  paint-order:stroke fill;
  filter:drop-shadow(0 0 2px rgba(244,255,247,.82)) drop-shadow(0 0 20px rgba(120,255,170,.28)) drop-shadow(0 18px 30px rgba(0,0,0,.86));
  text-shadow:
    0 0 1px rgba(255,255,255,1),
    0 0 9px rgba(236,255,241,.9),
    0 0 24px rgba(126,255,166,.64),
    0 0 58px rgba(82,255,143,.26),
    0 18px 30px rgba(0,0,0,.92);
}
.unicode-title::before,
.unicode-title::after {
  content:"";
  position:absolute;
  z-index:4;
  height:2px;
  pointer-events:none;
  border-radius:999px;
  background:var(--title-glare);
  box-shadow:0 0 8px rgba(245,255,248,.9), 0 0 28px rgba(116,255,163,.5), 0 0 54px rgba(116,255,163,.22);
  filter:blur(.15px);
}
.unicode-title::before {
  width:1.55em;
  left:-.32em;
  top:.23em;
  opacity:.82;
}
.unicode-title::after {
  width:1.75em;
  right:-.13em;
  top:.3em;
  opacity:.9;
}
.unicode-title.title-booting { animation:titleBootSignal 1.05s cubic-bezier(.16,1,.3,1) both; }
.unicode-title.title-booted:is(:hover, :active, .touch-glitch) { animation:titleHoverSignal .44s steps(2,end) both; }
.unicode-title-line {
  display:block;
  white-space:nowrap;
}
.unicode-title-line + .unicode-title-line {
  margin-top:.02em;
}
.unicode-title-o {
  display:inline-block;
  font-family:"Mattoe Labs O Edge", var(--logo-display);
  font-feature-settings:"kern" 1, "liga" 1, "calt" 0;
}
.unicode-title-text {
  position:relative;
  z-index:2;
  display:block;
  color:#f9fff9;
  background:linear-gradient(180deg, #effff3 0%, #ffffff 34%, #f8fff8 54%, #d7ffe2 72%, #a9ffc3 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 1px rgba(255,255,255,1),
    0 0 10px rgba(244,255,247,.9),
    0 0 26px rgba(126,255,166,.62);
}
.unicode-title-text::after {
  content:"";
  position:absolute;
  z-index:5;
  left:3.08em;
  top:1.04em;
  width:1.16em;
  height:2px;
  pointer-events:none;
  border-radius:999px;
  background:var(--title-glare);
  box-shadow:0 0 8px rgba(245,255,248,.86), 0 0 26px rgba(116,255,163,.46), 0 0 48px rgba(116,255,163,.2);
  opacity:.82;
  filter:blur(.15px);
}
.unicode-title-layer {
  display:block;
  position:absolute;
  inset:.02em .34em .18em .04em;
  z-index:0;
  pointer-events:none;
}
.unicode-title-layer-red {
  z-index:0;
  color:rgba(130,255,172,.46);
  -webkit-text-fill-color:rgba(130,255,172,.46);
  -webkit-text-stroke:0;
  transform:translate(0, 0);
  filter:none;
  opacity:.7;
  text-shadow:
    0 0 10px rgba(196,255,214,.88),
    0 0 30px rgba(101,255,153,.58),
    0 0 68px rgba(71,255,131,.28);
}
.unicode-title-layer-cyan {
  z-index:3;
  color:rgba(244,255,247,.74);
  -webkit-text-fill-color:currentColor;
  -webkit-text-stroke:0;
  background:none;
  mix-blend-mode:screen;
  opacity:.5;
  transform:translate(0, -.012em);
  text-shadow:0 0 10px rgba(244,255,247,.5), 0 0 26px rgba(116,255,163,.26);
}
.unicode-title.title-booting .unicode-title-layer-red { animation:titleBootRedChannel 1.05s steps(2,end) both; }
.unicode-title.title-booting .unicode-title-layer-cyan { animation:titleBootCyanChannel 1.05s steps(2,end) both; }
.unicode-title.title-booted:is(:hover, :active, .touch-glitch) .unicode-title-layer-red { animation:titleHoverRedChannel .44s steps(2,end) both; }
.unicode-title.title-booted:is(:hover, :active, .touch-glitch) .unicode-title-layer-cyan { animation:titleHoverCyanChannel .44s steps(2,end) both; }
@keyframes titleBootSignal {
  0% { opacity:0; transform:translate3d(-10px, 0, 0); filter:blur(4px) brightness(1.8); }
  18% { opacity:1; transform:translate3d(4px, 0, 0); filter:blur(1px) brightness(1.45); }
  44% { transform:translate3d(-2px, 0, 0); filter:brightness(1.26); }
  68% { transform:translate3d(1px, 0, 0); filter:brightness(1.12); }
  100% { opacity:1; transform:none; filter:drop-shadow(0 0 2px rgba(244,255,247,.82)) drop-shadow(0 0 20px rgba(120,255,170,.28)) drop-shadow(0 18px 30px rgba(0,0,0,.86)); }
}
/* ---- Title boot glitch: RGB split channels ---- */
@keyframes titleBootRedChannel {
  0%, 36% { color:rgba(190,255,210,.72); -webkit-text-fill-color:rgba(190,255,210,.72); opacity:.28; transform:translate(calc(var(--title-glitch-x) * -1), 0); }
  52% { opacity:.82; transform:translate(var(--title-glitch-x), 0); }
  100% { color:rgba(130,255,172,.46); -webkit-text-fill-color:rgba(130,255,172,.46); opacity:.7; transform:translate(0, 0); }
}
@keyframes titleBootCyanChannel {
  0%, 42% { color:rgba(232,255,236,.72); -webkit-text-fill-color:rgba(232,255,236,.72); background:none; transform:translate(var(--title-glitch-x), calc(var(--title-glitch-y) * -1)); opacity:.62; }
  15% { transform:translate(calc(var(--title-glitch-x) * -1), var(--title-glitch-y)); }
  58% { color:rgba(232,255,236,.48); -webkit-text-fill-color:rgba(232,255,236,.48); transform:translate(2px, 0); opacity:.5; }
  100% { color:rgba(244,255,247,.74); -webkit-text-fill-color:currentColor; transform:none; opacity:.5; }
}
/* Title hover glitch sub-animations */
@keyframes titleHoverSignal {
  0%, 100% { transform:none; filter:none; }
  30% { transform:translate3d(2px, -1px, 0); filter:brightness(1.16) saturate(1.12); }
  58% { transform:translate3d(-1px, 1px, 0); text-shadow:0 0 2px rgba(255,255,255,.94), 0 0 16px rgba(188,255,213,.9), 0 0 42px rgba(116,255,163,.7); }
  78% { transform:translate3d(1px, 0, 0); }
}
@keyframes titleHoverRedChannel {
  0%, 100% { color:rgba(130,255,172,.58); -webkit-text-fill-color:rgba(130,255,172,.58); transform:translate(0, 0); clip-path:inset(0); }
  34% { color:rgba(220,255,228,.64); -webkit-text-fill-color:rgba(220,255,228,.64); transform:translate(calc(var(--title-glitch-x) * -1), 0); clip-path:inset(14% 0 58% 0); }
  62% { transform:translate(var(--title-glitch-x), 0); clip-path:inset(62% 0 10% 0); }
}
@keyframes titleHoverCyanChannel {
  0%, 100% { color:transparent; -webkit-text-fill-color:transparent; transform:none; clip-path:inset(0); opacity:.82; }
  34% { color:rgba(232,255,236,.62); -webkit-text-fill-color:rgba(232,255,236,.62); background:none; transform:translate(var(--title-glitch-x), calc(var(--title-glitch-y) * -1)); clip-path:inset(58% 0 12% 0); opacity:.78; }
  62% { transform:translate(calc(var(--title-glitch-x) * -1), var(--title-glitch-y)); clip-path:inset(10% 0 70% 0); }
}
/* ---- Signal-glitch title variant (composited layers) ---- */
.signal-glitch-title {
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.signal-glitch-title-text { position:relative; z-index:1; }
.signal-glitch-title-layer {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  color:transparent;
  -webkit-text-fill-color:currentColor;
  background:none;
  text-shadow:none;
  mix-blend-mode:screen;
}
.signal-glitch-title:is(:hover, :active, .touch-glitch) { animation:signalGlitchTitle .38s steps(2,end) both; }
.signal-glitch-title:is(:hover, :active, .touch-glitch) .signal-glitch-title-layer-red { animation:signalGlitchRedChannel .38s steps(2,end) both; }
.signal-glitch-title:is(:hover, :active, .touch-glitch) .signal-glitch-title-layer-cyan { animation:signalGlitchCyanChannel .38s steps(2,end) both; }
@keyframes signalGlitchTitle {
  0%, 100% { transform:translate3d(0,0,0); filter:none; }
  28% { transform:translate3d(2px,-1px,0); filter:brightness(1.14) saturate(1.22); }
  56% { transform:translate3d(-2px,1px,0); text-shadow:-2px 0 0 rgba(255,77,109,.2), 2px 0 0 rgba(72,247,255,.18), 0 0 30px rgba(57,255,136,.22); }
  76% { transform:translate3d(1px,0,0); }
}
@keyframes signalGlitchRedChannel {
  0%, 100% { opacity:0; transform:translate3d(0,0,0); clip-path:inset(0); }
  28% { opacity:.76; color:rgba(255,77,109,.7); transform:translate3d(-6px,1px,0); clip-path:inset(12% 0 62% 0); }
  56% { opacity:.52; color:rgba(255,77,109,.58); transform:translate3d(7px,0,0); clip-path:inset(60% 0 10% 0); }
}
@keyframes signalGlitchCyanChannel {
  0%, 100% { opacity:0; transform:translate3d(0,0,0); clip-path:inset(0); }
  28% { opacity:.72; color:rgba(72,247,255,.68); transform:translate3d(6px,-1px,0); clip-path:inset(58% 0 12% 0); }
  56% { opacity:.5; color:rgba(72,247,255,.54); transform:translate3d(-7px,1px,0); clip-path:inset(8% 0 72% 0); }
}
/* ---- Typography: headings, hero tagline, availability ---- */
h2 { font-family:var(--heading); font-size: clamp(36px, 6vw, 86px); line-height:.92; letter-spacing:-.045em; margin-bottom: 20px; text-wrap: balance; }
h3 { font-family:var(--heading); letter-spacing:-.02em; }
/* Reading copy in humanist sans (not mono) for legibility + an expert read */
.hero-profile-copy p, .about-copy p { font-family:var(--sans); }
h3 { font-size: 22px; margin-bottom:12px; }
.hero-titleline {
  display:block;
  max-width:min(100%, 64ch);
  margin:-12px 0 10px;
  color:rgba(202,255,210,.9);
  font:800 clamp(10px, .82vw, 12px)/1.35 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:
    var(--readability-shadow),
    0 2px 8px rgba(0,0,0,.95),
    0 0 16px rgba(72,247,255,.34),
    0 0 34px rgba(0,0,0,.72);
}
.hero-titleline,
.lede { position:relative; z-index:3; }
/* Hero availability signal (clarity / "open to work") */
.hero-availability { position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; width:max-content; max-width:100%; margin:0 0 12px; padding:7px 12px; border:1px solid rgba(0,255,90,.34); border-radius:999px; background:rgba(0,26,13,.42); font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:rgba(224,255,232,.92); text-shadow:var(--readability-shadow); }
.hero-availability strong { color:#eafff0; font-weight:700; }
.status-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
.contact-resume-row { margin-top:18px; margin-bottom:0; }
@media (prefers-reduced-motion: no-preference) { .status-dot { animation:statusPulse 2.2s ease-in-out infinite; } }
@keyframes statusPulse { 50% { opacity:.4; box-shadow:0 0 3px var(--acid); } }
.lede { color: rgba(252,255,253,.92); max-width: 680px; font-size: clamp(17px, 1.48vw, 21px); font-weight:650; line-height:1.42; text-shadow:var(--readability-shadow), 0 0 30px rgba(0,255,55,.16); }

/* ---- Hero CTA actions + base button ---- */
.hero-actions {
  position:relative;
  z-index:8;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
  align-items:center;
}
.hero-actions .btn { min-height:46px; padding:12px 18px; }
.hero-actions .btn.primary { min-width:min(100%, 188px); }
.hero-lab-row {
  position:relative;
  z-index:8;
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:999px; padding: 13px 18px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); cursor:pointer; }
.btn .btn-label { position:relative; z-index:1; min-width:0; max-width:100%; line-height:1.2; overflow-wrap:anywhere; }
/* ---- Black-hole / abduction CTA ---- */
#blackHoleBtn {
  --abductor-width: 92px;
  --abduction-ufo-lift: 78px;
  --abduction-beam-width: 70px;
  --abduction-beam-height: 80px;
  --abduction-beam-floor: 2px;
  position:relative;
  z-index:18;
  min-width:0;
  max-width:100%;
  overflow:visible;
  isolation:isolate;
}
/* Lab-tier Code Red keeps easter-egg geometry without competing with primary CTAs */
#blackHoleBtn.btn.lab {
  z-index:12;
  min-height:36px;
}
/* Cow abduction easter-egg elements */
.black-hole-cow {
  --cow-width: 74px;
  --cow-abduct-mid: -42px;
  --cow-abduct-high: -68px;
  --cow-abduct-rise: -96px;
  position:absolute;
  left:0;
  bottom:calc(100% - 2px);
  width:var(--cow-width);
  display:block !important;
  white-space:pre;
  font-family:var(--mono);
  font-size:3.7px;
  line-height:1;
  letter-spacing:0;
  text-align:left;
  color:rgba(202,255,210,.86);
  text-shadow:0 0 5px rgba(0,255,55,.55), 0 0 14px rgba(57,255,136,.28);
  pointer-events:none;
  user-select:none;
  z-index:24;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.82));
  transform:scale(.5);
  transform-origin:0 100%;
  animation:cowWalkTrack 7.8s linear infinite alternate, cowStepBob .42s steps(2,end) infinite;
}
.cow-abductor-ufo {
  position:absolute;
  left:var(--abduct-x, 50%);
  bottom:calc(100% + var(--abduction-ufo-lift));
  width:max-content;
  min-width:var(--abductor-width);
  display:block !important;
  white-space:pre;
  font-family:var(--mono);
  font-size:3px;
  line-height:1;
  letter-spacing:0;
  text-align:left;
  color:rgba(255,205,216,.96);
  text-shadow:0 0 7px rgba(255,77,109,.82), 0 0 20px rgba(255,77,109,.46), 0 0 10px rgba(255,232,74,.18);
  pointer-events:none;
  user-select:none;
  opacity:0;
  z-index:7;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.82));
  transform:translateX(-50%) translate(-190px,-58px) scale(.56);
  transform-origin:50% 72%;
}
.cow-abduction-beam {
  position:absolute;
  left:var(--abduct-x, 50%);
  bottom:calc(100% - var(--abduction-beam-floor));
  width:var(--abduction-beam-width);
  height:var(--abduction-beam-height);
  display:block !important;
  opacity:0;
  pointer-events:none;
  z-index:4;
  transform:translateX(-50%) scaleY(0);
  transform-origin:50% 0;
  clip-path:polygon(46% 0, 54% 0, 82% 100%, 18% 100%);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(202,255,210,.42), rgba(72,247,255,.12) 42%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(202,255,210,.24) 0 1px, transparent 1px 9px),
    linear-gradient(to bottom, rgba(232,255,236,.7), rgba(72,247,255,.2) 58%, rgba(0,255,55,0));
  mix-blend-mode:screen;
  filter:blur(.18px) drop-shadow(0 0 12px rgba(0,255,55,.52));
}
#blackHoleBtn.cow-abducting .cow-abductor-ufo { animation:cowAbductorSwoop 5.2s cubic-bezier(.2,.86,.2,1) both; }
#blackHoleBtn.cow-abducting .cow-abduction-beam { animation:cowAbductionBeam 5.2s cubic-bezier(.18,.82,.2,1) both; }
#blackHoleBtn.cow-abducting .black-hole-cow {
  left:var(--abduct-x, 50%);
  z-index:30;
  transform-origin:50% 100%;
  animation:cowAbducted 5.2s cubic-bezier(.18,.82,.2,1) both;
}
#blackHoleBtn:hover .black-hole-cow,
#blackHoleBtn:focus-visible .black-hole-cow {
  color:rgba(244,255,247,.95);
  text-shadow:0 0 7px rgba(0,255,55,.72), 0 0 18px rgba(57,255,136,.4);
}
body.code-red-active .black-hole-cow,
body.code-red-warning .black-hole-cow,
body.code-red-active .cow-abductor-ufo,
body.code-red-warning .cow-abductor-ufo {
  color:rgba(255,205,216,.92);
  text-shadow:0 0 6px rgba(255,77,109,.74), 0 0 18px rgba(255,77,109,.42);
}
/* ---- Button variants: primary, ghost, black-hole hover ---- */
/* Primary = action (acid). Ghost = secondary instrument. Gold reserved for proof states. */
.btn.primary {
  color:#001604;
  border-color: rgba(var(--theme-signal-rgb),.88);
  background: linear-gradient(135deg, var(--acid), #7dffa0 88%);
  box-shadow: 0 0 22px rgba(var(--theme-signal-rgb),.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover, .btn.primary:focus-visible {
  filter:brightness(1.06);
  box-shadow: 0 0 28px rgba(var(--theme-signal-rgb),.36), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.ghost {
  color: rgba(224,255,232,.88);
  background: rgba(0,12,10,.42);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-color: rgba(72,247,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px rgba(0,0,0,.2);
}
.btn.ghost:hover, .btn.ghost:focus-visible {
  color: var(--cyan);
  border-color: rgba(72,247,255,.5);
  outline:none;
  background: rgba(0,18,16,.55);
  box-shadow: 0 0 18px rgba(72,247,255,.08), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.lab {
  min-height:36px;
  padding:8px 12px;
  font-size:11px;
  letter-spacing:.1em;
  color: rgba(186,241,255,.62);
  border-color: rgba(255,77,109,.28);
  background: transparent;
  box-shadow: none;
}
.btn.lab:hover, .btn.lab:focus-visible {
  color: #ffd8df;
  border-color: rgba(255,77,109,.7);
  background: rgba(40,0,8,.35);
}
#blackHoleBtn:hover,
#blackHoleBtn:focus-visible {
  color:#fff2f5;
  border-color:rgba(255,77,109,.92);
  outline:1px dotted rgba(255,216,223,.95);
  outline-offset:3px;
  background:
    linear-gradient(90deg, rgba(255,77,109,.13), transparent 34%, rgba(255,77,109,.18) 68%, transparent),
    linear-gradient(145deg, rgba(64,0,12,.78), rgba(18,0,5,.7) 48%, rgba(3,0,1,.74));
  box-shadow:
    0 0 34px rgba(255,77,109,.34),
    0 0 9px rgba(255,216,223,.16) inset,
    inset 0 1px 0 rgba(255,216,223,.28),
    inset 0 -1px 0 rgba(64,0,12,.86);
  text-shadow:
    1px 0 0 rgba(255,77,109,.82),
    -1px 0 0 rgba(72,247,255,.34),
    0 0 16px rgba(255,77,109,.62);
  animation:codeRedButtonThreat .13s steps(2,end) infinite, codeRedOpacityFlicker .26s steps(2,end) infinite;
}
#blackHoleBtn:hover .btn-label,
#blackHoleBtn:focus-visible .btn-label {
  animation:crtTextDesync .13s steps(2,end) infinite;
}
.btn:hover, .case-file:hover { transform: translateY(-1px); }
/* ---- Shared glass-card surface ---- */
.contact-card, .method-panel, .case-detail {
  border-radius: 24px;
  padding: clamp(22px, 4vw, 38px);
  border-color:rgba(218,255,235,.22);
  border-top-color:rgba(255,255,255,.38);
  background:
    radial-gradient(ellipse 74% 46% at 14% 0%, rgba(255,255,255,.12), transparent 58%),
    radial-gradient(ellipse 58% 48% at 90% 16%, rgba(72,247,255,.065), transparent 62%),
    linear-gradient(145deg, rgba(31,59,52,.72), rgba(8,28,25,.76) 52%, rgba(3,17,17,.72));
  box-shadow:var(--liquid-shadow);
}

.contact-basics { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.contact-basics a, .contact-basics span { color:rgba(244,255,247,.86); text-decoration:none; border:1px solid rgba(218,255,235,.18); border-radius:999px; padding:8px 10px; background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(17,42,38,.46), rgba(0,0,0,.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 32px rgba(0,0,0,.16); backdrop-filter:blur(16px) saturate(1.22); -webkit-backdrop-filter:blur(16px) saturate(1.22); }
.contact-basics a:hover, .contact-basics a:focus-visible { color:var(--cyan); border-color:var(--line-strong); outline:none; box-shadow:0 0 22px rgba(72,247,255,.13); }
.contact-subhead { margin:24px 0 0; color:var(--gold); font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.availability-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.availability-strip span { color:rgba(224,255,232,.88); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; border:1px solid rgba(0,255,90,.28); border-radius:999px; padding:7px 11px; background:rgba(0,22,11,.42); white-space:nowrap; }
/* ---- Signal-link grid (social / project links) ---- */
.signal-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:22px; }
.signal-link {
  min-width:0;
  min-height:138px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  padding:14px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(218,255,235,.18);
  border-top-color:rgba(255,255,255,.32);
  border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(14,42,39,.48), rgba(0,5,6,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 1px 0 0 rgba(72,247,255,.08), -1px 0 0 rgba(255,77,109,.04), 0 18px 46px rgba(0,0,0,.24);
  backdrop-filter:blur(20px) saturate(1.28) brightness(1.04);
  -webkit-backdrop-filter:blur(20px) saturate(1.28) brightness(1.04);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.signal-link:hover, .signal-link:focus-visible {
  transform:translateY(-2px);
  border-color:rgba(218,255,235,.34);
  outline:none;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(23,62,57,.48), rgba(0,0,0,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 24px rgba(72,247,255,.09), 0 22px 56px rgba(0,0,0,.32);
}
.signal-link-thumb {
  width:52px;
  height:52px;
  display:block;
  object-fit:cover;
  border:1px solid rgba(72,247,255,.38);
  border-radius:10px;
  background:#000;
  box-shadow:0 0 18px rgba(72,247,255,.12), inset 0 1px 0 rgba(255,255,255,.18);
}
.signal-link-copy { min-width:0; display:grid; gap:5px; align-content:start; }
.signal-link-copy strong { color:#fff; font:800 15px/1.1 var(--mono); letter-spacing:.01em; }
.signal-link-copy span { color:rgba(186,241,255,.78); font:600 11px/1.35 var(--mono); letter-spacing:.02em; }
.signal-link-arrow { color:var(--gold); font:700 12px/1 var(--mono); justify-self:end; text-shadow:0 0 12px rgba(255,233,114,.32); }
.card-kicker { color: var(--gold); font-family:var(--mono); letter-spacing:.16em; font-size:11px; }
.case-file strong,
.hero-profile-copy h2,
.youtube-video-copy strong,
.signal-link-copy strong {
  text-shadow:0 0 18px rgba(72,247,255,.08);
}
dl { margin: 28px 0 0; display:grid; gap:12px; }
dl div { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:12px; }
dt { color:var(--dim); font-family:var(--mono); font-size:12px; text-transform:uppercase; } dd { margin:0; color:var(--ink); text-align:right; }
/* ---- Section layout headers ---- */
.section-head { max-width: 1040px; margin:0 auto 28px; width:100%; }
.section-head.split { display:flex; justify-content:space-between; gap:26px; align-items:end; }
.section-note { max-width: 420px; color:rgba(214,242,224,.78); line-height:1.5; }

.compact-systems-head { margin-bottom:22px; }
.compact-systems-head h2 { max-width:820px; }

/* ---- Systems grid — three premium outcome cards ---- */
.systems-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.systems-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.systems-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(72, 247, 255, .14);
  border-top-color: rgba(232, 255, 236, .22);
  border-radius: var(--radius-md, 16px);
  background:
    linear-gradient(165deg, rgba(10, 28, 24, .78) 0%, rgba(2, 10, 10, .72) 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.systems-card:hover,
.systems-card:focus-within {
  border-color: rgba(72, 247, 255, .28);
  border-top-color: rgba(232, 255, 236, .36);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(72, 247, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-2px);
}
.systems-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.systems-card-index {
  margin: 0;
  color: rgba(186, 241, 255, .38);
  font: 600 12px/1 var(--mono);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}
.systems-card-label {
  margin: 0;
  color: var(--cyan);
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.systems-card-title {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(22px, 2.1vw, 28px) / 1.12 var(--heading);
  letter-spacing: -.035em;
}
.systems-card-copy {
  margin: 0;
  max-width: 34ch;
  color: rgba(214, 242, 224, .78);
  font: 500 14.5px / 1.55 var(--sans);
}
.systems-card-stack {
  list-style: none;
  margin: 4px 0 0;
  padding: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid rgba(72, 247, 255, .1);
}
.systems-card-stack li {
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgba(72, 247, 255, .14);
  border-radius: 999px;
  color: rgba(186, 241, 255, .68);
  background: rgba(0, 12, 12, .35);
  font: 600 10.5px / 1 var(--mono);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .systems-card,
  .systems-card:hover,
  .systems-card:focus-within {
    transition: none;
    transform: none;
  }
}

.case-file,
.case-study-grid div,
.case-visual-slot,
.case-showcase,
.case-proof-card,
.case-tags span,
.method-steps span,
.signal-link,
.youtube-video-card,
.youtube-player-shell,
.contact-basics a,
.contact-basics span,
.site-footer span,
.site-footer a {
  border-radius:var(--quiet-radius);
}
.case-showcase,
.youtube-player-shell {
  border-radius:var(--quiet-radius-lg);
}
.case-file,
.signal-link,
.youtube-video-card {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.22);
}
.case-file:hover,
.signal-link:hover,
.signal-link:focus-visible,
.youtube-video-card:hover,
.youtube-video-card:focus-visible,
.youtube-video-card.active {
  transform:translateY(-1px);
}

/* ---- About photo shell ---- */
.about-photo-shell {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:1;
  border:1px solid rgba(72,247,255,.28);
  border-top-color:rgba(232,255,236,.5);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(72,247,255,.1), rgba(0,0,0,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 26px 70px rgba(0,0,0,.38), 0 0 28px rgba(72,247,255,.08);
}
.about-photo-shell::before {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:-18px;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(126,255,181,.38) 0 45%, rgba(126,255,181,.18) 58%, transparent 72%);
  filter:blur(5px);
  opacity:.8;
}
.about-photo-shell::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid rgba(208,255,224,.46);
  border-radius:inherit;
  background:none;
  box-shadow:0 0 24px rgba(126,255,181,.26), inset 0 0 0 1px rgba(0,0,0,.18);
  mix-blend-mode:normal;
  opacity:1;
}
.about-photo {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 24%;
  /* Clean, true-colour headshot — no VHS cast. */
  filter:saturate(1.05) contrast(1.04) brightness(1.05);
}
.about-copy h2 { font-size:clamp(40px, 6vw, 76px); }
/* ---- Hero profile card (photo + bio) ---- */
.hero-profile {
  position:relative;
  z-index:2;
  scroll-margin-top:112px;
  width:min(100%, 380px);
  min-width:0;
  justify-self:end;
  align-self:start;
  display:grid;
  gap:16px;
  padding:20px 20px 18px;
  border-radius:18px;
  border-color:rgba(218,255,235,.24);
  border-top-color:rgba(255,255,255,.42);
  background:
    radial-gradient(ellipse 80% 38% at 50% 12%, rgba(255,255,255,.15), transparent 62%),
    radial-gradient(ellipse 58% 52% at 12% 0%, rgba(244,255,247,.1), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 34%, rgba(72,247,255,.06), transparent 66%),
    linear-gradient(155deg, rgba(57,82,70,.78), rgba(13,36,31,.82) 48%, rgba(3,18,16,.78));
  box-shadow:0 34px 90px rgba(0,0,0,.52), 0 0 30px rgba(88,255,154,.06), 1px 0 0 rgba(72,247,255,.1), -1px 0 0 rgba(255,77,109,.045), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(244,255,247,.06), inset 0 0 40px rgba(154,255,196,.025);
  transform:translateY(0);
  backdrop-filter:blur(40px) saturate(1.14) contrast(1.02);
  -webkit-backdrop-filter:blur(40px) saturate(1.14) contrast(1.02);
}
.hero-profile-photo {
  width:min(70%, 236px);
  justify-self:center;
  padding:8px;
  /* Override the aspect-ratio:1 inherited from .about-photo-shell: iOS Safari renders
     aspect-ratio + box-sizing:border-box + padding as an ellipse (it adds the padding
     onto the height). The square 320x320 headshot (img height:auto below) defines the
     square box instead, keeping the ring a true circle on Safari. */
  aspect-ratio:auto;
  overflow:visible;
  border:1px solid rgba(218,255,235,.42);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), rgba(116,255,163,.1) 58%, rgba(0,0,0,.18) 72%),
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(90,255,154,.11));
  box-shadow:0 0 0 1px rgba(232,255,236,.14), 0 0 26px rgba(104,255,161,.26), 0 0 64px rgba(104,255,161,.1), 0 20px 34px rgba(0,0,0,.42);
}
.hero-profile-photo::before {
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(126,255,181,.24) 0 44%, rgba(126,255,181,.14) 55%, transparent 72%);
  filter:blur(7px);
  opacity:.8;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  -webkit-mask:none;
          mask:none;
}
.hero-profile-photo::after {
  inset:7px;
  border:1px solid rgba(208,255,224,.52);
  border-radius:50%;
  background:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 0 18px rgba(152,255,190,.24);
  opacity:1;
}
.hero-profile-photo .about-photo {
  z-index:1;
  /* Square headshot sizes its own height so the padded circle stays round on Safari
     (the container no longer relies on the buggy aspect-ratio above). */
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(1,18,10,.74), 0 16px 28px rgba(0,0,0,.38);
}
.hero-profile-copy .eyebrow {
  margin-bottom:10px;
}
.hero-profile-copy h2 {
  font-size:clamp(27px, 2.7vw, 35px);
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:10px;
  color:rgba(255,246,190,.95);
}
.hero-profile-copy p {
  color:rgba(218,255,225,.8);
  font-size:15.25px;
  line-height:1.45;
  margin-bottom:8px;
}
.hero-profile-copy p:last-child {
  margin-bottom:0;
}
/* ---- Work section: Proof Orbit with an on-demand build receipt ---- */
.proof-orbit-section {
  --receipt-progress:0;
  min-height:0;
  padding-top:clamp(72px, 9vw, 110px);
  padding-bottom:clamp(20px, 3vw, 36px);
  align-items:start;
}
.receipt-orbit-stage {
  position:relative;
  width:min(100%, 1280px);
  /* Shorter scroll runway keeps Method closer without killing orbit motion */
  height:clamp(680px, 118vh, 920px);
  margin:clamp(16px, 3vw, 28px) auto clamp(8px, 1.5vw, 16px);
  isolation:isolate;
}
.receipt-orbit-sticky {
  position:sticky;
  top:76px;
  min-height:min(760px, calc(100vh - 96px));
  height:min(760px, calc(100vh - 96px));
  overflow:visible;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.receipt-orbit-sticky::before,
.receipt-orbit-sticky::after {
  content:none;
}
@keyframes receiptScan { from{ background-position:0 -180px; } to{ background-position:0 180px; } }
.receipt-orbit-bg { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible; }
.receipt-orbit-bg::before,
.receipt-orbit-bg::after {
  content:none;
}
.receipt-orbit-ring {
  position:absolute;
  left:50%;
  top:50%;
  width:620px;
  max-width:78vw;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(72,247,255,.2);
  box-shadow:0 0 32px rgba(72,247,255,.1), inset 0 0 28px rgba(0,255,90,.06);
  transform:translate(-50%, -50%) rotate(calc(var(--receipt-progress) * 26deg)) scaleX(1.48) scaleY(.64);
}
.receipt-orbit-ring.ring-two {
  width:820px;
  border-color:rgba(255,233,114,.13);
  transform:translate(-50%, -50%) rotate(calc(var(--receipt-progress) * -18deg + 12deg)) scaleX(1.5) scaleY(.56);
}
.receipt-orbit-grid {
  position:absolute;
  left:50%; top:50%;
  width:2px; height:2px;
  border-radius:50%;
  box-shadow:
    -540px -210px 0 rgba(72,247,255,.32), 520px -188px 0 rgba(0,255,90,.26),
    -430px 228px 0 rgba(255,233,114,.25), 418px 248px 0 rgba(72,247,255,.28),
    -120px -316px 0 rgba(0,255,90,.26), 160px 316px 0 rgba(255,255,255,.28);
  opacity:.8;
}
.receipt-orbit-card-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.receipt-orbit-card {
  position:absolute;
  left:50%; top:50%;
  width:clamp(166px, 19vw, 270px);
  min-height:clamp(162px, 20vw, 250px);
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(104px, 1fr) auto;
  padding:0;
  color:var(--ink);
  text-align:left;
  border:1px solid rgba(72,247,255,.26);
  border-top-color:rgba(232,255,236,.6);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(7,28,25,.82), rgba(0,6,6,.78));
  box-shadow:0 20px 60px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.11);
  cursor:pointer;
  pointer-events:auto;
  transform:translate(-50%, -50%);
  transition:border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.receipt-orbit-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.18) 46%, transparent 58%);
  opacity:.12;
  transform:translateX(-30%);
  transition:.24s ease;
}
.receipt-orbit-card::after {
  content:"PROOF";
  position:absolute;
  right:9px;
  top:9px;
  z-index:3;
  padding:5px 7px;
  border-radius:7px;
  border:1px solid rgba(255,233,114,.28);
  background:rgba(0,10,5,.78);
  color:var(--gold);
  font:800 8px/1 var(--mono);
  letter-spacing:.12em;
  box-shadow:0 0 12px rgba(255,233,114,.1);
  opacity:.9;
}
.receipt-orbit-card:hover,
.receipt-orbit-card:focus-visible,
.receipt-orbit-card.active {
  border-color:rgba(255,233,114,.62);
  outline:none;
  filter:saturate(1.1) brightness(1.05);
  box-shadow:0 28px 76px rgba(0,0,0,.58), 0 0 34px rgba(255,233,114,.16), inset 0 1px 0 rgba(255,255,255,.16);
}
.receipt-orbit-card:hover::before,
.receipt-orbit-card:focus-visible::before,
.receipt-orbit-card.active::before { opacity:.42; transform:translateX(20%); }
.receipt-orbit-card-media { position:relative; min-height:118px; background:#020403; overflow:hidden; }
.receipt-orbit-card-media::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:28px;
  z-index:2;
  border-bottom:1px solid rgba(72,247,255,.14);
  background:linear-gradient(180deg, rgba(1,15,14,.92), rgba(0,8,8,.5));
}
.receipt-orbit-card-media::after {
  content:"● ● ●";
  position:absolute;
  left:10px; top:9px;
  z-index:3;
  color:rgba(232,255,236,.52);
  font:900 9px/1 var(--mono);
  letter-spacing:.3em;
}
.receipt-orbit-card-image {
  width:100%; height:100%; min-height:126px;
  display:block;
  object-fit:cover;
  filter:saturate(1.12) contrast(1.05);
}
.receipt-orbit-schematic {
  min-height:146px;
  display:grid;
  place-items:center;
  gap:8px;
  padding-top:26px;
  background:
    radial-gradient(circle at 50% 34%, rgba(72,247,255,.18), transparent 44%),
    linear-gradient(145deg, rgba(0,255,90,.1), rgba(0,0,0,.46));
}
.receipt-orbit-schematic span { color:var(--cyan); font:900 28px/1 var(--mono); letter-spacing:.18em; }
.receipt-orbit-schematic em { color:rgba(202,255,209,.78); font:800 9px/1 var(--mono); letter-spacing:.16em; font-style:normal; }
.receipt-orbit-card-copy {
  position:relative;
  z-index:4;
  display:grid;
  gap:6px;
  padding:12px 13px 40px;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28));
}
.receipt-orbit-card-kicker { color:var(--cyan); font:900 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.receipt-orbit-card strong { color:var(--ink); font-size:clamp(18px, 1.8vw, 24px); letter-spacing:-.03em; line-height:.98; }
.receipt-orbit-card em { color:rgba(214,242,224,.76); font:700 10.5px/1.35 var(--mono); letter-spacing:.04em; font-style:normal; }
.receipt-orbit-card-open {
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:5;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,233,114,.42);
  background:rgba(0,8,6,.82);
  color:var(--gold);
  font:900 8.5px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 0 16px rgba(255,233,114,.12);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.receipt-orbit-card:hover .receipt-orbit-card-open,
.receipt-orbit-card:focus-visible .receipt-orbit-card-open,
.receipt-orbit-card.active .receipt-orbit-card-open {
  opacity:1;
  transform:none;
}
@media (max-width:760px), (hover: none) {
  .receipt-orbit-card-open {
    opacity:1;
    transform:none;
  }
}
.receipt-orbit-core {
  position:absolute;
  left:50%; top:50%;
  z-index:40;
  width:min(470px, 48vw);
  min-height:255px;
  transform:translate(-50%, -50%) scale(calc(.96 + var(--receipt-progress) * .04));
  display:grid;
  align-content:center;
  gap:14px;
  padding:clamp(24px, 3vw, 34px);
  border-radius:26px;
  border:1px solid rgba(0,255,90,.26);
  border-top-color:rgba(232,255,236,.58);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(72,247,255,.12), transparent 66%),
    linear-gradient(145deg, rgba(0,15,10,.86), rgba(0,0,0,.72));
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 46px rgba(0,255,90,.09), inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(16px) saturate(1.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.14);
  pointer-events:auto;
}
.receipt-orbit-eyebrow { margin:0; color:var(--gold); font:900 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; }
.receipt-orbit-core h3 { margin:0; color:var(--ink); font-size:clamp(34px, 4.5vw, 58px); line-height:.9; letter-spacing:-.06em; }
.receipt-orbit-core p:not(.receipt-orbit-eyebrow) { margin:0; color:rgba(226,255,233,.86); font-size:clamp(14px, 1.25vw, 16px); line-height:1.54; }
.receipt-orbit-lead { margin:0; }
.receipt-orbit-nav {
  display:none;
}
.receipt-orbit-counter {
  margin:0;
  color:rgba(186,241,255,.78);
  font:800 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.receipt-orbit-dots {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}
.receipt-orbit-dot {
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(186,241,255,.28);
  box-shadow:0 0 10px rgba(72,247,255,.08);
  cursor:pointer;
  transition:width .18s ease, background .18s ease, box-shadow .18s ease;
}
.receipt-orbit-dot.active,
.receipt-orbit-dot[aria-selected="true"] {
  width:22px;
  background:var(--gold);
  box-shadow:0 0 16px rgba(255,233,114,.32);
}
.receipt-orbit-dot:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.receipt-reader-handle {
  display:none;
}
.receipt-orbit-meta { display:flex; flex-wrap:wrap; gap:8px; }
.receipt-orbit-meta span {
  border:1px solid rgba(72,247,255,.22);
  border-radius:999px;
  padding:7px 9px;
  color:rgba(186,241,255,.82);
  background:rgba(0,12,14,.42);
  font:900 9.5px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.receipt-orbit-meta span:first-child { color:#031604; background:var(--acid); border-color:var(--acid); box-shadow:0 0 18px rgba(0,255,90,.18); }
.receipt-orbit-cta {
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(var(--theme-signal-rgb),.88);
  color:#031604;
  background:linear-gradient(135deg, var(--acid), #7dffa0 88%);
  font:900 11px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 0 22px rgba(0,255,90,.22);
  cursor:pointer;
}
.receipt-orbit-cta:hover,
.receipt-orbit-cta:focus-visible { outline:none; filter:brightness(1.08); transform:translateY(-1px); }
.receipt-orbit-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.receipt-orbit-detail-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 15px;
  border:1px solid rgba(72,247,255,.42);
  border-radius:999px;
  color:var(--cyan);
  background:rgba(0,14,14,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  cursor:pointer;
  font:900 10px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s ease;
}
.receipt-orbit-detail-toggle:hover,
.receipt-orbit-detail-toggle:focus-visible {
  outline:none;
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(255,233,114,.08);
  box-shadow:0 0 22px rgba(255,233,114,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
/* Static build index — the crawlable inbound links to each case-study page that the
   JS-rendered orbit cannot provide. Instrument-quiet: mono, cyan, no glow stack. */
.work-index {
  width:min(100%, 1280px);
  margin:30px auto 0;
  padding:18px 2px 0;
  border-top:1px solid rgba(72,247,255,.14);
}
.work-index-label {
  margin:0 0 10px;
  color:rgba(186,241,255,.62);
  font:700 11px/1.35 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.work-index-list {
  display:flex;
  flex-wrap:wrap;
  gap:9px 24px;
  margin:0;
  padding:0;
  list-style:none;
}
.work-index-list li { font:400 12.5px/1.5 var(--mono); color:rgba(201,255,219,.44); }
.work-index-list a {
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(72,247,255,.3);
  transition:color .18s ease, border-color .18s ease;
}
.work-index-list a:hover, .work-index-list a:focus-visible { color:var(--ink); border-bottom-color:currentColor; }
@media (max-width: 640px) {
  .work-index { margin-top:22px; }
  .work-index-list { gap:8px 16px; }
  .work-index-list li { font-size:11.5px; }
  .work-index-list span { display:none; }
}
/* Hint lives under the section head — never over orbit cards */
.receipt-orbit-hint {
  width:min(100%, 1280px);
  margin:0 auto 10px;
  padding:0 2px;
  color:rgba(186,241,255,.62);
  font:700 11px/1.35 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
  pointer-events:none;
}

/* Fixed case-file reader: keeps the orbit layout stable while reading */
.receipt-reader {
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:clamp(12px, 3vw, 28px);
}
.receipt-reader[hidden] { display:none !important; }
.receipt-reader-backdrop {
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  background:rgba(0, 5, 6, .78);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
  cursor:pointer;
}
.receipt-reader-panel {
  position:relative;
  z-index:1;
  width:min(920px, 100%);
  max-height:min(88vh, 960px);
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(72,247,255,.28);
  border-top-color:rgba(232,255,236,.56);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(72,247,255,.1), transparent 62%),
    linear-gradient(145deg, rgba(2,18,15,.96), rgba(0,5,6,.94));
  box-shadow:0 34px 100px rgba(0,0,0,.58), 0 0 48px rgba(0,255,90,.08), inset 0 1px 0 rgba(255,255,255,.1);
}
.receipt-reader-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(72,247,255,.16);
  background:linear-gradient(180deg, rgba(8,28,24,.92), rgba(2,14,12,.78));
}
.receipt-reader-heading { min-width:0; display:grid; gap:5px; }
.receipt-reader-kicker {
  margin:0;
  color:var(--gold);
  font:900 10px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.receipt-reader-title {
  margin:0;
  color:var(--ink);
  font:800 clamp(18px, 2.4vw, 24px)/1.1 var(--display, ui-sans-serif, system-ui, sans-serif);
  letter-spacing:-.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.receipt-reader-close {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(72,247,255,.34);
  border-radius:999px;
  color:var(--cyan);
  background:rgba(0,12,12,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  cursor:pointer;
  font:900 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:.18s ease;
}
.receipt-reader-close:hover,
.receipt-reader-close:focus-visible {
  outline:none;
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(255,233,114,.08);
  box-shadow:0 0 20px rgba(255,233,114,.12);
}
.receipt-reader .receipt-case-detail {
  overflow:auto;
  overscroll-behavior:contain;
  max-height:none;
  margin:0;
  padding:clamp(18px, 3vw, 28px);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.receipt-reader .case-detail-inner { max-width:none; }
body.receipt-reader-open { overflow:hidden; }
@media (prefers-reduced-motion: no-preference) {
  .receipt-reader:not([hidden]) .receipt-reader-backdrop {
    animation:receiptReaderFade .22s ease both;
  }
  .receipt-reader:not([hidden]) .receipt-reader-panel {
    animation:receiptReaderIn .28s cubic-bezier(.2,.72,.2,1) both;
  }
}
@keyframes receiptReaderFade { from { opacity:0; } to { opacity:1; } }
@keyframes receiptReaderIn {
  from { opacity:0; transform:translateY(18px) scale(.98); }
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-reader:not([hidden]) .receipt-reader-backdrop,
  .receipt-reader:not([hidden]) .receipt-reader-panel { animation:none; }
}
@media (max-width:900px) {
  .receipt-reader {
    place-items:end center;
    padding:0;
  }
  .receipt-reader-panel {
    width:100%;
    max-height:min(92dvh, 100%);
    border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .receipt-reader-handle {
    display:block;
    width:48px;
    height:5px;
    margin:10px auto 0;
    border-radius:999px;
    background:rgba(186,241,255,.28);
  }
  .receipt-reader-bar {
    position:sticky;
    top:0;
    z-index:2;
    padding:12px 14px 12px;
    backdrop-filter:blur(12px) saturate(1.08);
    -webkit-backdrop-filter:blur(12px) saturate(1.08);
  }
  .receipt-reader .receipt-case-detail {
    padding:14px 14px calc(24px + env(safe-area-inset-bottom, 0));
  }
  .receipt-reader .case-headline h3 {
    font-size:clamp(30px, 10vw, 42px);
    line-height:.95;
  }
  .receipt-reader .case-lead {
    font-size:15px;
    line-height:1.45;
  }
  .receipt-reader .case-showcase {
    margin-top:16px;
    border-radius:14px;
  }
  .receipt-reader .case-chrome-url {
    font-size:10px;
  }
  .receipt-reader .case-study-grid {
    grid-template-columns:1fr;
    gap:8px;
  }
  .receipt-reader .case-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    position:sticky;
    bottom:0;
    padding-top:10px;
    background:linear-gradient(180deg, transparent, rgba(0,6,7,.92) 28%);
  }
  .receipt-reader .case-action {
    min-height:46px;
  }
}

.receipt-case-detail {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.case-layout { max-width: 1120px; width:100%; margin:0 auto; display:grid; grid-template-columns: 360px minmax(0,1fr); gap:18px; }
.case-list { display:grid; gap:12px; align-self:start; }
.case-rail-dots { display:none; }
.case-file { position:relative; overflow:hidden; text-align:left; color:var(--muted); padding:16px 17px; border-radius:16px; border:1px solid rgba(152,255,190,.18); border-top-color:rgba(232,255,236,.28); background:linear-gradient(145deg, rgba(2,18,11,.52), rgba(0,0,0,.38)); cursor:pointer; transition:.2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 38px rgba(0,0,0,.26); backdrop-filter: blur(14px) saturate(1.16); -webkit-backdrop-filter: blur(14px) saturate(1.16); }
.case-file::after { content:""; position:absolute; inset:-60% -20%; pointer-events:none; background:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.11) 45%, transparent 57%); opacity:.24; transform:translateX(-18%) rotate(8deg); transition:.28s ease; }
.case-file:hover::after, .case-file.active::after { opacity:.55; transform:translateX(8%) rotate(8deg); }
.case-file span { display:flex; align-items:center; gap:8px; font-family:var(--mono); color:var(--cyan); font-style:normal; font-size:11px; letter-spacing:.14em; }
.case-file em { display:block; font-family:var(--mono); color:rgba(186,241,255,.68); font-style:normal; font-size:12px; letter-spacing:.08em; }
.case-file small { display:block; margin-top:10px; color:rgba(218,255,225,.68); font:600 12px/1.45 var(--mono); letter-spacing:.02em; }
.case-file strong { display:block; color:var(--ink); margin:8px 0; font-size:22px; letter-spacing:0; }
.case-file.active { border-color:rgba(72,247,255,.5); box-shadow:0 0 26px rgba(72,247,255,.1), inset 0 1px 0 rgba(255,255,255,.12); background:linear-gradient(145deg, rgba(72,247,255,.09), rgba(0,18,12,.5)); }
.pill { margin-left:auto; border-radius:999px; padding:4px 7px; font:900 9px/1 var(--mono); letter-spacing:.1em; }
.pill-live { color:#001b08; background:var(--acid); box-shadow:0 0 14px rgba(0,255,55,.24); }
.pill-client { color:#081118; background:var(--cyan); box-shadow:0 0 14px rgba(72,247,255,.22); }
.pill-open { color:#171404; background:var(--gold); box-shadow:0 0 14px rgba(255,233,114,.22); }
.pill-wf { color:#16040a; background:var(--danger); box-shadow:0 0 14px rgba(255,77,109,.18); }
.pill-shipped { color:#1c0e02; background:#ff9d4d; box-shadow:0 0 14px rgba(255,157,77,.24); }
.case-detail h3 { font-size: clamp(34px, 5vw, 62px); letter-spacing:-.05em; }
.case-status-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.case-status-row span {
  border:1px solid rgba(72,247,255,.24);
  border-radius:999px;
  padding:7px 10px;
  color:rgba(186,241,255,.8);
  background:rgba(0,12,14,.34);
  font:800 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.case-status-row span:nth-child(2) { color:#171404; background:var(--gold); border-color:var(--gold); box-shadow:0 0 18px rgba(255,233,114,.2); }
/* Case detail: study metrics grid */
.case-study-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}
.case-study-grid div {
  min-width:0;
  border:1px solid rgba(72,247,255,.2);
  border-radius:14px;
  padding:14px;
  background:linear-gradient(145deg, rgba(4,24,28,.44), rgba(0,0,0,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.case-study-grid span {
  display:block;
  color:var(--cyan);
  font:700 11px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.case-study-grid p { margin:0; font-size:14px; line-height:1.55; }
.case-visual-slot {
  position:relative;
  overflow:hidden;
  margin-top:16px;
  min-height:132px;
  display:grid;
  align-content:center;
  gap:8px;
  text-align:left;
  color:rgba(186,241,255,.72);
  border:1px solid rgba(72,247,255,.24);
  border-top-color:rgba(232,255,236,.45);
  border-radius:18px;
  padding:18px 20px;
  background:
    radial-gradient(ellipse 58% 58% at 82% 28%, rgba(72,247,255,.11), transparent 58%),
    radial-gradient(ellipse 70% 46% at 0% 0%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(16,43,39,.54), rgba(0,7,8,.42));
  font:700 12px/1.4 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 20px 58px rgba(0,0,0,.28);
}
.case-visual-slot::after {
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:72px;
  height:42px;
  border-top:1px solid rgba(72,247,255,.42);
  border-bottom:1px solid rgba(255,233,114,.16);
  background:
    linear-gradient(90deg, rgba(72,247,255,.52) 0 16%, transparent 16% 28%, rgba(255,233,114,.4) 28% 48%, transparent 48% 60%, rgba(202,255,209,.42) 60% 84%, transparent 84%);
  opacity:.64;
}
.case-visual-slot span {
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.16em;
}
.case-visual-slot p {
  max-width:calc(100% - 92px);
  margin:0;
  color:rgba(244,255,247,.82);
  font-size:12px;
  line-height:1.55;
  letter-spacing:.06em;
}
.case-visual-receipt i {
  position:absolute;
  right:20px;
  bottom:18px;
  width:82px;
  height:52px;
  border-radius:10px;
  border:1px solid rgba(72,247,255,.22);
  background:
    linear-gradient(90deg, rgba(72,247,255,.72) 0 15%, transparent 15% 28%, rgba(255,233,114,.5) 28% 44%, transparent 44% 58%, rgba(202,255,209,.5) 58% 78%, transparent 78%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(72,247,255,.08), rgba(0,0,0,.28));
  box-shadow:0 0 20px rgba(72,247,255,.1), inset 0 1px 0 rgba(255,255,255,.1);
}
/* Image variant: swaps placeholder for full screenshot */
.case-visual-slot.has-image {
  display:grid;
  align-content:stretch;
  gap:0;
  padding:0;
  min-height:0;
  text-transform:none;
  letter-spacing:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(72,247,255,.1), transparent 38%),
    linear-gradient(145deg, rgba(3,24,15,.82), rgba(0,7,4,.58));
}
.case-visual-slot.has-image::after { display:none; }
.case-visual-image {
  width:100%;
  aspect-ratio:16 / 10;
  height:auto;
  display:block;
  object-fit:cover;
  background:#000;
  border-bottom:1px solid rgba(72,247,255,.2);
  filter:saturate(1.12) contrast(1.06);
}
.case-visual-caption {
  display:grid;
  gap:7px;
  padding:16px 18px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.26));
}
.case-visual-caption span {
  color:var(--cyan);
  font:700 10px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.case-visual-caption p {
  max-width:100%;
  margin:0;
  color:rgba(244,255,247,.82);
  font:500 13px/1.55 var(--mono);
  letter-spacing:.03em;
  text-transform:none;
}
/* ── Case study: bold, screenshot-forward redesign ─────────────── */
.case-headline h3 { margin:6px 0 0; }
.case-lead {
  margin:12px 0 0; max-width:58ch;
  color:rgba(234,255,241,.92);
  font-size:clamp(15px, 1.5vw, 18px); font-weight:500; line-height:1.5; letter-spacing:.01em;
}
.case-summary {
  margin:20px 0 0; max-width:64ch;
  color:rgba(214,242,224,.82); font-size:14.5px; line-height:1.62;
}
/* Browser-framed showcase */
.case-showcase {
  margin:22px 0 0; border-radius:16px; overflow:hidden;
  border:1px solid rgba(72,247,255,.26); border-top-color:rgba(232,255,236,.5);
  background:linear-gradient(145deg, rgba(6,26,30,.7), rgba(0,8,8,.5));
  box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.case-chrome {
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:linear-gradient(180deg, rgba(10,30,28,.92), rgba(4,18,18,.86));
  border-bottom:1px solid rgba(72,247,255,.18);
}
.case-chrome-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.case-chrome-dot:nth-child(1){ background:rgba(255,95,109,.72); }
.case-chrome-dot:nth-child(2){ background:rgba(255,221,114,.72); }
.case-chrome-dot:nth-child(3){ background:rgba(0,255,90,.6); }
.case-chrome-url {
  flex:1; margin-left:6px; padding:5px 12px; border-radius:999px;
  background:rgba(0,12,14,.55); border:1px solid rgba(72,247,255,.16);
  color:rgba(186,241,255,.78); font:600 11px/1 var(--mono); letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-chrome-tag {
  flex:none; font:800 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:#021b08; background:var(--acid); padding:5px 8px; border-radius:6px;
}
.case-screen { position:relative; aspect-ratio:16 / 9.4; overflow:hidden; background:#020a09; }
.case-screen .case-visual-image {
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; border:0;
  filter:saturate(1.12) contrast(1.06);
}
.case-showcase.has-gallery .case-screen { aspect-ratio:16 / 10.2; }
.case-image-pair {
  height:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:10px;
  background:
    radial-gradient(ellipse 60% 70% at 14% 16%, rgba(0,255,90,.08), transparent 66%),
    linear-gradient(145deg, rgba(3,20,17,.82), rgba(0,6,7,.92));
}
.case-image-panel {
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(72,247,255,.18);
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.24);
}
.case-image-panel .case-visual-image {
  object-fit:contain;
  padding:8px;
  filter:contrast(1.04);
}
.case-image-panel figcaption {
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border:1px solid rgba(0,255,90,.22);
  border-radius:8px;
  background:rgba(0,8,4,.78);
  color:rgba(232,255,240,.86);
  font:800 9.5px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(0,255,90,.12);
}
.case-image-panel figcaption span {
  color:var(--acid);
  letter-spacing:.14em;
}
/* Three-up gallery: featured image spans the top, two receipts below (desktop). */
@media (min-width:1025px) {
  .case-showcase.has-gallery:has(.case-image-panel:nth-child(3)) .case-screen { aspect-ratio:16 / 12.2; }
  .case-image-pair:has(.case-image-panel:nth-child(3)) { grid-template-rows:1.3fr 1fr; }
  .case-image-pair:has(.case-image-panel:nth-child(3)) .case-image-panel:first-child { grid-column:1 / -1; }
}

.case-screen-mock {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 16%, rgba(72,247,255,.13), transparent 60%),
    radial-gradient(ellipse 80% 64% at 6% 122%, rgba(0,255,90,.08), transparent 62%),
    linear-gradient(150deg, rgba(10,34,30,.7), rgba(2,12,12,.82));
}
.case-screen-mock::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent, rgba(72,247,255,.08) 48%, transparent 52%);
  background-size:100% 9px; animation:caseScan 5.5s linear infinite;
}
@keyframes caseScan { from{ background-position:0 -130px } to{ background-position:0 130px } }
.mock-ui { position:relative; z-index:1; display:grid; gap:10px; padding:22px 24px; }
.mock-row { display:flex; gap:9px; align-items:center; }
.mock-bar { height:9px; border-radius:5px; background:linear-gradient(90deg, rgba(72,247,255,.34), rgba(72,247,255,.06)); }
.mock-bar.lg { height:13px; background:linear-gradient(90deg, rgba(202,255,209,.5), rgba(72,247,255,.1)); }
.mock-chip { width:48px; height:21px; border-radius:6px; border:1px solid rgba(72,247,255,.26); background:rgba(0,14,14,.4); }
.mock-block { height:56px; border-radius:10px; border:1px solid rgba(72,247,255,.18); background:linear-gradient(135deg, rgba(72,247,255,.1), rgba(0,0,0,.2)); }
.case-screen-readout {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(0deg, rgba(0,6,6,.8), transparent);
}
.case-screen-readout .glyphs { color:var(--cyan); font:700 13px/1 var(--mono); letter-spacing:.2em; }
.case-screen-readout p { margin:0; color:rgba(232,255,240,.84); font:700 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.case-showcase figcaption {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-top:1px solid rgba(72,247,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.26));
  color:rgba(214,242,224,.8); font-size:12px; line-height:1.4; letter-spacing:.02em;
}
.case-showcase figcaption b { flex:none; color:var(--cyan); font:700 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }

/* ── "This Site": self-aware live receipt ─────────────────────────── */
.live-chrome .case-chrome-tag.is-live {
  display:inline-flex; align-items:center; gap:6px;
  color:#0a0004; background:linear-gradient(90deg, #ff5f6d, #ff3b6b);
  box-shadow:0 0 16px rgba(255,59,107,.4);
}
.live-pip {
  width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor; animation:livePip 1.5s ease-in-out infinite;
}
@keyframes livePip { 0%,100%{ opacity:.35; transform:scale(.82) } 50%{ opacity:1; transform:scale(1) } }
.live-screen { aspect-ratio:auto; display:grid; gap:0; background:#010806; }
.live-mirror { position:relative; overflow:hidden; aspect-ratio:16 / 8.6; background:#000; }
.live-mirror-canvas, .live-mirror-fallback {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.live-mirror-fallback { opacity:1; transition:opacity .5s ease; filter:saturate(1.1) contrast(1.05); }
.live-mirror-canvas { z-index:1; filter:saturate(1.14) contrast(1.05); }
.live-mirror-scan {
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:linear-gradient(180deg, transparent, rgba(72,247,255,.10) 48%, transparent 52%);
  background-size:100% 8px; animation:caseScan 5.5s linear infinite;
}
.live-mirror-badge {
  position:absolute; left:10px; bottom:10px; z-index:3;
  display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:7px;
  border:1px solid rgba(255,59,107,.4); background:rgba(4,0,3,.72); color:#ffd7df;
  font:800 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 0 18px rgba(255,59,107,.2); backdrop-filter:blur(4px);
}
.live-mirror-badge i { color:#ff3b6b; }
.live-triggers { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; border-top:1px solid rgba(72,247,255,.16); }
.live-trigger {
  position:relative; overflow:hidden; display:grid; gap:5px; padding:14px 15px; text-align:left; cursor:pointer;
  border-radius:12px; border:1px solid rgba(72,247,255,.26);
  background:linear-gradient(150deg, rgba(6,26,30,.72), rgba(0,7,8,.6));
  color:rgba(234,255,241,.92); font-family:var(--mono);
  transition:transform .18s ease, border-color .18s ease, box-shadow .3s ease, background .3s ease;
}
.live-trigger::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(ellipse 80% 70% at 80% 0%, rgba(72,247,255,.14), transparent 62%);
}
.live-trigger:hover, .live-trigger:focus-visible { transform:translateY(-2px); outline:none; }
.live-trigger:hover::after, .live-trigger:focus-visible::after { opacity:1; }
.live-trigger-glyph { font-size:19px; line-height:1; }
.live-trigger b { font:800 13px/1.1 var(--mono); letter-spacing:.08em; }
.live-trigger em { font-style:normal; font-size:11px; line-height:1.4; color:rgba(202,240,224,.72); }
.live-trigger-cta { margin-top:3px; font:800 9.5px/1 var(--mono); letter-spacing:.16em; opacity:.7; }
.live-trigger.is-danger { border-color:rgba(255,59,107,.34); }
.live-trigger.is-danger .live-trigger-glyph, .live-trigger.is-danger .live-trigger-cta { color:#ff6f7d; }
.live-trigger.is-danger:hover, .live-trigger.is-danger:focus-visible {
  border-color:rgba(255,59,107,.7); box-shadow:0 16px 40px rgba(255,59,107,.22), inset 0 0 0 1px rgba(255,59,107,.25);
}
.live-trigger.is-danger::after { background:radial-gradient(ellipse 80% 70% at 80% 0%, rgba(255,59,107,.2), transparent 60%); }
.live-trigger.is-warp .live-trigger-glyph, .live-trigger.is-warp .live-trigger-cta { color:var(--cyan); }
.live-trigger.is-warp:hover, .live-trigger.is-warp:focus-visible {
  border-color:rgba(72,247,255,.66); box-shadow:0 16px 40px rgba(72,247,255,.2), inset 0 0 0 1px rgba(72,247,255,.22);
}
@media (max-width:720px) {
  .live-triggers { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .live-pip, .live-mirror-scan { animation:none; }
}

/* ── Live site embeds (every deployed build) ──────────────────────── */
.live-embed-showcase .case-chrome-tag.is-live {
  display:inline-flex; align-items:center; gap:6px;
  color:#02160a; background:linear-gradient(90deg, var(--acid), #48f7ff);
  box-shadow:0 0 16px rgba(0,255,90,.32);
}
.case-live-embed {
  position:relative; overflow:hidden; aspect-ratio:16 / 10; background:#02100e;
}
.case-embed-poster {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.1) contrast(1.05); transition:opacity .55s ease, transform .55s ease; z-index:1;
}
.case-embed-poster.is-schematic {
  display:grid; place-items:center; font:700 30px/1 var(--mono); color:rgba(72,247,255,.5);
  background:linear-gradient(150deg, rgba(10,34,30,.7), rgba(2,12,12,.85));
}
.case-embed-mount { position:absolute; inset:0; z-index:2; display:block; }
.case-embed-iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  background:#02100e; opacity:0; transition:opacity .6s ease; color-scheme:normal;
}
.case-live-embed.is-live .case-embed-iframe { opacity:1; }
.case-live-embed.is-live .case-embed-poster { opacity:0; }
/* If framing was refused or the host is down, keep the poster and let the CTA lead out. */
.case-live-embed.is-blocked .case-embed-mount { display:none; }
.case-embed-scan {
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.4;
  background:linear-gradient(180deg, transparent, rgba(72,247,255,.10) 48%, transparent 52%);
  background-size:100% 8px; animation:caseScan 5.5s linear infinite;
}
.case-live-embed.is-live .case-embed-scan { opacity:0; transition:opacity .6s ease; }
.case-embed-status {
  position:absolute; top:10px; right:10px; z-index:5;
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px;
  border:1px solid rgba(0,255,90,.32); background:rgba(2,12,8,.72); color:var(--acid);
  font:800 8.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.case-live-embed.is-loading .case-embed-status { color:#ffdd72; border-color:rgba(255,221,114,.4); }
.case-live-embed.is-blocked .case-embed-status { color:#48f7ff; border-color:rgba(72,247,255,.4); }
.case-live-embed.is-loading .case-embed-status::before {
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:livePip 1s ease-in-out infinite;
}
/* Poster overlay: primary "load live" CTA + persistent open-in-new-tab */
.case-embed-overlay {
  position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:12px; pointer-events:none;
  background:linear-gradient(0deg, rgba(1,8,6,.6), transparent 46%);
  transition:opacity .4s ease;
}
.case-embed-overlay > * { pointer-events:auto; }
.case-embed-load {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 15px; border-radius:10px; border:1px solid rgba(0,255,90,.4);
  background:linear-gradient(150deg, rgba(6,30,20,.9), rgba(0,10,8,.82)); color:#eafff1;
  font:800 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .18s ease, border-color .18s ease, box-shadow .3s ease;
}
.case-embed-load span { color:var(--acid); }
.case-embed-load:hover, .case-embed-load:focus-visible {
  transform:translateY(-2px); outline:none; border-color:rgba(0,255,90,.8);
  box-shadow:0 16px 40px rgba(0,255,90,.24);
}
.case-embed-open {
  padding:8px 11px; border-radius:8px; border:1px solid rgba(72,247,255,.28);
  background:rgba(0,12,14,.6); color:rgba(186,241,255,.86);
  font:800 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.case-embed-open:hover, .case-embed-open:focus-visible { border-color:rgba(72,247,255,.66); color:#eafcff; outline:none; }
/* Once live, the big load CTA is gone; keep only a subtle open-full affordance. */
.case-live-embed.is-live .case-embed-load,
.case-live-embed.is-loading .case-embed-load { display:none; }
.case-live-embed.is-live .case-embed-overlay { opacity:0; background:none; }
.case-live-embed.is-live:hover .case-embed-overlay,
.case-live-embed.is-live:focus-within .case-embed-overlay { opacity:1; }
.case-live-embed.is-live .case-embed-overlay { justify-content:flex-end; }
@media (prefers-reduced-motion: reduce) {
  .case-embed-scan { animation:none; }
  .case-embed-poster, .case-embed-iframe, .case-embed-overlay { transition:none; }
}
/* Case proof receipt */
.case-proof-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; }
.case-proof-card {
  border-radius:14px; padding:15px 16px;
  border:1px solid rgba(72,247,255,.2); background:linear-gradient(150deg, rgba(6,26,24,.5), rgba(0,0,0,.32));
}
.case-proof-card span { display:flex; align-items:center; gap:7px; margin-bottom:8px; font:800 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.case-proof-card p { margin:0; font-size:13.5px; line-height:1.55; color:rgba(224,247,230,.84); }
.case-proof-card.is-proves { border-color:rgba(0,255,90,.34); }
.case-proof-card.is-proves span { color:var(--acid); }
/* All case panels live in the DOM (crawlable); only the active one is shown. */
.case-panel[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .case-detail-inner > * { animation:caseIn .5s cubic-bezier(.2,.72,.2,1) both; }
  .case-detail-inner > :nth-child(1){ animation-delay:.02s }
  .case-detail-inner > :nth-child(2){ animation-delay:.06s }
  .case-detail-inner > :nth-child(3){ animation-delay:.1s }
  .case-detail-inner > :nth-child(4){ animation-delay:.14s }
  .case-detail-inner > :nth-child(5){ animation-delay:.18s }
  .case-detail-inner > :nth-child(n+6){ animation-delay:.21s }
}
@keyframes caseIn { from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (max-width:1024px) {
  .case-screen { aspect-ratio:16 / 11; }
  .case-showcase.has-gallery .case-screen { aspect-ratio:auto; }
  .case-image-pair { grid-template-columns:1fr; height:auto; }
  .case-image-panel { min-height:190px; }
}
/* Compact / mobile proof rail: browse horizontally, open full receipt on demand */
@media (max-width:900px) {
  .proof-orbit-section {
    padding-top:clamp(48px, 8vw, 88px);
    padding-bottom:clamp(16px, 3vw, 28px);
  }
  .method-section {
    padding-top:clamp(20px, 4vw, 36px);
    padding-bottom:clamp(36px, 6vw, 56px);
  }
  .receipt-orbit-stage {
    width:100%;
    height:auto;
    min-height:0;
    margin:14px 0 12px;
  }
  .receipt-orbit-sticky {
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    display:grid;
    gap:12px;
    padding:0;
    border-radius:0;
    overflow:visible;
  }
  .receipt-orbit-bg {
    display:none;
  }
  .receipt-orbit-ring,
  .receipt-orbit-grid {
    display:none;
  }
  .receipt-orbit-card-layer {
    position:relative;
    inset:auto;
    z-index:4;
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--page-pad, 16px);
    padding:4px var(--page-pad, 16px) 10px;
    margin:0 calc(var(--page-pad, 16px) * -1);
    pointer-events:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .receipt-orbit-card-layer::-webkit-scrollbar { display:none; }
  .receipt-orbit-card {
    position:relative;
    left:auto;
    top:auto;
    flex:0 0 min(78vw, 300px);
    width:min(78vw, 300px);
    min-height:0;
    display:grid;
    grid-template-rows:148px auto;
    border-radius:16px;
    opacity:1 !important;
    transform:none !important;
    scroll-snap-align:center;
    box-shadow:0 14px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .receipt-orbit-card.active {
    border-color:rgba(255,233,114,.7);
    box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(255,233,114,.14), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .receipt-orbit-card-media {
    min-height:148px;
  }
  .receipt-orbit-card-image {
    min-height:148px;
    height:148px;
    object-fit:cover;
  }
  .receipt-orbit-schematic {
    min-height:148px;
    padding-top:22px;
  }
  .receipt-orbit-card-copy {
    gap:5px;
    padding:11px 12px 38px;
  }
  .receipt-orbit-card strong {
    font-size:clamp(16px, 4.6vw, 20px);
  }
  .receipt-orbit-card em {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:10px;
    line-height:1.35;
  }
  .receipt-orbit-card-open {
    opacity:1;
    transform:none;
    left:auto;
    right:10px;
    bottom:10px;
    background:rgba(0,10,8,.88);
  }
  .receipt-orbit-card.active .receipt-orbit-card-open {
    color:#031604;
    border-color:var(--acid);
    background:var(--acid);
    box-shadow:0 0 16px rgba(0,255,90,.18);
  }
  .receipt-orbit-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 var(--page-pad, 16px);
    padding:0 2px;
  }
  .receipt-orbit-nav[hidden] {
    display:none !important;
  }
  .receipt-orbit-core {
    position:relative;
    left:auto;
    top:auto;
    z-index:5;
    width:auto;
    min-height:0;
    margin:0 var(--page-pad, 16px);
    padding:18px 16px 16px;
    gap:12px;
    border-radius:20px;
    transform:none;
  }
  .receipt-orbit-core h3 {
    font-size:clamp(28px, 9vw, 38px);
    line-height:.94;
  }
  .receipt-orbit-lead {
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:14px;
    line-height:1.45;
  }
  .receipt-orbit-meta {
    gap:6px;
  }
  .receipt-orbit-meta span {
    padding:6px 8px;
    font-size:9px;
  }
  .receipt-orbit-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .receipt-orbit-cta,
  .receipt-orbit-detail-toggle {
    width:100%;
    justify-content:center;
    min-height:48px;
  }
  .receipt-orbit-hint:not(.is-mobile) {
    display:none;
  }
  .receipt-orbit-hint.is-mobile {
    display:block;
    margin:0 0 12px;
    font-size:10px;
    letter-spacing:.08em;
  }
}
.receipt-orbit-hint.is-mobile {
  display:none;
}
@media (max-width:760px) {
  .receipt-orbit-card {
    flex-basis:min(84vw, 320px);
    width:min(84vw, 320px);
  }
}
@media (max-width:380px) {
  .receipt-orbit-card {
    flex-basis:min(88vw, 320px);
    width:min(88vw, 320px);
    grid-template-rows:132px auto;
  }
  .receipt-orbit-card-media,
  .receipt-orbit-card-image,
  .receipt-orbit-schematic {
    min-height:132px;
  }
  .receipt-orbit-card-image { height:132px; }
  .receipt-orbit-core { padding:16px 14px 14px; }
  .receipt-orbit-core h3 { font-size:clamp(26px, 10vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-orbit-stage { height:auto; min-height:0; }
  .receipt-orbit-sticky {
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    display:grid;
    gap:14px;
    padding:0;
  }
  .receipt-orbit-card-layer {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:12px;
    overflow:visible;
    margin:0;
    padding:0;
    mask-image:none;
    -webkit-mask-image:none;
    pointer-events:auto;
  }
  .receipt-orbit-card {
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    flex:none;
    min-height:0;
    opacity:1 !important;
    transform:none !important;
  }
  .receipt-orbit-nav {
    display:none !important;
  }
  .receipt-orbit-core {
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    margin:0;
    transform:none;
  }
  .receipt-orbit-ring,
  .receipt-orbit-grid {
    display:none;
  }
}
/* Case tag chips */
.case-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.case-tags span { border:1px solid rgba(72,247,255,.18); color:rgba(186,241,255,.66); border-radius:8px; padding:7px 9px; font-family:var(--mono); font-size:11px; background:rgba(0,12,14,.28); }
/* ---- Method: laser-charge rail + step indicators ---- */
/* A recessed dark capacitor rail that a laser beam charges along as you scroll.
   No overflow clip here — the beam needs to bloom vertically to read as energy. */
.method-progress-line {
  position:relative;
  height:3px;
  margin:30px 0 22px;
  border-radius:99px;
  background:linear-gradient(90deg, rgba(72,247,255,.10), rgba(0,255,55,.06) 55%, rgba(255,233,114,.05));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.5);
}
/* Faint emitter scale ticks etched along the unfired rail. */
.method-progress-line::before {
  content:"";
  position:absolute;
  inset:-4px 0;
  background:repeating-linear-gradient(90deg, transparent 0 14%, rgba(218,255,235,.16) 14% calc(14% + 1px), transparent calc(14% + 1px) 25%);
  opacity:.3;
  pointer-events:none;
}
/* The charging beam: white-hot core, layered bloom, flowing energy. */
.method-progress-line span {
  position:relative;
  display:block;
  width:var(--method-progress, 0%);
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,
    rgba(72,247,255,.5) 0%,
    var(--cyan) 30%,
    var(--acid) 58%,
    #f4fff1 86%,
    #ffffff 100%);
  background-size:240% 100%;
  box-shadow:
    0 0 5px rgba(72,247,255,.6),
    0 0 14px rgba(0,255,55,.45),
    0 0 28px rgba(72,247,255,.32),
    0 0 46px rgba(0,255,55,.16);
  transition:width .16s linear;
}
/* The emitter node concentrating energy at the charge front. */
.method-progress-line span::after {
  content:"";
  position:absolute;
  top:50%;
  right:-3px;
  width:10px;
  height:10px;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, var(--acid) 40%, rgba(0,255,55,0) 72%);
  box-shadow:
    0 0 10px rgba(244,255,247,.9),
    0 0 22px rgba(0,255,55,.7),
    0 0 40px rgba(72,247,255,.42);
}
@media (prefers-reduced-motion: no-preference) {
  /* Energy flows toward the muzzle while the emitter node throbs as it charges. */
  .method-progress-line span { animation:methodLaserCharge 1.6s linear infinite; }
  .method-progress-line span::after { animation:methodEmitterPulse 1.15s ease-in-out infinite; }
}
@keyframes methodLaserCharge {
  to { background-position:-240% 0; }
}
@keyframes methodEmitterPulse {
  0%, 100% {
    box-shadow:0 0 10px rgba(244,255,247,.9), 0 0 22px rgba(0,255,55,.7), 0 0 40px rgba(72,247,255,.42);
    transform:translateY(-50%) scale(1);
  }
  50% {
    box-shadow:0 0 16px rgba(244,255,247,1), 0 0 34px rgba(0,255,55,.92), 0 0 62px rgba(72,247,255,.6);
    transform:translateY(-50%) scale(1.22);
  }
}
.method-steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.method-steps [data-method-step],
.method-steps span {
  position:relative;
  min-height:0;
  display:grid;
  gap:8px;
  align-content:start;
  border:1px solid rgba(72,247,255,.16);
  color:rgba(214,242,224,.84);
  border-radius:var(--radius-md);
  padding:16px 14px;
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.45;
  background:rgba(0,12,14,.32);
  white-space:normal;
  transition:border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.method-steps [data-method-step] > span:first-child {
  color:var(--cyan);
  font:700 10px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  border:0;
  padding:0;
  min-height:0;
  background:transparent;
  box-shadow:none;
}
.method-steps [data-method-step] strong {
  color:var(--ink);
  font:700 16px/1.15 var(--heading);
  letter-spacing:-.02em;
}
.method-steps [data-method-step] p {
  margin:0;
  color:rgba(214,242,224,.72);
  font:500 13px/1.45 var(--sans);
}
.method-steps [data-method-step].is-active,
.method-steps span.is-active {
  color:rgba(244,255,247,.94);
  border-color:rgba(0,255,55,.38);
  background:linear-gradient(145deg, rgba(0,255,55,.085), rgba(0,12,14,.32));
  box-shadow:0 0 24px rgba(0,255,55,.08), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-2px);
}
/* Case action links (gold accent) */
.case-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.case-action {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(244,255,247,.9);
  text-decoration:none;
  border:1px solid rgba(255,233,114,.32);
  border-radius:999px;
  padding:8px 12px;
  font:700 11px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(145deg, rgba(255,233,114,.08), rgba(0,0,0,.24));
}
.case-action:hover,
.case-action:focus-visible { color:var(--gold); border-color:var(--line-gold); outline:none; box-shadow:0 0 22px rgba(255,233,114,.13); }
.method-panel, .contact-card { max-width: 980px; margin: 0 auto; }
.method-lead,
.contact-lead {
  margin: 0 0 8px;
  max-width: 54ch;
  color: rgba(226,255,233,.84);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.5;
  font-weight: 500;
}
.case-narrative {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.case-narrative-block {
  border: 1px solid rgba(72,247,255,.16);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: linear-gradient(150deg, rgba(6,26,24,.4), rgba(0,0,0,.28));
}
.case-narrative-block.is-proof {
  border-color: rgba(255,233,114,.28);
  background: linear-gradient(150deg, rgba(255,233,114,.06), rgba(0,0,0,.28));
}
.case-narrative-block span {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case-narrative-block.is-proof span { color: var(--gold); }
.case-narrative-block p {
  margin: 0;
  color: rgba(224,247,230,.86);
  font-size: 14.5px;
  line-height: 1.55;
}
.case-tags span {
  border-color: rgba(72,247,255,.14);
  color: rgba(186,241,255,.62);
  font-size: 11px;
  letter-spacing: .02em;
}
.videos-section.is-compact-lab,
.rocket-gate-section.is-compact-lab {
  min-height: 0;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.contact-section {
  min-height: auto;
}
.contact-card .signal-links {
  margin-top: 14px;
}
.contact-card .signal-link {
  min-height: 108px;
  padding: 12px;
  gap: 10px;
}
.contact-card .availability-strip { display: none; }

/* ---- YouTube embed + live video feed ---- */
.youtube-panel {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .78fr);
  gap: 20px;
  border-radius: 22px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(72, 247, 255, .14);
  border-top-color: rgba(232, 255, 236, .24);
  background:
    linear-gradient(155deg, rgba(6, 22, 18, .82), rgba(0, 6, 7, .78));
  box-shadow: var(--elev-2, 0 22px 56px rgba(0,0,0,.38));
}
.youtube-player-shell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(72, 247, 255, .16);
  background: #020807;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.youtube-player-shell::before {
  content: none;
}
.youtube-player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.youtube-feed-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px;
}
.youtube-feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.youtube-feed-head .card-kicker {
  margin: 0 0 4px;
}
.youtube-feed-meta {
  margin: 0;
  color: rgba(186, 241, 255, .58);
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .06em;
}
.youtube-feed-status {
  margin: 0;
  flex: none;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(72, 247, 255, .18);
  background: rgba(0, 12, 12, .4);
  color: rgba(186, 241, 255, .72);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.youtube-feed-status[data-state="live"],
.youtube-feed-status[data-state="ready"] {
  border-color: rgba(0, 255, 90, .28);
  color: var(--acid);
}
.youtube-feed-status[data-state="error"] {
  border-color: rgba(255, 77, 109, .35);
  color: #ffd0d8;
}
.youtube-feed-status[data-state="loading"] {
  border-color: rgba(72, 247, 255, .22);
  color: var(--cyan);
}
.youtube-video-list {
  display: grid;
  gap: 8px;
  max-height: min(420px, 52vh);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}
.youtube-video-card {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
  color: rgba(244, 255, 247, .88);
  border: 1px solid rgba(72, 247, 255, .12);
  border-radius: 14px;
  padding: 8px;
  background: rgba(0, 10, 10, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.youtube-video-card:hover,
.youtube-video-card:focus-visible {
  outline: none;
  border-color: rgba(72, 247, 255, .32);
  background: rgba(0, 16, 16, .5);
  transform: translateY(-1px);
}
.youtube-video-card.active {
  border-color: rgba(255, 233, 114, .42);
  background: linear-gradient(145deg, rgba(255, 233, 114, .08), rgba(0, 12, 12, .48));
  box-shadow: 0 0 0 1px rgba(255, 233, 114, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff;
}
.youtube-video-thumb-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(72, 247, 255, .14);
  background: #04100c;
  aspect-ratio: 16 / 9;
}
.youtube-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
.youtube-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(0, 8, 6, .62);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  opacity: .88;
  pointer-events: none;
}
.youtube-video-play::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent rgba(244, 255, 247, .92);
}
.youtube-video-card.active .youtube-video-play {
  background: rgba(0, 255, 90, .18);
  border-color: rgba(0, 255, 90, .45);
}
.youtube-video-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: center;
}
.youtube-video-index {
  color: rgba(186, 241, 255, .42);
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
}
.youtube-video-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 650 13.5px/1.28 var(--sans);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.youtube-video-copy em {
  color: rgba(186, 241, 255, .58);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .06em;
  font-style: normal;
  text-transform: uppercase;
}
.youtube-video-card.active .youtube-video-index {
  color: var(--gold);
}
.youtube-video-card.active .youtube-video-copy em {
  color: rgba(255, 233, 114, .78);
}
.youtube-channel-link {
  justify-self: stretch;
  width: 100%;
  margin-top: 2px;
}
.youtube-video-skeleton {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(72, 247, 255, .08);
  background: rgba(0, 10, 10, .28);
}
.youtube-video-skeleton span:first-child {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(72,247,255,.05), rgba(72,247,255,.12), rgba(72,247,255,.05));
  background-size: 200% 100%;
  animation: youtubeShimmer 1.2s linear infinite;
}
.youtube-video-skeleton span:last-child {
  display: block;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(72,247,255,.04), rgba(72,247,255,.1), rgba(72,247,255,.04));
  background-size: 200% 100%;
  animation: youtubeShimmer 1.2s linear infinite;
}
@keyframes youtubeShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.youtube-feed-empty {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(72, 247, 255, .14);
  border-radius: 14px;
  color: rgba(214, 242, 224, .78);
  font: 500 13px/1.5 var(--sans);
  background: rgba(0, 10, 10, .28);
}
.youtube-feed-empty a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .youtube-video-skeleton span {
    animation: none;
  }
  .youtube-video-card:hover,
  .youtube-video-card:focus-visible {
    transform: none;
  }
}
/* ---- Contact form inputs, validation, status ---- */
.contact-form { display:grid; gap:14px; margin-top: 28px; }
.contact-form label { color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; display:grid; gap:8px; }
.contact-form input, .contact-form textarea { width:100%; color:var(--ink); background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(13,35,32,.58), rgba(0,0,0,.34)); border:1px solid rgba(146,226,206,.5); border-left-width:1px; border-top-color:rgba(200,240,222,.6); border-radius:14px; padding:14px 15px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -18px 38px rgba(72,247,255,.02), 1px 0 0 rgba(72,247,255,.06), -1px 0 0 rgba(255,77,109,.035); backdrop-filter: blur(20px) saturate(1.24); -webkit-backdrop-filter: blur(20px) saturate(1.24); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:rgba(72,247,255,.3); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--cyan); border-left-width:2px; padding-left:14px; box-shadow:0 0 0 4px rgba(72,247,255,.1), 0 0 20px rgba(72,247,255,.1); }
.contact-form label.is-invalid { color:rgba(255,205,216,.94); }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color:rgba(255,77,109,.82); box-shadow:0 0 0 4px rgba(255,77,109,.12), 0 0 22px rgba(255,77,109,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.field-error { min-height:14px; color:rgba(255,205,216,.92); font:700 10px/1.35 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 12px rgba(255,77,109,.34); }
.field-error:empty { display:none; }
.field-count { justify-self:end; color:rgba(170,255,255,.72); font:500 10px/1 var(--mono); letter-spacing:.08em; }
.form-status { font-family:var(--mono); color:var(--cyan); font-size:12px; margin:0; min-height:18px; transition:color .18s ease, transform .18s ease, text-shadow .18s ease; }
.form-status.is-error { color:rgba(255,205,216,.96); text-shadow:0 0 16px rgba(255,77,109,.42); }
.form-status.is-success { color:var(--gold); animation:mailtoConfirm .7s cubic-bezier(.16,1,.3,1) both; text-shadow:0 0 16px rgba(255,233,114,.34); }
@keyframes mailtoConfirm { 0% { transform:translateY(0); letter-spacing:.08em; } 45% { transform:translateY(-2px); letter-spacing:.13em; } 100% { transform:translateY(0); letter-spacing:.08em; } }
/* ---- Rocket-gate: Code Red / launch CTA section ---- */
.rocket-gate-section {
  min-height:100vh;
  overflow:hidden;
}
.rocket-gate-section::before {
  content:"";
  position:absolute;
  pointer-events:none;
  inset:auto 0 0;
  z-index:-1;
  height:72%;
  background:
    radial-gradient(ellipse 60% 38% at 50% 100%, rgba(255,233,114,.28), transparent 62%),
    radial-gradient(ellipse 74% 56% at 50% 76%, rgba(72,247,255,.13), transparent 68%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.32) 36%, rgba(0,0,0,.84));
}
.rocket-gate-card {
  --liquid-corner-radius:22px;
  position:relative;
  width:min(980px, 100%);
  margin-inline:auto;
  padding:clamp(24px, 5vw, 54px);
  border:1px solid rgba(218,255,235,.22);
  border-top-color:rgba(255,255,255,.38);
  border-radius:22px;
  background:
    radial-gradient(ellipse 74% 80% at 50% 0%, rgba(255,233,114,.11), transparent 62%),
    radial-gradient(ellipse 58% 70% at 100% 12%, rgba(72,247,255,.12), transparent 64%),
    linear-gradient(145deg, rgba(29,54,49,.74), rgba(3,18,17,.82) 56%, rgba(0,4,5,.9));
  box-shadow:var(--liquid-shadow), 0 0 70px rgba(0,255,90,.08);
  overflow:hidden;
}
.rocket-gate-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(72,247,255,.14), transparent 18% 82%, rgba(0,255,90,.12)),
    repeating-linear-gradient(90deg, rgba(218,255,235,.08) 0 1px, transparent 1px 16px);
  opacity:.42;
  mix-blend-mode:screen;
}
.rocket-gate-copy,
.rocket-gate-telemetry,
.rocket-ship-selector,
.rocket-launch-button,
.rocket-gate-note { position:relative; z-index:1; }

.rocket-gate-card::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:74%;
  height:48%;
  z-index:0;
  pointer-events:none;
  filter:blur(8px);
  opacity:var(--charge, 0);
  background:radial-gradient(ellipse 60% 100% at 50% 100%,
    rgba(0,255,90,.55) 0%,
    rgba(72,247,255,.26) 38%,
    transparent 72%);
  transition:opacity .12s linear;
}
.rocket-gate-copy h2 {
  max-width:780px;
  margin:0;
  font-size:clamp(42px, 8vw, 104px);
  line-height:.88;
  letter-spacing:-.07em;
  text-transform:uppercase;
  text-shadow:0 0 40px rgba(0,255,90,.16), 0 6px 30px rgba(0,0,0,.72);
}
.rocket-gate-copy p:not(.eyebrow) {
  max-width:650px;
  color:rgba(244,255,247,.86);
  font-size:clamp(16px, 1.6vw, 21px);
  line-height:1.45;
  text-shadow:var(--readability-shadow);
}
.rocket-gate-telemetry {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(116px, 1fr));
  gap:10px;
  margin:clamp(18px, 3vw, 26px) 0 22px;
}
.rocket-gate-telemetry span {
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:12px 14px;
  border:1px solid rgba(218,255,235,.16);
  border-radius:12px;
  background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(0,18,16,.54));
  color:rgba(218,255,235,.68);
  font:700 11px/1.1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rocket-gate-telemetry strong {
  color:#eafff0;
  font-size:13px;
  text-shadow:0 0 14px rgba(72,247,255,.26);
}
.rocket-ship-selector {
  margin:0 0 22px;
}
.rocket-ship-selector-kicker {
  margin:0 0 10px;
  color:rgba(218,255,235,.6);
  font:800 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.rocket-ship-options {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.rocket-ship-option {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid rgba(218,255,235,.16);
  border-radius:14px;
  background:linear-gradient(145deg, rgba(0,18,16,.68), rgba(255,255,255,.045));
  color:#eafff0;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Hero render of the ship's 3D model */
.rocket-ship-thumb {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16 / 8;
  object-fit:contain;
  border-radius:10px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 60%, rgba(0,255,90,.07), transparent 72%),
    linear-gradient(160deg, rgba(8,26,20,.9), rgba(2,10,9,.92));
  box-shadow:inset 0 0 0 1px rgba(218,255,235,.08), inset 0 -14px 30px rgba(0,0,0,.4);
}
.rocket-ship-option span {
  position:absolute;
  top:18px;
  left:18px;
  z-index:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,255,90,.3);
  border-radius:8px;
  color:var(--acid);
  font:900 12px/1 var(--mono);
  background:rgba(0,8,5,.62);
  backdrop-filter:blur(4px);
}
.rocket-ship-option strong {
  font:900 14px/1.05 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rocket-ship-option em {
  color:rgba(218,255,235,.58);
  font:700 11px/1.35 var(--mono);
  font-style:normal;
  text-transform:uppercase;
}
.rocket-ship-option:hover,
.rocket-ship-option:focus-visible,
.rocket-ship-option.is-selected {
  border-color:rgba(0,255,90,.64);
  background:linear-gradient(145deg, rgba(0,255,90,.13), rgba(72,247,255,.08) 55%, rgba(0,18,16,.7));
  box-shadow:0 0 30px rgba(0,255,90,.12), inset 0 1px 0 rgba(255,255,255,.14);
  outline:none;
}
.rocket-ship-option.is-selected {
  transform:translateY(-1px);
}
@media (max-width: 720px) {
  .rocket-ship-options { grid-template-columns:1fr; }
}
/* Hold-to-ignite: dark base that the bright charge fill sweeps across left→right */
.rocket-launch-button {
  position:relative;
  overflow:hidden;
  min-width:min(100%, 340px);
  justify-content:center;
  border-color:rgba(0,255,90,.5);
  background:linear-gradient(145deg, rgba(9,30,22,.92), rgba(3,14,12,.94));
  color:#eafff0;
  box-shadow:0 0 24px rgba(0,255,90,.16), inset 0 1px 0 rgba(255,255,255,.12);
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
  touch-action:none;
}
.rocket-launch-fill {
  position:absolute;
  inset:0;
  left:0;
  z-index:0;
  width:calc(var(--charge, 0) * 100%);
  background:linear-gradient(135deg, var(--acid), var(--cyan));
  box-shadow:0 0 30px rgba(0,255,90,.5);
  transition:width .05s linear;
}
.rocket-launch-label {
  position:relative;
  z-index:1;
  color:#fff;
  text-shadow:0 1px 7px rgba(0,0,0,.72);
}
.rocket-gate-card.is-charging .rocket-launch-button {
  border-color:var(--acid);
  box-shadow:0 0 calc(28px + var(--charge, 0) * 46px) rgba(0,255,90, calc(.3 + var(--charge, 0) * .5)), inset 0 1px 0 rgba(255,255,255,.18);
}
.rocket-gate-card.is-firing .rocket-launch-button {
  border-color:#fff;
  box-shadow:0 0 70px rgba(0,255,90,.7), inset 0 0 0 1px rgba(255,255,255,.6);
}
.rocket-gate-card.is-firing .rocket-launch-label { letter-spacing:.2em; }
/* Rumble — amplitude (--rumble) scales with charge; motion-gated */
@media (prefers-reduced-motion: no-preference) {
  .rocket-gate-card.is-charging { animation:rocketRumble .08s linear infinite; }
}
@keyframes rocketRumble {
  0%, 100% { transform:translate(calc(var(--rumble, 0) * -1px), 0); }
  25% { transform:translate(calc(var(--rumble, 0) * 1px), calc(var(--rumble, 0) * -1px)); }
  50% { transform:translate(calc(var(--rumble, 0) * 1px), calc(var(--rumble, 0) * 1px)); }
  75% { transform:translate(calc(var(--rumble, 0) * -1px), calc(var(--rumble, 0) * 1px)); }
}
.rocket-gate-note {
  margin:14px 0 0;
  color:rgba(218,255,235,.62);
  font:700 11px/1.5 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bottom-launch-sentinel {
  position:absolute;
  left:50%;
  bottom:0;
  width:1px;
  height:1px;
  overflow:hidden;
  transform:translateX(-50%);
  opacity:0;
}
body.rocket-gate-armed .rocket-gate-card {
  box-shadow:var(--liquid-shadow), 0 0 90px rgba(0,255,90,.14), 0 0 46px rgba(72,247,255,.08);
}
body.rocket-launch-window {
  --crt-glass-opacity:.92;
  --crt-vignette-alpha:.58;
  --crt-edge-alpha:.74;
  --crt-reflection-alpha:.06;
  --crt-phosphor-alpha:.1;
  --crt-mask-alpha:.12;
}
body.rocket-launch-window .bg-canvas {
  opacity:.98;
  filter:var(--theme-canvas-filter) saturate(1.65) contrast(1.28) brightness(1.12);
  transform:scale(1.045);
  transition:filter .7s ease, transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
/* Eased both ways so leaving the launch window fades the green wash out instead of
   snapping — the state is tied to gate visibility, not latched on first arrival. */
.scanlines, .grain { transition:opacity .55s ease; }
body.rocket-launch-window .scanlines {
  opacity:.46;
  background:repeating-linear-gradient(to bottom, rgba(0,255,90,.22) 0 1px, transparent 1px 4px);
  animation:rocketLaunchScanline .14s steps(2,end) infinite;
}
body.rocket-launch-window .grain {
  opacity:.3;
  background-size:2px 2px;
  animation:rocketLaunchGrain .34s steps(2,end) infinite;
}
body.rocket-launch-window .topbar {
  border-color:rgba(72,247,255,.42);
  box-shadow:var(--liquid-shadow), 0 0 42px rgba(72,247,255,.16), 0 0 32px rgba(0,255,90,.08);
}
body.rocket-launch-window #hudTxt,
body.rocket-launch-window #modeTxt {
  color:#eafff0;
  text-shadow:0 0 16px rgba(0,255,90,.5), 0 0 22px rgba(72,247,255,.2);
}
@keyframes rocketLaunchScanline {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(2px); }
}
@keyframes rocketLaunchGrain {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(-1px,1px,0); }
}
body.rocket-app-ready #rocketGateStatus { color:var(--acid); text-shadow:0 0 14px rgba(0,255,90,.52); }
/* ---- Rocket app stage: fullscreen takeover ---- */
.rocket-app-stage[hidden] { display:none !important; }
.rocket-app-stage {
  position:fixed;
  inset:0;
  z-index:130;
  display:grid;
  place-items:stretch;
  background:#020403;
  color:var(--ink);
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .58s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1);
}
body.rocket-app-active .rocket-app-stage {
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  visibility:visible;
}
body.rocket-app-active { overflow:hidden; }
body.rocket-app-active .crt-shell {
  opacity:0;
  transform:scale(.985) translateY(-12px);
  filter:blur(10px) saturate(1.35) brightness(.74);
  transition:opacity .62s ease, transform .62s ease, filter .62s ease;
}
.rocket-transition-vault {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 60%, transparent 0 36%, rgba(0,0,0,.32) 56%, rgba(0,0,0,.84) 100%),
    repeating-linear-gradient(0deg, rgba(0,255,90,.08) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.7;
}
/* ---- Rocket app: transition vault (4-door clip-path iris) ---- */
.rocket-transition-vault span {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.18), rgba(0,0,0,.92));
  transform-origin:50% 50%;
}
.rocket-transition-vault span:nth-child(1) { clip-path:polygon(0 0, 50% 0, 42% 100%, 0 100%); }
.rocket-transition-vault span:nth-child(2) { clip-path:polygon(50% 0, 100% 0, 100% 100%, 58% 100%); }
.rocket-transition-vault span:nth-child(3) { clip-path:polygon(0 0, 100% 0, 58% 44%, 42% 44%); }
.rocket-transition-vault span:nth-child(4) { clip-path:polygon(42% 56%, 58% 56%, 100% 100%, 0 100%); }
body.rocket-app-active .rocket-transition-vault span:nth-child(1) { animation:rocketDoorLeft .84s cubic-bezier(.7,0,.2,1) .08s both; }
body.rocket-app-active .rocket-transition-vault span:nth-child(2) { animation:rocketDoorRight .84s cubic-bezier(.7,0,.2,1) .08s both; }
body.rocket-app-active .rocket-transition-vault span:nth-child(3) { animation:rocketDoorTop .84s cubic-bezier(.7,0,.2,1) .12s both; }
body.rocket-app-active .rocket-transition-vault span:nth-child(4) { animation:rocketDoorBottom .84s cubic-bezier(.7,0,.2,1) .12s both; }
body.rocket-app-active .rocket-transition-vault { animation:rocketVaultFade 1.05s ease .35s both; }
@keyframes rocketDoorLeft { to { transform:translateX(-68%) skewX(-8deg); opacity:.36; } }
@keyframes rocketDoorRight { to { transform:translateX(68%) skewX(8deg); opacity:.36; } }
@keyframes rocketDoorTop { to { transform:translateY(-70%); opacity:.2; } }
@keyframes rocketDoorBottom { to { transform:translateY(70%); opacity:.2; } }
@keyframes rocketVaultFade { to { opacity:0; visibility:hidden; } }
/* Embedded game iframe — sits behind vault doors */
.rocket-game-frame {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  border:0;
  background:#06060c;
}
/* ---- Rocket app: HUD overlay + exit button ---- */
.rocket-app-hud {
  position:absolute;
  top:18px;
  right:18px;
  left:18px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  pointer-events:none;
  font:700 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,255,247,.76);
  text-shadow:0 0 16px rgba(0,0,0,.8), 0 0 18px rgba(72,247,255,.22);
}
/* Exit button — clipped chevron, always breathing */
.rocket-exit-button {
  pointer-events:auto;
  border:1px solid rgba(202,255,215,.82);
  border-radius:0;
  padding:12px 14px;
  color:#f4fff7;
  background:linear-gradient(180deg, rgba(0,48,21,.92), rgba(0,10,9,.86));
  box-shadow:0 0 34px rgba(0,255,102,.22), inset 0 1px 0 rgba(255,255,255,.18);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  font:900 11px/1 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  animation:rocketExitPulse 1.9s ease-in-out infinite;
}
.rocket-exit-button:hover,
.rocket-exit-button:focus-visible {
  color:#fff;
  border-color:#eaffef;
  outline:none;
  box-shadow:0 0 42px rgba(0,255,102,.34), inset 0 1px 0 rgba(255,255,255,.24);
}
@keyframes rocketExitPulse {
  0%, 100% { transform:translateY(0); filter:brightness(1); }
  50% { transform:translateY(1px); filter:brightness(1.18); }
}
/* ---- Site footer ---- */
.site-footer {
  --liquid-corner-radius:var(--quiet-radius-lg);
  position:relative;
  z-index:6;
  width:min(1120px, calc(100vw - 36px));
  margin:18px auto 70px;
  border-radius:var(--quiet-radius-lg);
  overflow:hidden;
  color:rgba(232,255,240,.78);
}
/* 4-column grid: brand, connect, legal, status — top-aligned, each labeled */
.footer-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(240px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap:26px 22px;
  align-items:start;
  padding:26px 24px;
}
.footer-brand-block {
  min-width:0;
}
.footer-wordmark {
  display:inline-grid;
  gap:4px;
  color:var(--ink);
  text-decoration:none;
}
.footer-wordmark span {
  color:#fff;
  font:800 18px/1 var(--heading);
}
.footer-wordmark strong {
  color:var(--cyan);
  font:800 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-brand-block p {
  max-width:460px;
  margin:12px 0 0;
  color:rgba(218,255,225,.72);
  font-size:13px;
  line-height:1.55;
}
/* Closing CTA — the footer's focal row */
.footer-cta {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:28px 24px 24px;
}
.footer-cta::after {
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(72,247,255,.34), rgba(255,233,114,.18), transparent);
}
.footer-cta-kicker {
  display:block;
  margin-bottom:10px;
  color:var(--cyan);
  font:800 11px/1 var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.footer-cta-line {
  margin:0;
  max-width:20ch;
  color:#fff;
  font:700 clamp(22px, 3.3vw, 33px)/1.04 var(--heading);
  letter-spacing:-.025em;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.footer-cta-button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding:14px 24px;
  border-radius:999px;
  border:1px solid rgba(var(--theme-signal-rgb),.9);
  background:linear-gradient(135deg, var(--acid), var(--cyan));
  color:#001604;
  text-decoration:none;
  font:800 12px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 30px rgba(var(--theme-signal-rgb),.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.footer-cta-button:hover,
.footer-cta-button:focus-visible {
  transform:translateY(-2px);
  outline:none;
  box-shadow:0 0 44px rgba(var(--theme-signal-rgb),.6), inset 0 1px 0 rgba(255,255,255,.6);
}
.footer-cta-arrow { transition:transform .18s ease; }
.footer-cta-button:hover .footer-cta-arrow,
.footer-cta-button:focus-visible .footer-cta-arrow { transform:translateX(4px); }
/* Footer columns — top-aligned, each with a small section label */
.footer-col {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.footer-col-kicker {
  color:var(--gold);
  font:800 10px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer-links {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-links a {
  width:max-content;
  max-width:100%;
  color:rgba(202,255,209,.82);
  text-decoration:none;
  font:600 13px/1.2 var(--mono);
  letter-spacing:.02em;
  transition:color .16s ease, transform .16s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color:var(--gold);
  outline:none;
  transform:translateX(3px);
}
.footer-ext { opacity:.45; font-size:.82em; }
.footer-links a:hover .footer-ext,
.footer-links a:focus-visible .footer-ext { opacity:.85; }
/* Live availability status */
.footer-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  max-width:240px;
  color:rgba(224,255,232,.9);
  font:700 12px/1.4 var(--mono);
  letter-spacing:.02em;
}
.footer-status-dot {
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--acid);
  box-shadow:0 0 14px rgba(0,255,55,.65);
}
.footer-status-loc {
  margin:0;
  color:rgba(186,241,255,.55);
  font:600 11px/1.3 var(--mono);
  letter-spacing:.03em;
}
@media (prefers-reduced-motion: no-preference) {
  .footer-status-dot { animation:statusPulse 2.2s ease-in-out infinite; }
}
/* Footer bar — copyright + colophon */
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 20px;
  border-top:1px solid rgba(72,247,255,.12);
  background:rgba(0,12,14,.22);
  color:rgba(186,241,255,.62);
  font:700 10px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-bottom-links {
  display:inline-flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-bottom a {
  color:rgba(202,255,209,.82);
  text-decoration:none;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color:var(--gold);
  outline:none;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---- Privacy / legal document pages ---- */
.policy-page .page-shell {
  padding-top:118px;
}
.policy-page .topbar .brand-mark {
  text-decoration:none;
}
.policy-hero-section,
.policy-content-section {
  min-height:auto;
  align-items:start;
}
.policy-hero-section {
  padding-top:clamp(44px, 7vw, 82px);
  padding-bottom:28px;
}
.policy-content-section {
  padding-top:24px;
}
.policy-hero-card,
.policy-layout {
  width:min(1120px, 100%);
  margin:0 auto;
}
.policy-hero-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px, 300px);
  gap:24px;
  align-items:end;
  border-radius:var(--quiet-radius-lg);
  padding:clamp(24px, 4vw, 44px);
  border-color:rgba(218,255,235,.22);
  border-top-color:rgba(255,255,255,.36);
  background:
    radial-gradient(ellipse 70% 56% at 12% 0%, rgba(255,255,255,.12), transparent 58%),
    radial-gradient(ellipse 46% 48% at 92% 14%, rgba(72,247,255,.09), transparent 62%),
    linear-gradient(145deg, rgba(27,56,50,.76), rgba(5,22,20,.82) 56%, rgba(1,10,12,.82));
  box-shadow:var(--liquid-shadow);
}
.policy-hero-card h1 {
  max-width:12ch;
  margin-bottom:14px;
  font-size:clamp(48px, 9vw, 118px);
  letter-spacing:-.075em;
}
.policy-hero-card .lede {
  max-width:62ch;
}
.policy-meta-card {
  display:grid;
  gap:10px;
  border:1px solid rgba(72,247,255,.22);
  border-radius:var(--quiet-radius);
  padding:14px;
  background:rgba(0,12,14,.38);
  font-family:var(--mono);
}
.policy-meta-card span {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:rgba(218,255,225,.78);
  font-size:11px;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.policy-meta-card strong {
  color:var(--ink);
  text-align:right;
}
.policy-layout {
  display:grid;
  grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.policy-side-card,
.policy-doc article {
  border-radius:var(--quiet-radius-lg);
  border:1px solid rgba(218,255,235,.18);
  border-top-color:rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 70% 60% at 12% 0, rgba(255,255,255,.09), transparent 58%),
    linear-gradient(145deg, rgba(23,49,45,.66), rgba(3,18,17,.74));
  box-shadow:var(--liquid-shadow);
}
.policy-side-card {
  position:sticky;
  top:118px;
  display:grid;
  gap:16px;
  padding:18px;
}
.policy-side-card strong {
  color:#fff;
  font-family:var(--heading);
  font-size:20px;
}
.policy-side-card p {
  margin:0;
  color:rgba(218,255,225,.76);
  font:600 13px/1.55 var(--mono);
}
.policy-side-card a {
  color:rgba(202,255,209,.9);
  text-decoration:none;
}
.policy-side-card a:hover,
.policy-side-card a:focus-visible {
  color:var(--gold);
  outline:none;
}
.policy-side-links {
  display:grid;
  gap:8px;
}
.policy-side-links a {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(72,247,255,.2);
  border-radius:var(--quiet-radius);
  padding:8px 10px;
  background:rgba(0,12,14,.34);
  font:800 10.5px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.policy-doc {
  display:grid;
  gap:14px;
}
.policy-doc article {
  padding:clamp(20px, 3vw, 32px);
}
.policy-doc h2 {
  margin-bottom:10px;
  font-size:clamp(26px, 4vw, 48px);
  letter-spacing:-.04em;
}
.policy-doc p,
.policy-doc li {
  color:rgba(232,255,240,.8);
  font:600 15px/1.68 var(--sans);
}
.policy-doc p {
  margin-bottom:0;
}
.policy-doc ul {
  display:grid;
  gap:8px;
  margin:0;
  padding-left:18px;
}
.policy-doc a {
  color:var(--cyan);
}
.policy-disclaimer {
  color:rgba(186,241,255,.68) !important;
  font-family:var(--mono) !important;
  font-size:12px !important;
  letter-spacing:.02em;
}

/* ---- Black hole: social dock (fixed bottom, fades in) ---- */
.black-hole-social-dock {
  position:fixed;
  left:50%;
  top:max(14px, env(safe-area-inset-top));
  z-index:120;
  width:min(560px, calc(100vw - 24px));
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  font:700 11px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%, -16px, 0) scale(.98);
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.black-hole-social-dock a {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(202,255,209,.92);
  text-decoration:none;
  border:1px solid rgba(0,255,55,.46);
  border-radius:999px;
  padding:10px 13px;
  background:rgba(0,12,6,.74);
  box-shadow:0 0 28px rgba(0,255,55,.16), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.black-hole-social-dock a:hover,
.black-hole-social-dock a:focus-visible {
  color:var(--acid);
  border-color:var(--line-strong);
  outline:none;
  box-shadow:0 0 36px rgba(0,255,55,.24), inset 0 1px 0 rgba(255,255,255,.14);
}
body.black-hole-active .site-footer {
  opacity:0;
  pointer-events:none;
}
body.black-hole-active .black-hole-social-dock {
  opacity:1;
  pointer-events:auto;
  transform:translate3d(-50%, 0, 0) scale(1);
}
body.code-red-poweroff .black-hole-social-dock,
body.code-red-deadhold .black-hole-social-dock,
body.code-red-reboot .black-hole-social-dock {
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%, 8px, 0) scale(.98);
}
/* ---- Scroll-reveal animations ---- */
.reveal-item {
  opacity:0;
  translate:0 22px;
  transition:
    opacity .68s cubic-bezier(.16,1,.3,1),
    translate .68s cubic-bezier(.16,1,.3,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.reveal-item:not(.is-visible) {
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-item.is-visible {
  opacity:1;
  translate:0 0;
}
/* ---- Theme presets: matrix / calm ---- */
/* Override CRT custom properties to shift mood */
body.matrix { --crt-glass-opacity:.84; --crt-vignette-alpha:.46; --crt-edge-alpha:.62; --crt-phosphor-alpha:.09; --crt-mask-alpha:.12; }
body.matrix .scanlines { opacity:.36; } body.matrix .grain { opacity:.28; }
body.calm { --crt-glass-opacity:.36; --crt-vignette-alpha:.22; --crt-edge-alpha:.28; --crt-reflection-alpha:.035; --crt-phosphor-alpha:.025; --crt-mask-alpha:.035; }
body.calm .scanlines, body.calm .grain { opacity:.05; }
body.calm .bg-canvas { opacity:.78; }
/* ---- Responsive: hero layout 1100–821px ---- */
/* ---- Responsive: ≤1024px — small tier (mobile + tablet share one style) ---- */
@media (max-width: 1024px) {
  .systems-grid { gap:12px; }
  .youtube-panel { grid-template-columns:1fr; }
  .youtube-video-list { max-height:none; }
  .footer-grid { grid-template-columns:minmax(260px,1fr) minmax(280px,.9fr); align-items:start; }
  .footer-status { justify-self:start; max-width:340px; }
  .policy-hero-card,
  .policy-layout { grid-template-columns:1fr; }
  .policy-side-card { position:static; }
}
/* ---- Responsive: ≤820px (mobile primary breakpoint) ---- */
@media (max-width: 1024px) {
  html { scroll-padding-top:calc(112px + env(safe-area-inset-top)); }
  body::before { display:block; }
  body {
    background:
      radial-gradient(circle at 88% 18%, rgba(72,247,255,.075), transparent 26%),
      radial-gradient(circle at 14% 86%, rgba(255,233,114,.04), transparent 30%),
      #000;
  }
  .bg-canvas { opacity:1; filter:var(--theme-canvas-filter) saturate(1.72) contrast(1.34) brightness(1.2); }
  body[data-active-section="about"] .bg-canvas,
  body[data-active-section="method"] .bg-canvas,
  body[data-active-section="videos"] .bg-canvas,
  body[data-active-section="contact"] .bg-canvas { opacity:.86; filter:var(--theme-canvas-filter) saturate(1.25) contrast(1.14) brightness(1.06); }
  body[data-active-section="about"] .grain,
  body[data-active-section="method"] .grain,
  body[data-active-section="videos"] .grain,
  body[data-active-section="contact"] .grain { opacity:.07; }
  .grain { opacity:.12; }
  .scanlines { opacity:.15; }
  .crt-glass-layer { opacity:calc(var(--crt-glass-opacity) * .62); }
  [data-glass] { backdrop-filter: blur(28px) saturate(1.32) brightness(1.05) contrast(1.02); -webkit-backdrop-filter: blur(28px) saturate(1.32) brightness(1.05) contrast(1.02); }
  .topbar[data-glass] {
    left:8px;
    right:8px;
    top:max(8px, env(safe-area-inset-top));
    grid-template-columns:1fr;
    gap:5px;
    padding:5px;
    border-radius:4px;
    background:
      radial-gradient(ellipse 82% 70% at 16% 0, rgba(255,255,255,.12), transparent 58%),
      linear-gradient(145deg, rgba(29,58,52,.68), rgba(4,18,16,.74));
  }
  .brand { gap:6px; min-width:0; min-height:28px; padding:4px 5px 4px 4px; }
  .brand-copy { flex:1; }
  .brand::after { display:none; }
  .brand-mark { width:24px; height:24px; border-radius:0; }
  .brand-copy strong { font-size:12px; }
  .brand-copy em { display:none; }
  /* Gradient edge-fade on scrollable nav instead of hard clip; scrollbar hidden but panning works */
  .nav { position:relative; justify-content:flex-start; gap:3px; min-height:34px; padding:3px 16px 3px 3px; overflow-x:auto; overscroll-behavior-x:contain; scroll-padding-inline:4px 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%); }
  .nav::-webkit-scrollbar { display:none; }
  .nav a, .theme-menu-button { display:inline-flex; flex:0 0 auto; min-width:max-content; min-height:30px; padding:6px 9px; font-size:11px; }
  .theme-menu-button { width:34px; min-width:34px; padding:0; }
  .theme-settings { flex:0 0 auto; align-self:stretch; }
  .theme-menu-panel {
    position:fixed;
    top:calc(82px + env(safe-area-inset-top));
    left:10px;
    right:auto;
    width:min(270px, calc(100vw - 20px));
  }

  .page-shell { padding-bottom:calc(72px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, transparent 0 24%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.52) 74%, rgba(0,0,0,.78) 100%); }
  .signal-strip-stage { --marquee-walker-width:53px; margin-top:58px; }
  .signal-strip { --signal-panel-x:0px; --signal-panel-top:7px; --signal-panel-bottom:8px; min-height:74px; padding:7px 0 8px; }
  .signal-strip::before { inset:var(--signal-panel-top) 0 var(--signal-panel-bottom); background-size:100% 4px, 6px 6px, 100% 100%; border-radius:0; }
  .signal-strip::after { left:28px; right:28px; height:22px; }
  .signal-strip-walker { height:0; }
  .signal-strip-walker-art { font-size:3.3px; transform:scale(.19); }
  .signal-track { min-height:52px; gap:22px; padding-inline:24px; animation-duration:44s; }
  .signal-track span { min-height:44px; padding:0; font-size:25px; letter-spacing:0; }

  .systems-grid { grid-template-columns:1fr; gap:12px; }
  .systems-card { padding:18px 16px 16px; }
  .systems-card-title { font-size:clamp(20px, 6vw, 24px); }
  .systems-card-copy { font-size:14px; max-width:none; }

  .section { --page-pad:16px; min-height:auto; padding:90px 16px 72px; scroll-margin-top:calc(112px + env(safe-area-inset-top)); }
  .hero-section { --hero-content-drop:50px; min-height:calc(100svh - 74px); padding-top:96px; padding-bottom:26px; align-items:start; }
  .hero-section::before {
    inset:68px 0 auto -18px;
    width:108vw;
    height:520px;
    opacity:.9;
    filter:blur(1px);
    background:
      radial-gradient(ellipse 46% 28% at 74% 20%, rgba(72,247,255,.08), transparent 70%),
      radial-gradient(ellipse 108% 76% at 44% 50%, rgba(0,0,0,.76), rgba(0,0,0,.5) 46%, transparent 80%);
  }
  .hero-section::after { display:none; }
  /* overflow:visible (was hidden) so the M's lens-flare streak isn't chopped — it
     extends a few px left of the wordmark but stays inside the viewport, and body's
     overflow-x:hidden remains the horizontal-scroll backstop. */
  .hero-grid { grid-template-columns:1fr; gap:16px; align-items:start; max-width:100%; overflow:visible; }
  .hero-copy { width:100%; max-width:100%; min-width:0; }
  .hero-featured { flex-direction:column; align-items:stretch; gap:16px; padding:18px 16px; border-radius:18px; }
  /* Stacked banner: capped width instead of a cropped full-bleed tile, so the
     whole frame survives and the art does not shove the buttons down the page. */
  .hero-featured-art { width:min(100%, 300px); margin-inline:auto; }
  .hero-featured-main { flex:1 1 auto; }
  .hero-featured-title { font-size:clamp(32px, 12vw, 46px); }
  .hero-featured-sub { display:block; margin-top:4px; font-size:13px; }
  .hero-featured-tag { max-width:100%; font-size:15px; }
  .hero-featured-actions { width:100%; }
  .hero-featured-actions .btn { flex:1 1 160px; width:auto; min-height:52px; }
  h1 { font-size: clamp(54px, 18.5vw, 82px); line-height:.84; letter-spacing:-.085em; max-width:100%; margin-bottom:18px; }
  .unicode-title {
    --title-glitch-x: clamp(4px, 1.7vw, 7px);
    --title-glitch-y: 1px;
    display:block;
    width:max-content;
    max-width:calc(100vw - 32px);
    padding:.02em .22em .14em .02em;
    color:#f7fff8;
    background:none;
    -webkit-text-fill-color:currentColor;
    /* Bigger, grander wordmark on phones + tablets: ~85% of viewport width.
       The old 5.15rem max starved tablets (title only filled ~50% there). */
    font-size:clamp(3.2rem, 15vw, 9.6rem);
    line-height:.84;
    letter-spacing:-.025em;
    white-space:nowrap;
    text-wrap:nowrap;
    word-break:keep-all;
    margin-bottom:16px;
    -webkit-text-stroke:0;
    filter:drop-shadow(0 0 2px rgba(244,255,247,.82)) drop-shadow(0 0 22px rgba(120,255,170,.34)) drop-shadow(0 15px 26px rgba(0,0,0,.92));
    text-shadow:
      0 0 1px rgba(255,255,255,.9),
      0 0 7px rgba(188,255,213,.82),
      0 0 20px rgba(116,255,163,.52),
      0 12px 22px rgba(0,0,0,.92);
  }
  .unicode-title::before {
    width:1.1em;
    left:-.16em;
    top:.22em;
  }
  .unicode-title::after {
    width:1.2em;
    right:-.06em;
    top:.3em;
  }
  .unicode-title-text::after {
    left:2.98em;
    top:1.06em;
    width:.92em;
  }
  .unicode-title-layer {
    inset:.02em .22em .14em .02em;
  }
  .unicode-title-layer-red {
    color:rgba(130,255,172,.42);
    -webkit-text-fill-color:rgba(130,255,172,.42);
    -webkit-text-stroke:0;
    transform:none;
    filter:none;
    opacity:.66;
    text-shadow:
      0 0 8px rgba(196,255,214,.76),
      0 0 22px rgba(101,255,153,.48),
      0 0 44px rgba(71,255,131,.22);
  }
  .unicode-title-layer-cyan {
    color:rgba(244,255,247,.7);
    -webkit-text-fill-color:currentColor;
    background:none;
    mix-blend-mode:screen;
    opacity:.46;
  }
  .hero-titleline { max-width:34ch; margin:-4px 0 12px; font-size:10px; letter-spacing:.08em; line-height:1.5; color:rgba(202,255,210,.9); }
  h2 { font-size: clamp(34px, 11vw, 54px); }
  .eyebrow { font-size:10px; letter-spacing:.14em; margin-bottom:14px; }
  .lede { max-width:33ch; font-size:17px; line-height:1.5; color:rgba(252,255,253,.94); font-weight:650; text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,.92), 0 0 26px rgba(0,255,55,.16); }

  .hero-copy { padding-top:8px; transform:none; }
  .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; width:100%; max-width:390px; }
  .hero-actions .btn { width:100%; min-height:50px; padding-inline:14px; font-size:11px; letter-spacing:.06em; white-space:normal; }
  .hero-profile {
    width:100%;
    max-width:480px;
    justify-self:center;
    grid-template-columns:1fr;
    align-items:start;
    gap:14px;
    padding:20px 20px 18px;
    border-radius:24px;
    transform:none;
  }
  .hero-profile-photo {
    width:min(64vw, 236px);
    max-width:100%;
    justify-self:center;
    border-radius:50%;
  }
  .hero-profile-copy .eyebrow {
    margin-bottom:10px;
  }
  .hero-profile-copy h2 {
    font-size:clamp(27px, 8vw, 34px);
    line-height:1;
    margin-bottom:12px;
  }
  .hero-profile-copy p {
    font-size:16px;
    line-height:1.58;
    margin-bottom:10px;
  }
  .hero-profile-copy p:last-child {
    display:block;
    margin-bottom:0;
  }
  #blackHoleBtn { --abductor-width:72px; --abduction-ufo-lift:58px; --abduction-beam-width:56px; --abduction-beam-height:60px; --abduction-beam-floor:2px; }
  .black-hole-cow { --cow-width:66px; --cow-abduct-mid:-30px; --cow-abduct-high:-48px; --cow-abduct-rise:-70px; font-size:3.25px; bottom:calc(100% - 2px); animation-duration:6.8s, .42s; }
  .cow-abductor-ufo { font-size:2.5px; }

  .contact-basics { display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px; font-size:10px; }
  .contact-basics a, .contact-basics span { padding:9px 10px; }
  .contact-subhead { margin-top:20px; font-size:10px; }
  .youtube-panel { gap:14px; border-radius:18px; padding:14px; }
  .youtube-player-shell { border-radius:14px; }
  .youtube-video-list { max-height:none; }
  .youtube-video-card { grid-template-columns:96px minmax(0,1fr); border-radius:12px; padding:8px; gap:10px; }
  .youtube-video-copy strong { font-size:13px; }
  .youtube-video-copy em { font-size:10px; }
  .youtube-channel-link { width:100%; }
  .youtube-feed-head { flex-wrap:wrap; }
  .signal-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px; }
  .signal-link { min-height:128px; padding:12px; border-radius:14px; }
  .signal-link-thumb { width:46px; height:46px; border-radius:9px; }
  .signal-link-copy strong { font-size:13px; }
  .signal-link-copy span { font-size:10px; line-height:1.3; }

  .about-photo-shell { max-width:260px; width:min(72vw, 260px); justify-self:center; border-radius:18px; }
  .hero-profile .hero-profile-photo { border-radius:50%; }
  .about-copy h2 { font-size:clamp(38px, 13vw, 58px); }
  .hero-profile .hero-profile-copy h2 { font-size:clamp(27px, 7.4vw, 31px); line-height:1.06; }
  dl div { display:grid; grid-template-columns:1fr; gap:6px; }
  dd { text-align:left; }
  /* Single-column stack on mobile; minmax(0,1fr) + min-width:0 keep the horizontal
     scroller from forcing the grid track wider than the viewport. */
  .case-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  .case-list { min-width:0; display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-left:14px; padding:0 28px 10px 0; margin:0 -16px 0 0; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); }
  .case-list::-webkit-scrollbar { display:none; }
  .case-file { min-width:min(82vw, 340px); scroll-snap-align:start; padding:16px; }
  .case-rail-dots { display:flex; justify-content:center; gap:7px; margin:-2px 0 2px; }
  .case-rail-dots span { width:7px; height:7px; border-radius:999px; background:rgba(186,241,255,.3); box-shadow:0 0 12px rgba(72,247,255,.08); transition:width .18s ease, background .18s ease, box-shadow .18s ease; }
  .case-rail-dots span.active { width:22px; background:var(--gold); box-shadow:0 0 16px rgba(255,233,114,.32); }
  .case-detail h3 { font-size: clamp(38px, 14vw, 56px); }
  .case-study-grid { grid-template-columns:1fr; gap:9px; margin-top:18px; }
  .case-study-grid div { padding:12px; border-radius:14px; }
  .case-visual-slot { min-height:104px; border-radius:14px; font-size:10px; }
  .case-actions { display:grid; grid-template-columns:1fr; gap:8px; }
  .case-action { min-height:42px; }
  .method-progress-line { margin:22px 0 16px; }
  .method-steps { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .method-steps [data-method-step],
  .method-steps span { min-height:0; font-size:13px; padding:14px 12px; }

  .contact-form { gap:12px; }
  /* 16px prevents iOS auto-zoom on input focus (Safari < 1em = zoom) */
  .contact-form input, .contact-form textarea { min-height:48px; font-size:16px; border-radius:12px; }
  .contact-form textarea { min-height:138px; }
  .black-hole-social-dock { top:max(12px, env(safe-area-inset-top)); width:min(420px, calc(100vw - 18px)); gap:7px; font-size:10px; }
  .black-hole-social-dock a { min-height:36px; padding:9px 11px; }
  .section-head { margin-bottom:22px; }
  .section-head.split { display:block; }
  .site-footer { width:calc(100vw - 24px); margin-top:0; margin-bottom:34px; padding-top:0; gap:0; font-size:10px; letter-spacing:.08em; }
  .footer-grid { grid-template-columns:1fr; align-items:start; gap:22px; padding:18px; }
  .footer-cta { padding:22px 18px 18px; gap:16px; }
  .footer-cta::after { left:18px; right:18px; }
  .footer-cta-button { width:100%; justify-content:center; }
  .footer-links a { padding-block:3px; }
  .footer-status { max-width:100%; }
  .footer-bottom { display:grid; grid-template-columns:1fr; padding:12px 18px; line-height:1.35; }
}
/* ---- Responsive: ≤380px (compact phones) ---- */
@media (max-width: 380px) {
  .section { --page-pad:12px; padding-left:12px; padding-right:12px; }
  /* Edge-bleed margin must equal the section side padding (now 12px) or it leaks horizontal scroll. */
  .case-list { margin-right:-12px; }
  .unicode-title { max-width:calc(100vw - 24px); font-size:clamp(2.95rem, 14.5vw, 4.3rem); }
  .signal-track span { font-size:23px; }
  .hero-profile { grid-template-columns:1fr; padding:16px; gap:14px; }
  .hero-profile-photo { width:min(70vw, 210px); }
  .hero-profile-copy h2 { font-size:25px; }
  .hero-profile-copy p { font-size:15.5px; line-height:1.55; }
  .method-steps { grid-template-columns:1fr; }
  .systems-card-title { font-size:22px; }
  .signal-links { grid-template-columns:1fr; }
  .signal-link { min-height:0; grid-template-columns:auto 1fr auto; grid-template-rows:auto; align-items:center; }
  .signal-link-thumb { width:42px; height:42px; border-radius:8px; }
}
/* ---- lite-glass: optimize the glass panels (keep the look, drop the cost) ----
   The expense was two things: (1) backdrop-filter blur re-blurring the animated
   tunnel behind every panel each frame, and (2) transparency forcing the panel to
   recomposite over the moving canvas every frame (never cacheable). lite-glass
   keeps each panel's original colour, border, radius, glow and rim, but makes the
   fill opaque and removes the live blur — so panels are cheap to paint and the
   look is essentially unchanged. Toggle with body.lite-glass.
   @media screen so the print stylesheet still wins. */
@media screen {
  body.lite-glass [data-glass] {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:
      radial-gradient(ellipse 90% 58% at 18% 0%, rgba(255,255,255,.14), transparent 48%),
      radial-gradient(ellipse 64% 46% at 92% 14%, rgba(72,247,255,.07), transparent 58%),
      radial-gradient(ellipse 70% 60% at 48% 112%, rgba(0,255,55,.05), transparent 62%),
      linear-gradient(145deg, rgb(30,46,40), rgb(18,36,31) 40%, rgb(9,24,20) 70%, rgb(4,15,13)),
      #0c1c18 !important;
  }
  /* The per-panel WebGL refraction sheen is pure GPU cost — drop it. */
  body.lite-glass [data-glass] > .liquid-glass-refraction { display:none !important; }
  /* Remove the per-element frosted blurs and give them matching opaque fills. */
  body.lite-glass .case-file,
  body.lite-glass .btn.ghost,
  body.lite-glass .signal-link,
  body.lite-glass .youtube-video-card,
  body.lite-glass .youtube-feed-card,
  body.lite-glass .contact-basics a,
  body.lite-glass .contact-basics span,
  body.lite-glass .availability-strip span,
  body.lite-glass .hero-availability,
  body.lite-glass .contact-form input,
  body.lite-glass .contact-form textarea,
  body.lite-glass .theme-menu-panel,
  body.lite-glass .method-steps span,
  body.lite-glass .case-tags span,
  body.lite-glass .case-visual-slot {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  body.lite-glass .case-file { background:linear-gradient(145deg, rgb(8,26,17), rgb(3,12,9)) !important; }
  body.lite-glass .signal-link,
  body.lite-glass .youtube-video-card { background:#0a1a13 !important; }
  /* Ghost buttons + availability chips also lose their blur here — without an
     opaque fill the matrix shows straight through. Give them the site tint. */
  body.lite-glass .btn.ghost { background:linear-gradient(145deg, rgb(26,44,39), rgb(12,30,25) 46%, rgb(5,17,14)) !important; }
  body.lite-glass .hero-availability,
  body.lite-glass .availability-strip span { background:linear-gradient(145deg, rgb(12,30,22), rgb(5,16,12)) !important; }
}
/* ---- Touch: strip hover transforms that would stick after tap ---- */
@media (hover:none) and (pointer:coarse) {
  .btn:hover,
  .case-file:hover,
  .signal-link:hover,
  .youtube-video-card:hover { transform:none; }
  [data-glass]:hover::after { opacity:.5; transform:none; }
}
/* ---- Logo flare system (per-letter gradients + specular highlights) ---- */
/* Overrides glitched title — stable gradient logo with per-letter custom properties */
.unicode-title {
  --logo-edge-mint:#ccfed9;
  --logo-mid-mint:#ccfed9;
  --logo-core-white:#ffffff;
  color:#fff;
  -webkit-text-fill-color:currentColor;
  filter:none;
  text-shadow:none;
}
.unicode-title::before,
.unicode-title::after,
.unicode-title-text::after,
.unicode-title-layer {
  display:none !important;
}
.unicode-title-text {
  color:#fff;
  display:inline-block;
  width:max-content;
  max-width:none;
  --logo-main-gradient:
    linear-gradient(315deg,
      var(--logo-edge-mint) 0%,
      var(--logo-mid-mint) 34%,
      var(--logo-core-white) 47%,
      var(--logo-core-white) 51%,
      var(--logo-mid-mint) 66%,
      var(--logo-edge-mint) 100%);
  background:var(--logo-main-gradient);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:
    drop-shadow(0 0 .055em rgba(120,255,170,.46))
    drop-shadow(0 0 .18em rgba(40,255,120,.22))
    drop-shadow(0 0 .38em rgba(0,255,85,.1));
}
.unicode-title.title-booting,
.unicode-title.title-booted:is(:hover, :active, .touch-glitch),
.unicode-title.title-booting .unicode-title-layer-red,
.unicode-title.title-booting .unicode-title-layer-cyan,
.unicode-title.title-booted:is(:hover, :active, .touch-glitch) .unicode-title-layer-red,
.unicode-title.title-booted:is(:hover, :active, .touch-glitch) .unicode-title-layer-cyan {
  animation:none;
  transform:none;
  filter:none;
}
.logo-flare-anchor {
  position:relative;
  display:inline-block;
  color:inherit;
  background:var(--logo-letter-gradient, var(--logo-main-gradient));
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* The flare/glare offsets are tuned to the "Mattoe Labs Original" letterforms. If
   that font isn't rendering (failed load, sanitizer rejection, offline), the marks
   would decorate the wrong glyph geometry — hide them instead. */
body.logo-font-missing .logo-flare-anchor::before,
body.logo-font-missing .logo-flare-anchor::after,
body.logo-font-missing .unicode-title::before,
body.logo-font-missing .unicode-title::after,
body.logo-font-missing .unicode-title-text::after { display:none; }
.logo-flare-anchor::before,
.logo-flare-anchor::after {
  content:"";
  position:absolute;
  left:var(--flare-x);
  /* --flare-anchor-nudge-y (default 0) shifts every per-letter flare vertically.
     Safari/CoreText draws this font a hair lower than the pinned Windows metrics the
     offsets were tuned to, leaving a small residual that the enlarged wordmark made
     visible (~2px) on the top-anchored M/S flares; a Safari-only nudge corrects it. */
  top:calc(var(--flare-y) + var(--flare-anchor-nudge-y, 0px));
  z-index:8;
  pointer-events:none;
  border-radius:999px;
  mix-blend-mode:plus-lighter;
  transform:translate(-50%, -50%) rotate(var(--flare-tilt, 0deg));
}
/* Safari/iOS (CoreText) only: lift the per-letter flares ~2px so they sit on the
   M/S tops instead of a hair low. @supports(-webkit-touch-callout) matches Safari and
   leaves Chrome/Firefox untouched. Tune the value if it's still off on device. */
@supports (-webkit-touch-callout: none) {
  .unicode-title { --flare-anchor-nudge-y:-0.03em; }
}
.logo-flare-anchor::before {
  width:calc(var(--flare-streak-w, 1.6em) * 1.24);
  height:calc(var(--flare-star-size, .14em) * 1.05);
  border-radius:50%;
  clip-path:none;
  background:
    linear-gradient(90deg, transparent 0%, var(--flare-edge-color, rgba(150,185,255,.18)) 18%, var(--flare-core-color, #fff) 50%, var(--flare-edge-color, rgba(150,185,255,.18)) 82%, transparent 100%) center / var(--flare-star-size, .14em) calc(var(--flare-star-size, .14em) * .13) no-repeat,
    linear-gradient(0deg, transparent 0%, var(--flare-edge-color, rgba(150,185,255,.18)) 18%, var(--flare-core-color, #fff) 50%, var(--flare-edge-color, rgba(150,185,255,.18)) 82%, transparent 100%) center / calc(var(--flare-star-size, .14em) * .13) var(--flare-star-size, .14em) no-repeat,
    radial-gradient(ellipse 36% 100% at 50% 50%, var(--flare-core-color, #fff) 0%, var(--flare-inner-color, rgba(240,246,255,.9)) 20%, var(--flare-mid-color, rgba(200,220,255,.5)) 42%, var(--flare-edge-color, rgba(150,185,255,.18)) 65%, transparent 88%) center / 100% calc(var(--flare-streak-w, 1.6em) * .06) no-repeat;
  opacity:1;
  filter:
    brightness(2.8)
    blur(.018em)
    drop-shadow(0 0 .06em var(--flare-core-color, #fff))
    drop-shadow(0 0 .16em var(--flare-shadow-1, rgba(200,220,255,.9)))
    drop-shadow(0 0 .4em var(--flare-shadow-2, rgba(150,190,255,.65)))
    drop-shadow(0 0 .8em var(--flare-shadow-3, rgba(120,160,250,.35)));
}
.logo-flare-anchor::after {
  width:calc(var(--flare-streak-w, 1.6em) * 1.24);
  height:calc(var(--flare-streak-w, 1.6em) * .012);
  border-radius:50%;
  background:var(--flare-line-color, #fff);
  box-shadow:none;
  opacity:1;
  filter:
    brightness(3)
    blur(.001em)
    drop-shadow(0 0 .02em var(--flare-core-color, #fff))
    drop-shadow(0 0 .06em var(--flare-core-color, #fff))
    drop-shadow(0 0 .14em var(--flare-shadow-1, rgba(220,235,255,.95)))
    drop-shadow(0 0 .3em var(--flare-shadow-2, rgba(170,200,255,.7)))
    drop-shadow(0 0 .6em var(--flare-shadow-3, rgba(130,170,250,.4)))
    drop-shadow(0 0 1.1em var(--flare-shadow-4, rgba(100,145,250,.18)));
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8% 92%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 8% 92%, transparent 100%);
}
.logo-flare-anchor--m {
  --logo-letter-gradient:linear-gradient(315deg, #91ffaf 0%, #c2ffd3 46%, #78ff9e 100%);
  --flare-core-color:#91ffaf;
  --flare-inner-color:rgba(194,255,211,.9);
  --flare-mid-color:rgba(120,255,158,.64);
  --flare-edge-color:rgba(145,255,175,.24);
  --flare-line-color:#78ff9e;
  --flare-shadow-1:rgba(145,255,175,.86);
  --flare-shadow-2:rgba(120,255,158,.58);
  --flare-shadow-3:rgba(120,255,158,.34);
  --flare-shadow-4:rgba(145,255,175,.18);
  --flare-x:.25em;
  --flare-y:.07em;
  --flare-core-w:.34em;
  --flare-core-h:.28em;
  --flare-streak-w:1.08864em;
  --flare-streak-h:.24em;
}
.logo-flare-anchor--e {
  --logo-letter-gradient:linear-gradient(315deg, #91ffaf 0%, #c2ffd3 46%, #78ff9e 100%);
  --flare-core-color:#91ffaf;
  --flare-inner-color:rgba(194,255,211,.9);
  --flare-mid-color:rgba(120,255,158,.64);
  --flare-edge-color:rgba(145,255,175,.24);
  --flare-line-color:#78ff9e;
  --flare-shadow-1:rgba(145,255,175,.86);
  --flare-shadow-2:rgba(120,255,158,.58);
  --flare-shadow-3:rgba(120,255,158,.34);
  --flare-shadow-4:rgba(145,255,175,.18);
  --flare-x:.66em;
  --flare-y:.72em;
  --flare-core-w:.3em;
  --flare-core-h:.26em;
  --flare-streak-w:1.08864em;
  --flare-streak-h:.26em;
  --flare-opacity:1;
}
.logo-flare-anchor--s {
  --logo-letter-gradient:linear-gradient(315deg, #8dffac 0%, #bfffd0 44%, #fff 58%, #fff 70%, #ccfed9 100%);
  --flare-star-size:.28em;
  --flare-core-color:#f8fffb;
  --flare-inner-color:rgba(242,255,247,.9);
  --flare-mid-color:rgba(186,255,212,.28);
  --flare-edge-color:rgba(64,255,145,.1);
  --flare-line-color:#f8fffb;
  --flare-shadow-1:rgba(210,255,228,.75);
  --flare-shadow-2:rgba(150,245,190,.34);
  --flare-shadow-3:rgba(72,230,140,.16);
  --flare-shadow-4:rgba(40,190,110,.08);
  --flare-x:.68em;
  --flare-y:.08em;
  --flare-core-w:.3em;
  --flare-core-h:.26em;
  --flare-streak-w:1.68em;
  --flare-streak-h:.24em;
}
@media (max-width: 1024px) {
  .logo-flare-anchor--m {
    --flare-x:.22em;
    --flare-y:.06em;
    --flare-streak-w:.72576em;
  }
  .logo-flare-anchor--e {
    --flare-x:.64em;
    --flare-y:.68em;
    --flare-streak-w:.72576em;
  }
  .logo-flare-anchor--s {
    --flare-x:.66em;
    --flare-y:.07em;
    --flare-streak-w:1.12em;
  }
}
@media (max-width: 1024px) {
  .policy-page .page-shell { padding-top:86px; }
  .policy-hero-section { padding-top:24px; padding-bottom:16px; }
  .policy-content-section { padding-top:0; }
  .policy-hero-card { gap:18px; }
  .footer-bottom { justify-content:flex-start; flex-wrap:wrap; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns:1fr; }
  .policy-page .page-shell { padding-top:76px; }
  .policy-hero-card h1 { font-size:clamp(42px, 16vw, 72px); }
  .policy-meta-card span { display:grid; gap:4px; }
  .policy-meta-card strong { text-align:left; }
  .policy-side-card,
  .policy-doc article { border-radius:var(--quiet-radius); }
}
/* ---- Print styles ---- */
/* Strip dark backgrounds, interactive chrome, effects — clean B&W-ish one-pager */
@media print {
  html { scroll-behavior:auto; scroll-snap-type:none; background:#fff; color:#111; }
  body { background:#fff !important; color:#111 !important; overflow:visible; }
  .bg-canvas, .fx-canvas, .ufo-canvas, .grain, .scanlines, .crt-grille, .crt-glass-layer, .black-hole-social-dock, .youtube-player-shell, .signal-strip-stage, .signal-strip { display:none !important; }
  .crt-shell, .page-shell { display:block; min-height:auto; transform:none !important; filter:none !important; }
  .topbar[data-glass] { position:static; display:block; margin:0 0 24px; padding:0; border:0; background:#fff; box-shadow:none; color:#111; }

  [data-glass]::before, [data-glass]::after, .brand::after, .case-file::after { display:none !important; }

  .section { display:block; min-height:auto; padding:26px 0; scroll-snap-align:none; page-break-inside:avoid; }

  .unicode-title, .unicode-title::before, .unicode-title-layer-cyan { color:#111 !important; -webkit-text-fill-color:#111 !important; background:none !important; text-shadow:none !important; -webkit-text-stroke:0 !important; transform:none !important; }

  .signal-link-thumb, .signal-link-arrow, .signal-link-copy strong, .signal-link-copy span { background:#fff !important; color:#111 !important; box-shadow:none !important; text-shadow:none !important; }
  .contact-form, .contact-form label { display:block; }
  .contact-form input, .contact-form textarea { border:1px solid #888 !important; background:#fff !important; color:#111 !important; box-shadow:none !important; }
  /* Résumé download: strip interactive/decorative chrome, print real content as a clean one-pager */
  .nav, .theme-settings, .hero-actions, .hero-egg-row, .hero-availability, #blackHoleBtn, .case-rail-dots, .case-detail, .videos-section, .case-texture-stage, .contact-form, .contact-resume-row, .availability-strip { display:none !important; }
  .unicode-title { font-size:34px !important; line-height:1 !important; margin-bottom:6px !important; }
  .case-list { display:block !important; }
  .case-file { display:block !important; min-width:0 !important; border:1px solid #bbb !important; background:#fff !important; color:#111 !important; margin:0 0 8px !important; padding:8px 10px !important; box-shadow:none !important; }
  .systems-grid, .systems-card, .method-panel, .contact-card, .hero-profile, .case-file { border:1px solid #ddd !important; background:#fff !important; box-shadow:none !important; }
  .systems-card *, .method-panel *, .contact-card *, .hero-profile *, .case-file *, .section-head *, h2, h3, .eyebrow { color:#111 !important; text-shadow:none !important; -webkit-text-fill-color:#111 !important; }
  .case-tags span, .case-action, .method-steps span { border:1px solid #bbb !important; }
}
/* ---- Reduced motion guardrail ---- */
/* Near-zero durations kill all JS/CSS animation; specific glow/shimmer/glitch rules also nulled */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .unicode-title, .unicode-title::before, .unicode-title::after, .signal-glitch-title, .signal-glitch-title::before, .signal-glitch-title::after, .signal-track, .signal-strip-walker, body.code-red-warning #modeTxt, body.code-red-active #modeTxt, body.code-red-active #hudTxt, body.code-red-active .eyebrow, body.code-red-shatter .case-file span, body.code-red-suck .case-file span, body.code-red-collapse .case-file span { animation:none !important; } .signal-strip-walker { left:clamp(20px, 9vw, 76px); } .reveal-item { opacity:1; translate:0 0; } .cow-abductor-ufo, .cow-abduction-beam { display:none !important; } .bg-canvas, .fx-canvas, .ufo-canvas { opacity:.65; } }


/* ════════════════════════════════════════════════════════════════
   UI QUALITY PASS — appended layer (non-destructive refinements)
   Smoother interactions, considered hover/focus, premium details.
   Motion-bearing rules are gated behind prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

/* — Text selection: on-brand, legible — */
::selection { background:rgba(0,255,90,.30); color:#f1fff4; text-shadow:none; }
::-moz-selection { background:rgba(0,255,90,.30); color:#f1fff4; text-shadow:none; }

/* — Custom neon scrollbar (desktop pointers only; inner scrollers keep their own none) — */
/* Neon scrollbar — fine-pointers only (thumb: acid-green → cyan gradient) */
@media (pointer:fine) {
  html { scrollbar-width:thin; scrollbar-color:rgba(0,255,90,.45) rgba(0,9,6,.5); }
  ::-webkit-scrollbar { width:12px; height:12px; }
  ::-webkit-scrollbar-track { background:rgba(0,8,5,.55); }
  ::-webkit-scrollbar-thumb {
    border:3px solid rgba(0,8,5,.6); border-radius:999px;
    background:linear-gradient(180deg, rgba(0,255,90,.5), rgba(72,247,255,.4));
  }
  ::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, rgba(0,255,90,.78), rgba(72,247,255,.62));
  }
}

/* — Typography: optical refinement + cleaner wrapping on reading copy — */
.hero-profile-copy p, .about-copy p, .case-lead, .case-summary,
.section-note, .footer-brand-block p, .youtube-video-copy strong,
.signal-link-copy span, .case-proof-card p, .case-study-grid p {
  text-wrap:pretty;
}
h1, h2, h3, .unicode-title, .lede { text-rendering:optimizeLegibility; }
.brand-copy strong, .nav, .eyebrow, .card-kicker, .case-file span,
.method-steps span, .case-status-row span { font-variant-ligatures:none; }

/* — Consistent, smoothed interaction feedback (was snapping on several controls) — */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s ease,
               background .22s ease, box-shadow .22s ease, color .18s ease, filter .18s ease;
  }
  .btn:active { transform:translateY(0) scale(.985); }
  .nav a, .theme-menu-button, .theme-menu-panel button {
    transition:color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .contact-basics a, .contact-basics span, .availability-strip span,
  .case-status-row span, .case-tags span, .case-action, .footer-status,
  .systems-card, .method-steps span, .signal-link-arrow,
  .theme-current-swatch, .about-photo-shell, .hero-availability {
    transition:color .2s ease, border-color .2s ease, background .2s ease,
               box-shadow .2s ease, transform .2s ease;
  }
}

/* — Primary buttons: a touch more lift + glow on hover (premium press feel) — */
.btn.primary:hover, .btn.primary:focus-visible {
  filter:brightness(1.05) saturate(1.04);
  box-shadow:0 0 42px rgba(var(--theme-signal-rgb),.6), 0 10px 30px rgba(0,0,0,.32),
             0 0 2px rgba(225,255,231,.95) inset;
}

/* — Chips: gentle hover affordance so the static ones feel alive too — */
.availability-strip span:hover {
  border-color:rgba(0,255,90,.5); color:#eafff0;
  box-shadow:0 0 18px rgba(0,255,90,.12);
}
.case-tags span:hover, .case-status-row span:hover:first-child {
  border-color:var(--line-strong); color:#eafff0;
  box-shadow:0 0 18px rgba(72,247,255,.12);
}
.contact-basics span:hover {
  border-color:rgba(218,255,235,.34); color:#f4fff7;
  box-shadow:0 0 18px rgba(72,247,255,.1);
}

/* — Method steps: hover read even before the scroll-progress activates them — */
.method-steps span:hover:not(.is-active) {
  border-color:rgba(72,247,255,.4); color:rgba(244,255,247,.92);
  box-shadow:0 0 20px rgba(72,247,255,.07);
}

/* — Social cards: arrow tracks toward the link on hover (directional cue) — */
@media (prefers-reduced-motion: no-preference) and (hover:hover) {
  .signal-link:hover .signal-link-arrow,
  .signal-link:focus-within .signal-link-arrow { transform:translateX(4px); color:#fff; }
}

/* — About headshot: subtle scale-in on hover for tactility — */
@media (prefers-reduced-motion: no-preference) and (hover:hover) {
  .about-photo { transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
  .hero-profile-photo:hover .about-photo,
  .about-photo-shell:hover .about-photo { transform:scale(1.04); }
}

/* — Focus ring: keep the strong AA ring, just let it ease in — */
@media (prefers-reduced-motion: no-preference) {
  a, button, input, textarea, [tabindex] { transition:outline-offset .12s ease; }
}

/* ════════════════════════════════════════════════════════════════
   SIGNAL STRIP — premium pass
   Edge dissolve into the bezel, moving glass specular, breathing glow.
   ════════════════════════════════════════════════════════════════ */

/* Text dissolves softly into the bezel at both ends instead of hard-clipping.
   Applies to the live LED canvas and the pre-hydration DOM fallback alike. */
.signal-marquee-canvas,
.signal-track {
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Deeper inner darkening at the panel mouths so the dots read as recessed glass. */
.signal-strip-stage::before {
  content:"";
  position:absolute;
  inset:var(--signal-panel-top,7px) 0 var(--signal-panel-bottom,8px);
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.85) 100%);
  mix-blend-mode:multiply;
}

/* Slow specular sweep travelling across the glass — gated behind reduced-motion. */
.signal-strip-stage::after {
  content:"";
  position:absolute;
  inset:var(--signal-panel-top,7px) 0 var(--signal-panel-bottom,8px);
  z-index:9;
  pointer-events:none;
  background:linear-gradient(102deg,
    transparent 34%,
    rgba(231,255,238,.05) 46%,
    rgba(231,255,238,.11) 50%,
    rgba(231,255,238,.05) 54%,
    transparent 66%);
  background-size:280% 100%;
  background-position:140% 0;
  mix-blend-mode:screen;
  opacity:.9;
}
@media (prefers-reduced-motion: no-preference) {
  .signal-strip-stage::after { animation:signalGlassSweep 11s linear infinite; }
  /* Bottom underglow gently breathes rather than sitting static. */
  .signal-strip::after { animation:signalGlowBreathe 6.5s ease-in-out infinite; }
}
@keyframes signalGlassSweep {
  0% { background-position:140% 0; }
  100% { background-position:-140% 0; }
}
@keyframes signalGlowBreathe {
  0%, 100% { opacity:.34; }
  50% { opacity:.58; }
}

/* — Hero availability pill: themed background glow for stronger text legibility — */
.hero-availability {
  background:
    radial-gradient(130% 200% at 16% 50%, rgba(var(--theme-signal-rgb),.16), transparent 68%),
    rgba(3,12,9,.64);
  border-color:rgba(var(--theme-signal-rgb),.36);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(221,255,228,.08),
    0 0 26px rgba(var(--theme-signal-rgb),.22),
    0 10px 28px rgba(0,0,0,.42);
  backdrop-filter:blur(3px) saturate(1.05);
  -webkit-backdrop-filter:blur(3px) saturate(1.05);
  text-shadow:0 1px 10px rgba(0,0,0,.72), 0 0 16px rgba(var(--theme-signal-rgb),.18);
}
.hero-availability strong { text-shadow:0 0 14px rgba(var(--theme-signal-rgb),.34); }
@media (prefers-reduced-motion: no-preference) {
  .hero-availability { animation:heroAvailGlow 5s ease-in-out infinite; }
}
@keyframes heroAvailGlow {
  0%, 100% { box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(221,255,228,.08), 0 0 22px rgba(var(--theme-signal-rgb),.18), 0 10px 28px rgba(0,0,0,.42); }
  50% { box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(221,255,228,.08), 0 0 34px rgba(var(--theme-signal-rgb),.32), 0 10px 28px rgba(0,0,0,.42); }
}

/* — Footer wordmark: keep the name on one line (was wrapping into the MATTOE LABS
     tag and overlapping) and tighten the lockup for a more premium read — */
.footer-wordmark {
  gap:7px;
  align-content:start;
  width:max-content;
  max-width:100%;
}
.footer-wordmark span {
  white-space:nowrap;
  font-size:19px;
  line-height:1.06;
  letter-spacing:.004em;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.footer-wordmark strong {
  letter-spacing:.22em;
  text-shadow:0 0 14px rgba(72,247,255,.32);
  transition:color .2s ease, text-shadow .2s ease;
}
@media (hover:hover) {
  .footer-wordmark:hover span { text-shadow:0 0 18px rgba(231,255,238,.42); }
  .footer-wordmark:hover strong { color:#9af6ff; text-shadow:0 0 18px rgba(72,247,255,.5); }
}

/* — Decorative window-chrome controls in the brand titlebar (just for show) — */
.window-controls {
  margin-left:auto;
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
  padding-left:6px;
}
.window-control {
  width:21px;
  height:18px;
  display:grid;
  place-items:center;
  color:#d6ffe0;
  background:linear-gradient(180deg, #0b2a23, #02100d);
  border:1px solid;
  border-color:var(--win-hi) var(--win-dark) var(--win-dark) var(--win-hi);
  box-shadow:inset 1px 1px rgba(255,255,255,.26), inset -1px -1px rgba(0,0,0,.72);
  font:700 11px/1 var(--mono);
  cursor:default;
  user-select:none;
  transition:filter .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.window-control--min::before {
  content:"";
  width:8px;
  height:2px;
  margin-top:7px;
  background:currentColor;
  box-shadow:0 0 6px rgba(0,255,55,.4);
}
.window-control:hover { filter:brightness(1.2); color:#fff; }
.window-control:active { border-color:var(--win-dark) var(--win-hi) var(--win-hi) var(--win-dark); box-shadow:inset 1px 1px rgba(0,0,0,.7); }
.window-control--close:hover {
  color:#fff;
  background:linear-gradient(180deg, #c8142f, #790016);
  border-color:rgba(255,210,217,.7) #4a000c #4a000c rgba(255,210,217,.7);
  box-shadow:inset 1px 1px rgba(255,255,255,.28), inset -1px -1px rgba(0,0,0,.5), 0 0 12px rgba(255,77,109,.5);
}
@media (max-width: 600px) {
  .window-controls {
    display:flex;
    gap:3px;
    padding-left:4px;
  }
  .window-control {
    width:19px;
    height:17px;
    font-size:10px;
  }
  .window-control--min::before {
    width:7px;
    margin-top:6px;
  }
}

/* — Theme/color button: match the muted nav tabs instead of glowing acid-green;
     pick up the same cyan accent the nav links use on hover/open — */
.theme-menu-bars { gap:3px; }
.theme-menu-bars i {
  width:14px;
  height:2px;
  background:rgba(205,245,216,.82);
  box-shadow:none;
  transition:background .16s ease, box-shadow .16s ease, width .16s ease;
}
.theme-menu-button:hover .theme-menu-bars i,
.theme-menu-button:focus-visible .theme-menu-bars i,
.theme-menu-button[aria-expanded="true"] .theme-menu-bars i {
  background:#f4fff7;
  box-shadow:0 0 8px rgba(72,247,255,.45);
}
.theme-menu-button[aria-expanded="true"] .theme-menu-bars i:nth-child(2) { width:10px; }

/* ---- Rocket gate: responsive (≤760px) ---- */
@media (max-width: 760px) {
  /* Narrow screens: the full-width social dock would overlap the top-left abort, so
     drop it just below the abort button (this rule wins over the ≤1024 dock rule above). */
  .black-hole-social-dock { top:calc(max(14px, env(safe-area-inset-top)) + 50px); }
  .rocket-gate-section { min-height:88vh; padding-top:96px; padding-bottom:86px; }
  .rocket-gate-card { padding:22px; border-radius:18px; }
  .rocket-gate-copy h2 { font-size:clamp(38px, 15vw, 62px); letter-spacing:-.065em; }
  .rocket-gate-telemetry { grid-template-columns:1fr; gap:8px; }
  .rocket-gate-telemetry span { min-height:58px; }
  .rocket-launch-button { width:100%; }
  .rocket-app-hud { top:10px; right:10px; left:10px; align-items:flex-start; font-size:9px; }
  .rocket-exit-button { padding:8px 10px; font-size:9px; }
}

/* Rocket: reduced-motion overrides — kill vault doors, snap transitions */
@media (prefers-reduced-motion: reduce) {
  body.rocket-launch-window .scanlines,
  body.rocket-launch-window .grain,
  body.rocket-app-active .rocket-transition-vault,
  body.rocket-app-active .rocket-transition-vault span { animation:none !important; }
  .rocket-app-stage,
  body.rocket-app-active .crt-shell { transition:none !important; }
  .rocket-transition-vault { opacity:.14; }
}

/* ---- Rocket: print hide ---- */
@media print {
  .rocket-gate-section,
  .rocket-app-stage { display:none !important; }
}

/* ---- Paper Shaders accents (Code Red only; see src/paper-accents.7f39b900ef.js) ---- */
/* Decorative dither/warp accents removed — only the brand-mark liquid metal and the
   Code Red lab-warp vignette remain (see .brand-mark-shader and .paper-lab-warp). */

.case-texture-stage .case-texture-canvas,
.case-texture-stage .case-texture-fallback,
.case-texture-stage .case-texture-hud {
  z-index: 1;
}
.systems-section,
.method-section {
  overflow: clip;
}
.systems-inner,
.method-panel {
  position: relative;
  z-index: 1;
}
.receipt-orbit-ring,
.receipt-orbit-grid {
  position: relative;
  z-index: 1;
}

/* Code Red lab warp — arm phase vignette only (not a full-page tunnel replacement) */
.paper-lab-warp {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 8%, transparent 72%);
}
.paper-lab-warp.is-live,
body.paper-lab-warp-on .paper-lab-warp {
  opacity: .32;
}
.paper-lab-warp.paper-lab-warp-ready {
  opacity: .36;
}
.paper-lab-warp[data-paper-shader] canvas {
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark-shader,
  .paper-lab-warp {
    transition: none;
  }
}

@media print {
  [data-paper-shader] canvas,
  .paper-lab-warp,
  .brand-mark-shader { display: none !important; }
}