:root {
  /* Palette — muted, desaturated navy. Background should recede. */
  --wall:        #1a2240;
  --wall-deep:   #131a32;
  --wall-dot:    #182040;   /* nearly invisible — pure tone variation */
  --wall-light:  #1d2748;
  --ink:         #050816;
  --ink-2:       #0a1230;

  --bg-deep:     #060a1a;
  --bg-mid:      #0c1228;
  --bg-card:     rgba(10, 11, 14, 0.78);   /* neutral near-black, not navy */
  --card-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75),
                 0 8px 24px -8px rgba(0, 0, 0, 0.55),
                 0 1px 0 rgba(255, 255, 255, 0.04) inset;

  --paper-rgb:   244, 239, 229;
  --paper:       #f4efe5;
  --paper-dim:   rgba(244, 239, 229, 0.74);
  --paper-faint: rgba(244, 239, 229, 0.46);

  /* Tag color is pure black; outlined variants use `-webkit-text-stroke`. */
  --tag-color:   #000;
  --tag-shadow:  rgba(0, 0, 0, 0.55);

  /* 3D world parameters (do not change without re-thinking continuity) */
  --wall-w:      2000px;
  --wall-h:      2600px;
  --corner-z:    -1500px;
  --tag-gap:     60px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-deep);
  color: var(--paper);
  min-height: 100vh;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.v7-booting,
html.v7-booting body {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(20, 34, 68, 0.62), transparent 42%),
    linear-gradient(180deg, rgba(4, 8, 20, 0.96) 0%, rgba(4, 8, 20, 0.98) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}

html.v7-ready .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  width: min(460px, 100%);
  display: grid;
  gap: 18px;
  justify-items: start;
}

.page-loader__mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--paper-rgb), 0.76);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-loader__copy {
  display: grid;
  gap: 8px;
}

.page-loader__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.page-loader__title {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.page-loader__status {
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-dim);
}

.page-loader__bar {
  width: min(260px, 100%);
  height: 4px;
  overflow: hidden;
  background: rgba(var(--paper-rgb), 0.12);
}

.page-loader__fill {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--paper-rgb), 0.1) 0%, rgba(var(--paper-rgb), 0.95) 55%, rgba(var(--paper-rgb), 0.18) 100%);
  transform: translateX(-120%);
  animation: loaderSweep 1.2s ease-in-out infinite;
}

@keyframes loaderSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

html.v7-booting .led-tilt,
html.v7-booting .led-world,
html.v7-booting .strip {
  animation-play-state: paused;
}

html.v7-booting .foreground {
  opacity: 0;
}

html.v7-ready .foreground {
  opacity: 1;
  transition: opacity .45s ease;
}

/* ========================================================================
   3D LED CUBE INTERIOR — geometry & continuity unchanged from previous pass.
   Corner sits far in the distance; walls fan toward camera.
   ======================================================================== */

.led-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 1900px;
  perspective-origin: 50% 50%;
  background: radial-gradient(ellipse at 50% 50%, #0b1228 0%, #04081a 80%);
}

.led-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Slow camera-axis tilt swing: -15° → +15° → -15° over a long cycle. */
  animation: cameraTilt 40s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes cameraTilt {
  0%, 100% { transform: rotateZ(-15deg); }
  50%      { transform: rotateZ( 15deg); }
}

.led-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Slower, softer Y swing underneath the tilt */
  animation: cubeSwing 26s cubic-bezier(.45,.05,.55,.95) infinite;
}

@keyframes cubeSwing {
  0%, 100% { transform: rotateY(-2.2deg); }
  50%      { transform: rotateY( 2.2deg); }
}

.led-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wall-w);
  height: var(--wall-h);
  margin-top: calc(var(--wall-h) / -2);
  transform-style: preserve-3d;
  overflow: hidden;
  background: var(--wall);
  background-image:
    radial-gradient(circle at center, var(--wall-dot) 38%, transparent 40%),
    linear-gradient(180deg, var(--wall-light, #1d2748) 0%, var(--wall) 50%, var(--wall-deep) 100%);
  background-size: 4px 4px, 100% 100%;
}

/* Directional lighting per wall — the edge that meets the corner is in
   shadow (less ambient light bouncing in there), the far edge (closer to
   camera) is brighter. The overlay stacks via ::after, ABOVE the rows, so it
   also darkens tag text near the corner — which is what sells the 3D crease. */
.led-wall::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.led-wall.right::after {
  /* Right wall: shared corner is on its LEFT edge → darker there. */
  background:
    linear-gradient(90deg,
      rgba(2, 4, 12, 0.88) 0%,
      rgba(2, 4, 12, 0.45) 18%,
      rgba(2, 4, 12, 0.14) 50%,
      rgba(2, 4, 12, 0)    100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.5) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0,0,0,0.6) 100%);
}
.led-wall.left::after {
  /* Left wall: shared corner is on its RIGHT edge → darker there. */
  background:
    linear-gradient(90deg,
      rgba(2, 4, 12, 0)    0%,
      rgba(2, 4, 12, 0.14) 50%,
      rgba(2, 4, 12, 0.45) 82%,
      rgba(2, 4, 12, 0.88) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.5) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0,0,0,0.6) 100%);
}

.led-wall.right {
  transform-origin: left center;
  transform: translate3d(0, 0, var(--corner-z)) rotateY(-45deg);
}
.led-wall.left {
  transform-origin: right center;
  transform: translate3d(calc(var(--wall-w) * -1), 0, var(--corner-z)) rotateY(45deg);
}

/* (Lighting overlay moved into .led-wall::after above.) */

/* Deep shadow exactly at the shared corner edge — reads as the interior
   crease where two walls meet (ambient occlusion). */
.corner-seam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: var(--wall-h);
  margin-top: calc(var(--wall-h) / -2);
  margin-left: -5px;
  transform: translateZ(calc(var(--corner-z) + 2px));
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 12%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.55) 88%,
    transparent 100%);
  filter: blur(3.5px);
  pointer-events: none;
  opacity: 0.95;
}

/* ---- Rows ---- */
.row {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--rh, 130px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow: visible;
}

.strip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: scrollLeft var(--dur, 60s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.copy {
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
  padding-right: var(--tag-gap);
  flex-shrink: 0;
}

@keyframes scrollLeft {
  from { transform: translate3d(var(--from, 0px), 0, 0); }
  to   { transform: translate3d(var(--to, -100%), 0, 0); }
}

.row { /* sits below the wall's ::after lighting overlay */ }
.tag {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--tag-color);
  text-shadow:
    0 2px 6px var(--tag-shadow),
    0 0 18px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}

.tag.xl   { font-size: 172px; font-weight: 800; --stroke: 3.5px; }
.tag.lg   { font-size: 124px; font-weight: 800; --stroke: 2.8px; }
.tag.md   { font-size: 78px;  font-weight: 700; letter-spacing: -0.015em; --stroke: 2px; }
.tag.sm   { font-size: 54px;  font-weight: 600; letter-spacing: 0; --stroke: 1.4px; }
.tag.xs   { font-size: 36px;  font-weight: 500; letter-spacing: 0.06em;
            font-family: 'JetBrains Mono', monospace; --stroke: 1.1px; }

/* Hollow / outline-only variant — stroke renders in the same pure black, so
   against the muted navy wall it reads as a thin line trace. Alternates
   with filled tags for visual rhythm. */
.tag.hollow {
  color: transparent;
  -webkit-text-stroke: var(--stroke) #000;
  text-stroke: var(--stroke) #000;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

.tag.ghost {
  opacity: 0.55;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.tag.hollow.ghost {
  opacity: 0.65;
}

/* ========================================================================
   FOREGROUND
   ======================================================================== */

.scene-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%,
      rgba(6, 10, 26, 0.85) 0%,
      rgba(6, 10, 26, 0.55) 45%,
      rgba(6, 10, 26, 0) 80%),
    linear-gradient(180deg,
      rgba(6, 10, 26, 0.65) 0%,
      transparent 18%,
      transparent 78%,
      rgba(4, 8, 20, 0.92) 100%);
}

.foreground {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  gap: 36px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}
.brand-mark {
  width: 28px; height: 28px;
  border: 1.2px solid var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: 0;
  color: var(--paper);
  background: rgba(10, 20, 48, 0.6);
  backdrop-filter: blur(6px);
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.nav-links a {
  color: inherit; text-decoration: none;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a.active { color: var(--paper); position: relative; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--paper);
}

.nav-cta {
  padding: 9px 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.5);
  border-radius: 3px;
  text-decoration: none;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-cta:hover { background: var(--paper); color: var(--bg-deep); border-color: var(--paper); }

/* Hero */
.hero {
  flex: 1;
  position: relative;
  isolation: isolate; /* contain ::before z-index */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 48px 100px;
  max-width: 980px;
  margin: 0 auto;
}
/* Soft dark halo behind the entire hero — radial gradient + heavy blur so
   the hero copy lifts cleanly off the LED wall. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 32%,
      rgba(0, 0, 0, 0.28) 58%,
      rgba(0, 0, 0, 0.08) 78%,
      transparent 100%);
  filter: blur(28px);
  pointer-events: none;
}
/* A second, tighter glow directly under the headline area for extra depth. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: 80%;
  height: 60%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.2)  50%,
      transparent 100%);
  filter: blur(18px);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(245, 241, 232, 0.32);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 20, 48, 0.65);
  backdrop-filter: blur(8px);
  margin-bottom: 36px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ed9a1;
  box-shadow: 0 0 8px rgba(110, 217, 161, 0.7);
  animation: pulse 1.7s ease-in-out infinite;
}
.eyebrow .sep { opacity: 0.4; margin: 0 2px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* The signature headline: "Keep watch / without watching."
   v3: bold sans throughout (per reference). Slash is the only thin accent. */
h1.headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(56px, 8.4vw, 132px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.045em;
  margin: 0 0 32px;
  text-wrap: balance;
  color: var(--paper);
  max-width: 980px;
}
h1.headline .muted {
  /* Vertical gradient on the gray phrase + soft white glow.
     The gradient runs lighter at the top, fading to a darker mute at the
     bottom — gives the type a hint of dimensional lift. Uses --paper-rgb so
     it follows the active text color from the filter panel. */
  font-weight: 700;
  color: rgba(var(--paper-rgb), 0.42); /* fallback */
  background: linear-gradient(180deg,
    rgba(var(--paper-rgb), 0.78) 0%,
    rgba(var(--paper-rgb), 0.46) 48%,
    rgba(var(--paper-rgb), 0.22) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.10))
    drop-shadow(0 0 48px rgba(180, 200, 255, 0.06));
}
h1.headline .muted .period {
  -webkit-text-fill-color: rgba(var(--paper-rgb), 0.78);
}
h1.headline .slash {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  color: #8aa8ff;
  margin: 0 0.04em;
  transform: translateY(-0.02em);
  text-shadow: 0 0 24px rgba(138, 168, 255, 0.45);
}
h1.headline .period {
  color: var(--paper);
}

/* Sub copy panel — soft dark card */
/* Sub copy panel — soft dark card with halo */
.body-panel {
  position: relative;
  isolation: isolate;
  padding: 18px 26px;
  background: var(--bg-card);
  border: 0;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  max-width: 560px;
  margin-bottom: 36px;
}
.body-panel p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--paper-dim);
  text-wrap: pretty;
  margin: 0;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.btn .arrow { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; }
.btn-primary {
  background: var(--paper);
  color: var(--bg-deep);
}
.btn-primary:hover { transform: translateY(-1px); background: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(245, 241, 232, 0.5);
}
.btn-ghost:hover { background: rgba(245, 241, 232, 0.06); border-color: var(--paper); }

/* Meta-bar at the bottom */
.meta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 48px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  pointer-events: none;
}
.meta-bar .live {
  display: inline-flex; align-items: center; gap: 8px;
}
.meta-bar .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ed9a1;
  box-shadow: 0 0 8px rgba(110, 217, 161, 0.6);
  animation: pulse 1.7s ease-in-out infinite;
}

/* ========================================================================
   CONTENT SECTIONS (v3) — scroll below hero. Floating dark cards over the
   LED wall (which is position:fixed, so it stays as a backdrop).
   ======================================================================== */

.section {
  position: relative;
  padding: 120px 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 22px;
}
.section-label::before {
  content: "";
  width: 28px; height: 1px;
  background: rgba(245, 241, 232, 0.35);
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0 0 28px;
  max-width: 820px;
  text-wrap: balance;
}
.section-title .muted { color: rgba(245, 241, 232, 0.42); font-weight: 700; }

.section-lead {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 620px;
  margin: 0 0 56px;
  text-wrap: pretty;
}

/* Triptych: Detect / Decide / Defend */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tri-card {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border: 0;
  border-radius: 12px;
  padding: 28px 26px 32px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.tri-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--paper-faint);
  margin-bottom: 60px;
}
.tri-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 14px;
}
.tri-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0;
  text-wrap: pretty;
}
.tri-card .spec {
  margin-top: auto;
  padding-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}

/* Stats strip */
.stats {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-card);
  border: 0;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.stat {
  position: relative;
  padding: 36px 32px;
}
.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px; bottom: 22px; right: 0;
  width: 1px;
  background: rgba(245, 241, 232, 0.08);
}
.stat .v {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 52px;
  letter-spacing: -0.04em;
  color: var(--paper);
  line-height: 1;
  margin-bottom: 12px;
}
.stat .v .unit {
  font-size: 22px;
  color: var(--paper-faint);
  font-weight: 500;
  margin-left: 4px;
}
.stat .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Feed list (mocked event log) */
.feed {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border: 0;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.feed-head, .feed-row:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.feed-row:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.feed-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.feed-head::after {
  content: "";
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  height: 1px;
  background: rgba(245, 241, 232, 0.1);
}
.feed-head .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ed9a1;
  box-shadow: 0 0 8px rgba(110, 217, 161, 0.6);
  animation: pulse 1.7s ease-in-out infinite;
  display: inline-block;
  margin-right: 8px;
  vertical-align: 1px;
}
.feed-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 90px 1fr 110px;
  gap: 24px;
  align-items: center;
  padding: 14px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--paper-dim);
}
.feed-row::after {
  content: "";
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  height: 1px;
  background: rgba(245, 241, 232, 0.06);
}
.feed-row:last-child::after { display: none; }
.feed-row .t { color: var(--paper-faint); }
.feed-row .lvl {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
}
.feed-row .lvl.quiet  { color: var(--paper-faint); border: 1px solid rgba(245, 241, 232, 0.18); }
.feed-row .lvl.notice { color: #c8b878; border: 1px solid rgba(200, 184, 120, 0.4); }
.feed-row .lvl.alert  { color: #e87878; border: 1px solid rgba(232, 120, 120, 0.5); }
.feed-row .msg { color: var(--paper); font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
.feed-row .node { color: var(--paper-faint); text-align: right; }

/* Closing CTA */
.closing {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 180px;
}
.closing .section-title {
  margin-left: auto; margin-right: auto;
}

@media (max-width: 900px) {
  .triptych { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2)::after { display: none; }
  .stat:nth-child(1), .stat:nth-child(2) {
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
  }
  .feed-row { grid-template-columns: 80px 80px 1fr; }
  .feed-row .node { display: none; }
  .section { padding: 80px 22px; }
}

@media (max-width: 720px) {
  .nav { padding: 18px 22px; gap: 14px; }
  .nav-links { display: none; }
  .hero { padding: 30px 22px 90px; }
  .body-panel { padding: 14px 18px; }
  .meta-bar { padding: 12px 22px; font-size: 9.5px; letter-spacing: 0.12em; }
  .meta-bar .right { display: none; }
  .theme-panel { right: 12px; bottom: 50px; width: 200px; }
  .page-loader { padding: 22px; }
  .page-loader__inner { gap: 16px; }
  .page-loader__status { max-width: 100%; }
}

/* ========================================================================
   v7 SECTIONS — leak intelligence content
   ======================================================================== */

/* Hero override — 2-column with signal card on right.
   No more flex:1 (we have a long page now); the hero just gets a min-height. */
.hero.v7 {
  flex: 0 0 auto;
  min-height: calc(100vh - 90px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  align-items: center;
  gap: 64px;
  text-align: left;
  padding: 60px 48px 100px;
}
.hero.v7 .eyebrow { margin-bottom: 28px; }
.hero.v7 h1.headline {
  font-size: clamp(40px, 5.6vw, 86px);
  line-height: 1.02;
  margin-bottom: 28px;
  max-width: 100%;
  text-wrap: balance;
}
.hero.v7 .hero-sub {
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 560px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.hero.v7 .cta-row { justify-content: flex-start; }

/* Live Intelligence signal card */
.signal-card {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 28px 30px 32px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.signal-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -34px;
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 42%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}
.signal-card .sc-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 26px;
}
.signal-card .sc-label .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ed9a1;
  box-shadow: 0 0 8px rgba(110, 217, 161, 0.7);
  animation: pulse 1.7s ease-in-out infinite;
}
.signal-card .sc-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 6vw, 92px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--paper);
  margin-bottom: 10px;
}
.signal-card .sc-num .delta {
  font-size: 14px;
  color: #6ed9a1;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-left: 12px;
  vertical-align: 0.7em;
}
.signal-card .sc-key {
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper);
  margin: 0 0 22px;
  font-weight: 500;
}
.signal-card .sc-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0;
  padding-top: 22px;
  position: relative;
}
.signal-card .sc-desc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(245, 241, 232, 0.1);
}

/* COMPARE: Without / With */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.compare-card {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 32px 30px 36px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.compare-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -34px;
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 42%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}
.compare-card .cc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.compare-card.bad .cc-head { color: rgba(232, 120, 120, 0.85); }
.compare-card.good .cc-head { color: rgba(110, 217, 161, 0.92); }
.compare-card .cc-head .chip {
  width: 8px; height: 8px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.compare-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0 0 24px;
}
.compare-list { list-style: none; padding: 0; margin: 0; }
.compare-list li {
  position: relative;
  padding: 14px 0 14px 30px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  border-bottom: 1px solid rgba(245, 241, 232, 0.06);
}
.compare-list li:last-child { border-bottom: 0; }
.compare-list li::before {
  position: absolute;
  left: 0; top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.compare-card.bad  .compare-list li::before { content: "✕"; color: rgba(232, 120, 120, 0.85); font-size: 13px; }
.compare-card.good .compare-list li::before { content: "→"; color: rgba(110, 217, 161, 0.92); font-size: 14px; }

.disclaimer {
  margin-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
  text-align: center;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* TIMELINE — vertical 4-step */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(245, 241, 232, 0.1) 0%,
    rgba(245, 241, 232, 0.25) 50%,
    rgba(245, 241, 232, 0.1) 100%);
}
.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 32px;
  padding: 28px 0;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step:first-child { padding-top: 0; }
.tl-num {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid rgba(245, 241, 232, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
  box-shadow: 0 0 0 5px var(--bg-deep), var(--card-shadow);
}
.tl-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
  color: var(--paper);
}
.tl-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0;
  max-width: 720px;
  text-wrap: pretty;
}

/* METRICS — 6 cells, 3x2 */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.metric-card {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 28px 26px 28px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.metric-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -34px;
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 42%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}
.metric-card .m-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 14px;
}
.metric-card .m-num .plus,
.metric-card .m-num .unit {
  font-size: 24px;
  color: var(--paper-faint);
  margin-left: 2px;
  font-weight: 500;
}
.metric-card .m-key {
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper-dim);
}

/* NARRATIVE — emphasized long-form */
.narrative {
  max-width: 880px;
  margin: 0 auto;
}
.narrative .section-title {
  font-size: clamp(36px, 4.8vw, 68px);
  margin-bottom: 36px;
}
.narrative p {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
  color: var(--paper-dim);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.narrative p strong {
  color: var(--paper);
  font-weight: 600;
}
.narrative .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 12px;
}

/* LEAK HEAT teaser */
.leak-heat {
  position: relative;
  isolation: isolate;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 56px 56px 60px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.leak-heat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -34px;
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 42%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}
.leak-heat .pilot-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(245, 241, 232, 0.25);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.leak-heat .pilot-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c8b878;
  box-shadow: 0 0 8px rgba(200, 184, 120, 0.6);
}
.leak-heat h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--paper);
}
.leak-heat p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0 0 26px;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}

/* FOOTER */
.footer {
  position: relative;
  margin-top: 60px;
  padding: 80px 48px 40px;
  background: rgba(4, 6, 14, 0.78);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(245, 241, 232, 0.08);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand .brand {
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0;
  max-width: 320px;
  text-wrap: pretty;
}
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.footer-col a {
  font-size: 13.5px;
  color: var(--paper-dim);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 241, 232, 0.08);
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
}

/* Responsive for v7 */
@media (max-width: 1024px) {
  .hero.v7 { grid-template-columns: 1fr; gap: 48px; padding: 50px 32px 80px; }
  .compare-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero.v7 { padding: 30px 22px 60px; min-height: auto; }
  .metrics-grid { grid-template-columns: 1fr; }
  .leak-heat { padding: 40px 28px 44px; }
  .footer { padding: 60px 22px 30px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .tl-step { grid-template-columns: 40px 1fr; gap: 20px; }
  .tl-num { width: 40px; height: 40px; font-size: 12px; }
  .timeline::before { left: 19px; }
}

/* ========================================================================
   FILTER / THEME PANEL — live-switches LED wall, text, and card colors.
   Lives bottom-right above the meta-bar. Collapsible. Choices persist via
   localStorage('sentined-v7-theme').
   ======================================================================== */

/* Halo behind each content box — same vocabulary as the hero backdrop.
   ::before sits in the box's own (isolated) stacking context at z-index:-1,
   extends past the box edges, and is heavily blurred for a soft glow. */
.body-panel::before,
.tri-card::before,
.stats::before,
.feed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -34px;
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 42%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}

.theme-panel {
  position: fixed;
  right: 24px;
  bottom: 56px;
  z-index: 5;
  width: 270px;
  background: rgba(10, 11, 14, 0.86);
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 8px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 28px 70px -18px rgba(0, 0, 0, 0.85),
    0 10px 28px -10px rgba(0, 0, 0, 0.65);
  font-family: 'JetBrains Mono', monospace;
  color: var(--paper);
  user-select: none;
}
.tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
  cursor: pointer;
}
.tp-title {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tp-title::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border: 1px solid rgba(245, 241, 232, 0.55);
}
.tp-toggle {
  background: transparent;
  border: 0;
  color: var(--paper-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s ease;
}
.tp-toggle:hover { color: var(--paper); }
.tp-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
  max-height: 400px;
}
.theme-panel.collapsed .tp-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.tp-group .tp-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 8px;
}
.tp-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-sw {
  flex: 1 1 28px;
  min-width: 28px;
  height: 24px;
  border-radius: 3px;
  background: var(--c, #fff);
  border: 1px solid rgba(245, 241, 232, 0.18);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.tp-sw:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 241, 232, 0.5);
}
.tp-sw.active {
  border-color: rgba(245, 241, 232, 0.95);
  box-shadow: 0 0 0 2px rgba(245, 241, 232, 0.18);
}
.tp-sw.active::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  pointer-events: none;
}

/* Special swatch styling for gradient/dual previews on the wall row */
.tp-sw.dual {
  background: linear-gradient(135deg, var(--c1) 0% 50%, var(--c2) 50% 100%);
}

/* Label-style swatch (for Shadow axis — visual shadow demo on a chip) */
.tp-sw.shadow-sw {
  background: rgba(245, 241, 232, 0.92);
  border-color: rgba(245, 241, 232, 0.25);
}
.tp-sw.shadow-sw[data-key="off"]    { box-shadow: none; }
.tp-sw.shadow-sw[data-key="soft"]   { box-shadow: 0 3px 6px -1px rgba(0,0,0,0.45); }
.tp-sw.shadow-sw[data-key="medium"] { box-shadow: 0 5px 10px -2px rgba(0,0,0,0.7); }
.tp-sw.shadow-sw[data-key="strong"] { box-shadow: 0 8px 16px -2px rgba(0,0,0,0.95), 0 0 20px -4px rgba(0,0,0,0.7); }
.tp-sw.shadow-sw[data-key="glow"]   { box-shadow: 0 0 14px 1px rgba(180,200,255,0.55), 0 3px 8px -1px rgba(0,0,0,0.4); }