/* =========================================================
   NHẤT VIỆT LOGISTICS — GROWTH & REVENUE STRATEGY
   Premium editorial / executive strategy design system
   ========================================================= */

:root {
  --ink-950: #071426;
  --ink-900: #0b1b31;
  --ink-850: #10233d;
  --ink-800: #16304e;
  --ink-700: #294461;
  --ink-600: #49617a;
  --ink-500: #687d91;
  --ink-400: #8da0b1;

  --blue-700: #075bd8;
  --blue-600: #0d6efd;
  --blue-500: #2383ff;
  --cyan-600: #00a6bd;
  --cyan-500: #10bed0;
  --cyan-300: #75dbe4;
  --orange-600: #e87318;
  --orange-500: #ff8b2b;
  --red-600: #d8444f;
  --red-500: #ee5c66;
  --green-600: #15946f;
  --green-500: #23ae85;
  --amber-500: #e6a219;

  --paper: #f7f9fc;
  --paper-2: #f0f4f9;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.78);
  --surface-frost: rgba(255, 255, 255, 0.7);
  --line: #dfe7f0;
  --line-strong: #cad6e3;
  --shadow-xs: 0 1px 2px rgba(10, 27, 49, 0.04);
  --shadow-sm: 0 10px 30px rgba(10, 27, 49, 0.07);
  --shadow-md: 0 20px 60px rgba(10, 27, 49, 0.1);
  --shadow-lg: 0 34px 90px rgba(4, 19, 39, 0.16);
  --glow-blue: 0 0 0 1px rgba(13, 110, 253, 0.08), 0 24px 70px rgba(13, 110, 253, 0.12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-2xl: 40px;

  --container: 1240px;
  --nav-h: 76px;
  --section-y: clamp(84px, 8.4vw, 126px);
  --font: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --paper: #07111f;
  --paper-2: #0b1728;
  --surface: #0e1e32;
  --surface-soft: rgba(14, 30, 50, 0.82);
  --surface-frost: rgba(9, 23, 40, 0.75);
  --line: rgba(160, 187, 214, 0.15);
  --line-strong: rgba(160, 187, 214, 0.25);
  --ink-950: #f7fbff;
  --ink-900: #edf5ff;
  --ink-850: #dce9f7;
  --ink-800: #c7d8e9;
  --ink-700: #a9bfd4;
  --ink-600: #8ea7bd;
  --ink-500: #7891a8;
  --ink-400: #687f94;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 40px 110px rgba(0, 0, 0, 0.34);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink-900);
  background:
    radial-gradient(circle at 7% 8%, rgba(13, 110, 253, 0.07), transparent 24%),
    radial-gradient(circle at 90% 20%, rgba(16, 190, 208, 0.06), transparent 24%),
    var(--paper);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(78, 111, 145, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 111, 145, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
ul, ol { padding-left: 1.25rem; }
strong, b { font-weight: 700; }
::selection { color: #fff; background: var(--blue-600); }

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

/* ---------- Scroll progress ---------- */
.progress-bar {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10000;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-500), var(--orange-500));
  box-shadow: 0 0 18px rgba(16, 190, 208, 0.5);
  transition: width 0.08s linear;
}

/* ---------- Top navigation ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, height 0.25s ease;
}
.topbar.scrolled {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(7, 20, 38, 0.06);
  backdrop-filter: blur(18px) saturate(150%);
}
.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 245px;
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  flex: none;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--blue-600), var(--cyan-600));
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.25);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
}
.brand > span:last-child { display: grid; line-height: 1.2; }
.brand strong { font-size: 12px; letter-spacing: 0.07em; }
.brand small { margin-top: 4px; color: var(--ink-500); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.desktop-nav a {
  position: relative;
  padding: 9px 10px;
  color: var(--ink-600);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 650;
  transition: color .2s ease, background .2s ease;
}
.desktop-nav a:hover { color: var(--ink-900); background: color-mix(in srgb, var(--blue-600) 6%, transparent); }
.desktop-nav a.active { color: var(--blue-600); }
.desktop-nav a.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.icon-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue-600) 30%, var(--line)); background: var(--surface); }
.icon-btn svg { width: 17px; height: 17px; }
.mobile-only { display: none; }
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 20px;
  right: 20px;
  display: none;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
}
.mobile-menu.open { display: grid; }
.mobile-menu a { padding: 11px 12px; border-radius: 10px; color: var(--ink-700); font-size: 13px; font-weight: 600; }
.mobile-menu a:hover { color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 7%, transparent); }

/* ---------- Common headings ---------- */
.section { position: relative; padding: var(--section-y) 0; }
.section-tinted {
  background:
    radial-gradient(circle at 10% 0%, rgba(13,110,253,.06), transparent 28%),
    radial-gradient(circle at 90% 100%, rgba(16,190,208,.05), transparent 30%),
    var(--paper-2);
  border-block: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.section-heading { max-width: 900px; margin-bottom: 42px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-kicker,
.answer-thesis > div:last-child > span,
.north-star span,
.result-strip span,
.foundation-result-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.section-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  flex: none;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
}
.section-heading h2,
.question-header h2,
.final-wrap h2 {
  margin: 12px 0 0;
  color: var(--ink-950);
  font-size: clamp(30px, 4vw, 53px);
  line-height: 1.13;
  letter-spacing: -0.045em;
}
.section-heading h2 { font-size: clamp(29px, 3.6vw, 48px); }
.section-heading p { max-width: 760px; margin: 16px auto 0; color: var(--ink-600); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.8; }
.question-header {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-bottom: 30px;
}
.question-number {
  margin-top: -7px;
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--blue-600) 48%, transparent);
  font-size: clamp(72px, 8vw, 108px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.07em;
  user-select: none;
}
.question-header h2 { max-width: 1040px; font-size: clamp(30px, 3.55vw, 49px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(35,131,255,.25), transparent 27%),
    radial-gradient(circle at 78% 36%, rgba(16,190,208,.18), transparent 23%),
    linear-gradient(135deg, #06101f 0%, #07192d 45%, #0b2740 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.35));
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  z-index: -1;
  background: linear-gradient(to top, rgba(247,249,252,.12), transparent);
}
.hero-grid {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 70px) 0 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  align-items: center;
  gap: clamp(50px, 6vw, 86px);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #bcd3ea;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 6px rgba(16,190,208,.1), 0 0 16px rgba(16,190,208,.8); }
.hero h1 {
  max-width: 800px;
  margin: 24px 0 20px;
  color: #f8fbff;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.hero h1 > span {
  color: transparent;
  background: linear-gradient(92deg, #70c6ff 0%, #6fe1e5 52%, #ffb26f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-lead { max-width: 760px; margin: 0; color: #adc3d8; font-size: clamp(15px, 1.55vw, 18px); line-height: 1.85; }
.hero-lead b { color: #edf7ff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 700;
  font-size: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--cyan-600)); box-shadow: 0 14px 34px rgba(13,110,253,.28); }
.btn-primary:hover { box-shadow: 0 18px 42px rgba(13,110,253,.38); }
.btn-ghost { color: #d6e5f3; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.05); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 34px; }
.hero-meta div { display: inline-flex; align-items: center; gap: 8px; color: #90a9bf; font-size: 10px; font-weight: 600; }
.hero-meta svg { width: 15px; height: 15px; color: var(--cyan-300); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-orb-a { width: 420px; height: 420px; left: -180px; top: 17%; border: 1px solid rgba(86, 163, 255, .13); box-shadow: inset 0 0 90px rgba(13,110,253,.08); }
.hero-orb-b { width: 600px; height: 600px; right: -220px; bottom: -210px; border: 1px solid rgba(73, 219, 224, .1); box-shadow: inset 0 0 120px rgba(16,190,208,.07); }
.hero-visual { min-height: 560px; display: grid; place-items: center; position: relative; }
.strategy-orbit {
  position: relative;
  width: min(520px, 42vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transition: transform .25s ease-out;
}
.orbit-ring { position: absolute; border: 1px solid rgba(137, 194, 235, .17); border-radius: 50%; }
.ring-1 { inset: 18%; box-shadow: 0 0 45px rgba(35,131,255,.05); }
.ring-2 { inset: 3%; border-style: dashed; animation: orbitRotate 26s linear infinite; }
.orbit-core {
  position: relative;
  z-index: 4;
  width: 165px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid rgba(137, 217, 235, .32);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(35,131,255,.38), rgba(7,26,48,.92) 56%, rgba(5,17,33,.98));
  box-shadow: 0 0 0 12px rgba(33,115,187,.05), 0 24px 80px rgba(0,0,0,.3), inset 0 0 55px rgba(35,131,255,.15);
}
.orbit-core strong { margin-top: 10px; color: #fff; font-size: 19px; line-height: 1.15; letter-spacing: -.02em; }
.orbit-core small { margin-top: 6px; color: #89a9c4; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 7px rgba(16,190,208,.1), 0 0 24px rgba(16,190,208,.8); animation: pulseDot 2.5s ease-in-out infinite; }
.orbit-node {
  position: absolute;
  z-index: 5;
  width: 112px;
  min-height: 86px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #d9ecf8;
  border: 1px solid rgba(150, 198, 228, .15);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(20, 50, 79, .92), rgba(8, 27, 47, .85));
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.orbit-node::after { content: ""; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid rgba(255,255,255,.035); }
.orbit-node svg { width: 22px; height: 22px; color: var(--cyan-300); }
.orbit-node span { font-size: 10px; font-weight: 700; }
.node-1 { top: 3%; left: 50%; transform: translateX(-50%); }
.node-2 { top: 50%; right: -1%; transform: translateY(-50%); }
.node-3 { bottom: 3%; left: 50%; transform: translateX(-50%); }
.node-4 { top: 50%; left: -1%; transform: translateY(-50%); }
@keyframes orbitRotate { to { transform: rotate(360deg); } }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 11px rgba(16,190,208,.035), 0 0 30px rgba(16,190,208,.9); } }

/* ---------- Executive overview ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}
.compare-card,
.strategy-card,
.foundation-card,
.panel,
.detail-board,
.value-equation,
.timeline-card,
.deal-gate,
.system-flywheel,
.ownership-board,
.execution-architecture,
.competitive-section,
.roadmap-card {
  position: relative;
  overflow: hidden;
}
.compare-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.compare-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.compare-card.danger::before { background: linear-gradient(var(--red-500), var(--orange-500)); }
.compare-card.success::before { background: linear-gradient(var(--cyan-500), var(--blue-600)); }
.compare-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 15px; }
.compare-card.danger .compare-icon { color: var(--red-600); background: color-mix(in srgb, var(--red-500) 10%, transparent); }
.compare-card.success .compare-icon { color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 10%, transparent); }
.compare-icon svg { width: 23px; height: 23px; }
.mini-label { color: var(--ink-500); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.compare-card h3 { margin: 7px 0 18px; color: var(--ink-950); font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.025em; }
.check-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 26px; color: var(--ink-700); font-size: 13px; }
.check-list li::before { position: absolute; left: 0; top: .15em; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; }
.check-list.negative li::before { content: "×"; color: var(--red-600); background: color-mix(in srgb, var(--red-500) 10%, transparent); }
.check-list.positive li::before { content: "✓"; color: var(--green-600); background: color-mix(in srgb, var(--green-500) 11%, transparent); }
.transform-arrow { display: grid; place-items: center; align-content: center; gap: 12px; min-width: 0; }
.arrow-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.arrow-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; color: var(--blue-600); border: 1px solid color-mix(in srgb, var(--blue-600) 20%, var(--line)); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.arrow-pill svg { width: 14px; height: 14px; }
.north-star {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid rgba(13,110,253,.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-600) 7%, var(--surface)), color-mix(in srgb, var(--cyan-500) 5%, var(--surface)));
  box-shadow: var(--glow-blue);
}
.north-star-icon { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; border-radius: 18px; background: linear-gradient(145deg, var(--blue-600), var(--cyan-600)); box-shadow: 0 14px 30px rgba(13,110,253,.22); }
.north-star-icon svg { width: 25px; height: 25px; }
.north-star h3 { margin: 7px 0 0; color: var(--ink-950); font-size: clamp(18px, 2vw, 25px); line-height: 1.45; letter-spacing: -.02em; }

/* ---------- Thesis / principles ---------- */
.answer-thesis {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  margin: 0 0 22px;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, var(--blue-600) 15%, var(--line));
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue-600) 6%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}
.answer-thesis::after { content: ""; position: absolute; right: -70px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(16,190,208,.08), transparent 68%); pointer-events: none; }
.answer-thesis-icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--blue-600); border-radius: 18px; background: color-mix(in srgb, var(--blue-600) 10%, transparent); }
.answer-thesis-icon svg { width: 26px; height: 26px; }
.answer-thesis h3 { max-width: 1030px; margin: 8px 0 8px; color: var(--ink-950); font-size: clamp(18px, 2vw, 25px); line-height: 1.52; letter-spacing: -.025em; }
.answer-thesis p { max-width: 1050px; margin: 0; color: var(--ink-600); font-size: 13px; line-height: 1.8; }
.answer-thesis p b { color: var(--ink-800); }
.principle-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  padding: 17px 20px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(105deg, var(--ink-900), var(--ink-800));
  box-shadow: 0 14px 34px rgba(7,20,38,.14);
}
.principle-card > svg { width: 21px; height: 21px; color: var(--cyan-300); }
.principle-card > div { min-width: 0; }
.principle-card span { display: block; margin-bottom: 3px; color: #86a5bf; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.principle-card strong { display: block; color: #f3f8fd; font-size: 13px; line-height: 1.55; }

/* ---------- Strategy / foundation card grids ---------- */
.strategy-grid,
.foundation-grid { display: grid; gap: 16px; margin-top: 22px; }
.strategy-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strategy-card,
.foundation-card {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.strategy-card:hover,
.foundation-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--blue-600) 24%, var(--line)); box-shadow: var(--shadow-md); }
.strategy-card > span,
.foundation-card > span { position: absolute; right: 18px; top: 18px; color: color-mix(in srgb, var(--blue-600) 48%, var(--line)); font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.strategy-icon,
.foundation-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue-600); border-radius: 14px; background: color-mix(in srgb, var(--blue-600) 9%, transparent); }
.strategy-icon svg,
.foundation-icon svg { width: 21px; height: 21px; }
.strategy-card h3,
.foundation-card h3 { margin: 18px 0 8px; color: var(--ink-950); font-size: 17px; letter-spacing: -.02em; }
.strategy-card p,
.foundation-card p { margin: 0; color: var(--ink-600); font-size: 12px; line-height: 1.75; }
.tag-row,
.channel-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag-row span,
.channel-stack span { padding: 5px 7px; color: var(--ink-600); border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); font-size: 8px; font-weight: 700; white-space: nowrap; }
.signal-line { display: flex; align-items: flex-end; gap: 5px; height: 30px; margin-top: 18px; }
.signal-line span { width: 6px; border-radius: 6px; background: linear-gradient(var(--cyan-500), var(--blue-600)); }
.signal-line span:nth-child(1){height: 28%}.signal-line span:nth-child(2){height: 50%}.signal-line span:nth-child(3){height: 72%}.signal-line span:nth-child(4){height: 100%}
.partner-dots { display: flex; align-items: center; gap: 7px; margin-top: 18px; }
.partner-dots b { width: 10px; height: 10px; border: 2px solid color-mix(in srgb, var(--blue-600) 60%, var(--line)); border-radius: 50%; background: var(--surface); }
.partner-dots b:nth-child(3){ width: 15px; height: 15px; background: var(--cyan-500); border-color: var(--cyan-500); box-shadow: 0 0 0 5px rgba(16,190,208,.08); }

/* ---------- Generic boards ---------- */
.panel,
.detail-board,
.execution-architecture,
.ownership-board,
.system-flywheel,
.timeline-card,
.value-equation {
  margin-top: 22px;
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.panel-head,
.detail-board-head,
.deal-gate-head,
.flywheel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.panel-head h3,
.detail-board-head h3,
.deal-gate-head h3,
.flywheel-title h3 { margin: 6px 0 0; color: var(--ink-950); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.4; letter-spacing: -.025em; }
.data-badge { flex: none; padding: 7px 9px; color: var(--ink-600); border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); font-size: 8px; font-weight: 750; letter-spacing: .04em; }

/* ---------- Q1 logic track ---------- */
.logic-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}
.logic-track > article {
  min-width: 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface), var(--paper-2));
}
.logic-track > article.active { border-color: rgba(16,190,208,.3); background: linear-gradient(145deg, color-mix(in srgb, var(--blue-600) 7%, var(--surface)), color-mix(in srgb, var(--cyan-500) 9%, var(--surface))); box-shadow: 0 14px 35px rgba(13,110,253,.08); }
.logic-track > article > span { color: var(--blue-600); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.logic-track > article > svg { width: 24px; height: 24px; margin: 18px 0 13px; color: var(--blue-600); flex: none; }
.logic-track > article > strong { margin-bottom: 8px; color: var(--ink-950); font-size: 14px; line-height: 1.45; }
.logic-track > article > small { color: var(--ink-600); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.logic-track > svg { width: 17px; height: 17px; align-self: center; justify-self: center; color: var(--ink-400); }

/* ---------- Funnel ---------- */
.funnel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  counter-reset: funnel;
}
.funnel-step {
  position: relative;
  min-width: 0;
  min-height: 154px;
  padding: 18px 15px 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(160deg, var(--surface), var(--paper-2));
  overflow: hidden;
}
.funnel-step::before {
  counter-increment: funnel;
  content: "0" counter(funnel);
  display: block;
  margin-bottom: 17px;
  color: var(--blue-600);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.funnel-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: .72; background: linear-gradient(90deg, var(--blue-600), var(--cyan-500)); }
.funnel-step:nth-child(2)::after{opacity:.78}.funnel-step:nth-child(3)::after{opacity:.84}.funnel-step:nth-child(4)::after{opacity:.9}.funnel-step:nth-child(5)::after{opacity:.96}.funnel-step:nth-child(6)::after{opacity:1}
.funnel-step strong { display: block; min-height: 42px; color: var(--ink-950); font-size: 12px; line-height: 1.4; }
.funnel-step span { display: block; margin-top: 8px; color: var(--ink-600); font-size: 9px; line-height: 1.65; }
.pipeline-principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.principle-box { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--paper-2); }
.principle-box.highlight { background: linear-gradient(135deg, color-mix(in srgb, var(--blue-600) 8%, var(--paper-2)), color-mix(in srgb, var(--cyan-500) 8%, var(--paper-2))); }
.principle-box > svg { width: 21px; height: 21px; color: var(--blue-600); }
.principle-box span { display: block; color: var(--ink-500); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.principle-box strong { display: block; margin-top: 3px; color: var(--ink-800); font-size: 10px; line-height: 1.55; }
.principle-arrow { display: grid; place-items: center; color: var(--ink-400); }
.principle-arrow svg { width: 16px; height: 16px; }

/* ---------- Result strip ---------- */
.result-strip,
.foundation-results {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 20px 24px;
  border: 1px solid rgba(21,148,111,.16);
  border-radius: 19px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green-500) 7%, var(--surface)), color-mix(in srgb, var(--cyan-500) 4%, var(--surface)));
  box-shadow: var(--shadow-xs);
}
.result-strip > svg,
.foundation-result-icon { width: 43px; height: 43px; padding: 10px; color: var(--green-600); border-radius: 14px; background: color-mix(in srgb, var(--green-500) 10%, transparent); }
.result-strip strong { display: block; margin-top: 5px; color: var(--ink-900); font-size: 13px; line-height: 1.65; }

/* ---------- Q2 risk / revenue ---------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.two-col > .panel { margin-top: 22px; }
.risk-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.risk-dimensions > div { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.risk-dimensions svg { width: 19px; height: 19px; margin-bottom: 12px; color: var(--red-500); }
.risk-dimensions span { display: block; color: var(--ink-500); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.risk-dimensions strong { display: block; margin-top: 5px; color: var(--ink-900); font-size: 11px; line-height: 1.5; }
.risk-dimensions small { display: block; margin-top: 5px; color: var(--ink-600); font-size: 9px; line-height: 1.6; }
.chart-note { margin: 15px 0 0; color: var(--ink-500); font-size: 9px; font-style: italic; }
.revenue-drivers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.revenue-drivers > div { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-areas: "icon name" "icon code"; align-items: center; column-gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper-2); }
.revenue-drivers svg { grid-area: icon; width: 20px; height: 20px; color: var(--blue-600); }
.revenue-drivers span { grid-area: name; color: var(--ink-800); font-size: 10px; font-weight: 650; }
.revenue-drivers b { grid-area: code; color: var(--ink-500); font-size: 7px; letter-spacing: .08em; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.portfolio-grid article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, var(--surface), var(--paper-2)); }
.portfolio-grid svg { width: 21px; height: 21px; margin-bottom: 15px; color: var(--blue-600); }
.portfolio-grid strong { display: block; color: var(--ink-900); font-size: 12px; }
.portfolio-grid p { margin: 7px 0 0; color: var(--ink-600); font-size: 9px; line-height: 1.7; }

/* ---------- Equation ---------- */
.value-equation { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--blue-600) 4%, var(--surface))); }
.equation-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--ink-600); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.equation-title svg { width: 19px; height: 19px; color: var(--blue-600); }
.equation { display: grid; grid-template-columns: 1.08fr 32px 1fr 32px 1fr 32px 1fr; gap: 8px; align-items: center; }
.equation-term { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.equation-term small { display: block; color: var(--ink-500); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.equation-term strong { display: block; margin-top: 5px; color: var(--ink-900); font-size: 11px; }
.equation-term.positive { border-color: rgba(21,148,111,.18); background: color-mix(in srgb, var(--green-500) 7%, var(--surface)); }
.equation-term.warning { border-color: rgba(230,162,25,.18); background: color-mix(in srgb, var(--amber-500) 7%, var(--surface)); }
.equation-term.danger { border-color: rgba(216,68,79,.18); background: color-mix(in srgb, var(--red-500) 7%, var(--surface)); }
.equation-symbol { display: grid; place-items: center; color: var(--ink-500); font-size: 22px; font-weight: 500; }

/* ---------- Renewal timeline ---------- */
.timeline-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center; }
.timeline-intro h3 { margin: 7px 0 4px; color: var(--ink-950); font-size: 21px; line-height: 1.4; }
.timeline-intro p { margin: 0; color: var(--ink-600); font-size: 11px; }
.renewal-timeline { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.renewal-timeline::before { content: ""; position: absolute; left: 7%; right: 7%; top: 29px; height: 1px; background: linear-gradient(90deg, var(--blue-600), var(--cyan-500)); opacity: .25; }
.renewal-node { position: relative; z-index: 1; min-width: 0; padding: 14px 10px; text-align: center; }
.renewal-node svg { width: 24px; height: 24px; margin: 0 auto 13px; padding: 5px; box-sizing: content-box; color: var(--blue-600); border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.renewal-node.active svg { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--blue-600), var(--cyan-600)); box-shadow: 0 7px 18px rgba(13,110,253,.18); }
.renewal-node b { display: block; color: var(--ink-900); font-size: 10px; line-height: 1.35; }
.renewal-node small { display: block; margin-top: 5px; color: var(--ink-500); font-size: 8px; line-height: 1.55; }

/* ---------- Dark Q3 ---------- */
.section-dark {
  color: #d9e8f4;
  background:
    radial-gradient(circle at 11% 15%, rgba(35,131,255,.15), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(16,190,208,.11), transparent 26%),
    linear-gradient(150deg, #061221 0%, #091b2e 46%, #0b2439 100%);
  border-block: none;
}
.section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 50px 50px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.section-dark .question-header h2,
.section-dark .deal-gate h3,
.section-dark .competitive-section h3 { color: #f7fbff; }
.section-dark .question-number { -webkit-text-stroke-color: rgba(117,219,228,.38); }
.section-dark .section-kicker { color: #75dbe4; }
.section-dark .section-kicker::before { background: linear-gradient(90deg, #68b9ff, #72dce3); }
.dark-thesis {
  color: #d7e7f4;
  border-color: rgba(134,190,226,.14);
  background: linear-gradient(140deg, rgba(29,64,96,.68), rgba(10,29,49,.72));
  box-shadow: 0 25px 70px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.dark-thesis .answer-thesis-icon { color: #75dbe4; background: rgba(117,219,228,.1); }
.dark-thesis > div:last-child > span { color: #75dbe4; }
.dark-thesis h3 { color: #f2f8fd; }
.dark-thesis p { color: #9db4c7; }
.dark-thesis p b { color: #d7e7f4; }
.power-chain { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; align-items: center; gap: 8px; margin: 24px 0 0; }
.power-chain > div { min-width: 0; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; color: #bed4e5; border: 1px solid rgba(141,179,207,.13); border-radius: 16px; background: rgba(255,255,255,.04); }
.power-chain > div.accent { color: #fff; border-color: rgba(117,219,228,.25); background: linear-gradient(135deg, rgba(13,110,253,.25), rgba(16,190,208,.14)); }
.power-chain > div svg { width: 20px; height: 20px; color: #75dbe4; }
.power-chain > div span { font-size: 10px; font-weight: 700; }
.power-chain > svg { width: 16px; height: 16px; color: #6c879d; }
.deal-gate { margin-top: 22px; padding: 26px; border: 1px solid rgba(141,179,207,.14); border-radius: var(--radius-xl); background: rgba(255,255,255,.035); box-shadow: 0 24px 70px rgba(0,0,0,.12); backdrop-filter: blur(8px); }
.deal-gate-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.deal-gate-grid article { min-width: 0; min-height: 165px; display: flex; flex-direction: column; padding: 18px; border: 1px solid rgba(141,179,207,.12); border-radius: 17px; background: rgba(255,255,255,.035); }
.deal-gate-grid article.active { border-color: rgba(117,219,228,.27); background: linear-gradient(145deg, rgba(35,131,255,.12), rgba(16,190,208,.07)); }
.deal-gate-grid span { color: #75dbe4; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.deal-gate-grid strong { margin-top: 22px; color: #f5f9fc; font-size: 12px; line-height: 1.45; }
.deal-gate-grid small { margin-top: 7px; color: #8fa8bc; font-size: 9px; line-height: 1.65; }
.negotiation-grid > .panel { border-color: rgba(141,179,207,.14); background: rgba(255,255,255,.045); box-shadow: 0 24px 70px rgba(0,0,0,.12); }
.glass-panel .panel-head h3 { color: #f2f7fb; }
.give-get-list { display: grid; gap: 9px; }
.give-get-list > div { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); align-items: center; gap: 8px; }
.give-get-list .give,
.give-get-list .get { min-width: 0; padding: 10px 12px; border-radius: 12px; font-size: 9px; font-weight: 700; text-align: center; }
.give-get-list .give { color: #ffb5ba; background: rgba(238,92,102,.08); border: 1px solid rgba(238,92,102,.13); }
.give-get-list .get { color: #94e4cf; background: rgba(35,174,133,.08); border: 1px solid rgba(35,174,133,.13); }
.give-get-list svg { width: 15px; height: 15px; justify-self: center; color: #6f8da3; }
.price-ladder { display: grid; gap: 8px; }
.price-step { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-radius: 12px; overflow: hidden; }
.price-step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.price-step span { color: #93acc0; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.price-step strong { color: #e8f2fa; font-size: 10px; }
.price-step.target { background: rgba(35,174,133,.08); }.price-step.target::before{background:#3ed1a7}
.price-step.negotiate { background: rgba(35,131,255,.08); }.price-step.negotiate::before{background:#53a1ff}
.price-step.floor { background: rgba(230,162,25,.08); }.price-step.floor::before{background:#f3b743}
.price-step.stop { background: rgba(238,92,102,.08); }.price-step.stop::before{background:#f46c75}
.competitive-section { margin-top: 24px; padding: 30px; border: 1px solid rgba(141,179,207,.13); border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); }
.competitive-section .section-heading { margin-bottom: 25px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pillar-grid article { min-width: 0; padding: 20px; border: 1px solid rgba(141,179,207,.11); border-radius: 17px; background: rgba(255,255,255,.035); }
.pillar-grid svg { width: 21px; height: 21px; color: #75dbe4; }
.pillar-grid span { display: block; margin-top: 18px; color: #6fc6d4; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.pillar-grid h4 { margin: 5px 0 6px; color: #f4f9fd; font-size: 13px; }
.pillar-grid p { margin: 0; color: #8fa8bc; font-size: 9px; line-height: 1.7; }
.result-strip.dark-result { border-color: rgba(117,219,228,.17); background: linear-gradient(135deg, rgba(35,131,255,.12), rgba(16,190,208,.08)); box-shadow: none; }
.result-strip.dark-result > svg { color: #75dbe4; background: rgba(117,219,228,.09); }
.result-strip.dark-result span { color: #75dbe4; }
.result-strip.dark-result strong { color: #eaf4fb; }

/* ---------- Q4 team / flywheel ---------- */
.revenue-team { margin: 20px auto 0; display: grid; place-items: center; }
.team-hub { position: relative; width: min(760px, 78vw); height: 520px; }
.team-hub::before,
.team-hub::after { content: ""; position: absolute; inset: 50%; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; }
.team-hub::before { width: 355px; height: 355px; border: 1px dashed color-mix(in srgb, var(--blue-600) 22%, var(--line)); animation: orbitRotate 34s linear infinite; }
.team-hub::after { width: 465px; height: 465px; border: 1px solid color-mix(in srgb, var(--cyan-500) 11%, var(--line)); }
.team-center { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%,-50%); width: 145px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; text-align: center; color: #fff; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #2e89ff, #0c5ed2 50%, #073879); box-shadow: 0 22px 55px rgba(13,110,253,.28), 0 0 0 12px rgba(13,110,253,.06); }
.team-center span { font-size: 8px; letter-spacing: .17em; }.team-center strong { font-size: 22px; line-height: 1.1; }
.team-unit { position: absolute; z-index: 4; width: 152px; min-height: 96px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 12px; text-align: center; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.team-unit svg { width: 20px; height: 20px; color: var(--blue-600); }.team-unit span { color: var(--ink-900); font-size: 10px; font-weight: 750; }.team-unit small { color: var(--ink-500); font-size: 8px; }
.team-unit.u1{left:50%;top:0;transform:translateX(-50%)}.team-unit.u2{right:5%;top:22%}.team-unit.u3{right:5%;bottom:15%}.team-unit.u4{left:50%;bottom:0;transform:translateX(-50%)}.team-unit.u5{left:5%;bottom:15%}.team-unit.u6{left:5%;top:22%}
.system-flywheel { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--cyan-500) 3%, var(--surface))); }
.flywheel-track { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr; align-items: stretch; gap: 5px; }
.flywheel-track > div { min-width: 0; min-height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.flywheel-track > div.active { border-color: rgba(16,190,208,.25); background: linear-gradient(145deg, color-mix(in srgb, var(--blue-600) 7%, var(--surface)), color-mix(in srgb, var(--cyan-500) 8%, var(--surface))); }
.flywheel-track > div svg { width: 20px; height: 20px; margin-bottom: 14px; color: var(--blue-600); }
.flywheel-track > div strong { color: var(--ink-900); font-size: 10px; line-height: 1.45; }.flywheel-track > div small { margin-top: 5px; color: var(--ink-500); font-size: 8px; line-height: 1.5; }
.flywheel-track > svg { width: 15px; height: 15px; align-self: center; justify-self: center; color: var(--ink-400); }

/* ---------- Revenue bridge / data flow ---------- */
.bridge-grid { display: grid; grid-template-columns: 1.1fr 25px 1fr 25px 1fr 25px 1.15fr 25px 1fr 25px 1.1fr; align-items: stretch; gap: 6px; }
.bridge-item { min-width: 0; min-height: 92px; display: grid; place-items: center; align-content: center; padding: 12px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.bridge-item small { color: var(--blue-600); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.bridge-item strong { margin-top: 5px; color: var(--ink-900); font-size: 9px; line-height: 1.4; }
.bridge-item.base { background: color-mix(in srgb, var(--blue-600) 5%, var(--surface)); }.bridge-item.danger { background: color-mix(in srgb, var(--red-500) 6%, var(--surface)); }.bridge-item.danger small{color:var(--red-600)}.bridge-item.final { color:#fff; border-color:transparent; background:linear-gradient(145deg,var(--blue-600),var(--cyan-600)); }.bridge-item.final small,.bridge-item.final strong{color:#fff}
.bridge-op { display: grid; place-items: center; color: var(--ink-500); font-size: 22px; font-weight: 650; }.bridge-op.plus{color:var(--green-600)}.bridge-op.minus{color:var(--red-600)}.bridge-op.eq{color:var(--blue-600)}
.data-flow { display: grid; grid-template-columns: repeat(11, auto); align-items: center; justify-content: space-between; gap: 5px; padding: 10px 0; }
.data-flow span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink-800); font-size: 8px; font-weight: 750; white-space: nowrap; }
.data-flow svg { width: 13px; height: 13px; color: var(--ink-400); }
.panel blockquote { margin: 16px 0 0; padding: 14px 16px; color: var(--ink-700); border-left: 3px solid var(--cyan-500); border-radius: 0 12px 12px 0; background: var(--paper-2); font-size: 10px; line-height: 1.7; }
.cadence-list { display: grid; gap: 9px; }
.cadence-list > div { display: grid; grid-template-columns: 76px minmax(0,1fr) minmax(0,1.2fr); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.cadence-list span { color: var(--blue-600); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.cadence-list strong { color: var(--ink-900); font-size: 9px; }.cadence-list small { color: var(--ink-500); font-size: 8px; text-align: right; }
.ownership-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.ownership-grid > div { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper-2); }
.ownership-grid span { color: var(--blue-600); font-size: 7px; font-weight: 800; letter-spacing: .09em; }.ownership-grid strong { display:block; margin-top:9px; color:var(--ink-900); font-size:10px; line-height:1.5}.ownership-grid small{display:block;margin-top:6px;color:var(--ink-500);font-size:8px;line-height:1.6}
.kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.kpi-card { min-width: 0; min-height: 143px; display: flex; flex-direction: column; justify-content: flex-end; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(160deg, var(--surface), var(--paper-2)); }
.kpi-card svg { width: 20px; height: 20px; margin-bottom: auto; color: var(--blue-600); }.kpi-card span{color:var(--ink-500);font-size:7px;font-weight:800;letter-spacing:.07em}.kpi-card b{margin-top:3px;color:var(--ink-900);font-size:11px}.kpi-card small{margin-top:3px;color:var(--ink-500);font-size:8px;line-height:1.4}

/* ---------- Q5 foundation ---------- */
.foundation-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.foundation-principle { background: linear-gradient(105deg, #0c2945, #0a4261); }
.execution-architecture { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--blue-600) 3%, var(--surface))); }
.architecture-stack { display: grid; gap: 9px; }
.arch-layer { position: relative; min-width: 0; display: grid; grid-template-columns: 44px 210px minmax(0,1fr); align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.arch-layer::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--blue-600),var(--cyan-500)); opacity: var(--layer-opacity,.45); }
.arch-layer.l1{--layer-opacity:.28}.arch-layer.l2{--layer-opacity:.42}.arch-layer.l3{--layer-opacity:.56}.arch-layer.l4{--layer-opacity:.72}.arch-layer.l5{--layer-opacity:1}
.arch-layer span { color: var(--blue-600); font-size: 8px; font-weight: 800; letter-spacing: .08em; }.arch-layer strong{color:var(--ink-900);font-size:11px}.arch-layer small{color:var(--ink-500);font-size:9px;line-height:1.55}
.daily-standards { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.daily-standards > div { min-width:0; padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--paper-2); }
.daily-standards svg { width:20px;height:20px;margin-bottom:14px;color:var(--blue-600) }.daily-standards strong{display:block;color:var(--ink-900);font-size:10px;line-height:1.45}.daily-standards span{display:block;margin-top:7px;color:var(--ink-500);font-size:8px;line-height:1.6}
.foundation-subhead { margin: clamp(58px,6vw,82px) auto 26px; }
.role-shift-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px }
.role-shift-card { min-width:0;padding:17px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-xs) }
.role-name{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}.role-name svg{width:19px;height:19px;color:var(--blue-600)}.role-name strong{color:var(--ink-900);font-size:10px}
.role-shift-copy{display:grid;gap:6px;margin-top:12px}.role-shift-copy small{color:var(--ink-500);font-size:7px;font-weight:800;letter-spacing:.07em}.role-shift-copy span{color:var(--ink-700);font-size:9px}.role-shift-copy > svg{width:14px;height:14px;color:var(--cyan-600);transform:rotate(90deg)}.role-shift-copy b{color:var(--ink-900);font-size:9px;line-height:1.6}
.service-contrast { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
.service-side { min-width:0;padding:16px;border-radius:14px }.service-side > span{display:block;margin-bottom:8px;font-size:8px;font-weight:800;letter-spacing:.08em}.service-side ul{display:grid;gap:7px;margin:0;padding-left:17px}.service-side li{font-size:9px;line-height:1.55}.no-side{background:color-mix(in srgb,var(--red-500) 7%,var(--surface));border:1px solid rgba(216,68,79,.12)}.no-side>span{color:var(--red-600)}.yes-side{background:color-mix(in srgb,var(--green-500) 7%,var(--surface));border:1px solid rgba(21,148,111,.12)}.yes-side>span{color:var(--green-600)}
.service-note{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--paper-2)}.service-note svg{width:18px;height:18px;color:var(--blue-600)}.service-note strong{font-size:9px;line-height:1.6;color:var(--ink-800)}
.handoff-flow { display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;align-items:center;gap:4px }
.handoff-flow > div{min-width:0;display:grid;place-items:center;align-content:center;gap:6px;min-height:78px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--paper-2)}.handoff-flow > div svg{width:18px;height:18px;color:var(--blue-600)}.handoff-flow > div strong{font-size:8px;color:var(--ink-900)}.handoff-flow > svg{width:13px;height:13px;justify-self:center;color:var(--ink-400)}
.handoff-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.handoff-rules div{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:11px}.handoff-rules svg{width:16px;height:16px;color:var(--cyan-600);flex:none}.handoff-rules span{font-size:8px;color:var(--ink-700);font-weight:650}
.truth-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;margin-top:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--blue-600) 5%,var(--paper-2))}.truth-note svg{width:18px;height:18px;color:var(--blue-600);margin-top:2px}.truth-note p{margin:0;color:var(--ink-600);font-size:9px;line-height:1.65}.truth-note strong{color:var(--ink-850)}
.scenario-flow,.improvement-loop { display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:stretch;gap:6px }
.scenario-flow article,.improvement-step{min-width:0;min-height:148px;display:flex;flex-direction:column;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--paper-2)}.scenario-flow article.active,.improvement-step.active{border-color:rgba(16,190,208,.25);background:linear-gradient(145deg,color-mix(in srgb,var(--blue-600) 7%,var(--surface)),color-mix(in srgb,var(--cyan-500) 8%,var(--surface)))}
.scenario-flow article span,.improvement-step>span{color:var(--blue-600);font-size:7px;font-weight:800;letter-spacing:.07em}.scenario-flow article strong,.improvement-step strong{margin-top:20px;color:var(--ink-900);font-size:10px;line-height:1.45}.scenario-flow article small,.improvement-step small{margin-top:7px;color:var(--ink-500);font-size:8px;line-height:1.55}.scenario-flow>svg,.improvement-loop>svg{width:14px;height:14px;align-self:center;justify-self:center;color:var(--ink-400)}
.improvement-step>svg{width:19px;height:19px;margin-top:18px;color:var(--blue-600)}.improvement-step strong{margin-top:7px}.improvement-quote{margin:16px 0 0;padding:14px 16px;color:var(--ink-700);border-left:3px solid var(--cyan-500);border-radius:0 12px 12px 0;background:var(--paper-2);font-size:10px;line-height:1.65}
.foundation-results { grid-template-columns: 50px minmax(0, 1fr) minmax(260px, .8fr); }
.foundation-result-icon { display:grid;place-items:center;padding:0 }.foundation-result-icon svg{width:22px;height:22px}.foundation-result-copy h3{margin:5px 0 0;color:var(--ink-900);font-size:13px;line-height:1.6}.foundation-result-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.foundation-result-tags span{padding:5px 7px;color:var(--green-600);border:1px solid rgba(21,148,111,.13);border-radius:8px;background:rgba(35,174,133,.05);font-size:7px;font-weight:700}

/* ---------- Roadmap ---------- */
.roadmap { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px }
.roadmap::before{content:"";position:absolute;left:4%;right:4%;top:30px;height:1px;background:linear-gradient(90deg,var(--blue-600),var(--cyan-500));opacity:.16}
.roadmap-card{min-width:0;padding:24px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs);transition:transform .25s ease,box-shadow .25s ease}
.roadmap-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.roadmap-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}.roadmap-top span{padding:7px 9px;color:var(--blue-600);border:1px solid color-mix(in srgb,var(--blue-600) 15%,var(--line));border-radius:999px;background:var(--surface);font-size:8px;font-weight:800;letter-spacing:.05em}.roadmap-top b{color:color-mix(in srgb,var(--blue-600) 40%,var(--line));font-size:26px}.roadmap-card h3{margin:22px 0 12px;color:var(--ink-950);font-size:18px}.roadmap-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.roadmap-card li{position:relative;padding-left:15px;color:var(--ink-600);font-size:10px}.roadmap-card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cyan-500)}

/* ---------- Conclusion ---------- */
.final-section { position:relative;overflow:hidden;padding:clamp(90px,9vw,135px) 0;color:#fff;background:radial-gradient(circle at 15% 10%,rgba(35,131,255,.2),transparent 27%),radial-gradient(circle at 88% 80%,rgba(16,190,208,.14),transparent 25%),linear-gradient(140deg,#061120,#081b30 52%,#0a2941) }
.final-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.final-wrap{position:relative;z-index:1;text-align:center}.final-wrap .section-kicker{color:#75dbe4}.final-wrap .section-kicker::before{background:#75dbe4}.final-wrap h2{max-width:1050px;margin:16px auto 34px;color:#f7fbff;font-size:clamp(32px,4.5vw,58px)}.final-wrap h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#65b8ff,#7ae2df);-webkit-background-clip:text;background-clip:text}
.shift-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:left}.shift-grid>div{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label from" "arrow to";gap:8px 10px;padding:18px;border:1px solid rgba(141,179,207,.12);border-radius:17px;background:rgba(255,255,255,.04)}.shift-grid span{grid-area:label;color:#6ecbd6;font-size:7px;font-weight:800;letter-spacing:.09em}.shift-grid strong{grid-area:from;color:#9fb5c8;font-size:9px;line-height:1.5}.shift-grid svg{grid-area:arrow;width:15px;height:15px;color:#75dbe4}.shift-grid b{grid-area:to;color:#f3f9fd;font-size:10px;line-height:1.5}
.final-quote{max-width:960px;margin:24px auto 0;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:16px;padding:22px 24px;text-align:left;border:1px solid rgba(117,219,228,.16);border-radius:19px;background:linear-gradient(135deg,rgba(35,131,255,.1),rgba(16,190,208,.07))}.final-quote svg{width:30px;height:30px;color:#75dbe4}.final-quote p{margin:0;color:#d8e6f1;font-size:12px;line-height:1.75}
footer{padding:28px 0;color:#8ca5ba;background:#050e19;border-top:1px solid rgba(255,255,255,.05)}.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-wrap>div{display:grid}.footer-wrap strong{color:#d9e8f4;font-size:10px;letter-spacing:.05em}.footer-wrap span{font-size:8px;letter-spacing:.04em}

/* ---------- Premium hover spotlight injected by JS ---------- */
.premium-hover { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.premium-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.premium-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(35,131,255,.08), transparent 56%);
  transition: opacity .2s ease;
}
.premium-spotlight:hover::after { opacity: 1; }
.section-dark .premium-spotlight::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(117,219,228,.07), transparent 56%); }

/* ---------- Executive rail / back to top ---------- */
.executive-rail {
  position: fixed;
  z-index: 850;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb,var(--surface) 80%,transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
.executive-rail a { position:relative;width:28px;height:28px;display:grid;place-items:center;color:var(--ink-500);border-radius:9px;font-size:7px;font-weight:800;transition:.2s ease }
.executive-rail a:hover,.executive-rail a.active{color:#fff;background:linear-gradient(145deg,var(--blue-600),var(--cyan-600));box-shadow:0 7px 16px rgba(13,110,253,.18)}
.back-top-premium { position:fixed;right:20px;bottom:20px;z-index:900;width:42px;height:42px;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;border:0;border-radius:13px;background:linear-gradient(145deg,var(--blue-600),var(--cyan-600));box-shadow:0 14px 30px rgba(13,110,253,.24);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s ease }.back-top-premium.show{opacity:1;visibility:visible;transform:none}.back-top-premium svg{width:17px;height:17px}

/* ---------- Dark mode exceptions ---------- */
[data-theme="dark"] .hero::after { background: linear-gradient(to top, rgba(7,17,31,.15), transparent); }
[data-theme="dark"] .section-tinted { background: radial-gradient(circle at 10% 0%,rgba(35,131,255,.07),transparent 28%),radial-gradient(circle at 90% 100%,rgba(16,190,208,.05),transparent 30%),var(--paper-2); }
[data-theme="dark"] .question-number { -webkit-text-stroke-color: rgba(82,154,238,.38); }
[data-theme="dark"] .principle-card { background: linear-gradient(105deg,#10253d,#13344d); }
[data-theme="dark"] .final-section,
[data-theme="dark"] .section-dark { color-scheme: dark; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .desktop-nav a { padding-inline: 7px; }
  .brand { min-width: 214px; }
  .strategy-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foundation-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ownership-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .role-shift-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .daily-standards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .roadmap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roadmap::before { display:none; }
  .executive-rail { display:none; }
}

@media (max-width: 1020px) {
  :root { --nav-h: 70px; }
  .desktop-nav { display:none; }
  .mobile-only { display:grid; }
  .hero-grid { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 70px); }
  .hero-copy { text-align:center; }.hero h1,.hero-lead{margin-inline:auto}.hero-actions,.hero-meta{justify-content:center}
  .hero-visual { min-height: 470px; }.strategy-orbit{width:min(510px,78vw)}
  .compare-grid { grid-template-columns: 1fr; }.transform-arrow{grid-template-columns:1fr auto 1fr;gap:12px}.arrow-pill svg{transform:rotate(90deg)}
  .question-header { grid-template-columns: 90px minmax(0,1fr); }
  .logic-track { grid-template-columns: repeat(2,minmax(0,1fr)); }.logic-track>svg{display:none}
  .funnel { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pipeline-principles { grid-template-columns: 1fr; }.principle-arrow{transform:rotate(90deg)}
  .timeline-card { grid-template-columns:1fr; }.renewal-timeline{grid-template-columns:repeat(5,minmax(0,1fr))}
  .power-chain { grid-template-columns: repeat(2,minmax(0,1fr)); }.power-chain>svg{display:none}
  .deal-gate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pillar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flywheel-track { grid-template-columns:repeat(3,minmax(0,1fr)); }.flywheel-track>svg{display:none}
  .bridge-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.bridge-op{display:none}
  .data-flow { grid-template-columns:repeat(6,minmax(0,1fr)); }.data-flow svg{display:none}.data-flow span{text-align:center}
  .handoff-flow { grid-template-columns:repeat(5,minmax(0,1fr)); }.handoff-flow>svg{display:none}
  .scenario-flow,.improvement-loop { grid-template-columns:repeat(2,minmax(0,1fr)); }.scenario-flow>svg,.improvement-loop>svg{display:none}
  .shift-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .section { padding: 74px 0; }
  .brand { min-width:0; }.brand small{display:none}
  .hero-grid { min-height:auto; padding:calc(var(--nav-h) + 54px) 0 54px; gap:34px }.hero h1{font-size:clamp(40px,12vw,58px)}.hero-lead{font-size:14px}.hero-visual{min-height:390px}.strategy-orbit{width:min(420px,90vw);transform:scale(.9)}.orbit-node{width:94px;min-height:74px;border-radius:18px}.orbit-core{width:136px}.orbit-core strong{font-size:16px}
  .question-header { grid-template-columns:1fr; gap:10px; }.question-number{font-size:60px}.question-header h2{font-size:clamp(27px,8vw,38px)}
  .answer-thesis { grid-template-columns:1fr; padding:23px }.answer-thesis-icon{width:48px;height:48px}.answer-thesis h3{font-size:17px}
  .north-star { grid-template-columns:1fr; }.north-star-icon{width:50px;height:50px}.north-star h3{font-size:17px}
  .strategy-grid.four,.foundation-grid,.risk-dimensions,.revenue-drivers,.portfolio-grid,.two-col,.pillar-grid,.ownership-grid,.kpi-grid,.role-shift-grid,.daily-standards,.roadmap { grid-template-columns:1fr; }
  .logic-track { grid-template-columns:1fr; }.logic-track>article{min-height:auto}
  .funnel { grid-template-columns:1fr 1fr; }.funnel-step{min-height:140px}
  .equation { grid-template-columns:1fr; }.equation-symbol{min-height:24px}
  .renewal-timeline { grid-template-columns:1fr 1fr; }.renewal-timeline::before{display:none}
  .timeline-card{gap:16px}
  .power-chain,.deal-gate-grid,.flywheel-track,.bridge-grid,.data-flow,.handoff-flow,.handoff-rules,.scenario-flow,.improvement-loop,.shift-grid { grid-template-columns:1fr; }
  .team-hub { width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px }.team-hub::before,.team-hub::after{display:none}.team-center,.team-unit{position:static;transform:none!important;width:auto;min-height:95px;height:auto;border-radius:17px}.team-center{grid-column:1/-1;aspect-ratio:auto}
  .arch-layer { grid-template-columns:38px minmax(0,1fr); }.arch-layer small{grid-column:2}
  .foundation-results { grid-template-columns:46px minmax(0,1fr); }.foundation-result-tags{grid-column:1/-1;justify-content:flex-start}
  .panel-head,.detail-board-head,.deal-gate-head,.flywheel-title { flex-direction:column }.data-badge{align-self:flex-start}
  .service-contrast { grid-template-columns:1fr }
  .give-get-list>div{grid-template-columns:1fr 24px 1fr}
  .cadence-list>div{grid-template-columns:60px minmax(0,1fr)}.cadence-list small{grid-column:1/-1;text-align:left;padding-left:72px}
  .final-quote { grid-template-columns:1fr; text-align:center }.final-quote svg{margin:auto}.footer-wrap{flex-direction:column;align-items:flex-start}
}

@media (max-width: 520px) {
  .hero-meta { display:grid;grid-template-columns:1fr;justify-items:center }
  .hero-actions { display:grid }.btn{width:100%}
  .hero-visual { min-height:330px }.strategy-orbit{transform:scale(.76);margin:-24px 0}.node-2{right:-8%}.node-4{left:-8%}
  .funnel { grid-template-columns:1fr }.funnel-step{min-height:auto}
  .renewal-timeline { grid-template-columns:1fr }.renewal-node{text-align:left;display:grid;grid-template-columns:45px minmax(0,1fr);grid-template-areas:"icon title" "icon copy";align-items:start}.renewal-node svg{grid-area:icon;margin:0}.renewal-node b{grid-area:title}.renewal-node small{grid-area:copy}
  .team-hub { grid-template-columns:1fr }.team-center{grid-column:auto}
  .give-get-list>div{grid-template-columns:1fr}.give-get-list svg{transform:rotate(90deg)}
  .foundation-results { grid-template-columns:1fr }.foundation-result-icon{width:43px}.cadence-list>div{grid-template-columns:1fr}.cadence-list small{grid-column:auto;padding-left:0}
}

/* ---------- Print ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  :root { --paper:#fff;--paper-2:#f5f7fa;--surface:#fff; }
  * { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  html { scroll-padding-top:0; }
  body { background:#fff!important;color:#111!important;font-size:10px; }
  body::before,.topbar,.progress-bar,.hero-actions,.executive-rail,.back-top-premium { display:none!important; }
  .hero { min-height:auto; page-break-after:always; }
  .hero-grid { min-height:auto; grid-template-columns:1fr; padding:30px 0; }
  .hero-visual { display:none; }
  .section { padding:28px 0; }
  .section-dark,.final-section { break-before:page; }
  .panel,.detail-board,.answer-thesis,.compare-card,.strategy-card,.foundation-card,.roadmap-card,.timeline-card,.deal-gate,.competitive-section,.result-strip { break-inside:avoid; }
  [data-aos] { opacity:1!important; transform:none!important; }
  .premium-hover:hover { transform:none; }
}

/* ---------- Accessibility / reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Header contrast while overlaying the dark hero */
.topbar:not(.scrolled) .brand strong { color: #f4f9fd; }
.topbar:not(.scrolled) .brand small { color: #8eaac1; }
.topbar:not(.scrolled) .desktop-nav a { color: #9eb5c9; }
.topbar:not(.scrolled) .desktop-nav a:hover,
.topbar:not(.scrolled) .desktop-nav a.active { color: #ffffff; background: rgba(255,255,255,.055); }
.topbar:not(.scrolled) .icon-btn { color: #ddecf6; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); box-shadow: none; }
.topbar:not(.scrolled) .icon-btn:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); }

/* Executive rail uses a consistent dark glass treatment across all sections */
.executive-rail {
  border-color: rgba(144, 178, 205, .16);
  background: rgba(7, 20, 38, .84);
  box-shadow: 0 16px 40px rgba(7, 20, 38, .18);
}
.executive-rail a { color: #88a2b8; }
.executive-rail a:hover,
.executive-rail a.active { color: #fff; }