/* ============================================================
   GGIGGL.com :: DECOMMISSIONED MILITARY CONTROL ROOM AESTHETIC
   Palette: #0d0c0f #1a1917 #c4a35a #7a8b6e #b5654a #4a5568 #8b3a3a #3d6b35
   Fonts:   Chakra Petch (display), Space Mono (body), Share Tech Mono (hud), Inter (fallback system)
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palette tokens (exact hex from DESIGN.md) */
  --black-deep:  #0d0c0f;
  --black-warm:  #1a1917;
  --amber:       #c4a35a;
  --sage:        #7a8b6e;
  --copper:      #b5654a;
  --slate:       #4a5568;
  --crimson:     #8b3a3a;
  --forest:      #3d6b35;

  /* Typography tokens */
  --font-body:    'Space Mono', 'Inter', monospace;
  --font-display: 'Chakra Petch', 'Inter', sans-serif;
  --font-tech:    'Share Tech Mono', 'Space Mono', monospace;
  --font-inter:   'Inter', sans-serif;

  /* Letterbox inset (cinematic 2.39:1) */
  --letterbox-x: 10vw;
  --letterbox-y: 8vh;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--slate) var(--black-deep);
}

body {
  background: var(--black-deep);
  color: var(--sage);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  overflow-x: hidden;
  position: relative;
  cursor: default;
  min-height: 100vh;
}

::selection { background: var(--amber); color: var(--black-deep); }

/* =========================================================
   GLOBAL OVERLAYS (scanline, grid, noise, radar)
   ========================================================= */

#scanline-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(13, 12, 15, 0.28) 2px,
    rgba(13, 12, 15, 0.28) 3px
  );
  mix-blend-mode: multiply;
}

#grid-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image:
    linear-gradient(var(--slate) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate) 1px, transparent 1px);
  background-size: 40px 40px;
  will-change: transform;
}

#noise-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.77  0 0 0 0 0.64  0 0 0 0 0.35  0 0 0 0.75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.noise-svg { position: absolute; width: 0; height: 0; }

/* Radar sweep behind hero section */
#radar-sweep {
  position: fixed;
  top: 50%; left: 50%;
  width: 120vmin; height: 120vmin;
  margin: -60vmin 0 0 -60vmin;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(61, 107, 53, 0.0) 0deg,
    rgba(61, 107, 53, 0.0) 340deg,
    rgba(196, 163, 90, 0.6) 355deg,
    rgba(61, 107, 53, 0.0) 360deg
  );
  animation: radarSweep 8s linear infinite;
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Parallax wireframe (large rotating polyhedron in the far background) */
#parallax-wireframe {
  position: fixed;
  top: 50%; left: 50%;
  width: 70vmin; height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234a5568' stroke-width='0.5'><polygon points='100,10 190,70 155,185 45,185 10,70'/><polygon points='100,40 160,82 138,150 62,150 40,82'/><line x1='100' y1='10' x2='100' y2='40'/><line x1='190' y1='70' x2='160' y2='82'/><line x1='155' y1='185' x2='138' y2='150'/><line x1='45' y1='185' x2='62' y2='150'/><line x1='10' y1='70' x2='40' y2='82'/><circle cx='100' cy='100' r='80'/><circle cx='100' cy='100' r='50'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: slowRotate 30s linear infinite;
  will-change: transform;
}

@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   HUD :: STATUS RAIL (LEFT EDGE)
   ========================================================= */

#hud-rail {
  position: fixed;
  left: 0; top: 0;
  width: 2vw;
  min-width: 48px;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-right: 1px solid rgba(74, 85, 104, 0.15);
  background: linear-gradient(180deg, rgba(13,12,15,0.0) 0%, rgba(13,12,15,0.5) 50%, rgba(13,12,15,0.0) 100%);
}

.rail-top-label, .rail-bottom-label {
  font-family: var(--font-tech);
  font-size: 9px;
  color: var(--slate);
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.7;
}

.rail-bottom-label { color: var(--amber); opacity: 0.85; }

.rail-markers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.rail-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.6s ease;
  cursor: pointer;
}

.rail-marker.active { opacity: 1; }

.rail-code {
  font-family: var(--font-tech);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--slate);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  transition: color 0.6s ease;
}

.rail-marker.active .rail-code { color: var(--amber); }

.rail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--slate);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

.rail-marker.active .rail-dot {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber), 0 0 16px rgba(196, 163, 90, 0.35);
  animation: railPulse 2s steps(6, end) infinite;
}

@keyframes railPulse {
  0%, 50%   { background: var(--amber); }
  50.01%, 100% { background: var(--forest); }
}

/* =========================================================
   TOP HUD STRIP
   ========================================================= */

#top-hud {
  position: fixed;
  top: 0; left: 2vw; right: 0;
  height: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(13, 12, 15, 0.7);
  border-bottom: 1px solid rgba(74, 85, 104, 0.15);
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--slate);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.hud-chunk {
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hud-chunk.blink-slow { color: var(--crimson); }

.hud-chunk.blink-slow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 6px var(--crimson);
}

/* =========================================================
   MAIN CONTENT CONTAINER
   ========================================================= */

#main-content {
  margin-left: 2vw;
  padding-top: 28px;
  min-width: 0;
  position: relative;
  z-index: 10;
}

/* =========================================================
   SECTION STRUCTURE :: cinematic letterbox frames
   ========================================================= */

.content-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--letterbox-y) var(--letterbox-x);
}

.section-inner {
  width: 100%;
  max-width: 820px;
  position: relative;
  z-index: 10;
  /* 12 columns, content occupies 4-6 centered */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.content-block {
  grid-column: 2 / span 10;
  position: relative;
  padding: 56px 48px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.content-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   CORNER BRACKETS (HUD ornamentation)
   ========================================================= */

.corner-bracket {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--amber);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}

.content-block.visible .corner-bracket { opacity: 0.85; }

.corner-bracket.tl { top: -3px;    left: -3px;    border-top-width: 1px;    border-left-width: 1px; }
.corner-bracket.tr { top: -3px;    right: -3px;   border-top-width: 1px;    border-right-width: 1px; }
.corner-bracket.bl { bottom: -3px; left: -3px;    border-bottom-width: 1px; border-left-width: 1px; }
.corner-bracket.br { bottom: -3px; right: -3px;   border-bottom-width: 1px; border-right-width: 1px; }

/* =========================================================
   COORDINATE LABEL (top-right of each frame)
   ========================================================= */

.coord-label {
  position: absolute;
  top: -18px; right: 4px;
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--slate);
  opacity: 0.7;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--black-deep);
  padding: 0 8px;
}

/* =========================================================
   ANIMATED BORDER (clockwise stroke-dashoffset)
   ========================================================= */

.border-svg-wrap {
  position: absolute; inset: 0;
  pointer-events: none;
}

.border-draw {
  width: 100%; height: 100%;
  overflow: visible;
}

.border-draw rect {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1);
  filter: drop-shadow(0 0 4px rgba(196, 163, 90, 0.15));
}

.content-block.visible .border-draw rect {
  stroke-dashoffset: 0;
}

/* =========================================================
   TARGETING CIRCLE (concentric pulse)
   ========================================================= */

.targeting-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  border: 1px solid var(--amber);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.content-block.visible .targeting-circle {
  animation: targetPulse 3s ease-out 0.6s forwards;
}

@keyframes targetPulse {
  0%   { width: 0;      height: 0;      opacity: 0.7; border-color: var(--amber); }
  50%  { opacity: 0.25; border-color: var(--amber); }
  100% { width: 700px;  height: 700px;  opacity: 0;   border-color: transparent; }
}

.block-content { position: relative; z-index: 5; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.mono-tech   { font-family: var(--font-tech);    letter-spacing: 1.5px; }
.mono-text   { font-family: var(--font-body);    letter-spacing: 1px; }
.mono-display{ font-family: var(--font-display); letter-spacing: 1px; }

.section-label {
  font-family: var(--font-tech);
  font-size: 11px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  opacity: 0.8;
}

.display-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1.0;
  color: var(--amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
  position: relative;
  text-shadow: 0 0 18px rgba(196, 163, 90, 0.12);
}

h2.display-heading {
  font-size: clamp(36px, 6vw, 72px);
  letter-spacing: 0.12em;
}

.display-heading::after {
  content: '_';
  animation: cursorBlink 1s step-end infinite;
  color: var(--amber);
  margin-left: 4px;
}

@keyframes cursorBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.body-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--sage);
  max-width: 620px;
  margin-bottom: 28px;
}

/* Typewriter: JS rewrites textContent; this is structural. */
.typewriter-text { overflow-wrap: break-word; }

/* =========================================================
   SIGNAL BAR
   ========================================================= */

.signal-bar {
  display: flex;
  gap: 4px;
  margin-top: 32px;
}

.bar-segment {
  width: 28px;
  height: 8px;
  background: var(--slate);
  opacity: 0.3;
  transition: all 0.3s ease;
}

.bar-segment.active {
  background: var(--forest);
  opacity: 1;
  box-shadow: 0 0 8px rgba(61, 107, 53, 0.55);
}

/* =========================================================
   DATA READOUT (rows) + STRIP (loading bar)
   ========================================================= */

.data-readout {
  margin-top: 36px;
  border-top: 1px solid rgba(74, 85, 104, 0.25);
  padding-top: 16px;
}

.readout-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(74, 85, 104, 0.1);
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: 1.5px;
}

.readout-label { color: var(--slate); }
.readout-value { color: var(--forest); }

.readout-row .readout-value.blink-slow { color: var(--amber); }

.data-readout-strip {
  margin-top: 28px;
  width: 100%;
  height: 4px;
  background: rgba(74, 85, 104, 0.2);
  overflow: hidden;
  position: relative;
}

.data-readout-strip .strip-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--forest), var(--amber));
  transition: width 2.2s ease 0.6s;
}

.content-block.visible .strip-fill { width: 100%; }

/* Blink slow (used on labels) */
.blink-slow {
  animation: blinkSlow 2s step-end infinite;
}

@keyframes blinkSlow {
  0%, 70%   { opacity: 1; }
  71%, 100% { opacity: 0.3; }
}

/* =========================================================
   CAPABILITY GRID
   ========================================================= */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.capability-card {
  padding: 24px;
  border: 1px solid rgba(74, 85, 104, 0.25);
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease;
  background: rgba(26, 25, 23, 0.3);
}

.capability-card:hover {
  border-color: var(--amber);
  background: rgba(26, 25, 23, 0.6);
}

.capability-card:hover .card-index { color: var(--amber); }

.card-index {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: rgba(74, 85, 104, 0.35);
  line-height: 1;
  margin-bottom: 14px;
  transition: color 0.4s ease;
}

.card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 2.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.card-desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.7;
  color: var(--slate);
}

.card-status-dot {
  position: absolute;
  top: 18px; right: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--forest);
  animation: statusBlink 3s steps(4, end) infinite;
}

@keyframes statusBlink {
  0%, 40%   { background: var(--forest); box-shadow: 0 0 6px var(--forest); }
  40.01%, 100% { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
}

/* =========================================================
   LOG ENTRIES
   ========================================================= */

.log-entries { margin-top: 24px; }

.log-entry {
  padding: 18px 0 18px 20px;
  border-bottom: 1px solid rgba(74, 85, 104, 0.15);
  position: relative;
}

.log-entry::before {
  content: '>';
  position: absolute;
  left: 0;
  top: 20px;
  color: var(--slate);
  font-family: var(--font-tech);
  font-size: 12px;
  opacity: 0.4;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.log-entry:hover::before {
  opacity: 1;
  color: var(--amber);
}

.log-timestamp {
  font-family: var(--font-tech);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 6px;
}

.log-type {
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 8px;
}

.tag-amber { color: var(--amber);   border: 1px solid var(--amber); }
.tag-green { color: var(--forest);  border: 1px solid var(--forest); }
.tag-red   { color: var(--crimson); border: 1px solid var(--crimson); }

.log-message {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

/* =========================================================
   NETWORK VISUALIZATION
   ========================================================= */

.network-viz {
  margin: 28px 0;
  position: relative;
  border: 1px solid rgba(74, 85, 104, 0.2);
  background: rgba(13, 12, 15, 0.4);
}

#network-canvas {
  width: 100%;
  height: 200px;
  display: block;
}

.node-stats {
  display: flex;
  gap: 48px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.stat-item { flex: 1; min-width: 120px; }

.stat-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--amber);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-family: var(--font-tech);
  font-size: 10px;
  color: var(--slate);
  letter-spacing: 2px;
}

/* =========================================================
   TRANSMIT FORM
   ========================================================= */

.transmit-form { margin-top: 32px; }

.input-group { margin-bottom: 20px; }

.input-label {
  display: block;
  font-family: var(--font-tech);
  font-size: 10px;
  color: var(--slate);
  letter-spacing: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.terminal-input {
  width: 100%;
  background: rgba(13, 12, 15, 0.8);
  border: 1px solid var(--slate);
  color: var(--sage);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  letter-spacing: 1px;
}

.terminal-input::placeholder {
  color: rgba(74, 85, 104, 0.5);
  letter-spacing: 2px;
}

.terminal-input:focus {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 12px rgba(196, 163, 90, 0.18);
}

.terminal-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-body);
  line-height: 1.6;
}

.transmit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-tech);
  font-size: 13px;
  letter-spacing: 4px;
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.transmit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.2), transparent);
  transition: left 0.6s ease;
}

.transmit-btn:hover::before { left: 100%; }

.transmit-btn:hover {
  background: var(--amber);
  color: var(--black-deep);
  box-shadow: 0 0 20px rgba(196, 163, 90, 0.35);
}

.transmit-btn:disabled { cursor: wait; opacity: 0.7; }

.transmit-btn .btn-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.transmit-btn:hover .btn-icon { transform: translateX(4px); }

.transmit-status {
  margin-top: 16px;
  font-family: var(--font-tech);
  font-size: 12px;
  color: var(--forest);
  min-height: 22px;
  letter-spacing: 1.5px;
}

/* =========================================================
   POLYHEDRON CANVAS (behind content)
   ========================================================= */

.polyhedron-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  z-index: 1;
  opacity: 0.18;
  pointer-events: none;
}

/* =========================================================
   VOID GAPS with dot rule
   ========================================================= */

.void-gap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-rule {
  font-family: var(--font-tech);
  color: var(--slate);
  font-size: 12px;
  letter-spacing: 1em;
  opacity: 0.3;
}

/* =========================================================
   GGIGGL :: GLITCH MOMENT (triggered at ~60% scroll)
   ========================================================= */

#ggiggl-moment {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(26, 25, 23, 0);
  transition: none;
}

#ggiggl-moment.glitching {
  animation: ggigglGlitch 900ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes ggigglGlitch {
  0%   { opacity: 0; background: rgba(26, 25, 23, 0);   transform: skewX(0deg) translate(0, 0); }
  10%  { opacity: 1; background: rgba(26, 25, 23, 0.92); transform: skewX(-2deg) translate(-4px, 2px); filter: hue-rotate(-18deg) saturate(1.4); }
  18%  { transform: skewX(2deg)  translate(4px, -2px);   filter: hue-rotate(12deg) saturate(0.8); }
  28%  { transform: skewX(-1deg) translate(-2px, 1px);   filter: hue-rotate(0deg); }
  50%  { opacity: 1; background: rgba(26, 25, 23, 0.92); }
  80%  { opacity: 1; background: rgba(13, 12, 15, 0.85); }
  100% { opacity: 0; background: rgba(13, 12, 15, 0);   transform: none; }
}

.ggiggl-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 16vw, 220px);
  letter-spacing: 0.14em;
  color: var(--amber);
  text-shadow:
    -3px 0 var(--crimson),
    3px 0 var(--forest),
    0 0 30px rgba(196, 163, 90, 0.55);
  opacity: 0;
  transform: scale(0.94);
}

#ggiggl-moment.glitching .ggiggl-word {
  animation: ggigglWord 900ms ease forwards;
}

@keyframes ggigglWord {
  0%   { opacity: 0; transform: scale(0.94); color: var(--amber); }
  30%  { opacity: 1; transform: scale(1.02); color: var(--amber); }
  55%  { opacity: 1; color: var(--copper); }
  80%  { opacity: 1; color: var(--amber); }
  100% { opacity: 0; transform: scale(1.0);  color: var(--amber); }
}

/* =========================================================
   FOOTER
   ========================================================= */

#site-footer {
  padding: 60px var(--letterbox-x) 80px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.footer-inner {
  max-width: 620px;
  margin: 0 auto;
}

.footer-line {
  width: 60px;
  height: 1px;
  background: var(--slate);
  margin: 0 auto 32px;
  opacity: 0.4;
}

.footer-transmission-ends {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: 0.25em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cursor-blink {
  display: inline-block;
  margin-left: 6px;
  animation: cursorBlink 1s step-end infinite;
  color: var(--amber);
}

.footer-text {
  font-family: var(--font-tech);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-sub {
  font-family: var(--font-tech);
  font-size: 10px;
  color: rgba(74, 85, 104, 0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* =========================================================
   COUNTER (network stats)
   ========================================================= */

.counter { transition: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
  :root { --letterbox-x: 6vw; --letterbox-y: 6vh; }
  .section-inner { grid-template-columns: 1fr; }
  .content-block { grid-column: 1; padding: 40px 28px; }
  .capability-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --letterbox-x: 4vw; --letterbox-y: 4vh; }
  #hud-rail { width: 36px; min-width: 36px; }
  .rail-code, .rail-top-label, .rail-bottom-label { font-size: 8px; }
  #main-content { margin-left: 36px; }
  #top-hud { left: 36px; font-size: 9px; padding: 0 10px; }
  .hud-chunk { padding: 0 4px; }
  .content-block { padding: 32px 20px; }
  .display-heading { font-size: clamp(36px, 11vw, 72px); }
  h2.display-heading { font-size: clamp(28px, 9vw, 54px); }
  .polyhedron-canvas { width: 250px; height: 250px; }
  .node-stats { flex-direction: column; gap: 20px; }
  .stat-number { font-size: 40px; }
  .coord-label { font-size: 9px; right: 2px; }
  .corner-bracket { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
  .content-block { padding: 24px 16px; }
  .stat-number { font-size: 34px; }
  .ggiggl-word { font-size: clamp(48px, 18vw, 100px); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .content-block { opacity: 1 !important; transform: none !important; }
  .border-draw rect { stroke-dashoffset: 0 !important; }
  #radar-sweep, #parallax-wireframe { animation: none; }
}