/* ═══════════════════════════════════════════════════════════════════
   BrainstormRouter — Design System v5 (Swiss Precision)
   Aesthetic: Light, structured, one accent — typography does the work
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Light Surface Palette — clean neutral, no warm tint */
  --bg-light: #FAFAFA;
  --bg-light-raised: #FFFFFF;
  --bg-light-card: #FFFFFF;
  --bg-light-surface: #F0F0F0;
  --text-light: #0F172A;
  --text-light-2: #4B5563;
  --text-light-3: #9CA3AF;
  --border-light: #E5E7EB;
  --border-light-subtle: #EDEFF2;
  --border-light-hover: #D1D5DB;

  /* Dark Surface Palette — for terminal panels, code blocks, SVG diagrams */
  --bg: #050505;
  --bg-raised: #0a0a0e;
  --bg-card: #0e1018;
  --bg-surface: #131520;
  --bg-code: #080810;

  /* Dark Borders */
  --border: #1e2436;
  --border-subtle: #151a2a;
  --border-hover: #2a3148;

  /* Dark Text */
  --text: #e8e8ee;
  --text-2: #9494a8;
  --text-3: #5c5c72;
  --text-inv: #0a0e17;

  /* Accent — Electric Blue (Swiss Precision) */
  --accent: #0066FF;
  --accent-hover: #3385FF;
  --accent-dim: #004DCC;
  --accent-bg: rgba(0, 102, 255, 0.06);
  --accent-bg-light: rgba(0, 102, 255, 0.08);
  --accent-border: rgba(0, 102, 255, 0.15);
  --accent-border-light: rgba(0, 102, 255, 0.25);
  --accent-glow: rgba(0, 102, 255, 0.18);
  --accent-glow-strong: rgba(0, 102, 255, 0.35);

  /* Threat — Red */
  --threat: #DC2626;
  --threat-hover: #EF4444;
  --threat-dim: #B91C1C;
  --threat-bg: rgba(220, 38, 38, 0.06);
  --threat-border: rgba(220, 38, 38, 0.15);
  --threat-glow: rgba(220, 38, 38, 0.18);

  /* Status */
  --green: #16A34A;
  --red: #DC2626;
  --blue: #0066FF;

  /* Typography — Swiss: display sans + body sans + mono for code */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Layout */
  --max-w: 1320px;
  --max-w-sm: 720px;
  --max-w-xs: 540px;

  /* Radius — refined, not brutalist */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Banner offset — height of disclaimer banner */
  --banner-h: 28px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);
  background: var(--bg-light);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}

/* ── Grain Overlay (light sections only, applied via .grain class) ── */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}
/* Ambient warm glow on light sections */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(0, 102, 255, 0.04), transparent 60%),
              radial-gradient(ellipse 60% 50% at 70% 80%, rgba(0, 102, 255, 0.03), transparent 50%);
}

/* ── Typography ──────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(3.2rem, 7.5vw, 6rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}
h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
}
h4 {
  font-size: 1.35rem;
  font-weight: 600;
}
h5 {
  font-size: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  color: var(--text-light-2);
  max-width: 65ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
p + p {
  margin-top: var(--space-md);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-3);
}
.label-accent {
  color: var(--accent);
}

.subhead {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-light-2);
  max-width: 52ch;
}

.display-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--text-light);
}

.display-num-sm {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text-light);
}

/* ── Section Number Labels ─────────────────────────────────────── */
.section-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-lg);
}
.section-num::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.mono {
  font-family: var(--font-mono);
}
.accent {
  color: var(--accent);
}
.text-2 {
  color: var(--text-light-2);
}
.text-3 {
  color: var(--text-light-3);
}

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.container-sm {
  width: 100%;
  max-width: var(--max-w-sm);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.container-xs {
  width: 100%;
  max-width: var(--max-w-xs);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* ── Light/Dark Section System ─────────────────────────────────── */
.section-light {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0, 102, 255, 0.02), transparent 50%),
    var(--bg-light);
  color: var(--text-light);
  position: relative;
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5 {
  color: var(--text-light);
}
.section-light p {
  color: var(--text-light-2);
}
.section-light .label {
  color: var(--text-light-3);
}
.section-light .label-accent {
  color: var(--accent);
}
.section-light .text-2 {
  color: var(--text-light-2);
}
.section-light .text-3 {
  color: var(--text-light-3);
}
.section-light .subhead {
  color: var(--text-light-2);
}
.section-light .section-num {
  color: var(--accent);
}

.section-dark {
  background: #0B1426;
  color: #e8e8ee;
  position: relative;
}

.section {
  padding: var(--space-4xl) 0;
  position: relative;
}
.section-sm {
  padding: var(--space-3xl) 0;
}
.section-lg {
  padding: calc(var(--space-4xl) * 1.5) 0;
}

/* ── Pane Grid System ────────────────────────────────────────────── */
.pane {
  border: 1px solid var(--border);
  padding: var(--space-xl);
}

.terminal-grid {
  display: grid;
}

.pane-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.pane-split-55 {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0;
}

.pane-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.pane-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pane-quad > * + * {
  border-left: 1px solid var(--border);
}

/* ── Grid ────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}

/* ── Disclaimer Banner ───────────────────────────────────────────── */
.disclaimer-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: #070E1A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
  padding: 0.4rem var(--space-md);
  letter-spacing: 0.02em;
}
.disclaimer-banner .disclaimer-label {
  display: inline-block;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: var(--radius);
}
.disclaimer-banner a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 0.3rem;
}
.disclaimer-banner a:hover {
  color: var(--accent-hover);
}

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: var(--banner-h, 28px);
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  background: transparent;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s;
}
.nav.scrolled,
.nav-light {
  border-bottom-color: var(--border-light);
  background: rgba(250, 250, 250, 0.95);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.nav-brand {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav.scrolled .nav-brand,
.nav-light .nav-brand {
  color: var(--text-light);
}
.brand-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--accent);
  transition: stroke 0.3s;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nav-link:hover {
  color: #FFFFFF;
}
.nav-link.active {
  color: #FFFFFF;
}
.nav.scrolled .nav-link,
.nav-light .nav-link {
  color: var(--text-light-3);
}
.nav.scrolled .nav-link:hover,
.nav.scrolled .nav-link.active,
.nav-light .nav-link:hover,
.nav-light .nav-link.active {
  color: var(--text-light);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* Nav buttons on dark hero — white ghost border */
.nav .btn-ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
.nav .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}
.nav.scrolled .btn-ghost,
.nav-light .btn-ghost {
  border-color: var(--border-light);
  color: var(--text-light-2);
}
.nav.scrolled .btn-ghost:hover,
.nav-light .btn-ghost:hover {
  border-color: var(--border-light-hover);
  color: var(--text-light);
}

.mobile-cta {
  display: none;
}

.nav-toggle {
  display: none;
  width: 24px;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #FFFFFF;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.3s;
}
.nav.scrolled .nav-toggle span,
.nav-light .nav-toggle span {
  background: var(--text-light);
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-inv);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 102, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 102, 255, 0.25), 0 8px 32px rgba(0, 102, 255, 0.12);
  transform: translateY(-1px);
}

/* Ring pulse effect on primary CTA buttons */
.btn-ring {
  position: relative;
  overflow: visible;
}
.btn-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius) + 2px);
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ringPulse 2.5s ease-out infinite;
  filter: blur(0.5px);
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}
/* Second ring, delayed */
.btn-ring::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--accent);
  opacity: 0;
  animation: ringPulse 2.5s ease-out 1.25s infinite;
  filter: blur(1px);
}

.btn-ghost {
  border: 1px solid var(--border-light);
  color: var(--text-light-2);
}
.btn-ghost:hover {
  border-color: var(--border-light-hover);
  color: var(--text-light);
}

/* Light section button variants */
.section-light .btn-ghost {
  border-color: var(--border-light);
  color: var(--text-light-2);
}
.section-light .btn-ghost:hover {
  border-color: var(--border-light-hover);
  color: var(--text-light);
}

.btn-sm {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
}
.btn-lg {
  padding: 0.8rem 1.8rem;
  font-size: 0.9rem;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Light section cards — elevated with warm shadow */
.section-light .card {
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.02);
}
.section-light .card:hover {
  border-color: var(--border-light-hover);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06), 0 20px 60px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

/* Card with tilt effect — premium depth */
.card-tilt {
  background: linear-gradient(135deg, var(--bg-light-card), var(--bg-light-raised));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.15s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 12px 48px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}
.card-tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), transparent 40%, transparent 60%, rgba(0, 102, 255, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card-tilt:hover::before {
  opacity: 1;
}
.card-tilt:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 102, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Dark tilt card variant — with ambient glow */
.card-tilt-dark {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.15s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.card-tilt-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.4), transparent 50%, rgba(0, 102, 255, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card-tilt-dark:hover::before {
  opacity: 1;
}
.card-tilt-dark:hover {
  border-color: var(--border-hover);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 8px 48px rgba(0, 102, 255, 0.06), 0 0 0 1px rgba(0, 102, 255, 0.08);
}

.card-sm {
  padding: var(--space-lg);
}
.card-flush {
  padding: 0;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.card h4 {
  margin-bottom: var(--space-sm);
}
.card p {
  font-size: 0.82rem;
}

.card-link {
  display: block;
  text-decoration: none;
}
.card-link:hover .card {
  border-color: var(--accent-border);
}
.card-link:hover .card-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

.card-arrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-light-3);
  margin-top: var(--space-md);
  transition: all 0.2s;
}

/* ── Tags ────────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  color: var(--text-light-3);
}
.tag-accent {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-bg);
}

/* Light section tags */
.section-light .tag {
  border-color: var(--border-light);
  color: var(--text-light-3);
}
.section-light .tag-accent {
  border-color: var(--accent-border-light);
  color: var(--accent);
  background: var(--accent-bg-light);
}

/* ── Code Blocks ─────────────────────────────────────────────────── */
pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-2);
}
pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-light-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  color: var(--text-light);
}

/* Light section code */
.section-light code {
  background: var(--bg-light-surface);
  border-color: var(--border-light);
  color: var(--text-light);
}

/* Syntax colors */
.kw {
  color: #c084fc;
}
.fn {
  color: #60a5fa;
}
.str {
  color: #86efac;
}
.cm {
  color: #4a4a5e;
}
.num {
  color: #fbbf24;
}
.op {
  color: #94a3b8;
}
.var {
  color: #e8e8ee;
}
.type {
  color: #f472b6;
}
.prop {
  color: #7dd3fc;
}
.hl {
  color: var(--accent);
  background: var(--accent-bg);
}

/* ── Terminal Chrome ─────────────────────────────────────────────── */
.terminal-chrome {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.terminal-dots {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.terminal-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-hover);
}
.terminal-dots span:first-child {
  background: var(--red);
  opacity: 0.7;
}
.terminal-dots span:nth-child(2) {
  background: var(--accent);
  opacity: 0.7;
}
.terminal-dots span:nth-child(3) {
  background: var(--green);
  opacity: 0.7;
}
.terminal-chrome pre {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

table th,
table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-light-subtle);
}
table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light-3);
  background: var(--bg-light-surface);
}
table td {
  color: var(--text-light-2);
}
table tr:last-child td {
  border-bottom: none;
}
table tr:hover td {
  background: var(--bg-light-surface);
}

/* Light section tables */
.section-light .table-wrap {
  border-color: var(--border-light);
}
.section-light table th {
  color: var(--text-light-3);
  background: var(--bg-light-surface);
  border-bottom-color: var(--border-light);
}
.section-light table td {
  color: var(--text-light-2);
  border-bottom-color: var(--border-light-subtle);
}
.section-light table tr:hover td {
  background: var(--bg-light-surface);
}

.check {
  color: var(--green);
  font-weight: 700;
}
.cross {
  color: var(--text-light-3);
}
.partial {
  color: var(--accent);
}

/* ── Stats Grid ──────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-light);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.stat-item {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.stat-item + .stat-item {
  border-left: 1px solid var(--border-light);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-light);
  margin-bottom: var(--space-sm);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light-3);
}

/* ── Metrics Row (case studies) ──────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.metric {
  padding: var(--space-xl);
  background: var(--bg-light-card);
  text-align: center;
}
.metric-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.metric-label {
  font-size: 0.82rem;
  color: var(--text-light-2);
}

/* ── Dividers ────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-2xl) 0;
}
hr.section-divider {
  max-width: var(--max-w);
  margin: 0 auto;
  border-top-color: var(--border-light-subtle);
}
.divider-dot {
  text-align: center;
  color: var(--text-light-3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-xl) 0;
}

/* ── Hero (Dark — pointwild-inspired) ────────────────────────────── */
.hero {
  padding: calc(var(--space-2xl) + 80px + var(--banner-h)) 0 100px;
  position: relative;
  background: #0B1426;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hero > * {
  position: relative;
  z-index: 2;
}
.hero h1 {
  max-width: 16ch;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  color: #FFFFFF;
  text-shadow:
    0 2px 30px rgba(11, 20, 38, 1),
    0 0 80px rgba(11, 20, 38, 0.95),
    0 0 120px rgba(11, 20, 38, 0.6);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero .subhead {
  margin-bottom: var(--space-2xl);
  color: rgba(255, 255, 255, 0.85);
  text-shadow:
    0 2px 20px rgba(11, 20, 38, 1),
    0 0 60px rgba(11, 20, 38, 0.9);
  max-width: 44ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.65;
}
.hero .label {
  color: rgba(255, 255, 255, 0.5);
}
.hero .label-accent {
  color: var(--accent);
}
.hero-actions {
  display: flex;
  gap: var(--space-md);
}
.hero-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
.hero-actions .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

/* Hero layout — text centered over full-width signal path */
.hero .hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Dot-Grid Hero Background — subtle on dark */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0.6px, transparent 0.6px);
  background-size: 24px 24px;
  z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 70%);
}

/* ── Hero Glow ────────────────────────────────────────────────────── */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.hero:hover .hero-glow {
  opacity: 1;
}

/* ── Signal Path (Full-width Hero Visualization) ─────────────────── */
.signal-path {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.signal-svg {
  width: 100%;
  height: 100%;
  opacity: 0.55;
  transform: translateX(25%);
}
.sig-checkpoint rect {
  animation: sigCheck 3s ease-in-out infinite;
}
@keyframes sigCheck {
  0%, 100% { fill: #0d1117; }
  50% { fill: rgba(0, 102, 255, 0.2); }
}

/* Glass stats bar — positioned beneath the router hub */
.signal-stats {
  position: absolute;
  top: 62%;
  right: 4%;
  transform: translateX(0);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 20px;
  background: rgba(13, 20, 38, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 102, 255, 0.2);
  border-radius: 8px;
  z-index: 4;
}
.signal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
}
.signal-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
}
.signal-stat-val {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.signal-stat-model {
  color: var(--accent);
  font-size: 0.75rem;
}
.signal-stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Hero text block positioning */
.hero-text-block {
  max-width: 700px;
  position: relative;
  z-index: 3;
  padding: 0;
}
.hero-text-block h1,
.hero-text-block .hero-eyebrow,
.hero-text-block p {
  text-shadow:
    0 2px 24px rgba(11, 20, 38, 1),
    0 0 80px rgba(11, 20, 38, 0.8);
}
.hero-text-block .hero-ctas {
  position: relative;
  z-index: 4;
}

/* ── Pipeline Visualizer ─────────────────────────────────────────── */
.pipeline-section {
  position: relative;
  min-height: 300vh;
  background: var(--bg-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.pipeline-sticky {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  display: grid;
  grid-template-columns: 280px 1fr;
  overflow: hidden;
}
.pipeline-sidebar {
  border-right: 1px solid var(--border-light);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  position: relative;
}
.pipeline-stage-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light-3);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition:
    color 0.3s,
    background 0.3s;
  cursor: default;
  border-radius: var(--radius);
}
.pipeline-stage-label .stage-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-light-3);
  min-width: 2ch;
  transition: color 0.3s;
}
.pipeline-stage-label.active {
  color: var(--text-light);
  background: var(--bg-light-raised);
}
.pipeline-stage-label.active .stage-num {
  color: var(--accent);
}

.pipeline-trace {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 3px;
}
.pipeline-trace-line {
  width: 100%;
  height: 100%;
}
.pipeline-trace-bg {
  stroke: var(--border-light);
}
.pipeline-trace-progress {
  stroke: var(--accent);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.3s;
  filter: drop-shadow(0 0 3px var(--accent));
}
.pipeline-trace-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 10px var(--accent));
  transition: cy 0.3s;
}

.pipeline-content {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pipeline-panel {
  display: none;
  animation: panelFade 0.4s ease;
}
.pipeline-panel.active {
  display: block;
}
.pipeline-panel h3 {
  margin-bottom: var(--space-md);
  color: var(--text-light);
}
.pipeline-panel p {
  margin-bottom: var(--space-lg);
  color: var(--text-light-2);
}
.pipeline-panel .section-num {
  color: var(--text-light-3);
}
.pipeline-panel .terminal-chrome {
  max-width: 640px;
}

@keyframes panelFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pipeline-sentinels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.pipeline-sentinel {
  position: absolute;
  width: 1px;
  height: 20vh;
}
.pipeline-sentinel:nth-child(1) {
  top: 0;
}
.pipeline-sentinel:nth-child(2) {
  top: 20%;
}
.pipeline-sentinel:nth-child(3) {
  top: 40%;
}
.pipeline-sentinel:nth-child(4) {
  top: 60%;
}
.pipeline-sentinel:nth-child(5) {
  top: 80%;
}

/* ── Moat Feature Sections (Light) ─────────────────────────────── */
.moat-section {
  background: var(--bg-light);
  position: relative;
}

.moat-block {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.moat-block-reversed {
  direction: rtl;
}
.moat-block-reversed > * {
  direction: ltr;
}

.moat-text h3 {
  margin-bottom: var(--space-md);
  color: var(--text-light);
}
.moat-text p {
  margin-bottom: var(--space-lg);
  color: var(--text-light-2);
}
.moat-text ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.moat-text ul li {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-light-2);
  padding-left: var(--space-lg);
  position: relative;
}
.moat-text ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.moat-visual {
  background: var(--bg);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 102, 255, 0.04);
}
.moat-visual img {
  max-width: 100%;
  height: auto;
  opacity: 0.8;
}
.moat-visual pre {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
}

/* ── Vision Teaser ───────────────────────────────────────────────── */
.vision-section {
  background: #0B1426;
  padding: var(--space-4xl) var(--space-xl);
  position: relative;
  overflow: hidden;
}
.vision-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(circle, rgba(0, 102, 255, 0.2) 0.6px, transparent 0.6px);
  background-size: 32px 32px;
}
.vision-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.vision-inner .tag {
  margin-bottom: var(--space-md);
}
.vision-inner h3 {
  color: #FFFFFF;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
}
.vision-inner > p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 60ch;
  margin: 0 auto var(--space-2xl);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.6;
}
/* Legacy .vision-pane compat */
.vision-pane {
  border: 2px dashed var(--border-light-hover);
  border-style: dashed;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.vision-pane h3 {
  margin-bottom: var(--space-md);
}
.vision-pane .tag {
  margin-bottom: var(--space-lg);
}

/* ── Ticker Bar (Competitive Positioning) ────────────────────────── */
.ticker-bar {
  background: var(--bg-light-raised);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}
.ticker-bar .pane-trio {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.ticker-item {
  padding: var(--space-lg);
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.ticker-item strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: var(--space-xs);
}
.ticker-item span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-light-2);
  line-height: 1.6;
}

/* ── CTA Section (Dark — dramatic) ───────────────────────────────── */
.cta-section {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  background: #0B1426;
  position: relative;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 102, 255, 0.08), transparent 70%);
  pointer-events: none;
}
.cta-section > * {
  position: relative;
  z-index: 1;
}
.cta-section h2 {
  margin: 0 auto var(--space-md);
  color: #FFFFFF;
}
.cta-section p {
  margin: 0 auto var(--space-xl);
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
.cta-cmd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.6rem 1.2rem;
  margin-top: var(--space-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.cta-cmd .accent {
  color: var(--accent);
}

/* ── Steps ───────────────────────────────────────────────────────── */
.steps {
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  counter-increment: step;
}
.step + .step {
  border-top: 1px solid var(--border-subtle);
}
.step-num {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-bg);
}
.step-num::before {
  content: counter(step);
}

/* ── Pricing ─────────────────────────────────────────────────────── */
.price-card {
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.03);
}
.price-card:hover {
  border-color: var(--border-light-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.price-card.featured {
  border-color: var(--accent-border-light);
  box-shadow: 0 0 0 1px var(--accent-border-light), 0 8px 32px rgba(0, 102, 255, 0.12);
  background: linear-gradient(135deg, var(--bg-light-card), rgba(0, 102, 255, 0.02));
}
.price-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin: var(--space-lg) 0;
  color: var(--text-light);
}
.price-period {
  font-size: 0.82rem;
  color: var(--text-light-3);
}
.price-features {
  margin-top: var(--space-xl);
  flex: 1;
}
.price-features li {
  padding: var(--space-sm) 0;
  font-size: 0.82rem;
  color: var(--text-light-2);
  border-bottom: 1px solid var(--border-light-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.price-features li::before {
  content: ">";
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

/* Light section pricing — elevated */
.section-light .price-card {
  background: var(--bg-light-card);
  border-color: var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.03);
}
.section-light .price-card:hover {
  border-color: var(--border-light-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.section-light .price-card.featured {
  border-color: var(--accent-border-light);
  box-shadow: 0 0 0 1px var(--accent-border-light), 0 8px 32px rgba(0, 102, 255, 0.12), 0 16px 64px rgba(0, 102, 255, 0.06);
  background: linear-gradient(135deg, var(--bg-light-card), rgba(0, 102, 255, 0.02));
}
.section-light .price-amount {
  color: var(--text-light);
}
.section-light .price-period {
  color: var(--text-light-3);
}
.section-light .price-features li {
  color: var(--text-light-2);
  border-bottom-color: var(--border-light-subtle);
}

/* ── Case Study Page ─────────────────────────────────────────────── */
.case-hero {
  padding: calc(var(--space-4xl) + 60px) 0 var(--space-3xl);
}
.case-hero h1 {
  max-width: 20ch;
  margin: var(--space-lg) 0;
}

.case-body {
  max-width: var(--max-w-sm);
}
.case-body h2 {
  margin: var(--space-2xl) 0 var(--space-lg);
}
.case-body h3 {
  margin: var(--space-xl) 0 var(--space-md);
  font-size: 1.3rem;
}
.case-body p {
  font-size: 0.88rem;
  line-height: 1.8;
  margin-bottom: var(--space-md);
}
.case-body pre {
  margin: var(--space-lg) 0;
}
.case-body .table-wrap {
  margin: var(--space-lg) 0;
}

.case-sidebar {
  position: sticky;
  top: calc(60px + var(--space-xl));
}

.back-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-light-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: color 0.2s;
}
.back-link:hover {
  color: var(--accent);
}

/* ── Footer (Dark — matches hero) ────────────────────────────────── */
.footer {
  border-top: none;
  padding: var(--space-3xl) 0 var(--space-xl);
  background: #0B1426;
  color: rgba(255, 255, 255, 0.7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}
.footer-brand {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
}
.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 30ch;
  line-height: 1.6;
}
.footer-col h6 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-md);
}
.footer-col a {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.3rem 0;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: #FFFFFF;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Page Header (internal pages) — light by default ─────────────── */
.page-header {
  padding: calc(var(--space-4xl) + 60px + var(--banner-h)) 0 var(--space-2xl);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}
.page-header .label {
  margin-bottom: var(--space-md);
}
.page-header h1 {
  margin-bottom: var(--space-md);
  color: var(--text-light);
}
.page-header p {
  font-size: 0.95rem;
  color: var(--text-light-2);
}

/* Light page header */
.page-header.page-header-light {
  background: var(--bg-light);
  border-bottom-color: var(--border-light);
}
.page-header.page-header-light h1 {
  color: var(--text-light);
}
.page-header.page-header-light p {
  color: var(--text-light-2);
}

/* ── ASCII Diagram ───────────────────────────────────────────────── */
.ascii {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-3);
  white-space: pre;
  overflow-x: auto;
  padding: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ascii .hl {
  color: var(--accent);
}
.ascii .hl2 {
  color: var(--green);
}
.ascii .hl3 {
  color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cascade Reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* Legacy fade-in (still used on some sub-pages) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
.delay-4 {
  animation-delay: 0.4s;
}
.delay-5 {
  animation-delay: 0.5s;
}

/* ── Card Float (breathing) ──────────────────────────────────────── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.card-float {
  animation: cardFloat 4s ease-in-out infinite;
}
.card-float:nth-child(2) { animation-delay: 0.5s; }
.card-float:nth-child(3) { animation-delay: 1s; }

/* ── Scroll-driven animation for Chromium ────────────────────────── */
@supports (animation-timeline: scroll()) {
  .pipeline-trace-progress {
    animation: traceReveal linear;
    animation-timeline: scroll();
    animation-range: entry 0% exit 100%;
    stroke-dashoffset: 0;
  }
  @keyframes traceReveal {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
}

/* ── Boot Screen ────────────────────────────────────────────────── */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0B1426;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  animation: bootFadeOut 0.4s ease 0.5s forwards;
}
.boot-screen span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.boot-screen .boot-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent);
  animation: cursorBlink 0.6s step-end infinite;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes bootFadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ── Terminal Cursor Blink ──────────────────────────────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.terminal-chrome pre code::after {
  content: "█";
  color: var(--accent);
  animation: cursorBlink 1s step-end infinite;
  font-size: 0.75em;
}

/* ── Hero Typing Effect ─────────────────────────────────────────── */
.typing-target {
  min-height: 1.4em;
}
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  animation: cursorBlink 0.7s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}

/* ── Pulsing Status Dots ────────────────────────────────────────── */
@keyframes statusPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: statusPulse 2s ease-in-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}
.stat-label .status-dot {
  margin-right: 4px;
}

/* ── Model Ticker Marquee ───────────────────────────────────────── */
.model-ticker {
  overflow: hidden;
  background: #0B1426;
  border-top: 1px solid rgba(0, 102, 255, 0.15);
  border-bottom: 1px solid rgba(0, 102, 255, 0.15);
  padding: var(--space-lg) 0;
  position: relative;
}
.model-ticker::before,
.model-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.model-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #0B1426 20%, transparent);
}
.model-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #0B1426 20%, transparent);
}
.ticker-track {
  display: flex;
  gap: var(--space-xl);
  animation: tickerScroll 30s linear infinite;
  width: max-content;
}
.ticker-model {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.ticker-model .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(22, 163, 74, 0.4);
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Blast Radius Section ───────────────────────────────────────── */
.blast-radius {
  padding: var(--space-4xl) var(--space-xl);
  max-width: var(--max-w);
  margin: 0 auto;
}
.blast-radius .section-num,
.blast-radius h3 {
  text-align: center;
  justify-content: center;
}
.blast-radius h3 {
  margin-bottom: var(--space-xl);
}
.blast-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.blast-col {
  padding: var(--space-xl);
  border: 1px solid var(--border-light);
  background: var(--bg-light-card);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.blast-col::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.blast-col.danger {
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 4px 24px rgba(239, 68, 68, 0.06), 0 1px 3px rgba(239, 68, 68, 0.04);
}
.blast-col.danger::after {
  background: linear-gradient(90deg, var(--red), rgba(239, 68, 68, 0.3));
}
.blast-col.safe {
  border-color: rgba(34, 197, 94, 0.2);
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.06), 0 1px 3px rgba(34, 197, 94, 0.04);
}
.blast-col.safe::after {
  background: linear-gradient(90deg, var(--green), rgba(34, 197, 94, 0.3));
}
.blast-col h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-lg);
}
.blast-col.danger h4 { color: var(--red); }
.blast-col.safe h4 { color: var(--green); }
.blast-step {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-light-2);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.blast-step:last-child { border-bottom: none; }
.blast-step .step-icon {
  flex-shrink: 0;
  font-size: 0.7rem;
  line-height: 1.7;
}
.blast-col.danger .step-icon { color: var(--red); }
.blast-col.safe .step-icon { color: var(--green); }

/* ── Kill Switch Demo ───────────────────────────────────────────── */
.kill-switch {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.kill-switch h3 { margin-bottom: var(--space-md); color: var(--text-light); }
.kill-switch > p { margin: 0 auto var(--space-xl); text-align: center; color: var(--text-light-2); }
.kill-switch .section-num { color: var(--text-light-3); }
.kill-switch-terminal {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.kill-switch-terminal pre {
  min-height: 200px;
}
.ks-token { transition: color 0.1s; }
.ks-redacted { color: var(--red); text-decoration: line-through; }
.ks-severed {
  color: var(--red);
  font-weight: 700;
  animation: severFlash 0.3s ease;
}
@keyframes severFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.ks-quarantined {
  display: inline-block;
  color: var(--bg);
  background: var(--red);
  padding: 0 4px;
  font-weight: 700;
  animation: severFlash 0.5s ease;
  border-radius: 2px;
}

/* ── Manifesto Teaser (legacy, kept for compat) ────────────────── */
.manifesto-teaser {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}
.manifesto-teaser blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-light);
  max-width: 50ch;
  margin: 0 auto var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
  border-left: 3px solid var(--accent);
  border-right: none;
  text-align: left;
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.04), transparent 50%);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.manifesto-teaser blockquote em {
  color: var(--accent);
  font-style: normal;
}
.manifesto-teaser .label { margin-bottom: var(--space-lg); }

/* ── Manifesto Breakout (full-width, dark) ─────────────────────── */
.manifesto-breakout {
  background: #0A0F1A;
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  width: 100%;
}
.manifesto-breakout-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.manifesto-breakout-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  max-width: 42ch;
  margin: 0 auto var(--space-xl);
  border: none;
  padding: 0;
}

/* ── Animated Stat Counters ─────────────────────────────────────── */
.stat-value[data-target] {
  font-variant-numeric: tabular-nums;
}

/* ── Manifesto Page ─────────────────────────────────────────────── */
.manifesto-body {
  max-width: var(--max-w-sm);
  margin: 0 auto;
  padding: calc(var(--space-4xl) + 60px) var(--space-xl) var(--space-4xl);
}
.manifesto-body h1 {
  margin-bottom: var(--space-lg);
}
.manifesto-body h2 {
  margin: var(--space-2xl) 0 var(--space-lg);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}
.manifesto-body p {
  font-size: 0.88rem;
  line-height: 1.85;
  margin-bottom: var(--space-md);
}
.manifesto-body strong {
  color: var(--text-light);
}
.manifesto-body em {
  color: var(--text-light-2);
}
.manifesto-body hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-2xl) 0;
}
.manifesto-body .lead {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-light-2);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* ── Code Hover Highlights ──────────────────────────────────────── */
.terminal-chrome .hl,
.terminal-chrome .str,
.terminal-chrome .num,
.terminal-chrome .fn,
.terminal-chrome .prop {
  transition: text-shadow 0.2s, filter 0.2s;
}
.terminal-chrome .hl:hover {
  text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
}
.terminal-chrome .str:hover {
  text-shadow: 0 0 8px #86efac, 0 0 16px #86efac;
}
.terminal-chrome .num:hover {
  text-shadow: 0 0 8px #fbbf24, 0 0 16px #fbbf24;
}
.terminal-chrome .fn:hover {
  text-shadow: 0 0 8px #60a5fa, 0 0 16px #60a5fa;
}
.terminal-chrome .prop:hover {
  text-shadow: 0 0 8px #7dd3fc, 0 0 16px #7dd3fc;
}

/* ── Section Transition Gradient — atmospheric blend ────────────── */
.transition-light-to-dark {
  height: 160px;
  background: linear-gradient(180deg, var(--bg-light) 0%, #D1D5DB 25%, #4B5563 50%, #1A2744 75%, #0B1426 100%);
  position: relative;
}
.transition-light-to-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0, 102, 255, 0.06), transparent 60%);
  pointer-events: none;
}
.transition-dark-to-light {
  height: 160px;
  background: linear-gradient(180deg, #0B1426 0%, #1A2744 25%, #4B5563 50%, #D1D5DB 75%, var(--bg-light) 100%);
  position: relative;
}
.transition-dark-to-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 102, 255, 0.06), transparent 60%);
  pointer-events: none;
}

/* ── Utility ─────────────────────────────────────────────────────── */
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-3xl {
  margin-top: var(--space-3xl);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.full-width {
  width: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pane-trio {
    grid-template-columns: 1fr 1fr;
  }
  .pane-trio > :nth-child(3) {
    grid-column: span 2;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item:nth-child(2) {
    border-left: 1px solid var(--border-light);
  }
  .stat-item:nth-child(3) {
    border-top: 1px solid var(--border-light);
    border-left: none;
  }
  .stat-item:nth-child(4) {
    border-top: 1px solid var(--border-light);
  }
  .pipeline-sticky {
    grid-template-columns: 1fr;
  }
  .pipeline-sidebar {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .signal-stats {
    padding: 8px 12px;
    gap: 0;
    top: auto;
    bottom: 4%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .signal-stat { padding: 0 10px; }
  .signal-stat-val { font-size: 0.7rem; }
  .signal-stat-model { font-size: 0.6rem; }
  .signal-svg { opacity: 0.25; margin-left: 0; width: 100%; transform: translateX(0); }
  .moat-block {
    grid-template-columns: 1fr;
  }
  .moat-block-reversed {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 1.5rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3.5rem;
    --space-4xl: 5rem;
  }
  .container,
  .container-sm {
    padding: 0 var(--space-lg);
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .pane-split,
  .pane-split-55 {
    grid-template-columns: 1fr;
  }
  .pane-trio {
    grid-template-columns: 1fr;
  }
  .pane-quad {
    grid-template-columns: repeat(2, 1fr);
  }
  .pane-quad > :nth-child(3),
  .pane-quad > :nth-child(4) {
    border-top: 1px solid var(--border-light);
  }
  .pane-quad > :nth-child(3) {
    border-left: none;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metrics {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-links {
    display: none;
  }
  .nav-right .btn {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
    z-index: 100;
  }
  /* Backdrop overlay when mobile nav is open */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9;
  }
  .nav-backdrop.open {
    display: block;
  }
  .nav-links .mobile-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
  }
  /* Terminal overflow on narrow viewports */
  .terminal-chrome pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Hero CTA minimum touch targets */
  .hero-actions .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .pipeline-section {
    min-height: auto;
  }
  .pipeline-sticky {
    position: relative;
    top: 0;
    height: auto;
    grid-template-columns: 1fr;
  }
  .pipeline-sidebar {
    display: none;
  }
  .pipeline-panel {
    display: block;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--border-light);
  }
  /* Show stage header on mobile since sidebar is hidden */
  .pipeline-panel .section-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-sm);
  }
  .pipeline-panel + .pipeline-panel {
    border-top: 1px solid var(--border-light);
  }
  .pipeline-content {
    padding: var(--space-lg);
  }
  /* SVG diagrams should scroll horizontally, not overflow */
  .pipeline-panel svg {
    max-width: 100%;
    height: auto;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  .step {
    grid-template-columns: 1fr;
  }
  .step-num {
    margin-bottom: var(--space-sm);
  }
  .case-layout {
    grid-template-columns: 1fr !important;
  }
  .case-sidebar {
    position: static;
  }
  .blast-columns {
    grid-template-columns: 1fr;
  }
  /* Disable ambient SVG and card breathe on mobile */
  .ambient-svg { display: none; }
  .card-breathe { animation: none; }
  .card-cursor-glow .cursor-glow { display: none; }
  .ship-timeline-item { flex: 0 0 180px; }
  .manifesto-teaser blockquote {
    font-size: 1rem;
    padding: var(--space-lg);
  }
  .transition-light-to-dark,
  .transition-dark-to-light {
    height: 60px;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .boot-screen { animation: none; opacity: 0; visibility: hidden; }
  .ticker-track { animation: none; }
  .terminal-chrome pre code::after { animation: none; }
  .status-dot { animation: none; opacity: 0.8; }
  .typing-cursor { animation: none; opacity: 1; }
  .card-float { animation: none; }
  .card-breathe { animation: none; }
  .ambient-svg { display: none; }
  .card-glow-border::after { animation: none; }
  .lifecycle-node-active { animation: none; }
  .lifecycle-arrow { animation: none; }
  .thompson-bar { animation: none; width: auto; }
  .cert-flow-path { animation: none; }
  .btn-ring::after { animation: none; display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  body::after { display: none; }
  .pipeline-trace-dot { filter: none; }
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  body {
    background: #fff;
    color: #111;
  }
  body::before {
    display: none;
  }
  .nav,
  .footer {
    display: none;
  }
  pre {
    border-color: #ddd;
  }
  .card {
    border-color: #ddd;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Gradient Borders, Card Glow, Ambient Motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── Gradient Border on Card Hover ────────────────────────────────── */
.card-glow-border {
  position: relative;
  overflow: hidden;
}
.card-glow-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(0, 102, 255, 0.5),
    rgba(0, 102, 255, 0.1) 30%,
    transparent 50%,
    rgba(0, 102, 255, 0.1) 70%,
    rgba(0, 102, 255, 0.4)
  );
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  animation: gradientShift 3s ease infinite paused;
}
.card-glow-border:hover::after {
  opacity: 1;
  animation-play-state: running;
}
@keyframes gradientShift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ── Card Cursor Glow ─────────────────────────────────────────────── */
.card-cursor-glow {
  position: relative;
  overflow: hidden;
}
.card-cursor-glow .cursor-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.08), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.card-cursor-glow:hover .cursor-glow {
  opacity: 1;
}
.card-cursor-glow > *:not(.cursor-glow) {
  position: relative;
  z-index: 1;
}

/* ── Continuous Card Float/Breathe ────────────────────────────────── */
@keyframes cardBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.card-breathe {
  animation: cardBreathe 5s ease-in-out infinite;
}
.card-breathe:nth-child(2) { animation-delay: 0.8s; animation-duration: 5.5s; }
.card-breathe:nth-child(3) { animation-delay: 1.6s; animation-duration: 4.5s; }
.card-breathe:hover {
  animation-play-state: paused;
}

/* ── Ambient SVG Animations ───────────────────────────────────────── */
.ambient-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Pulsing nodes */
@keyframes nodePulse {
  0%, 100% { r: 3; opacity: 0.3; }
  50% { r: 5; opacity: 0.7; }
}
.ambient-svg .pulse-node {
  fill: var(--accent);
  animation: nodePulse 3s ease-in-out infinite;
}
.ambient-svg .pulse-node:nth-child(2) { animation-delay: 0.8s; animation-duration: 2.5s; }
.ambient-svg .pulse-node:nth-child(3) { animation-delay: 1.6s; animation-duration: 3.5s; }
.ambient-svg .pulse-node:nth-child(4) { animation-delay: 2.4s; animation-duration: 2.8s; }

/* Expanding rings */
@keyframes ringExpand {
  0% { r: 4; opacity: 0.6; stroke-width: 1.5; }
  100% { r: 40; opacity: 0; stroke-width: 0.5; }
}
.ambient-svg .expanding-ring {
  fill: none;
  stroke: var(--accent);
  animation: ringExpand 4s ease-out infinite;
}
.ambient-svg .expanding-ring:nth-child(2) { animation-delay: 1.3s; }
.ambient-svg .expanding-ring:nth-child(3) { animation-delay: 2.6s; }

/* Data flow lines */
@keyframes dataFlow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
.ambient-svg .data-flow {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  fill: none;
  opacity: 0.3;
  animation: dataFlow 2s linear infinite;
}

/* Breathing core */
@keyframes coreBreath {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.ambient-svg .breathing-core {
  fill: var(--accent);
  opacity: 0.4;
  transform-origin: center;
  animation: coreBreath 3s ease-in-out infinite;
}

/* ── Status Indicator Pulse (enhanced) ────────────────────────────── */
@keyframes statusLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(0, 102, 255, 0); }
}
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: statusLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Ship Log Timeline ────────────────────────────────────────────── */
.ship-timeline {
  position: relative;
  padding: var(--space-4xl) 0;
  max-width: var(--max-w);
  margin: 0 auto;
}
.ship-timeline-inner {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ship-timeline-inner::-webkit-scrollbar { display: none; }
.ship-timeline-item {
  flex: 0 0 220px;
  scroll-snap-align: start;
  padding: var(--space-lg);
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
.ship-timeline-item:hover {
  border-color: var(--accent-border-light);
  transform: translateY(-2px);
}
.ship-timeline-item::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-light);
  z-index: 2;
}
.ship-timeline-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}
.ship-timeline-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.ship-timeline-desc {
  font-size: 0.72rem;
  color: var(--text-light-3);
  line-height: 1.5;
}
/* Timeline track line */
.ship-timeline-track {
  position: absolute;
  top: calc(var(--space-4xl) + var(--space-xl) - 2px);
  left: var(--space-xl);
  right: var(--space-xl);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-border-light), var(--border-light));
  z-index: 1;
}

/* ── Feature Section Variants (unique visual treatment per section) ── */

/* CAF Section — cryptographic feel */
.section-caf {
  position: relative;
  overflow: hidden;
}
.section-caf::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(0, 102, 255, 0.02) 60px,
      rgba(0, 102, 255, 0.02) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(0, 102, 255, 0.02) 60px,
      rgba(0, 102, 255, 0.02) 61px
    );
  pointer-events: none;
  z-index: 0;
}
.section-caf > * { position: relative; z-index: 1; }

/* ARM Section — financial/ledger feel */
.section-arm .moat-visual {
  background: linear-gradient(135deg, var(--bg), rgba(0, 102, 255, 0.03));
}

/* Firewall Section — defensive feel */
.section-firewall .moat-visual {
  border-color: rgba(239, 68, 68, 0.15);
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.06), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Agent Lifecycle SVG Animation ────────────────────────────────── */
@keyframes nodeGlow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--accent)); }
  50% { filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px var(--accent)); }
}
.lifecycle-node-active {
  animation: nodeGlow 2s ease-in-out infinite;
}

@keyframes arrowFlow {
  0% { stroke-dashoffset: 16; }
  100% { stroke-dashoffset: 0; }
}
.lifecycle-arrow {
  stroke-dasharray: 4 4;
  animation: arrowFlow 1s linear infinite;
}

/* ── Thompson Sampling Bar Animation ──────────────────────────────── */
@keyframes barGrow {
  from { width: 0; }
}
.thompson-bar {
  height: 24px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 0 var(--radius) var(--radius) 0;
  animation: barGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
}
.thompson-bar::after {
  content: attr(data-weight);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-inv);
  font-weight: 600;
}

/* ── Certificate Flow Animation ───────────────────────────────────── */
@keyframes certFlow {
  0% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.cert-flow-path {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 8 4;
  fill: none;
  animation: certFlow 3s ease-in-out infinite;
}

/* ── Structured Data / Schema.org ─────────────────────────────────── */

/* ── Legacy observe support (sub-pages) ──────────────────────────── */
.observe {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.observe.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   Product Showcase — Tabbed Moat Surfaces
   CSS-only tab switching using radio buttons + :checked selectors
   ═══════════════════════════════════════════════════════════════════ */

.showcase-section {
  padding: var(--space-3xl) var(--space-xl);
}

.showcase-container {
  max-width: 960px;
  margin: 0 auto;
}

.showcase-tabs {
  position: relative;
}

.showcase-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.showcase-tab-label {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0 0.25rem 0.75rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.showcase-tab-label:hover {
  color: var(--text);
  border-color: var(--border-hover);
}

/* Active tab */
.showcase-radio:checked + .showcase-tab-label {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

/* Panels — hidden by default, shown via :checked sibling combinator */
.showcase-panel {
  display: none;
  opacity: 0;
  animation: showcase-fadein 0.4s ease forwards;
}

@keyframes showcase-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Each radio controls its corresponding panel via nth-of-type */
#sc-firewall:checked ~ .showcase-panel[data-tab="firewall"],
#sc-anomaly:checked ~ .showcase-panel[data-tab="anomaly"],
#sc-mesh:checked ~ .showcase-panel[data-tab="mesh"],
#sc-delegation:checked ~ .showcase-panel[data-tab="delegation"] {
  display: block;
  opacity: 1;
}

.showcase-visual {
  position: relative;
  border-radius: 12px;
  overflow: visible;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.showcase-screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Fallback when screenshot doesn't exist yet */
.showcase-screenshot[src$=".webp"]:not([src=""]) {
  min-height: 300px;
  object-fit: cover;
}

/* Annotation overlays */
.showcase-annotation {
  position: absolute;
  z-index: 2;
  max-width: 260px;
}

.showcase-annotation-card {
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.showcase-annotation-card strong {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}

.showcase-annotation-card span {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.35;
}

/* Pulse dot on annotation cards */
.showcase-annotation-card::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: showcase-pulse 2s ease-in-out infinite;
}

@keyframes showcase-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--accent); }
  50% { opacity: 0.3; box-shadow: none; }
}

/* ── Showcase Composition — animated demo containers ────────────── */

.showcase-composition {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;          /* float cards extend beyond */
  container-type: inline-size;
  padding-bottom: 12px;       /* breathing room at bottom */
}

.showcase-composition svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Gradient blob atmosphere behind showcase section */
.showcase-blob {
  position: relative;
}

.showcase-blob::before {
  content: "";
  position: absolute;
  inset: -120px -80px;
  background: radial-gradient(ellipse 600px 400px at 30% 40%, rgba(0, 102, 255, 0.08), transparent 70%),
              radial-gradient(ellipse 500px 350px at 70% 60%, rgba(0, 102, 255, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.showcase-blob > * {
  position: relative;
  z-index: 1;
}

/* Floating overlay cards — glassmorphism + depth */
.showcase-float-card {
  position: absolute;
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10;
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

.showcase-float-card strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.showcase-float-card .fc-accent {
  color: var(--accent);
}

.showcase-float-card .fc-red {
  color: var(--threat);
}

.showcase-float-card .fc-green {
  color: var(--green);
}

.showcase-float-card .fc-amber {
  color: #F59E0B;
}

/* Float card reveal — triggered by .svg-active on parent */
.svg-active .showcase-float-card,
.showcase-composition.svg-active .showcase-float-card {
  animation-name: floatCardIn;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes floatCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Monospace chip label */
.showcase-mono-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
}

/* ── Showcase demo-specific keyframes ──────────────────────────── */

/* Request log cascade slide-in */
@keyframes logSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Packet traveling along pipeline */
@keyframes packetTravel {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: 1; }
  65%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Gauge arc fill */
@keyframes arcFill {
  from { stroke-dashoffset: var(--arc-length, 226); }
  to   { stroke-dashoffset: var(--arc-target, 63); }
}

/* Signal bar width grow */
@keyframes barFillWidth {
  from { width: 0; }
}

/* Trust badge color pulse */
@keyframes trustShift {
  0%, 70%  { background: rgba(22, 163, 74, 0.15); color: var(--green); border-color: rgba(22, 163, 74, 0.3); }
  85%, 100% { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border-color: rgba(245, 158, 11, 0.3); }
}

/* Staggered checkmark reveal */
@keyframes checkReveal {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Node fade-in for mesh */
@keyframes nodeFadeIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Connection line draw */
@keyframes lineDraw {
  from { stroke-dashoffset: var(--line-length, 200); }
  to   { stroke-dashoffset: 0; }
}

/* Budget bar shrink/grow */
@keyframes budgetShrink {
  from { width: 100%; }
  to   { width: 75%; }
}

@keyframes budgetGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* Connector line draw-on */
@keyframes connectorDraw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* ── Showcase pipeline step cards ────────────────────────────────── */

.sc-pipeline {
  display: flex;
  gap: 2px;
  padding: 12px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;      /* hide scrollbar on firefox */
}

.sc-pipeline::-webkit-scrollbar {
  display: none;              /* hide scrollbar on webkit */
}

.sc-step {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-2);
  transition: opacity 0.3s ease, border-color 0.3s ease;
  line-height: 1.2;
  min-width: 0;
}

.sc-step-num {
  display: block;
  font-size: 0.5rem;
  color: var(--text-3);
  margin-bottom: 2px;
}

.sc-step.active {
  border-color: var(--accent-border);
  color: var(--accent);
}

.sc-step.blocked {
  border-color: var(--threat-border);
  color: var(--threat);
}

.sc-step.dimmed {
  opacity: 0.3;
}

/* Pipeline connector SVG between steps */
.sc-pipeline-track {
  position: relative;
  height: 24px;
  margin: 0 16px;
}

.sc-pipeline-track svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Packet dot */
.sc-packet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow-strong);
  position: absolute;
  top: 8px;
  left: 0;
}

.svg-active .sc-packet {
  animation: packetTravel 4s ease-in-out forwards;
  offset-path: path("M 0,0 L var(--track-width, 800),0");
}

/* Request log cascade */
.sc-log {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  border-top: 1px solid var(--border-subtle);
}

.sc-log-row {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  color: var(--text-2);
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
}

.svg-active .sc-log-row {
  animation-name: logSlideIn;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.sc-log-row .log-method {
  color: var(--accent);
  min-width: 36px;
}

.sc-log-row .log-model {
  color: var(--text);
}

.sc-log-row .log-ok {
  color: var(--green);
}

.sc-log-row .log-blocked {
  color: var(--threat);
}

/* Stats bar */
.sc-stats {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-3);
}

.sc-stats span {
  white-space: nowrap;
}

.sc-stats .stat-num {
  color: var(--text);
  font-weight: 600;
}

/* ── Anomaly Engine demo ─────────────────────────────────────────── */

.sc-anomaly-layout {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  gap: 16px;
  padding: 16px;
  align-items: start;
  height: 100%;
}

.sc-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sc-gauge-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.sc-signal {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sc-signal-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
}

.sc-signal-track {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  overflow: hidden;
}

.sc-signal-fill {
  height: 100%;
  border-radius: 3px;
}

.svg-active .sc-signal-fill {
  animation-name: barFillWidth;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Gauge arc — starts at full dashoffset, JS animates it */
.sc-gauge-arc {
  transition: none;
}

.sc-signal-fill.sig-heuristic { background: var(--accent); }
.sc-signal-fill.sig-statistical { background: #8B5CF6; }
.sc-signal-fill.sig-slm { background: #F59E0B; }

/* Agent identity card */
.sc-agent-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--font-mono);
}

.sc-agent-name {
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}

.sc-agent-row {
  font-size: 0.58rem;
  color: var(--text-3);
  margin-bottom: 3px;
}

.sc-trust-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 6px;
  background: rgba(22, 163, 74, 0.15);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.svg-active .sc-trust-badge {
  animation: trustShift 3.5s ease both;
}

/* ── Mesh Topology demo ──────────────────────────────────────────── */

.sc-mesh-wrap {
  position: relative;
  width: 100%;
}

.sc-mesh-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Mesh node groups — fade in staggered */
.sc-mesh-node {
  opacity: 0;
}

.svg-active .sc-mesh-node {
  animation-name: nodeFadeIn;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Mesh connection lines */
.sc-mesh-line {
  stroke-dasharray: var(--line-length, 200);
  stroke-dashoffset: var(--line-length, 200);
}

.svg-active .sc-mesh-line {
  animation-name: lineDraw;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Mesh packet dots */
.sc-mesh-packet {
  r: 2.5;
  fill: var(--accent);
  opacity: 0;
}

.svg-active .sc-mesh-packet {
  opacity: 1;
  offset-distance: 0%;
  animation-name: packetTravel;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Mesh ring pulse on orchestrator */
.sc-mesh-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
}

.svg-active .sc-mesh-ring {
  animation-name: ringExpand;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* ── Delegation demo ─────────────────────────────────────────────── */

.sc-delegation-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  padding: 16px;
  height: 100%;
}

.sc-deleg-flow {
  position: relative;
}

.sc-deleg-node {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  width: fit-content;
}

.sc-deleg-node-name {
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}

.sc-budget-label {
  font-size: 0.58rem;
  color: var(--text-3);
  margin-bottom: 3px;
}

.sc-budget-track {
  height: 6px;
  width: 120px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}

.sc-budget-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  width: 100%;
}

.sc-deleg-child {
  opacity: 0;
  margin-top: 48px;
  margin-left: 60px;
}

.svg-active .sc-deleg-child {
  animation: nodeFadeIn 0.5s ease 2s forwards;
}

.svg-active .sc-budget-fill.parent-shrink {
  animation: budgetShrink 1s ease 3s both;
}

.svg-active .sc-budget-fill.child-grow {
  animation: budgetGrow 1s ease 3s both;
}

/* Delegation connector SVG */
.sc-deleg-connector {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 120px;
  height: 100px;
  pointer-events: none;
}

.sc-deleg-connector path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.svg-active .sc-deleg-connector path {
  animation: connectorDraw 1s ease 1.5s both;
}

/* Checklist card */
.sc-checklist {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--font-mono);
  align-self: start;
}

.sc-checklist-title {
  font-size: 0.68rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
}

.sc-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  color: var(--text-3);
  padding: 2px 0;
  opacity: 0;
}

.svg-active .sc-check-item {
  animation-name: checkReveal;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.sc-check-mark {
  color: var(--green);
  font-weight: 700;
  min-width: 12px;
}

.sc-deleg-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--green);
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 8px;
  opacity: 0;
}

.svg-active .sc-deleg-badge {
  animation: floatCardIn 0.4s ease 5s both;
}

/* ── Responsive: showcase compositions ──────────────────────────── */
@media (max-width: 640px) {
  .showcase-annotation {
    position: static;
    max-width: 100%;
    margin-top: 0.5rem;
  }

  .showcase-tab-label {
    font-size: 0.75rem;
    padding: 0.45rem 0.8rem;
  }

  .showcase-composition {
    padding-bottom: 8px;
  }

  .sc-pipeline { gap: 1px; padding: 8px 8px 4px; }
  .sc-step { font-size: 0.45rem; padding: 4px 2px; }
  .sc-step-num { font-size: 0.4rem; }
  .sc-log { font-size: 0.5rem; padding: 4px 8px; }
  .sc-stats { font-size: 0.5rem; gap: 8px; padding: 4px 8px; }

  .sc-anomaly-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 8px;
  }

  .sc-delegation-layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .showcase-float-card {
    display: none; /* hide floating cards on mobile — too small */
  }
}

/* ── Reduced motion — show final state, no animation ─────────── */
@media (prefers-reduced-motion: reduce) {
  .showcase-float-card {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .sc-log-row {
    opacity: 1;
    animation: none !important;
  }

  .sc-signal-fill {
    animation: none !important;
  }

  .sc-mesh-node {
    opacity: 1;
    animation: none !important;
  }

  .sc-mesh-line {
    stroke-dashoffset: 0;
    animation: none !important;
  }

  .sc-trust-badge {
    animation: none !important;
  }

  .sc-deleg-child {
    opacity: 1;
    animation: none !important;
  }

  .sc-check-item {
    opacity: 1;
    animation: none !important;
  }

  .sc-deleg-badge {
    opacity: 1;
    animation: none !important;
  }

  .sc-packet {
    animation: none !important;
  }

  .sc-mesh-packet {
    animation: none !important;
    opacity: 1;
  }

  .sc-mesh-ring {
    animation: none !important;
  }
}