/* Salian Defense — Via Praetoria */
:root {
  --void: #0a0612;
  --void-deep: #050309;
  --stone: #2a1f3d;
  --stone-cool: #3a3050;
  --crimson: #ff1830;
  --magenta: #ff2a8a;
  --cyan: #00e5ff;
  --gold: #d4a04a;
  --bone: #e8dfd0;
}

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

html { height: 100%; overflow-y: auto; overflow-x: hidden; }
html, body {
  width: 100%;
  background: var(--void-deep);
  color: var(--bone);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
body { overflow-y: visible; overflow-x: hidden; min-height: 100%; }

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  /* Allow native vertical scroll (advances the camera); horizontal drags are
     captured by scene.js's touch handler for look-around. */
  touch-action: pan-y;
}

/* ── Scroll spacer ──────────────────────────────────── */
#scroll-spacer {
  position: relative;
  width: 100%;
  /* ~720vh ≈ one screen-scroll per section across the 6 sections. With
     snap-to-section on scroll-stop, a single wheel-flick / swipe glides you
     to the next section and settles — far less scrolling than the old 2400vh. */
  height: 720vh;
  pointer-events: auto;
  z-index: 2;
}

/* HUD brand mark — the real Salian Defense logo, faint cyan pulse */
.hud-logo {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 0 11px;
  animation: logoPulse 6.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(0,229,255,0.30)); opacity: 0.90; }
  50%      { filter: drop-shadow(0 0 7px rgba(0,229,255,0.55)); opacity: 1; }
}

/* ── CRT scanlines ──────────────────────────────────── */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0) 4px
    );
  mix-blend-mode: multiply;
}

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(4,2,8,0.86) 100%);
}

/* ── Cinematic grade — grades the 3D scene only (sits below HUD/overlays) ── */
/* (cinematic grade now via renderer tone-mapping + the cheap tone/vignette
   layers below — a per-frame fullscreen backdrop-filter cost too much FPS) */
.scene-grade { display: none; }
/* Teal-and-amber split tone for cohesion */
.scene-tone {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(180deg,
    rgba(255,176,116,0.12) 0%,
    rgba(255,176,116,0.0) 30%,
    rgba(18,24,46,0.0) 60%,
    rgba(12,18,40,0.34) 100%);
  mix-blend-mode: soft-light;
}

.crt-flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: rgba(255, 42, 138, 0.015);
  animation: flicker 4s infinite steps(2);
}
@keyframes flicker {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.8; }
  10.5% { opacity: 0; }
  60% { opacity: 0; }
  60.5% { opacity: 0.6; }
  61% { opacity: 0; }
}

/* ── Custom cursor ──────────────────────────────────── */
#cursor-dot, #cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
#cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan);
}
#cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 229, 255, 0.6);
  border-radius: 50%;
  transition: width 0.18s, height 0.18s, border-color 0.18s;
}
#cursor-ring.hot {
  width: 44px;
  height: 44px;
  border-color: var(--crimson);
}

/* ── HUD ────────────────────────────────────────────── */
.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(238, 230, 215, 0.92);
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.8);
}

.hud-corner {
  position: absolute;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-tl { top: 0; left: 0; }
.hud-tr { top: 0; right: 0; align-items: flex-end; }
.hud-bl { bottom: 0; left: 0; }
.hud-br { bottom: 0; right: 0; align-items: flex-end; }

.hud-bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  opacity: 0.5;
}
.hud-tl .hud-bracket { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.hud-tr .hud-bracket { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.hud-bl .hud-bracket { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.hud-br .hud-bracket { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.hud-mark {
  width: 36px;
  height: 58px;
  margin-bottom: 6px;
}
.hud-mark svg {
  width: 100%;
  height: 100%;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5));
}

.hud-label {
  font-size: 9px;
  opacity: 0.55;
}
.hud-value {
  font-size: 11px;
  color: var(--bone);
}
.hud-cyan { color: var(--cyan); }
.hud-crimson { color: var(--crimson); }
.hud-gold { color: var(--gold); }

.hud-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crimson);
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-top: 4px;
  animation: alertPulse 1.4s infinite;
}
.hud-alert::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
  display: inline-block;
}
@keyframes alertPulse {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

.hud-bar {
  width: 140px;
  height: 2px;
  background: rgba(232, 223, 208, 0.12);
  position: relative;
  overflow: hidden;
}
.hud-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--cyan);
  width: 0%;
  box-shadow: 0 0 6px var(--cyan);
  transition: width 0.4s;
}

.hud-section-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--bone);
  margin-top: 2px;
}

.hud-roman {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2em;
  line-height: 1;
}

/* ── Section copy overlays ──────────────────────────── */
.section-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  display: flex;
  opacity: var(--card-op, 0);
  transition: opacity 0.18s linear;
  /* Depth-of-field visor focus: a centered vignette darkens the reading zone
     and fades fully to the screen edges, so the ruin stays visible left & right
     and there is NO hard box anywhere — just the eye pulled to the annotation.
     The whole overlay fades via its own opacity. */
  background: radial-gradient(ellipse 62% 78% at 47% 48%,
    rgba(3,4,9,0.88) 0%,
    rgba(3,4,9,0.66) 42%,
    rgba(3,4,9,0.20) 66%,
    rgba(3,4,9,0) 82%);
}
.section-overlay.visible .so-inner { pointer-events: auto; }

/* When a 3D target is being inspected (its analysis popup is open), recede the
   scroll-section copy so the popup never sits on top of the section text. The
   HUD's own #hud-lock-dim takes over the dimming. */
body.hud-inspecting .section-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.so-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;      /* card sits in the CENTER third; side wings flank it */
  padding: 0 8vw;
  pointer-events: none;
  /* AR parallax: the copy drifts WITH the scene as you look around (driven from
     scene.js mouse-look), so it reads as projected onto the world, not a flat card. */
  transform: translate3d(var(--hud-par-x, 0px), var(--hud-par-y, 0px), 0);
  will-change: transform;
}

/* ── Holographic inscription (no box) ──────────────────────────────────────
   No glass rectangle. The visor side-dim (on .section-overlay above) backs the
   copy; the card itself is just luminous type + a single bronze→cyan stele rule
   with a registration tick. The overlay fades via its own opacity, so the
   card's accent alphas are solid. */
.so-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
  padding: 26px 46px 28px 30px;
  position: relative;
  border: 0;
  /* the stele rule: a 2px bronze→cyan bar at the left edge — the only "frame" */
  background-image: linear-gradient(180deg,
    rgba(212,160,74,0.95) 0%,
    rgba(212,160,74,0.50) 38%,
    rgba(0,229,255,0.78) 100%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}
/* Registration tick at the rule head — an instrument mark, not a box corner. */
.so-card::after {
  content: "";
  position: absolute;
  top: 0; left: -2px;
  width: 16px; height: 2px;
  background: var(--gold);
  pointer-events: none;
}
/* Readability backdrop — a soft, feathered scrim + slight blur behind the card
   text so the readout stays legible over bright or busy stretches of the scene
   (worst at the Salii, which is night-lit over pale ruins). Feathered edges and
   no border keep the "projected on the visor" feel rather than a hard panel.
   The Vault is excluded (it has its own full-screen scan-dim). */
.so-card::before {
  content: "";
  position: absolute;
  inset: -16px -44px -20px -16px;
  z-index: -1;
  pointer-events: none;
  border-radius: 7px;
  background: radial-gradient(128% 112% at 26% 42%,
    rgba(3,6,11,0.70) 0%,
    rgba(3,6,11,0.55) 40%,
    rgba(3,6,11,0.20) 72%,
    rgba(3,6,11,0) 88%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#overlay-1 .so-card::before { display: none; }
.section-overlay.so-center .so-card::before {
  inset: -18px -34px -22px -34px;
  background: radial-gradient(120% 116% at 50% 40%,
    rgba(3,6,11,0.66) 0%,
    rgba(3,6,11,0.46) 46%,
    rgba(3,6,11,0.14) 74%,
    rgba(3,6,11,0) 90%);
}
/* Same readability backdrop behind the side wing's small mono text, anchored to
   the stele bar and feathering out to the open side. */
.so-wing::before {
  content: "";
  position: absolute;
  inset: -14px -26px -16px -14px;
  z-index: -1;
  pointer-events: none;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(3,6,11,0.60) 0%,
    rgba(3,6,11,0.48) 52%,
    rgba(3,6,11,0.14) 84%,
    rgba(3,6,11,0) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.so-wing-r::before {
  inset: -14px -14px -16px -26px;
  background: linear-gradient(270deg,
    rgba(3,6,11,0.60) 0%,
    rgba(3,6,11,0.48) 52%,
    rgba(3,6,11,0.14) 84%,
    rgba(3,6,11,0) 100%);
}

/* so-right is normalized to the same centered, left-ruled treatment by the
   "Panels centered" block below — no per-side overrides needed. */

/* Centered overlay (Contact) — copy centers, no side rule/tick (inherits the
   centered vignette from .section-overlay). */
.section-overlay.so-center .so-inner { align-items: center; justify-content: center; }
.section-overlay.so-center .so-card {
  align-items: center; text-align: center;
  padding: 30px 46px;
  background-image: none;
}
.section-overlay.so-center .so-card::after { display: none; }

/* Credential strip — sits under the Threshold hero copy as a sober trust row.
   Thin horizontal line of monospaced badges + dot separators, bone-dim color,
   matches the credibility-bar pattern from cleared-defense competitors. */
.so-creds {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 223, 208, 0.18);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(232, 223, 208, 0.55);
  text-transform: uppercase;
  line-height: 1.6;
}
.so-cred {
  color: rgba(232, 223, 208, 0.78);
}
.so-cred-sep {
  color: rgba(212, 160, 74, 0.55);
}
/* Phones: smaller gap, tighter line height */
@media (max-width: 640px) {
  .so-creds { font-size: 9px; gap: 5px; letter-spacing: 0.22em; }
  /* On phones the labelled navigator overlapped the centered copy. Collapse it
     to a thin diamond-only strip on the right edge — progress + tap-to-jump
     without covering the text. */
  .nav-rail {
    right: 3px !important; gap: 15px !important;
    padding: 10px 5px !important;
    transform: translateY(-50%) !important;
    background: none !important; border: none !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
  }
  .nav-dot { min-width: 0; grid-template-columns: auto; padding: 1px 0; }
  .nav-dot .desc, .nav-dot .label { display: none; }
  .nav-dot::before { width: 9px; height: 9px; justify-self: center; }
  /* Section copy: tighter padding + smaller headline so it fits a phone */
  .so-card { padding: 22px 26px 24px 22px; max-width: 100%; }
  .so-title { font-size: clamp(26px, 8vw, 40px); }
  .so-feats { width: 100%; }
}

/* Vault section — dense body + 4-phase strip; trim spacing to fit */
#overlay-1 .so-card { padding: 26px 42px 30px; }
#overlay-1 .so-body { margin-top: 14px; }

/* ══ The Vault — HUD scan-analysis readout (POC) ═══════════════════════
   You reach the artifact, the world dims, and the copy resolves as the
   HUD's extraction output rather than a card pasted over the scene. */
.scan-dim {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 44%,
    rgba(2,4,8,0.26) 0%, rgba(2,4,8,0.76) 100%);
  opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity 0.28s linear;
}
/* the readout eases forward as it becomes active */
#overlay-1 .so-card {
  transform: scale(calc(0.972 + 0.028 * var(--card-op, 0)));
  transform-origin: center right;
}
/* analysis header strip */
.scan-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.26em;
  color: rgba(0,229,255,0.85);
  padding-bottom: 9px; margin-bottom: 13px;
  border-bottom: 1px solid rgba(0,229,255, calc(0.24 * var(--card-op,0)));
}
.section-overlay.so-right .scan-head { flex-direction: row-reverse; }
.scan-head-label { flex: 1; white-space: nowrap; }
.scan-head-stat  { color: var(--gold); }
.scan-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 7px var(--cyan);
  animation: scanDot 1.5s ease-in-out infinite;
}
@keyframes scanDot { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
/* scan-line sweeping the readout */
.scan-sweep {
  position: absolute; left: 0; right: 0; height: 2px; top: 2%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.5), transparent);
  opacity: calc(0.55 * var(--card-op, 0));
  pointer-events: none;
  animation: scanSweep 4.8s linear infinite;
}
@keyframes scanSweep { 0% { top: 2%; } 100% { top: 97%; } }
/* the continue control — explicit, mobile-friendly tap target */
.so-continue {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--bone);
  background: rgba(0,229,255,0.07);
  border: 1px solid rgba(0,229,255,0.42);
  padding: 13px 26px;
  cursor: pointer; pointer-events: auto;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.so-continue:hover {
  background: rgba(0,229,255,0.16);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,229,255,0.28);
}
.so-continue .cont-chev { color: var(--cyan); margin-left: 2px; }

/* ══ Panels centered + assembled-in ════════════════════════════════════
   Every readout sits fixed at screen-centre — a stable HUD display, not a
   card hunting the edges — and its content assembles in on arrival. */
.section-overlay .so-inner,
.section-overlay.so-right .so-inner,
.section-overlay.so-center .so-inner { align-items: center; }
.section-overlay .so-card,
.section-overlay.so-right .so-card,
.section-overlay.so-center .so-card { align-items: flex-start; text-align: left; }
.section-overlay.so-right .scan-head { flex-direction: row; }

/* content rises + fades in when the readout becomes active */
.so-card > *:not(.scan-sweep) {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.section-overlay.visible .so-card > *:not(.scan-sweep) {
  opacity: 1;
  transform: none;
}
/* light stagger — the readout assembles top-down */
.section-overlay.visible .scan-head,
.section-overlay.visible .so-eyebrow  { transition-delay: 0.05s; }
.section-overlay.visible .so-title    { transition-delay: 0.13s; }
.section-overlay.visible .so-latin    { transition-delay: 0.21s; }
.section-overlay.visible .so-body     { transition-delay: 0.29s; }
.section-overlay.visible .so-continue { transition-delay: 0.37s; }

/* Contact section (Triumph) is content-dense — scale it to fit the viewport */
#overlay-5 .so-card { padding: 16px 54px 16px; max-height: 100vh; }
#overlay-5 .so-title { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.02; }
#overlay-5 .so-eyebrow { margin-bottom: 8px; }
#overlay-5 .so-latin { margin-top: 8px; font-size: clamp(13px, 1.1vw, 16px); }
#overlay-5 .so-body { margin-top: 10px; line-height: 1.5; }
#overlay-5 #contact-form { margin-top: 14px !important; gap: 7px !important; }
#overlay-5 #contact-form input,
#overlay-5 #contact-form textarea { padding: 8px 14px; }
#overlay-5 #cf-submit { padding: 9px 14px; }

.so-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.85;
}
.so-eyebrow .roman {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: var(--gold);
  margin-right: 14px;
}

.so-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: #f5f0e6;
  /* faint cyan glow so the headline reads as "projected on the visor",
     unifying it with the HUD layer instead of a printed serif heading */
  text-shadow: 0 2px 6px rgba(0,0,0,0.98), 0 0 26px rgba(0,0,0,0.95),
               0 0 20px rgba(0,229,255,0.14);
  max-width: 20ch;
}

/* Latin demoted to a small monospace accent tag (one per section), so it
   reads as a digital codename, not an editorial serif caption. */
.so-latin {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--gold);
  margin-top: 12px;
  text-transform: uppercase;
  opacity: 0.72;
}
.so-latin::before { content: '// '; color: rgba(212,160,74,0.5); }

/* Body copy: a clean, readable sans (Inter) — monospace is reserved for the
   HUD, labels and terminal, where "telemetry" reads as intentional. Prose in
   a real text face is the single biggest lift to a professional finish. */
.so-body {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.68;
  letter-spacing: 0.004em;
  font-weight: 400;
  color: rgba(236, 231, 221, 0.94);
  margin-top: 16px;
  max-width: 52ch;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7);
  -webkit-font-smoothing: antialiased;
}
.so-body strong, .so-body b { font-weight: 600; color: rgba(244,239,229,0.98); }
.so-body .hi { color: var(--cyan); }

/* Typewriter caret — blinks while the section data prints in on entry (AR readout) */
.tw-caret {
  display: inline-block;
  width: 0.5em;
  margin-left: 1px;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0,229,255,0.8);
  animation: tw-blink 0.7s steps(1) infinite;
}
.tw-caret::before { content: "\2588"; }   /* █ */
@keyframes tw-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ── Side data-wing (prints in on section entry) ───────────────────────────
   The detail no longer lives in a boxed list. It floats in a side third and
   decode-types in when you reach the section — an AR readout annotating the
   structure beside you. Sibling of .so-inner, so it's positioned against the
   full-screen overlay and fades with it. */
.so-wing {
  position: fixed;          /* viewport-relative (like the HUD corners) so it is
                               OUT of the overlay's flex flow — the card can centre */
  top: 50%;
  /* centre vertically + the same AR parallax drift as the card */
  transform: translate(var(--hud-par-x, 0px), calc(-50% + var(--hud-par-y, 0px)));
  will-change: transform;
  width: min(360px, 27vw);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  pointer-events: none;
  z-index: 31;
}
/* Glowing digital edge rule — a neon stele bar instead of a hairline border. */
.so-wing-l {
  left: 3.4vw; text-align: left;
  padding-left: 20px;
  border-left: 2px solid rgba(0,229,255,0.85);
  box-shadow: -1px 0 18px -2px rgba(0,229,255,0.55);
}
.so-wing-r {
  right: 3.4vw; text-align: right;
  padding-right: 20px;
  border-right: 2px solid rgba(0,229,255,0.85);
  box-shadow: 1px 0 18px -2px rgba(0,229,255,0.55);
}
.so-wing-hd {
  font-size: 11.5px; letter-spacing: 0.34em; color: var(--cyan);
  font-weight: 600;
  text-transform: uppercase; margin-bottom: 18px; opacity: 1;
  text-shadow: 0 0 10px rgba(0,229,255,0.7), 0 1px 4px rgba(0,0,0,0.95);
}
.so-wing-line {
  display: flex; gap: 13px; align-items: baseline;
  font-size: 14.5px; line-height: 1.55; letter-spacing: 0.012em;
  margin-bottom: 13px; min-height: 1.3em;
  text-shadow: 0 1px 5px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.6);
}
.so-wing-r .so-wing-line { flex-direction: row-reverse; }
.so-wing-line .wk {
  color: var(--gold); font-size: 11.5px; font-weight: 600; min-width: 18px; flex: none;
  text-shadow: 0 0 9px rgba(212,160,74,0.7), 0 1px 3px rgba(0,0,0,0.9);
}
.so-wing-line .wv {
  color: rgba(244,250,255,0.97);
  text-shadow: 0 0 8px rgba(0,229,255,0.4), 0 1px 5px rgba(0,0,0,0.95);
}
.so-wing-line .wv .decode-glyph {
  color: var(--cyan); opacity: 1;
  text-shadow: 0 0 10px rgba(0,229,255,0.9);
}
@media (hover: none), (pointer: coarse) { .so-wing { display: none; } }

/* ── Expandable wing rows ──────────────────────────────────────────────────
   Each bullet collapses to a one-liner and opens to a detail paragraph + a
   working CTA. The wing stays pointer-events:none (a passive AR readout); only
   the row, the detail, and the CTA opt back in. Hover peeks the detail; a click
   pins it open (.open) so the CTA is reliably reachable. */
.so-wing-line.wl { display: block; margin-bottom: 3px; min-height: 0; }
.wl-row {
  display: flex; gap: 13px; align-items: baseline; width: 100%;
  -webkit-appearance: none; appearance: none; background: none; margin: 0;
  border: 0; border-bottom: 1px solid rgba(0,229,255,0.12);
  padding: 7px 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; pointer-events: auto; transition: border-color .2s;
}
.so-wing-r .wl-row { flex-direction: row-reverse; text-align: right; }
.wl-row:hover, .so-wing-line.wl.open > .wl-row { border-bottom-color: rgba(0,229,255,0.45); }
.wl-row .wk {
  color: var(--gold); font-size: 11.5px; font-weight: 600; min-width: 18px; flex: none;
  text-shadow: 0 0 9px rgba(212,160,74,0.7), 0 1px 3px rgba(0,0,0,0.9);
}
.wl-row .wv {
  flex: 1; color: rgba(244,250,255,0.97);
  text-shadow: 0 0 8px rgba(0,229,255,0.4), 0 1px 5px rgba(0,0,0,0.95);
}
.wl-chev {
  flex: none; align-self: center; color: var(--cyan); font-size: 10px; opacity: .5;
  transition: transform .25s ease, opacity .2s;
}
.wl-row:hover .wl-chev, .so-wing-line.wl.open > .wl-row .wl-chev { opacity: 1; }
.so-wing-line.wl.open > .wl-row .wl-chev { transform: rotate(90deg); }
.wl-detail {
  pointer-events: auto; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .38s ease, opacity .3s ease, margin .3s ease;
  font-size: 12.5px; line-height: 1.5;
}
.so-wing-line.wl:hover > .wl-detail,
.so-wing-line.wl.open > .wl-detail { max-height: 360px; opacity: 1; margin: 7px 0 12px; }
.wl-text {
  margin: 0 0 9px; padding-left: 31px; color: rgba(228,238,248,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.so-wing-r .wl-text { padding-left: 0; padding-right: 31px; text-align: right; }
.wl-cta {
  display: inline-block; margin-left: 31px; pointer-events: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; cursor: pointer;
  border: 1px solid rgba(212,160,74,0.45); border-radius: 2px; padding: 5px 11px;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.so-wing-r .wl-cta { margin-left: 0; margin-right: 31px; }
.wl-cta:hover { background: rgba(212,160,74,0.14); border-color: var(--gold); box-shadow: 0 0 14px -3px rgba(212,160,74,0.5); }

/* Section CTAs — digital HUD buttons. One clear action per section. */
.so-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.section-overlay.so-right .so-actions { justify-content: flex-end; }
.section-overlay.so-center .so-actions { justify-content: center; }
.so-cta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 11px 18px;
  /* solid-enough dark backing so the button reads over the bright ruin */
  background: rgba(6,8,14,0.55);
  border: 1px solid rgba(0,229,255,0.55);
  color: var(--cyan);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.so-cta:hover {
  background: rgba(0,229,255,0.14);
  border-color: var(--cyan);
  color: #eafdff;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0,229,255,0.25);
}
.so-cta:active { transform: translateY(0) scale(0.98); }
.so-cta .cta-arr { font-size: 9px; opacity: 0.9; }
.so-cta-primary {
  background: rgba(20,14,6,0.6);
  border-color: rgba(212,160,74,0.7);
  color: var(--gold);
}
.so-cta-primary:hover {
  background: rgba(212,160,74,0.2);
  border-color: var(--gold);
  color: #ffd87a;
  box-shadow: 0 0 18px rgba(212,160,74,0.28);
}

/* ── Selectable feature list (master / detail) ─────────────────────────────
   A section's capabilities as scannable HUD rows. Click one to expand its
   detail — interactive, selectable bullets in place of dense prose. */
.so-feats {
  display: flex; flex-direction: column;
  gap: 0; margin-top: 16px;
  width: min(460px, 100%);
  border-top: 1px solid rgba(0,229,255,0.18);
}
.feat {
  appearance: none; background: transparent;
  border: 0; border-bottom: 1px solid rgba(232,223,208,0.10);
  padding: 11px 4px 11px 0; text-align: left; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.feat-head {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 12.5px; letter-spacing: 0.05em; font-weight: 500;
  color: rgba(236,231,221,0.92);
  transition: color 0.16s;
}
.feat:hover .feat-head { color: #fff; }
.feat-mark {
  color: var(--gold); font-size: 11px; width: 11px; flex: none;
  transition: transform 0.2s ease, color 0.16s;
  text-shadow: 0 0 6px rgba(212,160,74,0.4);
}
.feat.active .feat-mark { transform: rotate(90deg); color: var(--cyan); text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.feat.active .feat-head { color: var(--cyan); }
.feat-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 11.5px; line-height: 1.62; letter-spacing: 0.01em;
  color: rgba(232,227,217,0.74);
  padding-left: 22px; border-left: 1px solid transparent;
  transition: max-height 0.32s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.feat.active .feat-detail {
  max-height: 9em; opacity: 1; margin-top: 7px;
  border-left-color: rgba(0,229,255,0.4);
}
/* status badge that can sit inline in a feature label (e.g. FIELDED / IN BUILD) */
.feat-tag {
  font-size: 8px; letter-spacing: 0.2em; font-weight: 500;
  padding: 1px 6px; margin-left: 9px;
  border: 1px solid rgba(232,223,208,0.28); color: rgba(232,223,208,0.6);
  text-transform: uppercase; white-space: nowrap;
}
.feat-tag.accent { color: var(--cyan); border-color: rgba(0,229,255,0.5); }
.feat-tag.gold   { color: var(--gold); border-color: rgba(212,160,74,0.5); }

/* (removed a legacy bare `.so-right { max-width:50% }` rule — it matched the
   section overlays, which carry the `so-right` class, collapsing them to half
   width and breaking the so-right sections' centering. The section system uses
   `.section-overlay.so-right` instead.) */

/* Threshold-specific scrolling fragments */
.fragment-stack {
  position: fixed;
  bottom: 18vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(232, 223, 208, 0.5);
  text-transform: uppercase;
}
.fragment {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s, transform 0.8s;
}
.fragment.visible { opacity: 1; transform: translateY(0); }
.fragment .accent { color: var(--crimson); }
.fragment .gold { color: var(--gold); }

.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 32;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(232, 223, 208, 0.5);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: scrollHint 2.4s infinite ease-in-out;
  transition: opacity 0.4s;
}
.scroll-hint.hidden { opacity: 0; pointer-events: none; }
.scroll-hint-sub {
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(0,229,255,0.55);
  text-transform: uppercase;
}
.scroll-hint::after {
  content: '';
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
}
@keyframes scrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* Section nav rail */
.nav-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: auto;
  /* drop shadow for legibility against any sky */
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85));
  /* solid plate behind text so it never collides with HUD on the right */
  background: linear-gradient(90deg, transparent 0%, rgba(8,5,12,0.55) 22%, rgba(8,5,12,0.85) 60%, rgba(8,5,12,0.85) 100%);
  padding: 18px 14px 18px 30px;
  border-left: 1px solid rgba(232, 200, 140, 0.18);
  border-right: 1px solid rgba(232, 200, 140, 0.10);
}
.nav-dot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
  cursor: none;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  color: rgba(232, 223, 208, 0.6);
  background: none;
  border: none;
  padding: 2px 0;
  text-align: right;
  white-space: nowrap;
  transition: color 0.3s, background 0.3s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  min-width: 165px;
}
.nav-dot::before {
  content: '';
  grid-row: 1 / 3;
  grid-column: 2;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(232, 223, 208, 0.5);
  transform: rotate(45deg);
  align-self: center;
  justify-self: end;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.nav-dot:hover {
  color: rgba(255, 240, 210, 0.95);
}
.nav-dot:hover::before {
  border-color: var(--gold);
  box-shadow: 0 0 6px var(--gold), 0 1px 3px rgba(0,0,0,0.85);
}
.nav-dot.active {
  color: var(--gold);
}
.nav-dot.active::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 1px 3px rgba(0,0,0,0.85);
}
.nav-dot .roman {
  display: none; /* roman swallowed by the diamond — the diamond IS the marker */
}
.nav-dot .name {
  display: none;
}
.nav-dot .label {
  grid-row: 1;
  grid-column: 1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.05;
  white-space: nowrap;
}
.nav-dot .desc {
  grid-row: 2;
  grid-column: 1;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  opacity: 0.7;
  text-transform: uppercase;
}
.nav-dot.active .desc {
  opacity: 0.95;
  color: rgba(255, 230, 180, 0.85);
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--void-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.8s;
}
.loader.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.loader-mark {
  width: 76px;
  height: auto;
  animation: loaderSpin 3s infinite ease-in-out;
}
.loader-mark img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px var(--cyan));
}
@keyframes loaderSpin {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
.loader-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-transform: uppercase;
}
.loader-bar {
  width: 220px;
  height: 1px;
  background: rgba(0, 229, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--cyan);
  animation: loaderSlide 1.6s infinite ease-in-out;
}
@keyframes loaderSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Contact form (Triumph) */
.intent-btn, #cf-submit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  background: transparent;
  color: rgba(232,223,208,0.7);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 12px 14px;
  text-transform: uppercase;
  cursor: none;
  transition: all 0.2s;
  flex: 1;
}
.intent-btn:hover, #cf-submit:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,229,255,0.04);
}
.intent-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,160,74,0.06);
}
#cf-name, #cf-email, #cf-org, #cf-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  background: rgba(10,6,18,0.6);
  color: var(--bone);
  border: 1px solid rgba(232,223,208,0.18);
  padding: 12px 14px;
  outline: none;
  text-transform: uppercase;
  resize: none;
}
#cf-name:focus, #cf-email:focus, #cf-org:focus, #cf-msg:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.2);
}
#cf-submit {
  border-color: var(--gold);
  color: var(--gold);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  font-weight: 700;
  margin-top: 6px;
}
#cf-submit:hover {
  background: var(--gold);
  color: var(--void-deep);
}

/* ── Latin decode glitch ────────────────────────────── */
.so-latin {
  min-height: 1.3em;
  transition: none;
}
.so-latin .decode-glyph {
  color: var(--cyan);
  opacity: 0.95;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}
.so-body em {
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* ══ Vates Cognition ════════════════════════════════════════ */
.vates-launch {
  margin-top: 22px;
  pointer-events: auto;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  background: rgba(255, 42, 138, 0.06);
  border: 1px solid rgba(255, 42, 138, 0.5);
  padding: 13px 20px;
  transition: all 0.2s ease;
}
.vates-launch:hover {
  background: var(--magenta);
  color: var(--void-deep);
  box-shadow: 0 0 22px rgba(255, 42, 138, 0.5);
}

.vates-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: auto;
}
.vates-modal[hidden] { display: none; }
.vates-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 7, 0.88);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.vates-panel {
  position: relative;
  width: min(540px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  border: 1px solid rgba(255, 42, 138, 0.32);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.85);
  animation: vatesRise 0.34s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes vatesRise { from { opacity: 0; transform: translateY(22px); } }
.vates-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid rgba(232,223,208,0.2);
  color: rgba(232,223,208,0.6);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.18s;
}
.vates-x:hover { border-color: var(--crimson); color: var(--crimson); }

.vates-head {
  padding: 26px 30px 18px;
  border-bottom: 1px solid rgba(232,223,208,0.1);
}
.vates-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--magenta);
}
.vates-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 25px;
  color: var(--bone);
  margin: 6px 0 16px;
}
.vates-meter {
  height: 3px;
  background: rgba(232,223,208,0.1);
  overflow: hidden;
}
.vates-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--gold));
  box-shadow: 0 0 8px rgba(255,42,138,0.6);
  transition: width 0.3s ease;
}
.vates-meter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,208,0.55);
  margin-top: 7px;
}

.vates-body {
  padding: 20px 30px 24px;
  overflow-y: auto;
}
.vates-intro {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(240,233,219,0.82);
  margin-bottom: 6px;
}
.vates-grouplabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 20px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(212,160,74,0.22);
}
.vates-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}
.vates-flabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,223,208,0.62);
}
.vates-field input,
.vates-field select {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: rgba(4,3,9,0.8);
  color: var(--bone);
  border: 1px solid rgba(232,223,208,0.18);
  padding: 11px 13px;
  outline: none;
  cursor: auto;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.vates-field select { cursor: pointer; }
.vates-field input:focus,
.vates-field select:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px rgba(255,42,138,0.25);
}
.vates-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vates-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(232,223,208,0.82);
  cursor: pointer;
}
.vates-check input { accent-color: var(--magenta); cursor: pointer; }

.vates-foot {
  padding: 16px 30px 22px;
  border-top: 1px solid rgba(232,223,208,0.1);
  display: flex;
  gap: 10px;
}
.vates-btn {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--magenta);
  color: var(--void-deep);
  border: 1px solid var(--magenta);
  transition: all 0.18s;
}
.vates-btn:hover { box-shadow: 0 0 22px rgba(255,42,138,0.5); }
.vates-btn-ghost {
  background: transparent;
  color: rgba(232,223,208,0.7);
  border-color: rgba(232,223,208,0.22);
}
.vates-btn-ghost:hover { border-color: var(--bone); color: var(--bone); box-shadow: none; }
.vates-btn.is-disabled {
  background: transparent;
  color: rgba(232,223,208,0.4);
  border-color: rgba(232,223,208,0.16);
  cursor: not-allowed;
}
.vates-btn.is-disabled:hover { box-shadow: none; }

.vates-rom {
  text-align: center;
  padding: 26px 20px;
  border: 1px solid rgba(255,42,138,0.3);
  background: rgba(255,42,138,0.05);
  margin-bottom: 16px;
}
.vates-rom-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--magenta);
}
.vates-rom-figure {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(26px, 4.4vw, 38px);
  color: var(--bone);
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
}
.vates-rom-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(232,223,208,0.5);
  letter-spacing: 0.05em;
}
@media (max-width: 540px) {
  .vates-checks { grid-template-columns: 1fr; }
  .vates-foot { flex-direction: column; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────
   Honor prefers-reduced-motion: neutralize the CSS-driven motion (CRT
   flicker, logo/dot pulses, scan-line crawl, decode caret, panel spawn).
   The JS engine separately freezes head-bob, bloom, and scroll inertia, and
   hud-live.js skips its decode/type-print animations. Navigation stays fully
   functional — only decoration is stilled. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .crt-flicker { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   AR VISOR — makes the whole page read as a helmet HUD: a scanline/vignette
   "screen" on the 3D world, a bracketed frame, a center boresight, boot sweep.
   ════════════════════════════════════════════════════════════════════════ */
#visor-screen {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  /* faint horizontal scanlines — the visor glass */
  background-image: repeating-linear-gradient(0deg,
    rgba(0,229,255,0.05) 0px, rgba(0,229,255,0.05) 1px, transparent 1px, transparent 3px);
  opacity: 0.55; mix-blend-mode: screen;
  animation: visor-scan 9s linear infinite;
}
/* helmet edge: darken corners + a hairline cyan rim, painted just under the readouts */
#visor-screen::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0,229,255,0.10), inset 0 0 160px 30px rgba(2,4,9,0.50);
  background: radial-gradient(ellipse 130% 105% at 50% 50%, transparent 58%, rgba(2,4,9,0.55) 100%);
  mix-blend-mode: normal;
}
@keyframes visor-scan { to { background-position: 0 6px; } }

#visor-frame { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
/* glowing corner brackets */
.vb {
  position: absolute; width: 44px; height: 44px;
  border: 2px solid rgba(0,229,255,0.55);
  box-shadow: 0 0 14px rgba(0,229,255,0.22);
}
.vb-tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.vb-tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.vb-bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.vb-br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
/* top + bottom centered edge ticks */
.ve { position: absolute; left: 50%; transform: translateX(-50%); width: 140px; height: 0; border-top: 1px solid rgba(0,229,255,0.28); }
.ve-t { top: 13px; } .ve-b { bottom: 13px; }
.ve::before, .ve::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: rgba(0,229,255,0.5); }
.ve::before { left: 0; } .ve::after { right: 0; }
/* center boresight reticle (ambient — the cursor reticle is the pointer) */
.visor-reticle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0.5; }
.vr-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(0,229,255,0.45); border-radius: 50%; box-shadow: 0 0 8px rgba(0,229,255,0.22); }
.vr-tick { position: absolute; background: rgba(0,229,255,0.6); }
.vr-n { left: -0.5px; top: -24px; width: 1px; height: 9px; }
.vr-s { left: -0.5px; top: 15px;  width: 1px; height: 9px; }
.vr-e { top: -0.5px; left: 15px;  width: 9px; height: 1px; }
.vr-w { top: -0.5px; left: -24px; width: 9px; height: 1px; }
.vr-dot { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
/* one-time power-on sweep + frame draw-in */
.visor-boot { position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.85), transparent);
  box-shadow: 0 0 20px rgba(0,229,255,0.6);
  animation: visor-bootsweep 1.5s ease-out 1 forwards; }
@keyframes visor-bootsweep { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
#visor-frame .vb, #visor-frame .ve, .visor-reticle {
  animation: visor-bootin 1.2s ease-out both;
}
@keyframes visor-bootin { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
.visor-reticle { /* keep its target opacity after boot */ }
@keyframes visor-bootin-reticle { 0%, 35% { opacity: 0; } 100% { opacity: 0.5; } }
.visor-reticle { animation-name: visor-bootin-reticle; }
@media (hover: none), (pointer: coarse) { .visor-reticle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #visor-screen { animation: none; }
  .visor-boot { display: none; }
  #visor-frame .vb, #visor-frame .ve, .visor-reticle { animation: none; }
}

/* Lock-on label that rides the hologram you're aiming at (▸ THE VAULT · ENGAGE) */
#holo-label {
  position: fixed; transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 1px 4px rgba(0,0,0,0.95);
  padding: 4px 11px;
  background: rgba(4,8,14,0.62);
  border: 1px solid rgba(0,229,255,0.5);
  box-shadow: 0 0 14px rgba(0,229,255,0.25);
  opacity: 0; transition: opacity 0.16s ease;
}
#holo-label.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { #holo-label { display: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   STATIC MODE — the no-WebGL fallback served to phones, tablets, reduced-motion,
   and any device the capability gate (index.html <head>) judges can't run the
   heavy Three.js scene. Renders the SAME section content as a fast, normal,
   scrolling page. `<html class="mode-static">` is the default; capable desktops
   are upgraded to `.mode-immersive` and never match these rules.
   ════════════════════════════════════════════════════════════════════════════ */
html.mode-static { overflow-y: auto; }
html.mode-static, html.mode-static body { cursor: auto; overflow-x: hidden; }
html.mode-static .loader { display: none !important; }

/* Strip all the immersive scaffolding */
html.mode-static #scene-canvas,
html.mode-static #scroll-spacer,
html.mode-static #scan-dim,
html.mode-static #visor-screen,
html.mode-static #visor-frame,
html.mode-static .hud,
html.mode-static .nav-rail,
html.mode-static .scene-grade,
html.mode-static .scene-tone,
html.mode-static .crt-overlay,
html.mode-static .crt-vignette,
html.mode-static .crt-flicker,
html.mode-static .so-wing,
html.mode-static .scan-head,
html.mode-static .scan-sweep,
html.mode-static .scroll-hint { display: none !important; }

/* Page background: a static dusk hero under a dark wash */
html.mode-static body {
  min-height: 100%;
  background-color: var(--void-deep);
  background-image:
    linear-gradient(180deg, rgba(5,3,9,0.74) 0%, rgba(5,3,9,0.92) 55%, rgba(5,3,9,1) 100%),
    url('assets/salian-avenue-1.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Sticky wordmark bar */
html.mode-static body::before {
  content: "SALIAN DEFENSE";
  position: sticky; top: 0; z-index: 60;
  display: block; padding: 15px 7vw;
  font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
  font-weight: 700; letter-spacing: 0.34em; font-size: 13px; line-height: 1;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(4,3,9,0.95) 0%, rgba(4,3,9,0.55) 70%, rgba(4,3,9,0) 100%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

/* Sections flow as a normal vertical page */
html.mode-static .section-overlay {
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: auto !important;
  background: none !important;
  z-index: auto !important;
  padding: 6vh 7vw;
  max-width: 760px;
  margin: 0 auto;
}
html.mode-static .so-inner {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  transform: none !important;
  will-change: auto !important;
}
html.mode-static .so-card {
  max-width: 100% !important;
  width: 100% !important;
  padding: 22px 24px 26px 28px !important;
  background-color: rgba(8,6,14,0.5);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* Reveal content the immersive path normally fades in via scene.js */
html.mode-static .so-card > * { opacity: 1 !important; transform: none !important; }
html.mode-static .so-title { font-size: clamp(28px, 7vw, 46px) !important; }
html.mode-static #contact-form { width: 100% !important; max-width: 460px; }

@media (max-width: 640px) {
  html.mode-static .section-overlay { padding: 5vh 6vw; }
  html.mode-static .so-card { padding: 18px 16px 22px 20px !important; }
}