/* ═══════════════════════════════════════════════════════════
   GENESIS VOICE — Brand Bible v2 Document Format
   Sidebar-first layout, white doc-body reading surface
   ═══════════════════════════════════════════════════════════ */

/* ── Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --navy: #0A1628;
  --deep-navy: #0F1D35;
  --gold: #D4A740;
  --gold-lt: #E8C36A;
  --vermillion: #D94825;
  --teal: #1ABC9C;
  --teal-start: #1A5276;
  --teal-mid: #2E86C1;
  --teal-end: #48C9B0;
  --byzantium: #702963;
  --white: #FFFFFF;
  --cream: #FAF8F4;
  --warm: #F5F0E8;
  --text: #2A2A2A;
  --muted: #555;
  --border: #E0DBD2;
  --sidebar-width: 260px;
  --heading-font: 'Cormorant Garamond', Georgia, serif;
  --body-font: 'Source Sans 3', -apple-system, sans-serif;
  --mono-font: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Layout ── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  display: flex;
  min-height: 100vh;
  font-family: var(--body-font);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text);
  background: var(--navy);
}

/* ═══════ SIDEBAR ═══════ */
.sidebar {
  width: var(--sidebar-width);
  background: var(--deep-navy);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 40px 24px;
  overflow-y: auto;
  z-index: 1000;
  border-right: 1px solid rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--teal), var(--teal-end), var(--teal));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tealShift 4s ease-in-out infinite;
  margin-bottom: 4px;
  display: block;
  text-decoration: none;
}

@keyframes tealShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.sidebar-sub {
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 40px;
}

.sidebar-nav {
  list-style: none;
  flex: 1;
}

.sidebar-section {
  font-family: var(--mono-font);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A919E;
  margin: 24px 0 8px 0;
  padding-left: 12px;
}

.sidebar-nav a {
  display: block;
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: all .2s ease;
  margin-bottom: 2px;
}

.sidebar-nav a:hover {
  color: var(--gold);
  background: rgba(212, 167, 64, .05);
  border-left-color: rgba(212, 167, 64, .3);
}

.sidebar-nav a.active {
  color: var(--gold);
  background: rgba(212, 167, 64, .08);
  border-left-color: var(--gold);
  font-weight: 500;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.sidebar-footer .genesis-word {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 300;
  background: linear-gradient(135deg, var(--teal), var(--teal-end));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tealShift 4s ease-in-out infinite;
}

.sidebar-footer .division {
  font-family: var(--mono-font);
  font-size: .65rem;
  color: #8A919E;
  margin-top: 4px;
  letter-spacing: .5px;
}

/* ═══════ MAIN CONTENT ═══════ */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  background: var(--cream);
}

/* ── Confidential Banner ── */
.conf-banner {
  background: var(--navy);
  padding: 12px 24px;
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-align: center;
}

/* ── Tier Bar ── */
.tier-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt), var(--gold));
}

/* ── Hero Section ── */
.hero {
  position: relative;
  padding: 80px 24px 64px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(26,58,92,.6) 0%, transparent 70%);
  pointer-events: none;
}

.hero-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(26,188,156,.1);
  border-radius: 50%;
  animation: pulse 6s ease-out infinite;
}
.pulse-ring:nth-child(1) { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation-delay: 0s; }
.pulse-ring:nth-child(2) { width: 200px; height: 200px; margin: -100px 0 0 -100px; animation-delay: 1.5s; }
.pulse-ring:nth-child(3) { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-delay: 3s; }
.pulse-ring:nth-child(4) { width: 400px; height: 400px; margin: -200px 0 0 -200px; animation-delay: 4.5s; }

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}

.badge {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 6px 16px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
}

.hero h1 {
  font-family: var(--heading-font);
  font-size: clamp(2.4rem,5vw,3.6rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 16px;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold);
}

.tagline {
  font-family: var(--body-font);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
  max-width: 680px;
  margin-bottom: 32px;
}

.stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stats > div {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-family: var(--heading-font);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.12;
  color: var(--gold);
}

.stat-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}

.hero-meta {
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .5px;
  color: rgba(255,255,255,.5);
  margin-top: 8px;
}

/* ═══════ DOCUMENT BODY — WHITE READING SURFACE ═══════ */
.doc-body {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  padding: clamp(32px,5vw,64px) clamp(24px,5vw,72px);
  box-shadow: 0 4px 60px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-radius: 2px;
}

/* ── Doc-Body Typography ── */
.doc-body h1 {
  font-family: var(--heading-font);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 300;
  color: var(--navy);
  margin: 56px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  line-height: 1.12;
}
.doc-body h1:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.doc-body h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  line-height: 1.2;
}

.doc-body h3 {
  font-family: var(--body-font);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  margin: 32px 0 12px;
}

.doc-body h4 {
  font-family: var(--body-font);
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a3a5c;
  margin: 24px 0 8px;
}

.doc-body p {
  margin-bottom: 16px;
  color: var(--text);
}

.doc-body ul, .doc-body ol {
  margin: 0 0 20px 24px;
  color: var(--text);
}

.doc-body li {
  margin-bottom: 8px;
}

.doc-body strong {
  font-weight: 600;
  color: var(--navy);
}

/* ── Tables — Light Background ── */
.doc-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.doc-body th {
  background: var(--navy);
  color: #fff;
  font-family: var(--mono-font);
  font-size: .78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 16px;
  text-align: left;
  font-weight: 500;
}

.doc-body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text);
}

.doc-body tr:hover td { background: rgba(201,168,76,.04); }
.doc-body tr:last-child td { border-bottom: none; }

/* ── At-A-Glance Box — Dark Card ── */
.at-glance {
  background: var(--navy);
  color: #fff;
  padding: 32px;
  border-radius: 12px;
  margin: 32px 0;
}
.ag-label, .at-glance h3 {
  color: var(--gold);
  font-family: var(--mono-font);
  font-size: .82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.at-glance ul { list-style: none; margin: 16px 0 0; padding: 0; }
.at-glance li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
}
.at-glance li:last-child { border-bottom: none; }
.at-glance li strong { color: var(--gold); }

/* ── Insight Box ── */
.insight-box {
  background: linear-gradient(135deg, rgba(201,168,76,.06), rgba(201,168,76,.02));
  border: 1px solid rgba(201,168,76,.2);
  border-left: 4px solid var(--gold);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 28px 0;
}
.insight-box strong { color: var(--navy); }
.insight-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ── Critical Box ── */
.critical-box {
  background: linear-gradient(135deg, rgba(217,72,37,.06), rgba(217,72,37,.02));
  border: 1px solid rgba(217,72,37,.2);
  border-left: 4px solid var(--vermillion);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 28px 0;
}
.critical-box strong { color: var(--vermillion); }
.critical-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 8px;
}

/* ── So-What Box ── */
.so-what {
  background: linear-gradient(135deg, rgba(26,58,92,.06), rgba(26,58,92,.02));
  border: 1px solid rgba(26,58,92,.2);
  border-left: 4px solid #1a3a5c;
  padding: 24px 28px;
  border-radius: 8px;
  margin: 28px 0;
}
.so-what strong { color: var(--navy); }
.so-what-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a3a5c;
  margin-bottom: 8px;
}

/* ── Implications Box ── */
.implications {
  background: linear-gradient(135deg, rgba(26,188,156,.06), rgba(26,188,156,.02));
  border: 1px solid rgba(26,188,156,.2);
  border-left: 4px solid var(--teal);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 28px 0;
}

/* ── Heartbeat Box ── */
.heartbeat-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(201,168,76,.06), rgba(201,168,76,.02));
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 28px 0;
}
.hb-heart { font-size: 2rem; flex-shrink: 0; }
.hb-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.hb-body p { margin: 0; color: var(--text); }

/* ── Key Stats Row — Dark Cards ── */
.key-stat-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.key-stat {
  flex: 1;
  min-width: 120px;
  text-align: center;
  background: var(--navy);
  border-radius: 12px;
  padding: 20px 16px;
}
.ks-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1.12;
}
.ks-label {
  display: block;
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}

/* ── Principle Grid & Cards — Light ── */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.principle-card {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.principle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
.pc-num {
  font-family: var(--heading-font);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
}
.pc-gold .pc-num { color: var(--gold); }
.pc-navy .pc-num { color: var(--teal); }
.pc-green .pc-num { color: #27ae60; }
.pc-red .pc-num { color: var(--vermillion); }
.pc-title {
  font-family: var(--body-font);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
}
.pc-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Module Grid — Light ── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.module-card {
  background: var(--warm);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  border-left-color: var(--teal);
}
.mc-num {
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.mc-title {
  font-family: var(--body-font);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
}
.mc-desc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Action Timeline — Light ── */
.action-timeline {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--border);
}
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  position: relative;
}
.action-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  margin-left: -27px;
}
.action-dot.immediate { background: var(--teal); }
.action-dot.short { background: var(--gold); }
.action-dot.medium { background: var(--vermillion); }
.action-time {
  font-family: var(--mono-font);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.action-time.immediate { color: var(--teal); }
.action-time.short { color: var(--gold); }
.action-time.medium { color: var(--vermillion); }
.action-title {
  font-family: var(--body-font);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
}
.action-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Gold Divider ── */
.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 48px 0;
}

/* ═══════ CHARTS & VISUALIZATIONS ═══════ */
.chart-container {
  margin: 36px 0;
  padding: 32px;
  background: var(--warm);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.chart-container svg { width: 100%; height: auto; display: block; }
.chart-title {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

/* ── Bar Chart ── */
.bar-chart { margin: 28px 0; }
.bar-row { margin-bottom: 16px; }
.bar-label {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.bar-label .bar-value {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--gold);
}
.bar-track {
  height: 32px;
  background: rgba(10,22,40,.06);
  border-radius: 16px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  display: flex;
  align-items: center;
  padding-left: 14px;
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy);
  transition: width .8s ease;
}
.bar-fill.teal { background: linear-gradient(90deg, #1A5276, var(--teal)); color: #fff; }
.bar-fill.vermillion { background: linear-gradient(90deg, var(--vermillion), #E8553A); color: #fff; }
.bar-fill.navy { background: linear-gradient(90deg, var(--navy), #1a3a5c); color: #fff; }

/* ── Horizontal Comparison ── */
.compare-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.compare-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  text-align: right;
}
.compare-bar {
  flex: 1;
  height: 28px;
  background: rgba(10,22,40,.06);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.compare-fill {
  height: 100%;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
}

/* ── Scorecard / Gauge ── */
.scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.score-item {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.score-value {
  font-family: var(--heading-font);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--vermillion);
  line-height: 1;
}
.score-value.good { color: #2D8B6F; }
.score-value.gold { color: var(--gold); }
.score-label {
  font-family: var(--mono-font);
  font-size: .82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.score-track {
  height: 6px;
  background: rgba(10,22,40,.08);
  border-radius: 3px;
  margin-top: 12px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--vermillion);
}
.score-fill.good { background: #2D8B6F; }
.score-fill.gold { background: var(--gold); }

/* ── Timeline Visual ── */
.gantt {
  margin: 28px 0;
  overflow-x: auto;
}
.gantt-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.gantt-label {
  width: 160px;
  flex-shrink: 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--navy);
  padding-right: 12px;
}
.gantt-track {
  flex: 1;
  height: 28px;
  position: relative;
  background: rgba(10,22,40,.03);
  border-radius: 4px;
}
.gantt-bar {
  position: absolute;
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--mono-font);
  font-size: .78rem;
  font-weight: 500;
  color: #fff;
}
.gantt-bar.gold { background: var(--gold); color: var(--navy); }
.gantt-bar.teal { background: var(--teal); }
.gantt-bar.navy { background: var(--navy); }
.gantt-bar.vermillion { background: var(--vermillion); }

/* ── Waterfall Chart ── */
.waterfall {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 240px;
  margin: 28px 0;
  padding: 20px 0;
  border-bottom: 2px solid var(--border);
}
.waterfall-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.waterfall-bar {
  width: 100%;
  max-width: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-lt));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--navy);
}
.waterfall-bar.total {
  background: linear-gradient(180deg, var(--teal), var(--teal-end));
  color: #fff;
}
.waterfall-label {
  font-family: var(--mono-font);
  font-size: .78rem;
  letter-spacing: .5px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}

/* ═══════ FOOTER — STAYS DARK ═══════ */
.footer {
  background: var(--navy);
  padding: 60px 5% 40px;
  text-align: center;
  margin-top: 60px;
}
.footer .gold-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  max-width: 200px;
  margin: 0 auto 32px;
}
.footer .quote {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.7);
  max-width: 500px;
  margin: 0 auto 28px;
}
.footer .genesis-word {
  font-family: var(--heading-font);
  font-size: 2.6rem;
  font-weight: 300;
  display: block;
  background: linear-gradient(135deg, #1A5276, #2E86C1, #1ABC9C, #48C9B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300% 300%;
  animation: genesis-flow 6s ease infinite;
}
@keyframes genesis-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.footer .living-intel {
  font-family: var(--mono-font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vermillion);
  display: block;
  margin-top: 8px;
}
.footer .division {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  margin-top: 12px;
}
.footer .legal {
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  margin-top: 8px;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 900px) {
  .sidebar {
    position: relative;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 24px 20px;
  }
  .main-content { margin-left: 0; }
  body { flex-direction: column; }
  .sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sidebar-nav a {
    padding: 8px 12px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    font-size: .88rem;
  }
  .sidebar-nav a.active {
    border-left: none;
    border-bottom-color: var(--gold);
  }
  .sidebar-section { display: none; }
  .hero { padding: 40px 24px; }
  .hero h1 { font-size: 2.2rem; }
  .doc-body { padding: 24px 18px; margin-top: 0; }
  .stats { gap: 20px; }
  .stat-num { font-size: 2.2rem; }
  .principle-grid { grid-template-columns: 1fr; }
  .key-stat-row { gap: 12px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: 1.8rem; }
  .stats { flex-direction: column; gap: 16px; }
  .module-grid { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .conf-banner, .tier-bar, .footer { display: none; }
  .main-content { margin-left: 0; }
  .hero { padding: 30px; background: #1a2a4a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-body { box-shadow: none; margin: 0; max-width: 100%; }
  body { font-size: 11pt; }
}