/* ============================================================
   Evolvra Website — Sections
   Nav · Hero · Enables · Brain · Different · Neuron ·
   Plasticity · Memory · Platform · Status · Body · Footer
   ============================================================ */

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 20px 40px;
  transition: padding 0.35s var(--ev-ease),
              background 0.35s var(--ev-ease),
              border-color 0.35s var(--ev-ease);
}
.nav.scrolled {
  background: rgba(248, 246, 242, 0.80);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--ev-border-light);
  padding: 13px 40px;
}
.nav.on-dark.scrolled {
  background: rgba(11, 10, 9, 0.76);
  border-bottom: 1px solid var(--ev-border-on-dark);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ev-text-primary);
  transition: color 0.3s var(--ev-ease);
  flex-shrink: 0;
}
.nav.on-dark .nav-brand { color: var(--ev-text-on-dark); }

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ev-text-secondary);
  border-radius: var(--ev-radius-sm);
  transition: all 0.15s var(--ev-ease);
}
.nav.on-dark .nav-links a { color: var(--ev-text-on-dark-2); }
.nav-links a:hover { color: var(--ev-text-primary); background: var(--ev-bg-sunken); }
.nav.on-dark .nav-links a:hover { color: var(--ev-text-on-dark); background: rgba(255,248,235,0.07); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-text-secondary);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-sm);
  transition: all 0.15s var(--ev-ease);
  flex-shrink: 0;
}
.nav.on-dark .nav-cta {
  color: var(--ev-text-on-dark-2);
  border-color: var(--ev-border-on-dark-2);
}
.nav-cta:hover {
  color: var(--ev-text-primary);
  background: var(--ev-bg-sunken);
  transform: translateY(-1px);
}
.nav.on-dark .nav-cta:hover {
  color: var(--ev-text-on-dark);
  background: rgba(255,248,235,0.07);
}

/* Read-the-docs group — Docs + Guide, set apart from section anchors.
   Segmented pill on a tinted backdrop with brand-gradient icons. */
.nav-docs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(194,48,80,0.06), rgba(96,184,216,0.06));
  border: 1px solid var(--ev-border-light);
  border-radius: 11px;
  flex-shrink: 0;
}
.nav.on-dark .nav-docs {
  background: linear-gradient(135deg, rgba(194,48,80,0.16), rgba(96,184,216,0.14));
  border-color: var(--ev-border-on-dark-2);
}
.nav-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
  border-radius: 8px;
  transition: all 0.18s var(--ev-ease);
}
.nav.on-dark .nav-doc { color: var(--ev-text-on-dark); }
.nav-doc svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nav-doc:hover {
  background: var(--ev-bg-surface, #fff);
  box-shadow: 0 1px 3px rgba(26,23,20,0.10), 0 0 0 1px rgba(26,23,20,0.04);
  transform: translateY(-1px);
}
.nav.on-dark .nav-doc:hover {
  background: rgba(255,248,235,0.10);
  box-shadow: none;
}
.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--ev-border-default);
  flex-shrink: 0;
}
.nav.on-dark .nav-divider { background: var(--ev-border-on-dark-2); }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 110px;
}
.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg canvas { width: 100%; height: 100%; display: block; }
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 980px;
  padding: 0 40px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ev-text-secondary);
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-full);
  margin-bottom: 36px;
  box-shadow: var(--ev-shadow-sm);
  font-family: var(--ev-font-mono);
}
.hero-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ev-red);
  box-shadow: 0 0 8px var(--ev-red);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(1.25); }
}
.hero-headline {
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: var(--ev-text-primary);
  margin-bottom: 28px;
}
.hero-raise {
  background: var(--ev-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 800;
}
.hero-sub {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ev-text-secondary);
  max-width: 660px;
  margin: 0 auto 44px;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 80px;
  flex-wrap: wrap;
}
.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ev-text-tertiary);
  font-family: var(--ev-font-mono);
}
.hero-meta-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-bottom-rule {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(260px, 38vw);
  height: 1.5px;
  background: var(--ev-gradient-h);
  opacity: 0.28;
  border-radius: 1px;
}

/* Hero logo (large mark shown in hero area) */
.hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

/* ── ENABLES ──────────────────────────────────────────────── */
.enables {
  padding: 130px 0 100px;
  background: var(--ev-bg-page);
  position: relative;
}
/* Transition is handled by the .dark-bridge section below */
.enables-header { margin-bottom: 64px; }
.enables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  position: relative;
  z-index: 2;
}
.enables-card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  padding: 32px 28px;
  transition: transform 0.28s var(--ev-ease-out),
              border-color 0.2s var(--ev-ease),
              box-shadow 0.28s var(--ev-ease-out);
  position: relative;
  overflow: hidden;
}
.enables-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ev-gradient-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s var(--ev-ease-out);
}
.enables-card:hover {
  transform: translateY(-4px);
  border-color: var(--ev-border-default);
  box-shadow: var(--ev-shadow-lg);
}
.enables-card:hover::before { transform: scaleX(1); }

.enables-icon {
  width: 36px; height: 36px;
  border-radius: var(--ev-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 18px;
}
.enables-num {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ev-text-tertiary);
  margin-bottom: 12px;
}
.enables-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ev-text-primary);
  margin-bottom: 12px;
}
.enables-body {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ev-text-secondary);
}

/* ── BRAIN (dark) ─────────────────────────────────────────── */
.brain {
  background: var(--ev-bg-dark);
  color: var(--ev-text-on-dark);
  padding: 0 0 180px;
  position: relative;
  overflow: hidden;
}
/* Ambient color bleeds */
.brain::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 10%, rgba(194, 48, 80, 0.09), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(126, 204, 230, 0.07), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 74, 160, 0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.brain-inner {
  padding-top: 120px;
  position: relative;
  z-index: 1;
}
.brain-header {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.brain-frame-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-text-on-dark-3);
  border: 1px solid var(--ev-border-on-dark);
  border-radius: var(--ev-radius-full);
  margin-top: 20px;
  font-family: var(--ev-font-mono);
}
.brain-frame-note span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 6px var(--ev-blue);
  animation: pulse 2s ease-in-out infinite;
}
.brain-stage {
  background: var(--ev-bg-dark-2);
  border: 1px solid var(--ev-border-on-dark);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
}
.brain-canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
}
.brain-canvas-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair;
}
/* Glass panel */
.brain-panel {
  background: rgba(11, 10, 9, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ev-border-on-dark-2);
  border-radius: 10px;
}
.brain-panel-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-text-on-dark-3);
  font-family: var(--ev-font-mono);
}
/* Inspector */
.brain-inspector {
  position: absolute;
  top: 16px; left: 16px;
  min-width: 230px;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}
.brain-inspector.active { opacity: 1; transform: none; pointer-events: auto; }
.inspector-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.inspector-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--ev-blue));
  box-shadow: 0 0 8px var(--dot, var(--ev-blue));
}
.inspector-name { font-size: 13px; font-weight: 600; color: var(--ev-text-on-dark); }
.inspector-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-top: 1px solid var(--ev-border-on-dark);
}
.inspector-row .k {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-text-on-dark-3);
}
.inspector-row .v {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  color: var(--ev-text-on-dark);
}
.inspector-row .v.firing { color: var(--ev-red); }
.inspector-row .v.resting { color: var(--ev-blue); }
.inspector-hint {
  font-size: 11.5px;
  color: var(--ev-text-on-dark-3);
  text-align: center;
  padding: 12px 16px;
  font-style: italic;
}
/* Controls */
.brain-controls {
  position: absolute;
  top: 16px; right: 16px;
  min-width: 200px;
  padding: 12px 14px 10px;
}
.controls-section + .controls-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ev-border-on-dark);
}
.brain-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ev-text-on-dark);
  cursor: pointer;
  transition: background 0.12s;
}
.brain-toggle:hover { background: rgba(255,248,235,0.05); }
.toggle-label { display: flex; align-items: center; gap: 8px; }
.toggle-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--ev-blue));
  box-shadow: 0 0 5px var(--dot, var(--ev-blue));
}
.toggle-sw {
  width: 26px; height: 14px;
  border-radius: 9999px;
  background: rgba(255,248,235,0.16);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s;
}
.toggle-sw::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ev-text-on-dark);
  transition: transform 0.18s;
}
.brain-toggle.on .toggle-sw { background: var(--ev-blue); }
.brain-toggle.on .toggle-sw::after { transform: translateX(12px); background: white; }
/* Speed buttons */
.speed-group { display: flex; gap: 4px; }
.speed-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 11px;
  background: rgba(255,248,235,0.07);
  color: var(--ev-text-on-dark-2);
  border-radius: 5px;
  font-family: var(--ev-font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: all 0.14s;
}
.speed-btn.active { background: var(--ev-blue); color: var(--ev-bg-dark); }
/* Legend */
.brain-legend {
  position: absolute;
  bottom: 16px; left: 16px;
  padding: 10px 14px;
}
.legend-items { display: flex; gap: 12px; flex-wrap: wrap; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ev-text-on-dark-2);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  transition: all 0.14s;
  letter-spacing: 0.02em;
}
.legend-item:hover { background: rgba(255,248,235,0.06); color: var(--ev-text-on-dark); }
.legend-item.muted { opacity: 0.30; }
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 7px var(--c);
  flex-shrink: 0;
}
/* Stats */
.brain-stats {
  position: absolute;
  bottom: 16px; right: 16px;
  display: flex;
  align-items: center;
  padding: 8px 6px;
}
.stat-cell {
  padding: 0 11px;
  border-right: 1px solid var(--ev-border-on-dark);
  text-align: left;
}
.stat-cell:last-of-type { border-right: none; }
.stat-k {
  font-family: var(--ev-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ev-text-on-dark-3);
}
.stat-v {
  font-family: var(--ev-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-text-on-dark);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.stat-v.accent { color: var(--ev-blue); }
.play-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ev-blue);
  color: var(--ev-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.14s;
  border: none;
}
.play-btn:hover { transform: scale(1.1); }
.brain-caption {
  max-width: 780px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ev-text-on-dark-2);
}
.brain-caption strong { color: var(--ev-text-on-dark); font-weight: 600; }

/* ── WHAT MAKES IT DIFFERENT ──────────────────────────────── */
.different {
  padding: 160px 0 140px;
  background: var(--ev-bg-page);
  position: relative;
}
/* Transition is handled by the .light-bridge section above */
.different-header { margin-bottom: 56px; }
.different-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.diff-card {
  grid-column: span 4;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  padding: 28px 24px 26px;
  transition: transform 0.32s var(--ev-ease-out),
              border-color 0.22s,
              box-shadow 0.32s var(--ev-ease-out);
  position: relative;
  overflow: hidden;
}
.diff-card:nth-child(4),
.diff-card:nth-child(5) { grid-column: span 6; }
.diff-card:hover {
  transform: translateY(-4px);
  border-color: var(--ev-border-default);
  box-shadow: var(--ev-shadow-lg);
}
.diff-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-accent, var(--ev-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s var(--ev-ease-out);
}
.diff-card:hover::before { transform: scaleX(1); }
.diff-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.diff-num {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ev-text-tertiary);
}
.diff-tag {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--ev-radius-full);
  background: var(--card-accent-subtle, var(--ev-red-subtle));
  color: var(--card-accent-text, var(--ev-red-text));
}
.diff-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ev-text-primary);
  margin-bottom: 12px;
}
.diff-body {
  font-size: 14px;
  line-height: 1.68;
  color: var(--ev-text-secondary);
}

/* ── INSIDE A NEURON ──────────────────────────────────────── */
.neuron-section {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.neuron-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.neuron-diagram-wrap {
  position: sticky;
  top: 120px;
}
.neuron-diagram {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
/* Category tabs */
.neuron-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
}
.neuron-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--ev-font-mono);
  border-radius: var(--ev-radius-sm);
  border: 1px solid var(--ev-border-default);
  background: transparent;
  color: var(--ev-text-tertiary);
  cursor: pointer;
  transition: all 0.18s var(--ev-ease);
}
.neuron-tab:hover { color: var(--ev-text-secondary); border-color: var(--ev-border-strong); }
.neuron-tab.active {
  background: var(--ev-text-primary);
  color: white;
  border-color: var(--ev-text-primary);
}
.neuron-info { padding-top: 0; }
.neuron-tabs { margin-bottom: 20px; }
.neuron-info-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ev-text-primary);
  margin-bottom: 14px;
}
.neuron-info-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ev-text-secondary);
  margin-bottom: 24px;
}
.neuron-props {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  overflow: hidden;
  background: var(--ev-border-light);
}
.neuron-prop {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--ev-bg-surface);
}
.neuron-prop-k {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-text-tertiary);
}
.neuron-prop-v {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  color: var(--ev-text-primary);
  text-align: right;
}
/* Frame concept note */
.frame-note {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--ev-bg-sunken);
  border-radius: var(--ev-radius-md);
  border-left: 3px solid var(--ev-blue-muted);
}
.frame-note-label {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ev-blue-text);
  margin-bottom: 8px;
}
.frame-note-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ev-text-secondary);
}

/* ── PLASTICITY ───────────────────────────────────────────── */
.plasticity {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.plasticity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.mechanisms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  overflow: hidden;
  background: var(--ev-border-light);
}
.mechanism-item {
  position: relative;
  background: var(--ev-bg-surface);
  padding: 16px 18px 16px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ev-ease);
}
.mechanism-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%,
    color-mix(in srgb, var(--mech-c, #C23050) 22%, transparent) 0%,
    transparent 55%);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
  animation: mechBreathe var(--mech-period, 2s) ease-in-out infinite;
}
.mechanism-item:hover {
  transform: translateY(-2px);
}
.mechanism-item:hover::before {
  opacity: 0.75;
  animation-duration: calc(var(--mech-period, 2s) / 1.6);
}
@keyframes mechBreathe {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
.mechanism-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mechanism-num {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ev-text-tertiary);
}
.mechanism-glyph {
  width: 72px;
  height: 22px;
  color: var(--mech-c, #C23050);
  opacity: 0.85;
  transition: opacity 0.25s var(--ev-ease), transform 0.25s var(--ev-ease);
}
.mechanism-item:hover .mechanism-glyph {
  opacity: 1;
  transform: translateX(-2px);
}
.mechanism-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
  margin-bottom: 5px;
}
.mechanism-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ev-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .mechanism-item::before { animation: none; opacity: 0.35; }
}
/* Brakes diagram */
.brakes-wrap { position: sticky; top: 120px; }
.brakes-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ev-text-primary);
  margin-bottom: 10px;
}
.brakes-lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ev-text-secondary);
  margin-bottom: 28px;
}
.brakes-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 380px;
  margin: 0 auto;
}
.brakes-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ev-bg-sunken);
  border: 1.5px solid var(--ev-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  z-index: 2;
}
.brakes-center-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ev-text-primary);
  letter-spacing: -0.01em;
}
.brake-item {
  position: absolute;
  width: 28%;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ev-text-secondary);
  letter-spacing: -0.005em;
}
.brake-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ev-red);
  margin: 0 auto 5px;
  box-shadow: 0 0 6px rgba(194,48,80,0.3);
}
.criticality-note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--ev-red-subtle);
  border-radius: var(--ev-radius-md);
  border-left: 3px solid var(--ev-red-muted);
}
.criticality-note-label {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ev-red-text);
  margin-bottom: 6px;
}
.criticality-note-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ev-red-text);
}

/* ── MEMORY & GROWTH ──────────────────────────────────────── */
.memory {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.memory-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.memory-canvas-wrap {
  position: sticky;
  top: 120px;
}
.memory-canvas-container {
  border-radius: var(--ev-radius-lg);
  overflow: hidden;
  background: var(--ev-bg-dark-2);
  border: 1px solid var(--ev-border-light);
  aspect-ratio: 4/3;
  position: relative;
}
.memory-canvas-container canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.memory-canvas-ui {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
.memory-btn {
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--ev-font-mono);
  border-radius: var(--ev-radius-sm);
  border: 1px solid var(--ev-border-on-dark-2);
  color: var(--ev-text-on-dark-2);
  background: rgba(11,10,9,0.6);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.14s;
}
.memory-btn:hover {
  background: rgba(126,204,230,0.15);
  color: var(--ev-blue);
  border-color: rgba(126,204,230,0.3);
}
.memory-concepts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.memory-concept-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}
.memory-concept-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.memory-concept + .memory-concept {
  padding-top: 24px;
  border-top: 1px solid var(--ev-border-light);
}

/* ── DESIGN & INSPECT ─────────────────────────────────────── */
.platform {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.platform-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.asset-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}
.asset-level {
  display: flex;
  align-items: center;
  gap: 12px;
}
.asset-indent { flex-shrink: 0; }
.asset-box {
  flex: 1;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-sm);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.asset-box:hover { border-color: var(--ev-border-strong); box-shadow: var(--ev-shadow-sm); }
.asset-box-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
}
.asset-box-desc {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  color: var(--ev-text-tertiary);
}
.asset-connector {
  width: 1px;
  height: 14px;
  background: var(--ev-border-default);
  margin-left: 20px;
  flex-shrink: 0;
}
.platform-note {
  padding: 20px 22px;
  background: var(--ev-bg-sunken);
  border-radius: var(--ev-radius-md);
  border-left: 3px solid var(--ev-purple, #8B4AA0);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.platform-note-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}
/* Inspection terminal mock */
.inspect-terminal {
  background: var(--ev-bg-dark-2);
  border: 1px solid var(--ev-border-on-dark);
  border-radius: var(--ev-radius-md);
  overflow: hidden;
  font-family: var(--ev-font-mono);
  margin-bottom: 24px;
}
.terminal-bar {
  background: var(--ev-bg-dark-3);
  border-bottom: 1px solid var(--ev-border-on-dark);
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.terminal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.terminal-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ev-text-on-dark-3);
  margin-left: auto;
}
.terminal-body { padding: 16px; }
.terminal-row {
  font-size: 12px;
  color: var(--ev-text-on-dark-2);
  line-height: 1.9;
}
.terminal-key { color: var(--ev-text-on-dark-3); }
.terminal-val { color: var(--ev-text-on-dark); }
.terminal-val.hi { color: var(--ev-blue); }
.terminal-val.red { color: var(--ev-red); }
.terminal-divider {
  border: none;
  border-top: 1px solid var(--ev-border-on-dark);
  margin: 8px 0;
}
.inspect-features { display: flex; flex-direction: column; gap: 14px; }
.inspect-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.inspect-feature-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 5px rgba(126,204,230,0.4);
  margin-top: 6px;
  flex-shrink: 0;
}
.inspect-feature-text {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ev-text-secondary);
}
.inspect-feature-text strong {
  color: var(--ev-text-primary);
  font-weight: 600;
}

/* ── WHERE WE STAND ───────────────────────────────────────── */
.status {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.roadmap-col {
  border: 1px solid var(--ev-border-default);
  border-radius: 18px;
  background: var(--ev-bg-surface);
  overflow: hidden;
  box-shadow: var(--ev-shadow-sm);
}
.roadmap-head {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--ev-border-light);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
}
.roadmap-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c, var(--ev-success));
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.roadmap-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ev-success));
  box-shadow: 0 0 8px var(--c, var(--ev-success));
  flex-shrink: 0;
}
.roadmap-title {
  margin-top: 10px;
  color: var(--ev-text-primary);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.roadmap-list {
  list-style: none;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.roadmap-list li {
  padding: 13px 14px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg-page);
  color: var(--ev-text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}
.roadmap-list li strong {
  display: block;
  color: var(--ev-text-primary);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.status-note {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ev-text-secondary);
}

/* Roadmap progress rail */
.roadmap-rail {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-sm);
}
.rail-cell { min-width: 0; }
.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.rail-head strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-text-primary);
  letter-spacing: -0.01em;
}
.rail-pct {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--c, var(--ev-text-tertiary));
  letter-spacing: 0.04em;
}
.rail-bar {
  position: relative;
  height: 8px;
  background: var(--ev-bg-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.rail-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c, var(--ev-text-tertiary)) 60%, transparent),
    var(--c, var(--ev-text-tertiary)));
  border-radius: 999px;
  transition: width 1.1s var(--ev-ease);
}
.roadmap-rail.is-revealed .rail-fill { width: var(--p, 0%); }
.roadmap-rail.is-revealed .rail-cell:nth-child(1) .rail-fill { transition-delay: 0.10s; }
.roadmap-rail.is-revealed .rail-cell:nth-child(3) .rail-fill { transition-delay: 0.34s; }
.roadmap-rail.is-revealed .rail-cell:nth-child(5) .rail-fill { transition-delay: 0.58s; }
.rail-sub {
  margin-top: 6px;
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ev-text-tertiary);
}
.rail-arrow {
  font-family: var(--ev-font-mono);
  font-size: 18px;
  color: var(--ev-text-tertiary);
  align-self: end;
  padding-bottom: 6px;
}
.rail-cell-active .rail-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c, var(--ev-blue)) 50%, transparent),
    var(--c, var(--ev-blue)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--ev-blue)) 50%, transparent);
  animation: railActivePulse 2.4s ease-in-out infinite;
}
@keyframes railActivePulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ev-blue) 28%, transparent); }
  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--ev-blue) 60%, transparent); }
}

/* Roadmap list: per-item status dots */
.roadmap-list li { position: relative; padding-left: 34px; }
.roadmap-list li::before {
  content: "";
  position: absolute;
  left: 14px; top: 18px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ev-text-tertiary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--ev-text-tertiary)) 18%, transparent);
}
.roadmap-col[style*="--ev-blue"] .roadmap-list li::before {
  background: var(--ev-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-blue) 22%, transparent);
  animation: roadmapDotPulse 1.8s ease-in-out infinite;
}
.roadmap-col[style*="--ev-text-tertiary"] .roadmap-list li::before {
  background: transparent;
  border: 1.5px solid var(--ev-text-tertiary);
  box-shadow: none;
}
@keyframes roadmapDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-blue) 18%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-blue) 36%, transparent); }
}

@media (max-width: 720px) {
  .roadmap-rail {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rail-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-cell-active .rail-fill,
  .roadmap-col[style*="--ev-blue"] .roadmap-list li::before {
    animation: none;
  }
  .roadmap-rail .rail-fill { transition: none; width: var(--p, 0%); }
}

/* ── A BODY TO INHABIT ────────────────────────────────────── */
.body-section {
  padding: 130px 0 140px;
  background: var(--ev-bg-page);
  border-top: 1px solid var(--ev-border-light);
}
.body-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 56px;
}
.body-visual {
  background: var(--ev-bg-dark-2);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.body-visual-placeholder {
  text-align: center;
  padding: 32px;
}
.body-visual-label {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ev-text-on-dark-3);
  margin-bottom: 10px;
}
.body-visual-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ev-text-on-dark-3);
}
.body-voxel-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.body-content { }
.body-pillar + .body-pillar {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--ev-border-light);
}
.body-pillar-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ev-text-primary);
  margin-bottom: 10px;
}
.body-pillar-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  padding: 48px 0 36px;
  background: var(--ev-bg-page);
}
.footer-rule-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  margin-bottom: 40px;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ev-text-primary);
}
.footer-attr {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  color: var(--ev-text-tertiary);
}
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 13px;
  color: var(--ev-text-tertiary);
  transition: color 0.14s;
}
.footer-links a:hover { color: var(--ev-text-secondary); }

/* ── DARK / LIGHT BRIDGE TRANSITIONS ─────────────────────── */
.dark-bridge {
  height: 300px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--ev-bg-page) 0%,
    #EDE8E1 18%,
    #211B15 68%,
    var(--ev-bg-dark) 100%
  );
}
.dark-bridge canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.bridge-label {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(245, 242, 236, 0.46);
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
}
.bridge-label span { color: var(--ev-blue); }

.light-bridge {
  height: 260px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--ev-bg-dark) 0%,
    #302820 42%,
    #EDE8E1 82%,
    var(--ev-bg-page) 100%
  );
}
.light-bridge canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ── NEURON DIAGRAM IMAGE ─────────────────────────────────── */

/* ── FRAME LOOP IMAGE ─────────────────────────────────────── */

/* ── CRITICALITY / BRAKES IMAGE ───────────────────────────── */

/* ── FIVE-OBJECT HIERARCHY IMAGE ──────────────────────────── */

/* ── BODY-SECTION IMPROVEMENTS ────────────────────────────── */
.body-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.body-point-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg-surface);
  box-shadow: var(--ev-shadow-sm);
}
.body-point-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ev-blue));
  box-shadow: 0 0 7px var(--c, var(--ev-blue));
  margin-bottom: 12px;
}
.body-point-card h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.body-point-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ev-text-secondary);
}

/* ── NATIVE EXPLAINER GRAPHICS ────────────────────────────── */
.neuron-native-wrap,
.criticality-wrap,
.asset-model-wrap {
  position: sticky;
  top: 120px;
}
.neuron-native,
.criticality-native,
.asset-model {
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  background: linear-gradient(180deg, var(--ev-bg-surface), var(--ev-bg-elevated));
  box-shadow: var(--ev-shadow-lg);
  overflow: hidden;
}
.neuron-native {
  padding: 18px 18px 14px;
}
.neuron-native-svg {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.neuron-native [data-highlight] {
  opacity: 0.28;
  transition: opacity 0.35s var(--ev-ease), filter 0.35s var(--ev-ease);
}
.neuron-tree path,
.neuron-tree circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neuron-tree circle { fill: currentColor; stroke-width: 0; }
.neuron-tree text {
  fill: currentColor;
  font-family: var(--ev-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.neuron-tree.apical { color: var(--ev-success); }
.neuron-tree.basal { color: var(--ev-blue-text); }
.neuron-tree.gating { color: var(--ev-red); }
.native-soma {
  fill: url(#nativeSomaGrad);
  stroke: rgba(26,23,20,0.24);
  stroke-width: 2;
}
.native-nucleus {
  fill: rgba(26,23,20,0.18);
  stroke: rgba(26,23,20,0.22);
}
.native-soma-label,
.native-badge-text,
.native-llm-text {
  font-family: var(--ev-font-mono);
  font-weight: 700;
  text-anchor: middle;
}
.native-soma-label {
  fill: var(--ev-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
}
.native-axon {
  fill: none;
  stroke: var(--ev-text-tertiary);
  stroke-width: 4;
  stroke-linecap: round;
}
.native-badge {
  fill: var(--ev-bg-surface);
  stroke: var(--ev-border-strong);
}
.native-badge-text {
  fill: var(--ev-text-primary);
  font-size: 13px;
}
.native-llm {
  fill: var(--ev-red-subtle);
  stroke: var(--ev-red-muted);
}
.native-llm-text {
  fill: var(--ev-red-text);
  font-size: 12px;
}
.native-pulses circle {
  fill: #fff;
  stroke: var(--ev-blue);
  stroke-width: 3;
  filter: url(#nativeGlow);
  animation: nativePulse 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.native-pulses circle:nth-child(2) { animation-delay: 0.4s; }
.native-pulses circle:nth-child(3) { animation-delay: 0.8s; }
@keyframes nativePulse {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.4); }
}
.neuron-mode-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.neuron-mode-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  color: var(--ev-text-tertiary);
  background: var(--ev-bg-page);
  font-size: 11.5px;
}
.neuron-mode-card.active {
  color: var(--ev-text-primary);
  border-color: var(--ev-border-default);
  background: var(--ev-bg-surface);
  box-shadow: var(--ev-shadow-sm);
}
.neuron-mode-card span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 7px var(--ev-blue);
}
.mode-dot.apical { background: var(--ev-success); box-shadow: 0 0 7px var(--ev-success); }
.mode-dot.activate { background: var(--ev-purple); box-shadow: 0 0 7px var(--ev-purple); }
.mode-dot.basal { background: var(--ev-blue-text); box-shadow: 0 0 7px var(--ev-blue); }

.frame-loop-visual {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg-surface);
  box-shadow: var(--ev-shadow-sm);
}
.frame-ticks {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding-left: 52px;
  color: var(--ev-text-tertiary);
  font-family: var(--ev-font-mono);
  font-size: 10px;
  margin-bottom: 7px;
}
.frame-lane {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  opacity: 0.55;
  transition: opacity 0.25s var(--ev-ease);
}
.frame-lane.active { opacity: 1; }
.lane-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ev-blue-text);
  font-family: var(--ev-font-mono);
}
.lane-name strong { font-size: 18px; line-height: 1; }
.lane-name span { font-size: 9px; text-transform: uppercase; }
.lane-track {
  position: relative;
  height: 26px;
  border-bottom: 2px solid var(--ev-blue-muted);
}
.lane-caption {
  grid-column: 2;
  color: var(--ev-text-tertiary);
  font-size: 11px;
  line-height: 1.3;
}
.lane-track.pulses::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 20px;
  background: repeating-linear-gradient(90deg,
    transparent 0 10.5%,
    var(--ev-blue-text) 10.5% 11.2%,
    transparent 11.2% 12.5%);
  animation: laneGlow 1.8s ease-in-out infinite;
}
.lane-track.pulses.slow::before { animation-duration: 2.4s; opacity: 0.82; }
@keyframes laneGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(126,204,230,0)); }
  50% { filter: drop-shadow(0 0 5px rgba(126,204,230,0.8)); }
}
.lane-track.async {
  border-bottom-color: rgba(212,123,62,0.34);
}
.submit-dot,
.return-dot {
  position: absolute;
  bottom: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ev-orange);
  box-shadow: 0 0 10px rgba(212,123,62,0.4);
}
.submit-dot { left: 9%; }
.return-dot { left: 55%; }
.inflight {
  position: absolute;
  left: 11%; right: 45%; bottom: -2px;
  border-bottom: 2px dashed var(--ev-orange);
  animation: dashFlow 1.6s linear infinite;
}
.plateau {
  position: absolute;
  left: 56%; right: 3%; bottom: -2px;
  height: 12px;
  border-top: 4px solid var(--ev-orange);
  background: linear-gradient(180deg, rgba(212,123,62,0.18), rgba(212,123,62,0.03));
}
@keyframes dashFlow {
  to { transform: translateX(8px); }
}

.criticality-native {
  position: relative;
  min-height: 560px;
  padding: 18px;
}
.criticality-ring {
  position: absolute;
  inset: 94px 34px 96px;
  width: calc(100% - 68px);
  height: auto;
}
.loop-path {
  fill: none;
  stroke: var(--ev-red);
  stroke-width: 4;
  stroke-linecap: round;
  animation: loopPulse 2.4s ease-in-out infinite;
}
@keyframes loopPulse {
  0%, 100% { opacity: 0.58; filter: none; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(194,48,80,0.35)); }
}
.loop-node rect {
  fill: var(--ev-bg-surface);
  stroke: var(--ev-red);
  stroke-width: 1.6;
}
.loop-node text,
.loop-label {
  fill: var(--ev-red-text);
  font-family: var(--ev-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}
.loop-node {
  animation: nodeBeat 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
@keyframes nodeBeat {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
.brake-card {
  position: absolute;
  width: 42%;
  min-height: 76px;
  padding: 13px 14px 12px 46px;
  border: 1px solid rgba(26,106,135,0.20);
  border-radius: var(--ev-radius-md);
  background: rgba(255,255,255,0.78);
  box-shadow: var(--ev-shadow-sm);
}
.brake-card::after {
  content: '';
  position: absolute;
  width: 34px; height: 2px;
  background: var(--ev-blue-text);
  opacity: 0.7;
}
.brake-card span {
  position: absolute;
  left: 14px; top: 14px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ev-blue-text);
  color: #fff;
  font-family: var(--ev-font-mono);
  font-size: 10px;
  font-weight: 800;
}
.brake-card strong {
  display: block;
  color: var(--ev-blue-text);
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.brake-card small {
  display: block;
  color: var(--ev-text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}
.brake-card.b1 { top: 18px; left: 29%; }
.brake-card.b1::after { left: 42%; bottom: -20px; transform: rotate(90deg); }
.brake-card.b2 { top: 118px; right: 18px; }
.brake-card.b2::after { left: -28px; top: 42px; }
.brake-card.b3 { top: 306px; right: 18px; }
.brake-card.b3::after { left: -28px; top: 36px; }
.brake-card.b4 { bottom: 18px; left: 29%; }
.brake-card.b4::after { left: 42%; top: -20px; transform: rotate(90deg); }
.brake-card.b5 { top: 306px; left: 18px; }
.brake-card.b5::after { right: -28px; top: 36px; }
.brake-card.b6 { top: 118px; left: 18px; }
.brake-card.b6::after { right: -28px; top: 42px; }

.asset-model {
  padding: 18px;
}
.asset-scale {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.asset-scale-row {
  width: var(--w);
  min-width: 260px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg-surface);
  box-shadow: var(--ev-shadow-sm);
}
.asset-scale-row + .asset-scale-row { margin-left: 18px; }
.asset-scale-row strong {
  display: block;
  color: var(--ev-text-primary);
  font-size: 15px;
  line-height: 1.2;
}
.asset-scale-row small {
  display: block;
  color: var(--ev-text-tertiary);
  font-size: 11.5px;
  line-height: 1.35;
}
.asset-scale-row code {
  color: var(--ev-blue-text);
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.asset-icon {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ev-blue-subtle);
  color: var(--ev-blue-text);
  font-family: var(--ev-font-mono);
  font-weight: 800;
}
.asset-scale-row.kind .asset-icon { background: var(--ev-red-subtle); color: var(--ev-red-text); }
.asset-scale-row.prefab .asset-icon { background: var(--ev-success-subtle); color: var(--ev-success-text); }
.asset-scale-row.brain-level .asset-icon { background: var(--ev-bg-dark-3); color: var(--ev-text-on-dark); }
.zone-mini {
  position: relative;
  height: 220px;
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  background:
    radial-gradient(circle at 28% 45%, rgba(126,204,230,0.16), transparent 35%),
    radial-gradient(circle at 68% 58%, rgba(74,155,94,0.12), transparent 34%),
    var(--ev-bg-page);
  overflow: hidden;
}
.zone-shell {
  position: absolute;
  display: grid;
  place-items: start center;
  padding-top: 12px;
  border: 1.5px solid var(--ev-blue-text);
  color: var(--ev-blue-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.zone-shell.perception { left: 28px; top: 24px; width: 54%; height: 152px; border-radius: 34px; }
.zone-shell.visual { left: 70px; top: 70px; width: 34%; height: 92px; border-radius: 24px; }
.zone-shell.motor { right: 24px; bottom: 24px; width: 34%; height: 92px; border-radius: 24px; }
.zone-shell.pathway {
  left: 45%; top: 64px; width: 30%; height: 126px;
  border-style: dashed;
  border-color: var(--ev-success-text);
  color: var(--ev-success-text);
  background: rgba(74,155,94,0.06);
}
.zone-neuron {
  position: absolute;
  left: 50%; top: 56%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--ev-red);
  box-shadow: 0 0 0 6px rgba(194,48,80,0.16), 0 0 20px rgba(194,48,80,0.34);
  animation: nativePulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .enables-grid { grid-template-columns: 1fr 1fr; }
  .different-grid { grid-template-columns: 1fr 1fr; }
  .diff-card,
  .diff-card:nth-child(4),
  .diff-card:nth-child(5) { grid-column: span 6; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  /* Section anchors are gone — the doc group is now the primary nav, keep it prominent. */
  .nav-divider { display: none; }
}
@media (max-width: 560px) {
  /* Tight phones: drop Contact, collapse doc buttons to gradient icons. */
  .nav-end .nav-cta:not(.nav-cta-primary) { display: none; }
  .nav-doc span { display: none; }
  .nav-doc { padding: 7px 9px; }
  .neuron-layout,
  .plasticity-layout,
  .memory-layout,
  .platform-layout,
  .body-layout { grid-template-columns: 1fr; gap: 48px; }
  .neuron-native-wrap,
  .memory-canvas-wrap,
  .criticality-wrap,
  .asset-model-wrap { position: static; }
  .criticality-native { min-height: auto; padding: 16px; }
  .criticality-ring {
    position: relative;
    inset: auto;
    width: 100%;
    margin-bottom: 12px;
  }
  .brake-card {
    position: relative;
    inset: auto !important;
    width: 100%;
    min-height: auto;
    margin-top: 8px;
  }
  .brake-card::after { display: none; }
  .asset-scale-row,
  .asset-scale-row + .asset-scale-row {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .enables-grid,
  .different-grid { grid-template-columns: 1fr; }
  .diff-card,
  .diff-card:nth-child(4),
  .diff-card:nth-child(5) { grid-column: span 12; }
  .roadmap { grid-template-columns: 1fr; }
  .brain-controls, .brain-inspector, .brain-legend, .brain-stats {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: 8px;
    width: calc(100% - 16px);
  }
  .brain-inspector { display: none; }
}
@media (max-width: 600px) {
  .hero-meta { gap: 16px; }
  .hero { padding: 120px 0 80px; }
  .mechanisms-grid { grid-template-columns: 1fr; }
  .neuron-mode-strip { grid-template-columns: 1fr; }
  .frame-ticks { display: none; }
  .frame-lane { grid-template-columns: 36px minmax(0, 1fr); }
  .asset-scale-row { grid-template-columns: 32px minmax(0,1fr); }
  .asset-scale-row code { grid-column: 2; white-space: normal; }
  .zone-mini { height: 190px; }
  .zone-shell { font-size: 10px; }
  .body-points-grid { grid-template-columns: 1fr; }
  .dark-bridge { height: 220px; }
  .light-bridge { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .native-pulses circle,
  .lane-track.pulses::before,
  .inflight,
  .loop-path,
  .loop-node,
  .zone-neuron {
    animation: none;
  }
}

/* ============================================================
   PHASE 1 ADDITIONS — new sections, content layer only
   (Triangle / Frame loop / Dendrite strip / Encoding /
    Design zones / Inspect / Scaling / Open questions)
   ============================================================ */

/* ── §2 Triangle stage ──────────────────────────────────── */
.triangle-stage {
  margin-top: 56px;
  margin-bottom: 72px;
}
.triangle-canvas {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-md);
}
.triangle-svg { width: 100%; height: auto; display: block; }
.tri-node-title {
  font-family: var(--ev-font);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ev-text-primary);
  letter-spacing: -0.005em;
}
.tri-node-sub {
  font-family: var(--ev-font);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ev-text-tertiary);
}
.tri-edge-label {
  font-family: var(--ev-font);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ev-text-primary);
}
.tri-edge-label-sub {
  font-family: var(--ev-font);
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--ev-text-tertiary);
}
.tri-node circle:first-child { transition: r 0.3s var(--ev-ease), opacity 0.3s var(--ev-ease); }
.tri-node:hover circle:first-child { opacity: 0.32; r: 56; }

.triangle-caption {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 0 12px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ev-text-secondary);
  text-align: left;
}
.triangle-caption strong {
  display: inline-block;
  margin-right: 4px;
  color: var(--ev-text-primary);
  font-weight: 700;
}

/* ── §2 Pillar grid (replaces 4-up enables grid) ──────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.pillar-card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-top: 4px solid var(--pillar, var(--ev-purple));
  border-radius: var(--ev-radius-lg);
  padding: 28px 26px;
  transition: transform 0.3s var(--ev-ease), box-shadow 0.3s var(--ev-ease);
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ev-shadow-lg);
}
.pillar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pillar-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pillar, var(--ev-purple));
}
.pillar-num {
  font-family: var(--ev-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ev-text-tertiary);
}
.pillar-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
  flex: 1;
}
.pillar-lead {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ev-text-primary);
  font-weight: 500;
}
.pillar-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.pillar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillar-list li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ev-text-secondary);
  border-top: 1px dashed var(--ev-border-light);
}
.pillar-list li:first-child { border-top: 0; }
.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pillar, var(--ev-purple));
  opacity: 0.7;
}
.pillar-list strong {
  color: var(--ev-text-primary);
  font-weight: 700;
}

/* ── §4 Frame loop ──────────────────────────────────────── */
.frameloop {
  padding: 120px 0;
  background: var(--ev-bg-page);
}
.frameloop-layout {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items: start;
}
.fl-pipeline-card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--ev-shadow-md);
}
.fl-pipeline-label {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  margin-bottom: 18px;
}
.fl-pipeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fl-pipeline li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed var(--ev-border-light);
}
.fl-pipeline li:first-child { border-top: 0; }
.fl-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ev-bg-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ev-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-text-secondary);
  margin-top: 1px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.fl-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  line-height: 1.5;
}
.fl-step-body strong {
  font-weight: 700;
  color: var(--ev-text-primary);
}
.fl-step-body span {
  font-size: 12.5px;
  color: var(--ev-text-tertiary);
  line-height: 1.55;
}

.fl-idea {
  position: relative;
  padding: 18px 0 18px 22px;
  border-top: 1px solid var(--ev-border-light);
}
.fl-idea:first-child { border-top: 0; padding-top: 4px; }
.fl-idea-dot {
  position: absolute;
  left: 0; top: 26px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ev-purple));
}
.fl-idea:first-child .fl-idea-dot { top: 12px; }
.fl-idea h4 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ev-text-primary);
}
.fl-idea p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.fl-idea p strong { color: var(--ev-text-primary); font-weight: 700; }
.fl-idea p em { font-style: italic; color: var(--ev-text-primary); }

/* ── §5 Dendrite strip (within Inside a Neuron) ─────────── */
.dendrite-strip {
  margin: 48px 0 16px;
  padding: 32px 30px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-sm);
}
.dendrite-strip-head { max-width: 720px; margin-bottom: 26px; }
.ds-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  margin-bottom: 8px;
}
.ds-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
}
.ds-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.dendrite-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ds-card {
  padding: 20px 20px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
}
.ds-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ev-text-primary);
}
.ds-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.ds-dot-direct { background: #2d8c5e; }
.ds-dot-mod { background: #b87333; }
.ds-dot-gate { background: #b03a48; }
.ds-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--ev-text-secondary);
}
.ds-card code {
  font-family: var(--ev-font-mono);
  background: var(--ev-bg-sunken);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.ds-formula {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--ev-border-default);
  border-radius: 6px;
  text-align: center;
  font-family: var(--ev-font-mono);
  font-size: 12.5px;
  color: var(--ev-text-primary);
  background: var(--ev-bg-surface);
}
.ds-d { color: #2d8c5e; font-weight: 700; }
.ds-m { color: #b87333; font-weight: 700; }
.ds-g { color: #b03a48; font-weight: 700; }

/* ── §7 Encoding (replaces Memory section) ──────────────── */
.encoding {
  padding: 120px 0;
  background: var(--ev-bg-page);
}
.encoding-layout {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: start;
}
.encoding-visual {
  position: sticky;
  top: 100px;
}
.encoding-stages {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  padding: 26px 22px;
  box-shadow: var(--ev-shadow-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
/* 2×2 corner layout (TL, TR, BR, BL — clockwise) */
.encoding-stages-grid {
  position: relative;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "s1 s2"
    "s4 s3";
  gap: 26px;
  padding: 30px 28px;
}
.enc-stage-1 { grid-area: s1; }
.enc-stage-2 { grid-area: s2; }
.enc-stage-3 { grid-area: s3; }
.enc-stage-4 { grid-area: s4; }
.enc-flow {
  position: absolute;
  inset: 30px 28px;
  width: calc(100% - 56px);
  height: calc(100% - 60px);
  pointer-events: none;
  z-index: 1;
}
.enc-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.enc-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.enc-stage-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ev-bg-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ev-text-secondary);
  flex-shrink: 0;
}
.enc-cluster {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  padding: 12px;
  background: var(--ev-bg-elevated);
  border-radius: var(--ev-radius-md);
  overflow: visible;
}
.encoding-stages-grid .enc-cluster {
  max-width: 220px;
}
.enc-cluster span {
  position: relative;
  border-radius: 50%;
  background: #C23050;
  align-self: center;
  justify-self: center;
  width: 70%;
  aspect-ratio: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.enc-cluster-broad span { opacity: 0.22; }
.enc-cluster-compete span { opacity: 0.45; }
.enc-cluster-compete span:nth-child(3),
.enc-cluster-compete span:nth-child(7),
.enc-cluster-compete span:nth-child(13),
.enc-cluster-compete span:nth-child(16) { opacity: 0.95; }
.enc-cluster-sparse span { opacity: 0.06; }
.enc-cluster-sparse span:nth-child(3),
.enc-cluster-sparse span:nth-child(7),
.enc-cluster-sparse span:nth-child(13),
.enc-cluster-sparse span:nth-child(16) { opacity: 1; }
.enc-cluster-assembly span { opacity: 0.06; }
.enc-cluster-assembly span:nth-child(3),
.enc-cluster-assembly span:nth-child(7),
.enc-cluster-assembly span:nth-child(13),
.enc-cluster-assembly span:nth-child(16) { opacity: 1; }
.enc-links {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.enc-arrow {
  font-family: var(--ev-font-mono);
  font-size: 18px;
  color: var(--ev-text-tertiary);
}
.enc-stage-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-text-secondary);
  text-align: center;
  letter-spacing: -0.005em;
}
.encoding-caption {
  max-width: 540px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ev-text-tertiary);
  text-align: center;
}

.encoding-concept {
  position: relative;
  padding: 22px 0 22px 56px;
  border-top: 1px solid var(--ev-border-light);
}
.encoding-concept:first-child { border-top: 0; padding-top: 2px; }
.enc-concept-num {
  position: absolute;
  left: 0; top: 24px;
  width: 40px;
  font-family: var(--ev-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-text-tertiary);
}
.encoding-concept:first-child .enc-concept-num { top: 4px; }
.encoding-concept-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ev-text-primary);
}
.encoding-concept-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ev-text-secondary);
}
.encoding-concept-body strong { color: var(--ev-text-primary); font-weight: 700; }
.encoding-concept-body em { font-style: italic; color: var(--ev-text-primary); }

/* ── §8 Design zones + features ─────────────────────────── */
.design-zone-card {
  margin-top: 24px;
  padding: 22px 22px 18px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  border-left: 3px solid #8B4AA0;
}
.design-zone-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.design-zone-tag {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8B4AA0;
  background: rgba(139, 74, 160, 0.10);
  padding: 3px 9px;
  border-radius: 99px;
}
.design-zone-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ev-text-primary);
}
.design-zone-body {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.design-zone-body:last-child { margin-bottom: 0; }
.design-zone-body strong { color: var(--ev-text-primary); font-weight: 700; }

.design-features {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.design-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-sm);
}
.design-feature-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.design-feature strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ev-text-primary);
  margin-bottom: 3px;
}
.design-feature span {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ev-text-secondary);
}

/* ── §9 Inspect ─────────────────────────────────────────── */
#inspect { background: var(--ev-bg-sunken); }
.inspect-layout {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 44px;
  align-items: start;
}
.inspect-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  margin-bottom: 14px;
}
.inspect-terminal-caption {
  margin: 16px 2px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ev-text-tertiary);
}
.inspect-cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.inspect-cs-card,
.inspect-nm-card {
  padding: 18px 18px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
  transition: transform 0.25s var(--ev-ease), box-shadow 0.25s var(--ev-ease);
}
.inspect-cs-card:hover,
.inspect-nm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}
.cs-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.cs-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-card-head h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ev-text-primary);
}
.inspect-cs-card p,
.inspect-nm-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ev-text-secondary);
}
.inspect-nm-card {
  border-left: 3px solid #4A9B5E;
}
.inspect-nm-card p { font-size: 13px; }
.inspect-validator-note {
  margin: 16px 2px 0;
  padding: 12px 14px;
  background: var(--ev-bg-elevated);
  border-left: 2px solid var(--ev-border-strong);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ev-text-tertiary);
  border-radius: 0 var(--ev-radius-sm) var(--ev-radius-sm) 0;
}

/* ── §11 Scaling (extends body-section) ─────────────────── */
.scale-card {
  margin: 56px 0 64px;
  padding: 28px 28px 24px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-md);
}
.scale-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.scale-card-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
}
.scale-meter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 12px 0 18px;
  align-items: end;
}
.scale-step { display: flex; flex-direction: column; gap: 10px; }
.scale-bar {
  height: 8px;
  background: var(--ev-gradient-h);
  border-radius: 99px;
  width: var(--w, 10%);
  transition: width 0.6s var(--ev-ease);
}
.scale-label {
  text-align: left;
  font-size: 12px;
  color: var(--ev-text-tertiary);
  line-height: 1.4;
}
.scale-label strong {
  display: block;
  font-family: var(--ev-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-text-primary);
  margin-bottom: 2px;
}
.scale-label-target strong { color: var(--ev-red); }
.scale-note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed var(--ev-border-light);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}

.body-visual-caption {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ev-text-tertiary);
}

/* ── §12 Open questions ─────────────────────────────────── */
.openq {
  padding: 120px 0;
  background: var(--ev-bg-page);
}
.openq-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.openq-card {
  position: relative;
  padding: 30px 26px 22px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ev-ease), box-shadow 0.3s var(--ev-ease);
}
.openq-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ev-shadow-lg);
}
.openq-num {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ev-text-tertiary);
  margin-bottom: 12px;
}
.openq-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ev-text-primary);
}
.openq-body {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.openq-body:last-of-type { margin-bottom: 18px; }
.openq-tag {
  margin-top: auto;
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  padding-top: 12px;
  border-top: 1px dashed var(--ev-border-light);
}
.openq-cta {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.openq-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ev-text-primary);
  font-weight: 500;
}

/* ── Arbor diagram (replaces ABC neuron SVG) ────────────── */
.arbor-diagram {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  padding: 24px 18px 18px;
  box-shadow: var(--ev-shadow-sm);
}
.arbor-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}
.arbor-title-text {
  font-family: var(--ev-font);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ev-text-tertiary);
}
.arbor-soma-label {
  font-family: var(--ev-font);
  font-size: 13px;
  font-weight: 700;
  fill: #4A6FA5;
}
.arbor-tree-name {
  font-family: var(--ev-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.arbor-tree-meta {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.arbor-seg-text {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.arbor-formula {
  font-family: var(--ev-font-mono);
  font-size: 13px;
  font-weight: 500;
  fill: var(--ev-text-primary);
}
.arbor-formula-sub {
  font-family: var(--ev-font);
  font-size: 10.5px;
  fill: var(--ev-text-tertiary);
}
.arbor-axon-label {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  fill: var(--ev-text-tertiary);
}
.arbor-tree {
  transition: opacity 0.25s var(--ev-ease);
}
.arbor-tree:hover {
  opacity: 0.85;
}

/* ============================================================
   PHASE 2 — interactive visualizations
   ============================================================ */

/* ── Triangle: interactive nodes + edges ────────────────── */
.tri-node {
  cursor: pointer;
}
.tri-node circle:nth-child(2) {
  transition: r 0.35s var(--ev-ease),
              filter 0.35s var(--ev-ease),
              transform 0.35s var(--ev-ease);
  transform-origin: center;
  transform-box: fill-box;
}
.tri-node:hover circle:first-child,
.tri-node.is-active circle:first-child {
  opacity: 0.34;
  r: 58;
}
.tri-node:hover circle:nth-child(2),
.tri-node.is-active circle:nth-child(2) {
  filter: drop-shadow(0 0 14px rgba(194, 48, 80, 0.35));
  r: 34;
}

.tri-edge line {
  transition: stroke-width 0.3s var(--ev-ease), opacity 0.3s var(--ev-ease);
}
.tri-edge-label,
.tri-edge-label-sub {
  transition: opacity 0.3s var(--ev-ease), font-weight 0.2s;
}
.tri-edge.is-bright line {
  stroke-width: 3.2;
  opacity: 0.95;
}
.tri-edge.is-dim line {
  opacity: 0.22;
}
.tri-edge.is-dim .tri-edge-label,
.tri-edge.is-dim .tri-edge-label-sub { opacity: 0.4; }

.tri-node.is-dim circle:first-child { opacity: 0.08; }
.tri-node.is-dim circle:nth-child(2) { opacity: 0.5; }
.tri-node.is-dim .tri-node-title,
.tri-node.is-dim .tri-node-sub { opacity: 0.55; }

/* Pillar card highlight pulse (target of tri click) */
.pillar-card.is-target {
  animation: pillarTargetPulse 1.2s var(--ev-ease);
}
@keyframes pillarTargetPulse {
  0%   { box-shadow: 0 0 0 0   rgba(194, 48, 80, 0); }
  30%  { box-shadow: 0 0 0 12px rgba(194, 48, 80, 0.18); }
  100% { box-shadow: 0 0 0 0   rgba(194, 48, 80, 0); }
}

/* ── Frame loop: traveling tick ─────────────────────────── */
.fl-pipeline li {
  position: relative;
  transition: background 0.4s var(--ev-ease);
}
.fl-pipeline li.is-tick {
  background: linear-gradient(90deg,
    rgba(96, 184, 216, 0.18) 0%,
    rgba(96, 184, 216, 0.04) 60%,
    transparent 100%);
  border-radius: 4px;
}
.fl-pipeline li.is-tick .fl-step-num {
  background: var(--ev-blue);
  color: #0B0A09;
  box-shadow: 0 0 16px rgba(96, 184, 216, 0.55);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

/* ── Encoding stages: cascade animation ─────────────────── */
.encoding-stages.is-playing .enc-cluster span,
.encoding-stages.is-playing .enc-links { animation-play-state: running; }

/* Stage 1: Broad activation — many candidates flickering noisily together */
.enc-cluster-broad.cascade span {
  animation: encBroadNoise 5.6s ease-in-out infinite;
}
.enc-cluster-broad.cascade span:nth-child(2n)   { animation-delay: -0.4s; }
.enc-cluster-broad.cascade span:nth-child(3n)   { animation-delay: -0.9s; }
.enc-cluster-broad.cascade span:nth-child(5n)   { animation-delay: -1.6s; }
.enc-cluster-broad.cascade span:nth-child(7n)   { animation-delay: -2.3s; }
@keyframes encBroadNoise {
  0%, 100% { opacity: 0.18; transform: scale(0.95); }
  35%      { opacity: 0.55; transform: scale(1.05); }
  60%      { opacity: 0.32; transform: scale(1.00); }
  80%      { opacity: 0.48; transform: scale(1.04); }
}

/* Stage 2: Lateral inhibition — winners pop with halo, losers visibly suppressed */
.enc-cluster-compete.cascade span {
  animation: encCompeteLoser 5.6s ease-in-out infinite;
}
.enc-cluster-compete.cascade span:nth-child(3),
.enc-cluster-compete.cascade span:nth-child(7),
.enc-cluster-compete.cascade span:nth-child(13),
.enc-cluster-compete.cascade span:nth-child(16) {
  animation-name: encCompeteWin;
}
@keyframes encCompeteLoser {
  0%, 20%   { opacity: 0.45; transform: scale(1); }
  35%, 70%  { opacity: 0.06; transform: scale(0.7); }
  90%, 100% { opacity: 0.45; transform: scale(1); }
}
@keyframes encCompeteWin {
  0%, 20%   { opacity: 0.45; transform: scale(1);
              box-shadow: 0 0 0 0 rgba(194, 48, 80, 0); }
  30%       { opacity: 1;    transform: scale(1.25);
              box-shadow: 0 0 0 2px rgba(194, 48, 80, 0.55); }
  45%       { opacity: 1;    transform: scale(1.15);
              box-shadow: 0 0 0 10px rgba(194, 48, 80, 0); }
  70%       { opacity: 1;    transform: scale(1.15);
              box-shadow: 0 0 0 0 rgba(194, 48, 80, 0); }
  90%, 100% { opacity: 0.45; transform: scale(1);
              box-shadow: 0 0 0 0 rgba(194, 48, 80, 0); }
}

/* Stage 3: Sparse winners — clean post-competition state, winners breathe gently */
.enc-cluster-sparse.cascade span {
  animation: encSparseLoser 5.6s ease-in-out infinite;
}
.enc-cluster-sparse.cascade span:nth-child(3),
.enc-cluster-sparse.cascade span:nth-child(7),
.enc-cluster-sparse.cascade span:nth-child(13),
.enc-cluster-sparse.cascade span:nth-child(16) {
  animation-name: encSparseWin;
}
@keyframes encSparseLoser {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.03; }
}
@keyframes encSparseWin {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  45%      { opacity: 1;   transform: scale(1.15);
             box-shadow: 0 0 10px 1px rgba(194, 48, 80, 0.55); }
  80%      { opacity: 0.85; transform: scale(1.05);
             box-shadow: 0 0 6px 0 rgba(194, 48, 80, 0.25); }
}

/* Stage 4: Cell assembly — synchronized co-firing + connections form */
.enc-cluster-assembly.cascade span {
  animation: encAssemblyLoser 5.6s ease-in-out infinite;
}
.enc-cluster-assembly.cascade span:nth-child(3),
.enc-cluster-assembly.cascade span:nth-child(7),
.enc-cluster-assembly.cascade span:nth-child(13),
.enc-cluster-assembly.cascade span:nth-child(16) {
  animation-name: encAssemblyWin;
  animation-delay: 0s !important;
}
@keyframes encAssemblyLoser {
  0%, 100% { opacity: 0.04; }
}
@keyframes encAssemblyWin {
  0%       { opacity: 0.35; transform: scale(1);
             box-shadow: 0 0 0 0 rgba(194, 48, 80, 0); }
  18%      { opacity: 1;    transform: scale(1.30);
             box-shadow: 0 0 14px 2px rgba(194, 48, 80, 0.7); }
  32%      { opacity: 0.55; transform: scale(1.05);
             box-shadow: 0 0 4px 0 rgba(194, 48, 80, 0.15); }
  60%      { opacity: 0.7;  transform: scale(1.05); }
  78%      { opacity: 1;    transform: scale(1.35);
             box-shadow: 0 0 18px 3px rgba(194, 48, 80, 0.85); }
  92%      { opacity: 0.85; transform: scale(1.1);
             box-shadow: 0 0 6px 0 rgba(194, 48, 80, 0.3); }
  100%     { opacity: 0.5;  transform: scale(1);
             box-shadow: 0 0 0 0 rgba(194, 48, 80, 0); }
}
.enc-cluster-assembly.cascade .enc-links line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  opacity: 0;
  animation: encAssemblyLine 5.6s ease-in-out infinite;
}
.enc-cluster-assembly.cascade .enc-links line:nth-child(1) { animation-delay: 0.30s; }
.enc-cluster-assembly.cascade .enc-links line:nth-child(2) { animation-delay: 0.50s; }
.enc-cluster-assembly.cascade .enc-links line:nth-child(3) { animation-delay: 0.70s; }
.enc-cluster-assembly.cascade .enc-links line:nth-child(4) { animation-delay: 0.90s; }
@keyframes encAssemblyLine {
  0%, 32%  { stroke-dashoffset: 80; opacity: 0; }
  45%      { stroke-dashoffset: 0;  opacity: 0.9; }
  78%      { stroke-dashoffset: 0;  opacity: 1; }
  100%     { stroke-dashoffset: 0;  opacity: 0.5; }
}

/* Stage labels highlight in sequence (DOM order: 1=s1, 2=s2, 3=s3, 4=s4) */
.encoding-stages-grid.cascade .enc-stage-1 .enc-stage-label,
.encoding-stages-grid.cascade .enc-stage-2 .enc-stage-label,
.encoding-stages-grid.cascade .enc-stage-3 .enc-stage-label,
.encoding-stages-grid.cascade .enc-stage-4 .enc-stage-label {
  animation: encStageLabel 5.6s ease-in-out infinite;
}
.encoding-stages-grid.cascade .enc-stage-2 .enc-stage-label { animation-delay: 1.0s; }
.encoding-stages-grid.cascade .enc-stage-3 .enc-stage-label { animation-delay: 2.4s; }
.encoding-stages-grid.cascade .enc-stage-4 .enc-stage-label { animation-delay: 3.6s; }
@keyframes encStageLabel {
  0%, 100% { color: var(--ev-text-secondary); }
  8%, 22%  { color: var(--ev-red); transform: translateY(-1px); }
}
.encoding-stages-grid.cascade .enc-stage-label {
  transition: color 0.4s var(--ev-ease), transform 0.4s var(--ev-ease);
}

/* ── Inspect mini-dashboards ────────────────────────────── */
.cs-mini {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 12px;
}
.cs-mini-tick {
  font-family: var(--ev-font-mono);
  font-size: 8px;
  fill: var(--ev-text-tertiary);
  letter-spacing: 0.04em;
}
.cs-mini-axis {
  font-family: var(--ev-font-mono);
  font-size: 8px;
  fill: var(--ev-text-tertiary);
}
.cs-mini-state {
  font-family: var(--ev-font-mono);
  font-size: 9px;
  font-weight: 700;
  fill: #8B4AA0;
}
.cs-mini-state-active { fill: #FFFFFF; }

.nm-radar {
  display: block;
  width: 100%;
  height: 130px;
  margin-top: 14px;
}
.nm-axis {
  font-family: var(--ev-font-mono);
  font-size: 9px;
  fill: var(--ev-text-secondary);
  font-weight: 600;
}
.nm-legend {
  font-family: var(--ev-font);
  font-size: 10px;
  fill: var(--ev-text-secondary);
}
.nm-legend-k {
  font-family: var(--ev-font-mono);
  font-weight: 700;
  fill: #2A6B3A;
}
.nm-legend-aux {
  font-size: 9px;
  fill: var(--ev-text-tertiary);
}

/* ── Scale meter: stagger reveal ────────────────────────── */
.scale-card .scale-bar { width: 0; }
.scale-card.is-revealed .scale-bar { width: var(--w, 10%); }
.scale-card.is-revealed .scale-step:nth-child(1) .scale-bar { transition-delay: 0.05s; }
.scale-card.is-revealed .scale-step:nth-child(2) .scale-bar { transition-delay: 0.18s; }
.scale-card.is-revealed .scale-step:nth-child(3) .scale-bar { transition-delay: 0.31s; }
.scale-card.is-revealed .scale-step:nth-child(4) .scale-bar { transition-delay: 0.44s; }
.scale-card.is-revealed .scale-step:nth-child(5) .scale-bar { transition-delay: 0.57s; }
.scale-card.is-revealed .scale-step:nth-child(6) .scale-bar { transition-delay: 0.70s; }
.scale-card .scale-bar { transition: width 0.9s var(--ev-ease); }

/* ── prefers-reduced-motion guards (phase 2) ────────────── */
@media (prefers-reduced-motion: reduce) {
  .pillar-card.is-target { animation: none; }
  .fl-pipeline li { transition: none; }
  .enc-cluster-broad.cascade span,
  .enc-cluster-compete.cascade span,
  .enc-cluster-sparse.cascade span,
  .enc-cluster-assembly.cascade span,
  .enc-cluster-assembly.cascade .enc-links line,
  .encoding-stages.cascade .enc-stage .enc-stage-label {
    animation: none !important;
  }
  .enc-cluster-assembly.cascade .enc-links line { stroke-dashoffset: 0; }
  .scale-card .scale-bar { transition: none; width: var(--w, 10%); }
}

/* ============================================================
   PHASE 3 — layout redesigns
   ============================================================ */

/* ── Triangle: canvas + slide-out layout ────────────────── */
.triangle-canvas {
  /* Override Phase 1 white background with subtle warm tone */
  background: linear-gradient(135deg, #FBF9F4 0%, #F4EFE7 100%);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow:
    0 1px 2px rgba(26, 23, 20, 0.04),
    0 12px 32px rgba(26, 23, 20, 0.06);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.triangle-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%,
                rgba(139, 74, 160, 0.06) 0%,
                rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.triangle-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.triangle-layout .triangle-canvas {
  flex: 1 1 100%;
  min-width: 0;
  transition: flex-basis 0.55s var(--ev-ease), max-width 0.55s var(--ev-ease);
  max-width: 780px;
  margin: 0 auto;
}
.triangle-layout .triangle-panel {
  flex: 0 0 0%;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: flex-basis 0.55s var(--ev-ease),
              opacity 0.35s var(--ev-ease) 0.1s,
              margin-left 0.55s var(--ev-ease);
  margin-left: 0;
}
.triangle-layout[data-state="open"] .triangle-canvas {
  flex-basis: 54%;
  max-width: 100%;
  margin: 0;
}
.triangle-layout[data-state="open"] .triangle-panel {
  flex-basis: 46%;
  opacity: 1;
  margin-left: 22px;
}

.triangle-panel {
  position: relative;
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-md);
  padding: 30px 32px 28px;
}
.triangle-panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ev-border-default);
  background: var(--ev-bg-surface);
  color: var(--ev-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.triangle-panel-close:hover {
  background: var(--ev-bg-hover);
  color: var(--ev-text-primary);
  transform: scale(1.08);
}
.triangle-panel-content {
  display: none;
  animation: tpFadeIn 0.35s var(--ev-ease);
}
.triangle-panel-content.is-shown { display: block; }
.triangle-panel-empty { display: none; }
.triangle-panel-empty.is-shown {
  display: block;
  animation: tpFadeIn 0.35s var(--ev-ease);
}
@keyframes tpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tp-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pillar, var(--ev-purple));
}
.tp-num {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-text-tertiary);
}
.tp-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
}
.tp-lead {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ev-text-primary);
  font-weight: 500;
}
.tp-body {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}
.tp-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.tp-list li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ev-text-secondary);
  border-top: 1px dashed var(--ev-border-light);
}
.tp-list li:first-child { border-top: 0; }
.tp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pillar, var(--ev-purple));
  opacity: 0.75;
}
.tp-list strong { color: var(--ev-text-primary); font-weight: 700; }
.tp-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--ev-border-light);
}
.tp-meta-tag {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pillar, var(--ev-purple));
  background: color-mix(in srgb, var(--pillar, #8B4AA0) 10%, transparent);
  padding: 4px 10px;
  border-radius: 99px;
}
.tp-empty-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  margin-bottom: 10px;
}
.triangle-panel-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ev-text-secondary);
}

/* Pillar cards: mobile fallback only */
.pillars-grid-mobile { display: none; }

/* ── Inside a Neuron: enlarged arbor side-by-side ──────── */
.dendrite-feature {
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: start;
}
.df-visual {
  position: sticky;
  top: 96px;
}
.df-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-text-tertiary);
  margin-bottom: 12px;
}
.df-text { padding-top: 4px; }
.df-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ev-text-primary);
}
.df-body {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ev-text-secondary);
}
.df-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.df-card {
  padding: 16px 18px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-md);
}
.df-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ev-text-primary);
}
.df-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ev-text-secondary);
}
.df-card code {
  font-family: var(--ev-font-mono);
  background: var(--ev-bg-sunken);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}

/* Enlarge the arbor SVG in feature placement */
.df-visual .arbor-diagram { padding: 28px 22px 22px; }
.df-visual .arbor-svg { max-width: none; }

.neuron-layout-single { display: block; margin-top: 56px; }

/* ── Plasticity: brakes redesign ────────────────────────── */
.crit-ring-card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-radius: var(--ev-radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--ev-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}
.crit-ring-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}
.crit-node-label {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ev-text-primary);
}
.crit-center-label {
  font-family: var(--ev-font);
  font-size: 12.5px;
  font-weight: 700;
  fill: #C23050;
}
.crit-center-sub {
  font-family: var(--ev-font-mono);
  font-size: 10px;
  fill: var(--ev-text-tertiary);
}
.crit-ring-caption {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ev-text-secondary);
}
.crit-ring-caption strong { color: var(--ev-text-primary); font-weight: 700; }

.brakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.brake-tile {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-light);
  border-left: 3px solid #C23050;
  border-radius: var(--ev-radius-md);
  padding: 14px 16px;
  transition: transform 0.25s var(--ev-ease), box-shadow 0.25s var(--ev-ease);
}
.brake-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}
.brake-num {
  font-family: var(--ev-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ev-text-tertiary);
  display: block;
  margin-bottom: 4px;
}
.brake-tile strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-text-primary);
  margin-bottom: 4px;
}
.brake-tile small {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ev-text-secondary);
}

/* ── Inspect: stacked rows ──────────────────────────────── */
.inspect-stack {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.inspect-row { width: 100%; }
.inspect-row-terminal .inspect-terminal { max-width: 100%; }
.inspect-row-terminal .inspect-terminal-caption { max-width: 760px; }
.inspect-stack .inspect-cs-grid { margin-bottom: 0; }
.inspect-stack .inspect-nm-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px;
  align-items: center;
}
.inspect-stack .inspect-nm-card .nm-radar { margin-top: 0; height: 160px; }
.inspect-stack .inspect-nm-card p { margin: 0; }

/* ── RESPONSIVE — phase 3 ───────────────────────────────── */
@media (max-width: 980px) {
  /* Triangle: collapse to single column, show pillar fallback cards */
  .triangle-layout { flex-direction: column; }
  .triangle-layout .triangle-canvas {
    max-width: 100%;
    margin: 0;
    flex: 1 1 auto;
  }
  .triangle-layout .triangle-panel { display: none; }
  .pillars-grid-mobile { display: grid; }

  /* Dendrite feature: stack */
  .dendrite-feature { grid-template-columns: 1fr; gap: 32px; }
  .df-visual { position: static; }

  /* Plasticity ring card: stack */
  .crit-ring-card { grid-template-columns: 1fr; gap: 16px; }
  .brakes-grid { grid-template-columns: repeat(2, 1fr); }

  /* Inspect NM card: stack */
  .inspect-stack .inspect-nm-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .brakes-grid { grid-template-columns: 1fr; }
  .triangle-panel { padding: 24px 22px 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .triangle-layout .triangle-canvas,
  .triangle-layout .triangle-panel { transition: none; }
  .triangle-panel-content,
  .triangle-panel-empty { animation: none; }
}

/* ── RESPONSIVE — phase 1 additions ─────────────────────── */
@media (max-width: 980px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .frameloop-layout,
  .encoding-layout,
  .inspect-layout { grid-template-columns: 1fr; gap: 32px; }
  .encoding-visual { position: static; }
  .dendrite-strip-grid { grid-template-columns: 1fr; }
  .inspect-cs-grid { grid-template-columns: 1fr; }
  .openq-grid { grid-template-columns: 1fr; }
  .scale-meter { grid-template-columns: repeat(3, 1fr); }
  .triangle-canvas { padding: 12px; }
  .tri-edge-label,
  .tri-edge-label-sub { font-size: 10px; }
}

@media (max-width: 640px) {
  .frameloop, .encoding, .openq { padding: 80px 0; }
  .encoding-stages-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "s1"
      "s2"
      "s3"
      "s4";
    gap: 20px;
  }
  .encoding-stages-grid .enc-flow { display: none; }
  .encoding-stages-grid .enc-cluster { max-width: 260px; margin: 0 auto; }
  .scale-meter { grid-template-columns: repeat(2, 1fr); }
  .openq-cta { flex-direction: column; align-items: flex-start; }
}