/* =====================================================================
   HSI DARK GALLERY — homepage theme (loaded after style.css, html.dark)
   Design Language: dark museum room, luminous system intelligence,
   liquid glass sparingly (nodes, core, panel, primary CTAs), motion =
   meaning on the one engine clock. No SVG filters (perf law), no neon
   overload, no spinning. The intelligence is the light.
   ===================================================================== */

html.dark {
  /* approved dark palette (revision brief 2026-07-12) */
  --bg-0: #05070b;          /* deep room */
  --bg-1: #08111f;          /* section base */
  --bg-2: #101a2d;          /* raised */
  --ink: #f5f8ff;
  --ink-soft: #b9c6d8;
  --ink-faint: #8291a8;
  --electric: #3f6ee8;
  --cobalt: #18345c;
  --sky: #5b84ff;
  --ice: #6aa8ff;
  --glass-bg: rgba(18, 26, 42, 0.55);
  --glass-edge: rgba(148, 178, 224, 0.22);
  --glass-hi: rgba(255, 255, 255, 0.09);
  --gold: #e9cd96;
  --particle-rgb: 125, 170, 240;
}

html.dark body {
  background: var(--bg-0);
  color: var(--ink);
}

/* ---------- atmosphere: layer 1 of the depth language ---------- */
html.dark .atmosphere {
  background:
    radial-gradient(60% 45% at 18% 8%,  rgba(30, 58, 138, 0.32), transparent 70%),
    radial-gradient(55% 40% at 85% 30%, rgba(37, 99, 235, 0.14), transparent 72%),
    radial-gradient(70% 55% at 50% 105%, rgba(30, 58, 138, 0.22), transparent 75%);
  opacity: calc(0.7 + 0.3 * var(--drift, 0.5));
}
/* almost-invisible field grid */
html.dark body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  transparent 0 79px, rgba(96, 165, 250, 0.025) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(96, 165, 250, 0.025) 79px 80px);
}
html.dark .nav, html.dark section, html.dark footer, html.dark .strip, html.dark .divider-star { position: relative; z-index: 1; }

/* ---------- nav ---------- */
html.dark .nav {
  background: rgba(9, 12, 20, 0.72);
  border-bottom: 1px solid rgba(148, 178, 224, 0.12);
}
html.dark .nav-links a { color: var(--ink-soft); }
html.dark .nav-links a:hover { color: var(--ice); }
html.dark .brand-word { color: var(--ink); }
html.dark .brand-sub { color: var(--ink-faint); }

/* ---------- type ---------- */
html.dark .hero h1, html.dark .title { color: var(--ink); }
html.dark .hero h1 .accent { color: var(--sky); }
html.dark .kicker { color: var(--sky); }
html.dark .lede, html.dark .sub { color: var(--ink-soft); }
html.dark .eyebrow { color: var(--sky); }

/* ---------- buttons: liquid glass ghost, luminous primary ---------- */
html.dark .btn-primary {
  background: linear-gradient(180deg, #2f66c4, #1c3f86);
  border: 1px solid rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #f2f7ff;
}
html.dark .btn-primary:hover { box-shadow: 0 0 30px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
html.dark .btn-ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-edge);
  color: var(--ice);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html.dark .btn-ghost:hover { border-color: rgba(148, 178, 224, 0.45); }

/* ---------- hero: the dark room ---------- */
html.dark .hero {
  background:
    radial-gradient(85% 90% at 72% 30%, rgba(24, 52, 110, 0.16), transparent 70%),
    linear-gradient(180deg, #070a12, #0a0e18);
}
html.dark .hero .tm { color: var(--ink-faint); }
html.dark .field-ring { border-color: rgba(96, 165, 250, 0.16); }
/* the figure dissolves into the room — no hard photo edge */
html.dark .hero-figure img {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
}
html.dark .hero-wave svg path[fill] { fill: rgba(15, 21, 34, 0.9); }
html.dark .hero-wave svg path[stroke] { opacity: 0.5; }

/* ---------- trust strip ---------- */
html.dark .strip { background: linear-gradient(180deg, #0b0f18, #0a0e15); border-color: rgba(148, 178, 224, 0.1); }
html.dark .strip-item h4 { color: var(--ink); }
html.dark .strip-item p { color: var(--ink-faint); }
html.dark .strip-item svg { color: var(--sky); }

html.dark .divider-star { background: transparent; }

/* ---------- sections ---------- */
html.dark section.block { background: var(--bg-1); }
html.dark section.block.tinted { background: linear-gradient(180deg, #0a0e16, #0d1220); }

/* =====================================================================
   LIQUID GLASS  (.lg) — the interface material.
   Glass = backdrop refraction + inner depth + edge highlight + a whisper
   of chromatic dispersion AT THE RIM ONLY (two hue-shifted edge rings,
   sub-pixel offset — no SVG displacement filters, ever).
   ===================================================================== */
.lg {
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.07), transparent 55%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -10px 22px rgba(9, 14, 26, 0.5),
    0 14px 40px rgba(0, 0, 0, 0.45);
}
/* chromatic whisper: warm rim upper-left, cool rim lower-right */
.lg::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255, 170, 150, 0.16), transparent 28%) border-box,
    linear-gradient(315deg, rgba(120, 200, 255, 0.18), transparent 28%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
}

/* flow stroke: a slow arc of deep cobalt light circulating the rim.
   Not rotation of the object — a traveling brightness on the border. */
@property --lga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lg-flow::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  padding: 2px;
  background: conic-gradient(from var(--lga),
    transparent 0deg, rgba(37, 99, 235, 0.0) 250deg,
    rgba(37, 99, 235, 0.65) 300deg, rgba(96, 165, 250, 0.85) 320deg,
    rgba(37, 99, 235, 0.4) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 27s linear infinite, lgbreathe 9s ease-in-out infinite;
}
@keyframes lgflow { to { --lga: 360deg; } }
@keyframes lgbreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-flow::after { animation: none; opacity: 0.5; } }

/* =====================================================================
   ORBITAL SYSTEM MAP — the exhibit
   ===================================================================== */
html.dark .map-layout {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 10px 24px 26px;
}
@media (max-width: 900px) { html.dark .map-layout { grid-template-columns: 1fr; } }

html.dark .map-stage { position: relative; aspect-ratio: 1/1; max-width: 600px; width: 100%; margin: 0 auto; }
html.dark .map-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
html.dark .map-line { stroke: #5b84ff; stroke-width: 0.3; stroke-opacity: calc(0.07 + 0.13 * var(--breath, 0.4)); }
html.dark .map-line.active {
  stroke: rgba(96, 165, 250, 0.9); stroke-width: 0.45;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: linkdraw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes linkdraw { to { stroke-dashoffset: 0; } }

/* the coherence core */
html.dark .map-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34%; aspect-ratio: 1/1; border-radius: 50%; z-index: 2;
  display: grid; place-content: center; text-align: center; gap: 4px;
}
html.dark .map-core span {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: 0.22em;
  color: var(--ink); margin-left: 0.22em;
}
html.dark .map-core small { font-size: 10px; letter-spacing: 0.34em; color: var(--sky); margin-left: 0.34em; }
/* halo breathes with the room; blooms on coherence pulse */
html.dark .map-core .halo {
  position: absolute; inset: -24%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(91, 132, 255, 0.45), rgba(63, 110, 232, 0.12) 55%, transparent 74%);
  opacity: calc(0.5 + 0.5 * var(--breath, 0.4));
  transform: scale(calc(1 + 0.05 * var(--breath, 0.4) + 0.25 * var(--pulse, 0)));
  transition: transform 0.6s ease;
}

/* nodes */
html.dark .map-node {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 8px;
  background: none; border: 0; padding: 6px; cursor: pointer;
  font: inherit; -webkit-tap-highlight-color: transparent;
  --hue: 61, 184, 255;
}
html.dark .map-node .orb-core {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(var(--hue), 0.95);
  transition: box-shadow 0.32s ease, transform 0.32s ease;
}
html.dark .map-node .orb-core svg { width: 26px; height: 26px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 6px rgba(var(--hue), 0.55)); }
html.dark .map-node .nl {
  font-size: 10px; font-weight: 650; letter-spacing: 0.16em; color: var(--ink-faint);
  transition: color 0.32s ease;
}
html.dark .map-node:hover .orb-core,
html.dark .map-node.active .orb-core {
  box-shadow: 0 0 26px rgba(var(--hue), 0.4), inset 0 1px 0 var(--glass-hi), 0 14px 40px rgba(0,0,0,0.45);
  transform: scale(1.05);
}
html.dark .map-node.active .nl, html.dark .map-node:hover .nl { color: rgba(var(--hue), 0.95); }
html.dark .map-node:focus-visible { outline: none; }
html.dark .map-node:focus-visible .orb-core { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); }

/* system hues — approved system colors (accents only, never floods) */
html.dark .n-breath    { --hue: 61, 184, 255; }
html.dark .n-brain     { --hue: 77, 107, 255; }
html.dark .n-heart     { --hue: 255, 77, 90; }
html.dark .n-nervous   { --hue: 168, 85, 247; }
html.dark .n-fascia    { --hue: 244, 185, 66; }
html.dark .n-lymphatic { --hue: 0, 217, 255; }
html.dark .n-spine     { --hue: 214, 160, 69; }
html.dark .n-biofield  { --hue: 142, 220, 255; }

/* rest-state presence: each node wears its hue as a quiet ring + inner light */
html.dark .map-node .orb-core {
  box-shadow: 0 0 0 1px rgba(var(--hue), 0.42), 0 0 18px rgba(var(--hue), 0.16),
              inset 0 1px 0 var(--glass-hi), inset 0 0 18px rgba(var(--hue), 0.10);
}

/* per-system §7 motion identities (same laws as /systems/, dark voicing) */
html.dark .n-breath .orb-core { transform: scale(calc(1 + 0.08 * var(--breath, 0.4))); }
html.dark .n-breath:hover .orb-core, html.dark .n-breath.active .orb-core { transform: scale(calc(1.05 + 0.08 * var(--breath, 0.4))); }
html.dark .n-heart .orb-core {
  box-shadow: 0 0 0 1px rgba(var(--hue), 0.42), 0 0 18px rgba(var(--hue), 0.16),
              inset 0 1px 0 var(--glass-hi), inset 0 0 18px rgba(var(--hue), 0.10),
              0 0 calc(36px * var(--beat, 0)) rgba(var(--hue), 0.75);
}
html.dark .n-brain .orb-core::before { box-shadow: 0 0 calc(10px + 16px * var(--breath2, 0.4)) rgba(var(--hue), 0.3); }
html.dark .n-nervous .signal {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; background: rgb(var(--hue)); box-shadow: 0 0 8px rgb(var(--hue));
  animation: nsignal 9s linear infinite; pointer-events: none;
}
@keyframes nsignal { from { transform: rotate(0turn) translateX(33px); } to { transform: rotate(1turn) translateX(33px); } }
html.dark .n-fascia .orb-core { animation: fweave 13.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
@keyframes fweave { 0%,100% { transform: scale(1,1); } 33% { transform: scale(1.02,0.985); } 66% { transform: scale(0.985,1.02); } }
html.dark .n-lymphatic .orb-core::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 32% at 50% calc(100% - 92% * var(--breath, 0.4)), rgba(var(--hue), 0.35), transparent 75%);
}
html.dark .n-spine .orb-core::after {
  content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; height: 13px;
  border-radius: 2px; background: linear-gradient(180deg, transparent, rgb(var(--hue)), transparent);
  top: calc(6px + (100% - 25px) * (1 - var(--breath, 0.4))); opacity: 0.9; pointer-events: none;
}
html.dark .n-biofield .orb-core::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--hue), 0.75);
  transform: scale(calc(1 + 0.4 * var(--breath, 0.4)));
  opacity: calc(0.85 - 0.8 * var(--breath, 0.4));
}
@media (prefers-reduced-motion: reduce) {
  html.dark .n-nervous .signal, html.dark .n-fascia .orb-core { animation: none; }
  html.dark .map-line.active { animation: none; stroke-dashoffset: 0; }
}

/* =====================================================================
   PREVIEW PANEL — the illuminated exhibit card
   ===================================================================== */
html.dark .map-panel { border-radius: 22px; padding: 30px 30px 28px; min-height: 300px; }
html.dark .map-panel h2 { font-size: 23px; margin: 4px 0 10px; color: var(--ink); }
html.dark .map-panel p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 8px; }
html.dark .map-panel .motion-line { font-style: italic; color: var(--ink-faint); font-size: 13.5px; }
html.dark .map-panel a.btn { margin-top: 14px; }
html.dark .map-panel a.btn[hidden] { display: none; }

/* 3-stage micro-storyboard */
html.dark .stages { list-style: none; display: flex; gap: 8px; margin: 16px 0 4px; padding: 0; }
html.dark .stages li {
  flex: 1; text-align: center; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 9px 4px 8px; border-radius: 10px;
  border: 1px solid rgba(148, 178, 224, 0.12);
  background: rgba(14, 20, 34, 0.5);
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  position: relative;
}
html.dark .stages li::before {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  margin: 0 auto 6px; background: rgba(148, 178, 224, 0.25);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
html.dark .stages li.on { color: var(--ice); border-color: rgba(96, 165, 250, 0.45); }
html.dark .stages li.on::before { background: var(--sky); box-shadow: 0 0 8px rgba(96, 165, 250, 0.8); }

/* =====================================================================
   SYSTEM CARDS — calmer glass, below the exhibit
   ===================================================================== */
html.dark .sys-card {
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.6), rgba(13, 18, 31, 0.6));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 178, 224, 0.14);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
html.dark .sys-card h3 { color: var(--ink); }
html.dark .sys-card p { color: var(--ink-faint); }
html.dark .sys-card .sys-icon {
  background: rgba(16, 23, 39, 0.8);
  border: 1px solid rgba(148, 178, 224, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(var(--hue, 96, 165, 250), 0.95);
}
html.dark .sys-card .sys-icon::before { background: radial-gradient(circle, rgba(var(--hue, 96,165,250), 0.28), transparent 70%); }
html.dark .sys-card:hover, html.dark .sys-card.active {
  transform: translateY(-3px);
  border-color: rgba(var(--hue, 96, 165, 250), 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--hue, 96,165,250), 0.16);
}
html.dark .sys-card:hover .sys-icon svg, html.dark .sys-card.active .sys-icon svg {
  filter: drop-shadow(0 0 6px rgba(var(--hue, 96,165,250), 0.6));
}
/* hue per card — approved system colors */
html.dark .sys-card[data-sys="breath"]    { --hue: 61, 184, 255; }
html.dark .sys-card[data-sys="brain"]     { --hue: 77, 107, 255; }
html.dark .sys-card[data-sys="heart"]     { --hue: 255, 77, 90; }
html.dark .sys-card[data-sys="nervous"]   { --hue: 168, 85, 247; }
html.dark .sys-card[data-sys="fascia"]    { --hue: 244, 185, 66; }
html.dark .sys-card[data-sys="lymphatic"] { --hue: 0, 217, 255; }
html.dark .sys-card[data-sys="spine"]     { --hue: 214, 160, 69; }
html.dark .sys-card[data-sys="biofield"]  { --hue: 142, 220, 255; }

/* collectible-module presence at rest: hue ring on the icon, brighter border */
html.dark .sys-card { border-color: rgba(148, 178, 224, 0.2); }
html.dark .sys-card .sys-icon {
  box-shadow: 0 0 0 1px rgba(var(--hue, 96,165,250), 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(var(--hue, 96,165,250), 0.12);
}
html.dark .sys-card .sys-icon svg { filter: drop-shadow(0 0 4px rgba(var(--hue, 96,165,250), 0.4)); }

/* one slow border-light run on hover only (perf: not at rest) */
html.dark .sys-card:hover::after {
  content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lga, 0deg),
    transparent 0deg 290deg, rgba(var(--hue, 96,165,250), 0.8) 325deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 2.4s cubic-bezier(0.37, 0, 0.63, 1) 1;
  opacity: 0.9;
}
html.dark .sys-card { position: relative; }

@keyframes nsignal-sm { from { transform: rotate(0turn) translateX(27px); } to { transform: rotate(1turn) translateX(27px); } }
@media (max-width: 640px) {
  html.dark .map-node .orb-core { width: 50px; height: 50px; }
  html.dark .map-node .orb-core svg { width: 22px; height: 22px; }
  html.dark .map-node .nl { font-size: 8.5px; letter-spacing: 0.12em; }
  html.dark .map-core span { letter-spacing: 0.16em; }
  html.dark .n-nervous .signal { animation-name: nsignal-sm; }
}

/* ---------- library / professionals / bodyview / waitlist ---------- */
html.dark .lib-card {
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.55), rgba(13, 18, 31, 0.55));
  border: 1px solid rgba(148, 178, 224, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35),
              0 0 calc(10px + 14px * var(--breath, 0.4)) rgba(63, 110, 232, 0.10);
}
html.dark .lib-card .lib-art { position: relative; }
html.dark .lib-card .lib-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 55%, rgba(91, 132, 255, 0.16), transparent 75%);
  opacity: calc(0.35 + 0.65 * var(--breath, 0.4));
}
html.dark .lib-card h3 { color: var(--ink); }
html.dark .lib-card p { color: var(--ink-faint); }
html.dark .lib-card .lib-art { background: linear-gradient(160deg, #101726, #0b101c); border-bottom: 1px solid rgba(148,178,224,0.1); }
html.dark .lib-card .lib-art svg { color: var(--sky); opacity: 0.9; }
html.dark .lib-link { color: var(--sky); }

html.dark .pro-chip {
  background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.18);
  color: var(--ink-soft); box-shadow: none;
}

html.dark .bv-band {
  background:
    radial-gradient(90% 130% at 80% 20%, rgba(37, 99, 235, 0.28), transparent 60%),
    linear-gradient(160deg, #101a30, #0a0f1c);
  border: 1px solid rgba(148, 178, 224, 0.16);
  box-shadow: 0 0 calc(16px + 22px * var(--breath, 0.4)) rgba(63, 110, 232, 0.14);
}
html.dark .pro-chip { transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease; }
html.dark .pro-chip:hover {
  border-color: rgba(91, 132, 255, 0.5); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 16px rgba(63, 110, 232, 0.2);
}
html.dark .bv-band h2, html.dark .bv-band p { color: var(--ink); }
html.dark .bv-band .note { color: var(--ink-faint); }

html.dark .waitlist-form input[type="email"] {
  background: rgba(14, 20, 34, 0.8); border: 1px solid rgba(148, 178, 224, 0.22);
  color: var(--ink);
}
html.dark .waitlist-form input[type="email"]::placeholder { color: var(--ink-faint); }
html.dark .form-note { color: var(--ink-faint); }

/* ---------- hero video: the living film ---------- */
html.dark .hero-video { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
html.dark .hero-figure { position: relative; }
/* a navy halo BEHIND the film, matched to the film's own edge tone, so the
   frame dissolves into atmosphere instead of meeting the room's black */
html.dark .hero-figure::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 50%, rgba(13, 17, 40, 0.95), rgba(11, 14, 32, 0.5) 60%, transparent 80%);
}
/* the veil: paints matching darkness over the film's edges — plain gradient
   bands, no masks (masks on composited video are unreliable). Edge color =
   the film's own border navy, NOT page black: fading to a darker tone than
   the surroundings re-draws the rectangle you're trying to erase. */
html.dark .hero-veil {
  position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(270deg, rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 30%),
    linear-gradient(90deg,  rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 30%),
    linear-gradient(180deg, rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 32%),
    linear-gradient(0deg,   rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 32%);
}

/* desktop: the film IS the section — figure large on the right, text overlays */
@media (min-width: 701px) {
  html.dark .hero {
    position: relative; overflow: hidden;
    min-height: min(86vh, 920px);
    display: flex; align-items: center;
  }
  html.dark .hero-inner {
    grid-template-columns: minmax(320px, 560px);
    position: relative; z-index: 2; width: 100%;
  }
  /* headline must live inside its column, never under the film */
  html.dark .hero h1 { font-size: clamp(32px, 3.6vw, 50px); max-width: 560px; }
  html.dark .hero .lede { max-width: 470px; }
  /* the text column must stack ABOVE its figure sibling */
  html.dark .hero-inner > div:first-child { position: relative; z-index: 3; }
  html.dark .hero-figure {
    position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
    width: 67%; max-width: 1100px; margin: 0; z-index: 1; pointer-events: none;
  }
  /* desktop veil: stronger left fade so the film never fights the words */
  html.dark .hero-veil {
    background:
      linear-gradient(90deg, rgba(8, 11, 20, 0.98) 0%, rgba(10, 13, 28, 0.55) 28%, transparent 52%),
      linear-gradient(270deg, rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 30%),
      linear-gradient(180deg, rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 32%),
      linear-gradient(0deg,   rgb(12, 16, 36) 0%, rgba(12, 16, 36, 0.55) 12%, transparent 32%);
  }
}

/* panel tagline */
html.dark .sys-tagline {
  font-weight: 650; color: var(--ice); font-size: 14px; letter-spacing: 0.02em;
  margin: -4px 0 10px !important;
}
html.dark .sys-tagline:empty { display: none; }

/* ---------- mobile hero: designed, not squeezed ---------- */
.lede-short { display: none; }
@media (max-width: 700px) {
  html.dark .hero-inner { grid-template-columns: 1fr; gap: 6px; padding-top: 16px; }
  html.dark .hero { padding-bottom: 8px; }
  html.dark .hero .kicker { font-size: 11px; margin-bottom: 8px; }
  html.dark .hero h1 { font-size: 33px; line-height: 1.12; }
  html.dark .lede { display: none; }
  html.dark .lede-short {
    display: block; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55;
    margin: 12px 0 4px; max-width: 34ch;
  }
  html.dark .hero-ctas { margin-top: 14px; }
  html.dark .hero-figure { max-width: 320px; margin: 4px auto 0; }
  html.dark .hero-video { aspect-ratio: 9 / 16; object-fit: cover; max-height: 60vh; }
}

/* =====================================================================
   DARK SYSTEM PAGES (/systems/<slug>/) — clean, clinical, premium.
   Each page sets --hue inline on <body>.
   ===================================================================== */
html.dark .sys-hero { background: transparent; position: relative; overflow: hidden; }
/* full-bleed system artwork behind the hero (art bg is near-black, so
   plain gradient veils dissolve it into the room — no masks) */
html.dark .sys-art {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: var(--art-top, 0px); width: max(100%, 1100px); max-width: 1750px; z-index: 0; pointer-events: none;
}
@media (max-width: 700px) {
  /* phone: art renders at its 1100px floor, badge Y scales by 1100/1247 ≈ 0.88 */
  html.dark .sys-art { top: calc(var(--art-top, 0px) * 0.96); }
}
html.dark .sys-art img { width: 100%; height: auto; display: block; opacity: 0.9; }
html.dark .sys-art::after {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(0deg,   #05070b 0%, rgba(5, 7, 11, 0.55) 16%, transparent 42%),
    linear-gradient(180deg, rgba(5, 7, 11, 0.7) 0%, transparent 18%),
    linear-gradient(90deg,  rgba(5, 7, 11, 0.8) 0%, transparent 14%),
    linear-gradient(270deg, rgba(5, 7, 11, 0.8) 0%, transparent 14%);
}
html.dark .sys-hero > *:not(.sys-art) { position: relative; z-index: 1; }
html.dark .sys-hero::before {
  content: ""; position: absolute; inset: -10% -20% auto; height: 130%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 55% at 50% 32%, rgba(var(--hue, 91,132,255), 0.14), transparent 72%);
  opacity: calc(0.6 + 0.4 * var(--breath, 0.4));
}
html.dark .sys-hero .label {
  background: rgba(16, 23, 39, 0.7); color: var(--ice);
  border: 1px solid rgba(var(--hue, 91,132,255), 0.4);
}
html.dark .sys-hero .sys-icon {
  background: rgba(14, 20, 34, 0.85); color: rgba(var(--hue, 91,132,255), 0.95);
  border: 1px solid rgba(var(--hue, 91,132,255), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--hue, 91,132,255), 0.15),
              0 0 calc(18px + 16px * var(--breath, 0.4)) rgba(var(--hue, 91,132,255), 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.dark .sys-hero .sys-icon::before { background: radial-gradient(circle, rgba(var(--hue, 91,132,255), 0.35), transparent 70%); }
html.dark .sys-hero .sys-icon svg { filter: drop-shadow(0 0 6px rgba(var(--hue, 91,132,255), 0.6)); }
html.dark .sys-hero h1 { color: var(--ink); }
html.dark .sys-hero .desc { color: var(--ink-soft); }

/* four product cards */
html.dark .prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 1020px; margin: 34px auto 8px; padding: 0 20px; text-align: center;
}
@media (max-width: 900px) { html.dark .prod-grid { grid-template-columns: repeat(2, 1fr); } }
html.dark .prod-card {
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.55), rgba(13, 18, 31, 0.55));
  border: 1px solid rgba(148, 178, 224, 0.16); border-radius: 16px;
  padding: 26px 16px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-card, 0.4s) ease, border-color var(--dur-card, 0.4s) ease, box-shadow var(--dur-card, 0.4s) ease;
}
html.dark .prod-card:hover {
  transform: translateY(-3px); border-color: rgba(var(--hue, 91,132,255), 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(var(--hue, 91,132,255), 0.15);
}
html.dark .prod-card svg {
  width: 30px; height: 30px; color: rgba(var(--hue, 91,132,255), 0.9); margin-bottom: 12px;
  filter: drop-shadow(0 0 5px rgba(var(--hue, 91,132,255), 0.45));
}
html.dark .prod-card h3 {
  font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif;
  font-weight: 500; font-size: 19px; color: var(--ink); margin: 0 0 6px;
}
html.dark .prod-card p { color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
html.dark .prod-card .soon {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--sky);
}

/* educational reveal block */
html.dark .reveal-block { max-width: 640px; margin: 64px auto 0; padding: 0 22px; text-align: center; }
html.dark .reveal-block h2 {
  font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif;
  font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin: 8px 0 14px;
}
html.dark .reveal-block p { color: var(--ink-soft); line-height: 1.7; }

/* how it connects */
html.dark .connects { max-width: 720px; margin: 52px auto 0; padding: 0 22px; text-align: center; }
html.dark .connects h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sky); margin: 0 0 18px;
}
html.dark .connect-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html.dark .connect-chips a {
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
  background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.2);
  transition: color 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
  --chue: 91, 132, 255;
}
html.dark .connect-chips a::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  background: rgba(var(--chue), 0.9); box-shadow: 0 0 6px rgba(var(--chue), 0.7);
}
html.dark .connect-chips a:hover {
  color: var(--ice); border-color: rgba(var(--chue), 0.55); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--chue), 0.2);
}

html.dark .back-link { color: var(--ink-faint); }
html.dark .back-link:hover { color: var(--ice); }

/* ---------- footer ---------- */
html.dark footer { background: #070a10; border-top: 1px solid rgba(148, 178, 224, 0.1); }
html.dark footer h5 { color: var(--ink-faint); }
html.dark footer a { color: var(--ink-soft); }
html.dark footer a:hover { color: var(--ice); }
html.dark .foot-legal { color: var(--ink-faint); border-color: rgba(148, 178, 224, 0.1); }
html.dark .foot-tagline { color: var(--ink-faint); }