:root {
  --ink: #c9ffd8;
  --paper: #060906;
  --panel: #0b100b;
  --muted: #7fa98c;
  --line: rgba(0, 255, 102, 0.22);
  --coal: #0f1110;
  --steel: #333a3d;
  --moss: #5f7c4f;
  --pepper: #b73d26;
  --ember: #00e55c;
  --gold: #00ff66;
  --shadowfell: #5b4b8a;
  --datalink: #2d6187;
  --news: #d33b3b;
  --claude: #d4a72c;
  --cities: #4f8ea8;
  --skyseer: #6a5fd6;
  --spanish: #d9722b;
  --electric: #00e6ff;
  --white: #fffdf8;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.menu-open {
  overflow: hidden;
}

/* Old-CRT viewing layer over the whole page: curved-glass vignette (faked
   via an inset shadow following a rounded boundary, not literal pixel
   warping), scanlines, a faint RGB fringe at the extreme edges, and an
   occasional slow highlight band rolling down the tube. Fixed, so it
   persists through scroll; pointer-events:none throughout so nothing
   underneath becomes unclickable. */
.crt-frame {
  position: fixed;
  z-index: 9990;
  inset: 0;
  border-radius: clamp(14px, 2.4vw, 34px);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(0, 255, 102, 0.05),
    inset 0 0 70px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 180px 50px rgba(0, 0, 0, 0.65);
}

.crt-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.crt-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 24, 12, 0.4) 100%),
    linear-gradient(90deg, rgba(255, 20, 60, 0.035), transparent 5%, transparent 95%, rgba(0, 180, 255, 0.035));
}

.crt-frame-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: -22%;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(0, 255, 102, 0.05), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .crt-frame {
    animation: crt-on 900ms ease-out both;
  }

  .crt-frame-sweep {
    animation: crt-sweep 13s linear infinite;
  }

  @keyframes crt-sweep {
    0% { top: -22%; }
    100% { top: 100%; }
  }

  /* Very low-amplitude, irregular flicker -- reads as an old tube's
     brightness drifting, not a strobe. Kept to a few percent opacity. */
  .crt-frame::before {
    animation: crt-flicker 6.4s ease-in-out infinite;
  }

  @keyframes crt-flicker {
    0%, 100% { opacity: 0.55; }
    21% { opacity: 0.48; }
    42% { opacity: 0.6; }
    63% { opacity: 0.5; }
    81% { opacity: 0.58; }
  }
}

#products,
#merch,
#games,
#ai,
#contact {
  scroll-margin-top: 110px;
}

.sys-bar {
  position: fixed;
  z-index: 25;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px clamp(18px, 4vw, 56px);
  color: var(--gold);
  background: rgba(15, 17, 16, 0.94);
  border-bottom: 1px solid rgba(0, 255, 102, 0.28);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 6px;
  vertical-align: -0.15em;
  background: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .cursor {
    animation: blink 1.1s steps(1) infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 620ms ease, transform 620ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(26px);
    }
  }

  .hero-content .eyebrow {
    animation: rise 600ms cubic-bezier(0.2, 0.8, 0.25, 1) 80ms backwards;
  }

  .hero-copy {
    animation: rise 600ms cubic-bezier(0.2, 0.8, 0.25, 1) 340ms backwards;
  }

  .hero-actions {
    animation: rise 600ms cubic-bezier(0.2, 0.8, 0.25, 1) 480ms backwards;
  }

  .hero-tagline {
    animation: rise 600ms cubic-bezier(0.2, 0.8, 0.25, 1) 260ms backwards;
  }

  @keyframes h1-sheen {
    0% {
      background-position: -120% 0, 0 0;
    }
    45%,
    100% {
      background-position: 220% 0, 0 0;
    }
  }

  h1 {
    background:
      linear-gradient(100deg, rgba(255, 253, 248, 0) 42%, rgba(255, 253, 248, 0.5) 50%, rgba(255, 253, 248, 0) 58%) no-repeat,
      linear-gradient(180deg, var(--white) 46%, var(--gold) 100%);
    background-size: 240% 100%, 100% 100%;
    background-position: -120% 0, 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    animation:
      rise 640ms cubic-bezier(0.2, 0.8, 0.25, 1) 200ms backwards,
      h1-sheen 7s ease-in-out 1.6s infinite;
  }

  /* Fire-glow flicker, layered on the wordmark's two words independently so
     they don't breathe in perfect unison -- reads as flame catching, not a
     uniform pulse. Lives in this no-preference block so reduced-motion users
     keep the plain static h1 gradient above, with zero extra logic. */
  @keyframes h1-fire {
    0%, 100% {
      text-shadow: 0 0 10px rgba(0, 255, 102, 0.5), 0 0 32px rgba(0, 255, 102, 0.4), 0 0 70px rgba(0, 255, 102, 0.2);
    }
    18% {
      text-shadow: 0 0 14px rgba(0, 255, 130, 0.65), 0 0 46px rgba(0, 255, 102, 0.5), 0 0 96px rgba(0, 255, 102, 0.28);
    }
    36% {
      text-shadow: 0 0 8px rgba(0, 255, 102, 0.46), 0 0 26px rgba(0, 255, 102, 0.35), 0 0 60px rgba(0, 255, 102, 0.16);
    }
    58% {
      text-shadow: 0 0 16px rgba(0, 255, 140, 0.7), 0 0 52px rgba(0, 255, 102, 0.52), 0 0 110px rgba(0, 255, 102, 0.3);
    }
    77% {
      text-shadow: 0 0 9px rgba(0, 255, 102, 0.48), 0 0 30px rgba(0, 255, 102, 0.36), 0 0 64px rgba(0, 255, 102, 0.18);
    }
  }

  h1 .word {
    animation: h1-fire 3.4s ease-in-out infinite;
  }

  h1 .word.line2 {
    animation-delay: -1.1s;
  }

  @keyframes scroll-dot {
    0%,
    100% {
      opacity: 1;
      transform: translateY(0);
    }
    70% {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  .hero-scroll {
    animation: rise 800ms ease 900ms backwards;
  }

  /* CRT power-on flicker on first paint */
  @keyframes crt-on {
    0% {
      opacity: 0;
      filter: brightness(2.4) saturate(0.2);
    }
    12% {
      opacity: 1;
    }
    22% {
      opacity: 0.55;
      filter: brightness(1.6) saturate(0.5);
    }
    34% {
      opacity: 1;
      filter: brightness(1.15) saturate(0.9);
    }
    100% {
      filter: none;
    }
  }

  .hero {
    animation: crt-on 780ms ease-out both;
  }

  .hero-scroll span {
    animation: scroll-dot 1.9s ease-in-out infinite;
  }

  @keyframes band-shift {
    to {
      background-position: 100% 100%;
    }
  }

  .games-band {
    background-size: 200% 200%;
    animation: band-shift 16s ease-in-out infinite alternate;
  }
}

/* Scroll-driven parallax: progressive enhancement where supported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-recede {
      to {
        opacity: 0.15;
        transform: translateY(-48px);
      }
    }

    .hero-content {
      animation: hero-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
    }
  }
}

a {
  color: inherit;
  text-decoration: none;
}

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

.skip-link {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  color: #04170b;
  background: var(--gold);
  font-weight: 850;
  transform: translateY(-200%);
  transition: transform 160ms ease;
}

.skip-link:focus-visible {
  transform: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 14px clamp(18px, 4vw, 56px);
  color: var(--white);
  background: linear-gradient(180deg, rgba(15, 17, 16, 0.84), rgba(15, 17, 16, 0));
  transition: background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(15, 17, 16, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 253, 248, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 253, 248, 0.36);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.12);
  font-size: 0.78rem;
}

.site-nav {
  display: flex;
  gap: clamp(12px, 3vw, 30px);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  opacity: 0.86;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.08);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 2px;
  background: var(--white);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  z-index: 15;
  top: 98px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px clamp(18px, 4vw, 56px) 20px;
  color: var(--white);
  background: rgba(15, 17, 16, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 253, 248, 0.12);
}

.mobile-nav a {
  padding: 14px 0;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 253, 248, 0.1);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: 92svh;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0a0f0a 0%, #040604 70%);
}

/* CRT scanlines + vignette over the hero image */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.16) 0px,
      rgba(0, 0, 0, 0.16) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 58%, rgba(15, 17, 16, 0.5) 100%);
}

.hero-content {
  grid-area: 1 / 1;
}

/* Absolutely positioned so the canvas bitmap's intrinsic aspect ratio can
   never feed back into grid sizing (that loop also starved the
   ResizeObserver that keeps the rain matched to the hero). */
.hero-embers {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-glow-ambient {
  position: absolute;
  z-index: 0;
  inset: -15% -15% 30% -15%;
  background:
    radial-gradient(circle at 26% 32%, rgba(0, 255, 102, 0.15), transparent 55%),
    radial-gradient(circle at 76% 58%, rgba(0, 230, 255, 0.06), transparent 50%);
  filter: blur(10px);
  pointer-events: none;
}

/* A soft green light that follows the cursor around the hero -- desktop,
   fine-pointer only (see the JS guard), and off entirely under
   prefers-reduced-motion. --cx/--cy are set in script.js on mousemove;
   the CSS transition is what gives it a trailing, HUD-ish feel instead of
   snapping to the pointer. */
.hero-cursor-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    circle 260px at var(--cx, 50%) var(--cy, 50%),
    rgba(0, 255, 102, 0.16),
    transparent 70%
  );
  transition: opacity 300ms ease;
  pointer-events: none;
}

.hero-cursor-glow.is-active {
  opacity: 1;
}

.hero-scan-sweep {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scan-sweep::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16%;
    height: 16%;
    background: linear-gradient(180deg, transparent, rgba(0, 255, 102, 0.08), transparent);
    animation: hero-sweep 10s linear infinite;
  }

  @keyframes hero-sweep {
    0% { top: -16%; }
    100% { top: 100%; }
  }
}

.hero-content {
  z-index: 3;
  align-self: center;
  width: min(780px, 100%);
  padding: 120px clamp(20px, 6vw, 84px) 96px;
  color: var(--white);
}

/* Live status panel filling the empty right side of the hero on wide
   viewports. Every number here is real, pulled from /api/forge-status
   (host /proc, nvidia-smi, Ollama) -- nothing here is simulated. */
/* Wraps the emblem and the telemetry panel as one composition -- focal
   point on top, live proof underneath -- in the space the panel used to
   float in alone. Takes over the positioning .hero-terminal used to hold
   directly; .hero-terminal is now just a normal-flow child of this. */
.hero-visual {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(24px, 5vw, 84px);
  transform: translateY(-50%);
  width: 320px;
  display: grid;
  gap: 22px;
  justify-items: center;
}

.hero-terminal {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 12, 8, 0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* Focal-point emblem -- a face rendered from the same digital-rain glyphs
   as the hero background, standing in for a photoreal GX10 render (no 3D
   pipeline exists for that; this is the honest stand-in from the approved
   mockup). perspective here is what gives the face's rotateX/rotateY
   head-turn (see .face-rain) actual depth instead of a flat 2D skew. */
.emblem-wrap {
  position: relative;
  width: min(260px, 82%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 700px;
}

.emblem-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 102, 0.18);
}

.emblem-ring.r2 {
  inset: 16%;
  border-color: rgba(0, 255, 102, 0.1);
}

.emblem-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 102, 0.32), transparent 68%);
  filter: blur(6px);
}

.chip {
  position: relative;
  z-index: 2;
  width: 68%;
  height: 68%;
  overflow: visible;
}

/* The GX10 emblem: a face silhouette "made of" the same falling-glyph
   rain used behind the hero (.hero-embers) -- the machine's mind, visibly
   built out of the same digital rain the rest of the site runs on. Filled
   entirely by canvas draws in script.js; the shape itself comes from the
   #face-clip clipPath (eyes, nose, mouth punched out via fill-rule=evenodd;
   ears added as separate non-overlapping filled subpaths). rotateX/rotateY
   here are driven by --face-rx/-ry, set from hero mousemove (fine-pointer,
   motion-OK only) for a subtle head-turn-toward-cursor effect; the
   transition is what makes that read as smooth tracking instead of a snap
   on every mousemove tick. */
.face-rain {
  display: block;
  height: auto;
  aspect-ratio: 1 / 1;
  clip-path: url(#face-clip);
  -webkit-clip-path: url(#face-clip);
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, 0.4));
  transform: rotateX(var(--face-rx, 0deg)) rotateY(var(--face-ry, 0deg));
  transition: transform 300ms ease-out;
}

.emblem-caption {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Studio seal, filling the wide gap between the hero copy and the GX10
   telemetry panel on spacious viewports. Only shown once that gap is
   genuinely wide (see the 1600px floor below) -- below that, hero-content
   and hero-visual sit too close together to fit a third focal point
   without crowding either. Kept deliberately quiet (small, low opacity,
   soft glow) so it reads as a mark in the background rather than a
   fourth thing competing with the headline for attention -- CRUCIBLE
   FORGE and the CTA are the focal points; this is texture. */
/* A big background watermark filling most of the hero, not a side accent
   anymore -- sits behind the headline/copy/CTA (z-index 3) and the GX10
   panel (z-index 2), so it can overlap both freely. Sized off the hero's
   own height (92svh, see .hero) rather than a fixed px/vw value, so it
   scales with the viewport the same way the hero itself does. Opacity
   kept low specifically because it now sits directly behind readable
   text -- this is texture, the text on top is still the focal point. */
.hero-logo-mark {
  display: block;
  position: absolute;
  /* In front of the copy/CTA (z-index 3) and the GX10 panel (z-index 2) --
     the seal artwork is mostly transparent (thin line art on an empty
     background), so it reads as an overlay, not a solid card blocking
     everything under it. pointer-events:none is load-bearing here: without
     it, this now sits directly on top of the CTA buttons and would eat
     their clicks. */
  z-index: 5;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80svh, 92vw);
  aspect-ratio: 1 / 1;
  opacity: 0.8;
}

.hero-logo-mark img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 30px rgba(0, 255, 102, 1)) drop-shadow(0 0 75px rgba(0, 255, 102, 0.68)) brightness(1.73);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-logo-mark img {
    animation: seal-pulse 4.5s ease-out infinite;
  }

  /* A real heartbeat, not a smooth sine breathe -- two quick beats
     (lub-dub) then a long rest before the next one, same rhythm shape as
     an actual pulse rather than a uniform glow-and-fade. */
  @keyframes seal-pulse {
    0%, 20%, 100% { filter: drop-shadow(0 0 30px rgba(0, 255, 102, 1)) drop-shadow(0 0 75px rgba(0, 255, 102, 0.68)) brightness(1.73); }
    8% { filter: drop-shadow(0 0 48px rgba(0, 255, 102, 1)) drop-shadow(0 0 105px rgba(0, 255, 102, 1)) brightness(2.03); }
    16% { filter: drop-shadow(0 0 33px rgba(0, 255, 102, 1)) drop-shadow(0 0 81px rgba(0, 255, 102, 0.75)) brightness(1.8); }
    24% { filter: drop-shadow(0 0 41px rgba(0, 255, 102, 1)) drop-shadow(0 0 93px rgba(0, 255, 102, 0.9)) brightness(1.92); }
  }
}

/* Slow scan ring around the seal, one ember-colored break in an otherwise
   green dashed circle -- the same "orange forge heat + green AI glow"
   mixing as the hero-particles embers, just as a static-feeling mark
   turned into a machine that's quietly doing something. */
.hero-logo-mark {
  --seal-charge: 0;
}

.hero-logo-mark::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  border: 1px dashed rgba(0, 255, 102, 0.32);
  border-top-color: rgba(255, 138, 61, 0.6);
  filter: drop-shadow(0 0 calc(var(--seal-charge, 0) * 10px) rgba(0, 255, 102, 0.6));
  transition: filter 200ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-logo-mark::before {
    animation: seal-ring-rotate 18s linear infinite;
  }

  @keyframes seal-ring-rotate {
    to { transform: rotate(360deg); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .emblem-glow {
    animation: pulseglow 5s ease-in-out infinite;
  }

  @keyframes pulseglow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }

}

.hero-terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 255, 102, 0.07), transparent);
}

.ht-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ht-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .ht-status .dot {
    animation: live-pulse 2s ease-in-out infinite;
  }
}

.ht-region {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

/* Brief flicker each time a poll actually lands new numbers -- proof this
   is a live readout, not a screenshot. Tied to real fetch timing in
   script.js, not a fake decorative timer. */
.ht-refresh {
  color: var(--electric);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 200ms ease;
}

.ht-refresh.is-active {
  opacity: 1;
}

.hero-terminal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.ht-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: #070c08;
}

.ht-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ht-val {
  color: var(--white);
  font-family: var(--mono);
  font-size: 1.16rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ht-cell.accent .ht-val {
  color: var(--electric);
  text-shadow: 0 0 14px rgba(0, 230, 255, 0.4);
}

.ht-cell-load {
  position: relative;
}

.ht-load-graph {
  width: 100%;
  height: 22px;
  margin-top: 2px;
}

.hero-terminal-loaded {
  min-height: 1.2em;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-terminal-prompt {
  padding: 0 16px 14px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.78rem;
}

@media (max-width: 1180px) {
  .hero-visual {
    display: none;
  }
}

.hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  display: grid;
  justify-items: center;
  width: 28px;
  height: 46px;
  padding-top: 8px;
  border: 2px solid rgba(255, 253, 248, 0.38);
  border-radius: 16px;
  transform: translateX(-50%);
}

.hero-scroll span {
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--gold);
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
  border-color: rgba(255, 253, 248, 0.7);
}

.eyebrow,
.section-kicker {
  margin: 0 0 12px;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "// ";
  opacity: 0.7;
}

.eyebrow .cursor {
  background: var(--ember);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 14ch;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: clamp(2.6rem, 8.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--white) 46%, var(--gold) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(0, 255, 102, 0.32));
}

h2 {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
}

.hero-tagline {
  margin: -8px 0 20px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-copy {
  max-width: 560px;
  margin-bottom: 30px;
  color: rgba(255, 253, 248, 0.86);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.hero-actions,
.contact-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Energy wrapper around each hero button: a spinning conic border + soft
   blur glow on hover, plus a proximity "charge" ring driven by --charge
   (set from script.js as the cursor approaches). Kept as a wrapper rather
   than folded into .button itself, since .button already uses its own
   ::after for the primary-button shine sweep and relies on overflow:hidden
   to clip it -- these effects need to bleed outside that box instead. */
.btn-energy {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  border-radius: 4px;
}

.btn-energy::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin-ang, 0deg), transparent 0 82%, var(--gold) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms ease;
}

.btn-energy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--gold);
  opacity: 0;
  filter: blur(16px);
  transition: opacity 240ms ease;
}

.btn-energy:hover::after {
  opacity: 0.18;
}

.btn-charge {
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--electric);
  opacity: var(--charge, 0);
  box-shadow: 0 0 calc(var(--charge, 0) * 22px) var(--electric);
  pointer-events: none;
  transition: opacity 120ms linear;
}

@property --spin-ang {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-energy:hover::before {
    opacity: 1;
    animation: btn-spin 2.2s linear infinite;
  }

  @keyframes btn-spin {
    to { --spin-ang: 360deg; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-energy:hover::before {
    opacity: 1;
  }
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hero-actions .button {
  min-height: 62px;
  padding: 0 36px;
  font-size: 1.05rem;
}

.button:active {
  transform: translateY(0) scale(0.97);
}

.button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.45) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 600ms ease;
  pointer-events: none;
}

.button.primary:hover::after,
.button.primary:focus-visible::after {
  transform: translateX(130%);
}

.button:hover,
.button:focus-visible,
.product-card a:hover,
.product-card a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  transform: translateY(-1px);
}

.button.primary {
  color: #04170b;
  background: var(--gold);
  box-shadow: 0 12px 34px rgba(0, 255, 102, 0.25);
}

.button.secondary {
  color: var(--white);
  border: 1px solid rgba(255, 253, 248, 0.34);
  background: rgba(255, 253, 248, 0.1);
}

.section-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.intro-section {
  padding: clamp(52px, 8vw, 96px) 0;
  background: var(--paper);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(260px, 1.1fr) minmax(240px, 0.9fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}

.intro-grid h2 {
  font-size: clamp(2rem, 3.8vw, 4rem);
}

.intro-grid p:last-child {
  color: var(--muted);
  font-size: 1.08rem;
}

.section-band {
  padding: clamp(58px, 8vw, 108px) 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 4vw, 42px);
}

/* Products section only: centered kicker + heading instead of the default
   kicker-left/heading-right split used elsewhere (e.g. Games). */
#products .section-heading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
}

.product-card {
  --accent: var(--steel);
  --card-pad: clamp(22px, 3vw, 34px);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 22px 18px;
  min-height: 312px;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-top: 6px solid var(--accent);
  border-radius: 8px;
  background: #0a120c;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent), 0 18px 44px -18px var(--accent);
}

/* Corner brackets, revealed on hover */
.product-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  --b: var(--accent, var(--ember));
  background:
    linear-gradient(var(--b), var(--b)) top left / 16px 2px,
    linear-gradient(var(--b), var(--b)) top left / 2px 16px,
    linear-gradient(var(--b), var(--b)) top right / 16px 2px,
    linear-gradient(var(--b), var(--b)) top right / 2px 16px,
    linear-gradient(var(--b), var(--b)) bottom left / 16px 2px,
    linear-gradient(var(--b), var(--b)) bottom left / 2px 16px,
    linear-gradient(var(--b), var(--b)) bottom right / 16px 2px,
    linear-gradient(var(--b), var(--b)) bottom right / 2px 16px;
  background-repeat: no-repeat;
}

.product-card:hover::before,
.product-card:focus-within::before {
  opacity: 0.85;
}

/* Pointer-tracking glow; --mx/--my set from script.js on fine-pointer devices. */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 40%),
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.product-card:hover::after {
  opacity: 1;
}

.product-card.pepper {
  --accent: var(--pepper);
}

.product-card.shadowfell {
  --accent: var(--shadowfell);
}

.product-card.datalink {
  --accent: var(--datalink);
}

.product-card.news {
  --accent: var(--news);
}

.product-card.claude {
  --accent: var(--claude);
}

.product-card.worm {
  --accent: var(--moss);
}

.product-card.skyseer {
  --accent: var(--skyseer);
}

.product-card.spanish {
  --accent: var(--spanish);
}

.product-shot {
  grid-column: 1 / -1;
  min-width: 0;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.product-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 400ms ease;
}

.product-card:hover .product-shot img,
.product-card:focus-within .product-shot img {
  transform: scale(1.03);
}

.product-card > div {
  min-width: 0;
}

.product-card h3 {
  overflow-wrap: break-word;
}

.product-card p {
  color: var(--muted);
  font-size: 1.02rem;
}

/* p.product-version out-specifies the .product-card p base rule (0,2,1 vs
   0,1,1) so no !important is needed to win on color/size/margin. */
.product-card p.product-version {
  margin-top: 6px;
  color: var(--accent, var(--muted));
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* Secondary link inside a card body (e.g. a manual/docs link) -- overrides
   .product-card a's grid-column:2 CTA positioning so it flows inline in
   the body instead of colliding with the card's real bottom-right CTA. */
.product-card .manual-link {
  grid-column: auto;
  justify-self: auto;
  align-self: auto;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid currentColor;
}

.product-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  grid-column: 2;
  justify-self: start;
  align-self: end;
  color: var(--gold);
  font-weight: 850;
  border-bottom: 2px solid currentColor;
  transition: transform 160ms ease;
}

.product-card a span {
  transition: transform 200ms ease;
}

.product-card a:hover span,
.product-card a:focus-visible span {
  transform: translateX(4px);
}

.product-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  color: var(--white);
  background: var(--steel);
  font-weight: 900;
}

.pepper .product-icon {
  background: var(--pepper);
}

.shadowfell .product-icon {
  background: var(--shadowfell);
}

.datalink .product-icon {
  background: var(--datalink);
}

.news .product-icon {
  background: var(--news);
}

.claude .product-icon {
  background: var(--claude);
}

.worm .product-icon {
  background: var(--moss);
}

.skyseer .product-icon {
  background: var(--skyseer);
}

.spanish .product-icon {
  background: var(--spanish);
}

.product-card .product-status {
  grid-column: 2;
  justify-self: start;
  align-self: end;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.card-flag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  grid-column: 2;
  justify-self: start;
  align-self: end;
  color: var(--muted);
  font-weight: 850;
  font-style: italic;
}

/* Featured-project spotlight: a bigger, telemetry-styled proof panel for
   the flagship, distinct from the compact product-grid cards above it --
   the point is live numbers pulled from the real running site, not
   another card that just describes it. */
.featured-project {
  --accent: var(--news);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #070c08;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.featured-project:hover,
.featured-project:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent), 0 18px 44px -18px var(--accent);
}

/* Corner brackets, revealed on hover — same treatment as .product-card */
.featured-project::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  --b: var(--accent, var(--ember));
  background:
    linear-gradient(var(--b), var(--b)) top left / 16px 2px,
    linear-gradient(var(--b), var(--b)) top left / 2px 16px,
    linear-gradient(var(--b), var(--b)) top right / 16px 2px,
    linear-gradient(var(--b), var(--b)) top right / 2px 16px,
    linear-gradient(var(--b), var(--b)) bottom left / 16px 2px,
    linear-gradient(var(--b), var(--b)) bottom left / 2px 16px,
    linear-gradient(var(--b), var(--b)) bottom right / 16px 2px,
    linear-gradient(var(--b), var(--b)) bottom right / 2px 16px;
  background-repeat: no-repeat;
}

.featured-project:hover::before,
.featured-project:focus-within::before {
  opacity: 0.85;
}

/* Pointer-tracking glow; --mx/--my set from script.js on fine-pointer devices. */
.featured-project::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 40%),
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.featured-project:hover::after {
  opacity: 1;
}

.featured-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.featured-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.featured-project:hover .featured-shot img,
.featured-project:focus-within .featured-shot img {
  transform: scale(1.03);
}

.featured-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 40px);
}

.featured-body p {
  color: var(--muted);
  font-size: 1.02rem;
}

.featured-body a:not(.button) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.featured-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  width: 100%;
  margin: 4px 0 6px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.featured-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
  padding: 12px 16px;
  background: #0b100b;
}

.featured-stat-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured-stat-val {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
}

@media (max-width: 820px) {
  .featured-project {
    grid-template-columns: 1fr;
  }

  .featured-shot {
    aspect-ratio: 16 / 10;
  }
}

.drop-banner {
  --accent: var(--pepper);
  display: grid;
  gap: 4px;
  margin: 0 0 22px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  background: #0a120c;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.drop-banner:hover,
.drop-banner:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent);
}

.drop-banner.claude {
  --accent: var(--claude);
}

.drop-banner.cities {
  --accent: var(--cities);
}

.drop-tag {
  color: var(--accent, var(--pepper));
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drop-title {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 850;
}

.drop-status {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.games-band {
  color: var(--white);
  background:
    linear-gradient(rgba(0, 255, 102, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 102, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(183, 61, 38, 0.2), rgba(95, 124, 79, 0.24)),
    var(--coal);
  background-size: 40px 40px, 40px 40px, auto, auto;
}

.games-band .section-kicker {
  color: var(--gold);
}

.split {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1fr);
  gap: clamp(28px, 6vw, 82px);
}

/* Flagship game/experiment feature card in the games band */
.game-card {
  max-width: 780px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(0, 255, 102, 0.28);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: rgba(4, 10, 6, 0.55);
}

.card-tagline {
  color: var(--gold) !important;
  font-family: var(--mono);
  font-size: 1.02rem !important;
}

.game-card h3 {
  margin: 6px 0 14px;
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-card p {
  color: rgba(255, 253, 248, 0.82);
  font-size: 1.02rem;
}

.card-note {
  padding-top: 14px;
  border-top: 1px solid rgba(0, 255, 102, 0.18);
  color: rgba(255, 253, 248, 0.7) !important;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(0, 255, 102, 0.18);
  list-style: none;
}

.feature-list li {
  color: rgba(255, 253, 248, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
}

.feature-tag {
  display: inline-block;
  min-width: 74px;
  margin-right: 10px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gold) !important;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: live-pulse 2s ease-in-out infinite;
  }

  @keyframes live-pulse {
    50% {
      opacity: 0.35;
      box-shadow: 0 0 4px var(--gold);
    }
  }
}

.game-card .hero-actions {
  margin-top: 22px;
}

.work-list {
  display: grid;
  gap: 14px;
}

.work-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0 20px 4px;
  border-top: 1px solid rgba(255, 253, 248, 0.18);
  transition: transform 240ms ease, border-color 240ms ease;
}

.work-item:hover {
  transform: translateX(8px);
  border-top-color: rgba(0, 255, 102, 0.55);
}

.work-item span {
  color: var(--gold);
  font-family: var(--mono);
  font-weight: 700;
}

.work-item p {
  margin-bottom: 0;
  color: rgba(255, 253, 248, 0.8);
  font-size: 1.05rem;
}

.contact-section {
  padding: clamp(48px, 7vw, 86px) 0;
  background: var(--paper);
}

.contact-panel {
  justify-content: space-between;
  padding: clamp(24px, 4vw, 42px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-panel h2 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4.2rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.subscribe-panel {
  margin-top: clamp(28px, 5vw, 48px);
}

.subscribe-copy {
  max-width: 560px;
  color: var(--muted);
}

.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.subscribe-form input[type="email"] {
  min-width: min(320px, 100%);
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0a120c;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
}

.subscribe-form input[type="email"]:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
}

.subscribe-msg {
  color: var(--moss);
  font-family: var(--mono);
  font-size: 0.9rem;
}

/* Page shell for secondary pages (library, about) */
.page-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 150px 20px 80px;
}

.page-main h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  margin-top: 44px;
}

.page-main p,
.page-main li {
  color: var(--muted);
  font-size: 1.05rem;
}

.page-main .lede {
  font-size: 1.2rem;
  color: var(--ink);
}

.pepper-entry {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.pepper-entry h3 {
  margin-bottom: 4px;
}

.pepper-meta {
  margin: 0 0 10px;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-main a {
  border-bottom: 2px solid currentColor;
  font-weight: 700;
}

.posters-main {
  max-width: 1080px;
}

.poster-grid {
  display: grid;
  /* Dense infographic plates: 230px tiles were unreadable, so show fewer,
     larger ones. Click still opens the high-res zoom for real reading. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  margin-top: 34px;
}

.poster-card {
  margin: 0;
}

.poster-card img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
  -webkit-user-drag: none;
  user-select: none;
}

.poster-card:hover img {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold);
}

.poster-card figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer {
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px) 24px;
  color: rgba(255, 253, 248, 0.72);
  background: var(--coal);
}

.site-footer p {
  margin-bottom: 0;
}

.site-footer a {
  font-weight: 800;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr));
  gap: clamp(24px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: clamp(28px, 4vw, 44px);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-brand strong {
  display: block;
  color: var(--white);
  font-size: 1.05rem;
}

.footer-brand p {
  margin: 4px 0 0;
  font-size: 0.92rem;
}

.footer-col {
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 0.95rem;
}

.footer-col h4 {
  margin: 0 0 4px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col a {
  justify-self: start;
  padding-bottom: 2px;
  font-weight: 700;
  opacity: 0.85;
  background: linear-gradient(currentColor, currentColor) bottom left / 0% 2px no-repeat;
  transition: background-size 260ms ease, color 160ms ease, opacity 160ms ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  opacity: 1;
  background-size: 100% 2px;
}

.footer-muted {
  opacity: 0.55;
}

.footer-muted em {
  font-style: normal;
  font-size: 0.85em;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 253, 248, 0.14);
  font-size: 0.92rem;
}

.error-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background: var(--coal);
  color: var(--white);
}

.error-panel {
  width: min(640px, calc(100% - 40px));
  text-align: center;
}

.error-title {
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.94;
  background: linear-gradient(180deg, var(--white) 46%, var(--gold) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.error-copy {
  margin-bottom: 30px;
  color: rgba(255, 253, 248, 0.78);
  font-size: 1.12rem;
}

.error-panel .hero-actions {
  justify-content: center;
}

.mobile-nav {
  display: none;
}

@media (max-width: 820px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav:not([hidden]) {
    display: flex;
  }

  .hero {
    min-height: 86svh;
  }

  .intro-grid,
  .product-grid,
  .split {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: block;
  }

  .product-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .hero-content {
    padding: 118px 20px 58px;
  }

  .hero-scroll {
    display: none;
  }

  .sys-right {
    display: none;
  }

  /* Monospace is wider per character than the old display face: keep the
     longest word ("CRUCIBLE") inside the padded viewport instead of
     letting it overflow and clip. */
  h1 {
    font-size: clamp(1.9rem, 13.5vw, 4rem);
  }

  .hero-actions,
  .contact-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .product-card {
    grid-template-columns: 1fr;
  }

  .product-card a,
  .product-status {
    grid-column: 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-base {
    flex-direction: column;
  }
}

/* ── Poster lightbox ─────────────────────────────────────────────── */
.poster-card img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 6, 0.94);
  backdrop-filter: blur(6px);
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.lightbox.is-open {
  display: flex;
  opacity: 1;
}

.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lightbox-img {
  display: block;
  max-width: min(100%, 900px);
  max-height: 86vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
  transition: max-width 220ms ease, max-height 220ms ease;
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox-stage.is-zoomed .lightbox-img {
  max-width: none;
  max-height: none;
  width: 1600px;
  cursor: zoom-out;
}

.lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: rgba(255, 253, 248, 0.82);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(12, 14, 12, 0.8);
  color: rgba(255, 253, 248, 0.9);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.lightbox-btn:hover {
  background: rgba(24, 28, 24, 0.95);
  border-color: var(--gold);
}

.lightbox-prev { left: clamp(8px, 2vw, 28px); }
.lightbox-next { right: clamp(8px, 2vw, 28px); }

.lightbox-close {
  position: absolute;
  top: clamp(8px, 2vw, 24px);
  right: clamp(8px, 2vw, 24px);
  transform: none;
}

@media (max-width: 640px) {
  .lightbox-btn { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox-caption { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-img { transition: none; }
}