:root {
  --bg: #f7f9fc;
  --bg-2: #eef4fb;
  --panel: rgba(255,255,255,0.82);
  --panel-strong: rgba(255,255,255,0.94);
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --text: #0b1220;
  --muted: rgba(11, 18, 32, 0.74);
  --muted-2: rgba(11, 18, 32, 0.56);
  --blue: #4c8fff;
  --cyan: #25b5c7;
  --violet: #6c63ff;
  --blue-soft: #edf5ff;
  --accent: linear-gradient(135deg, #72a6ff 0%, #6de4ff 100%);
  --shadow: 0 28px 70px rgba(15, 23, 42, 0.09), 0 8px 24px rgba(15, 23, 42, 0.04);
  --radius: 30px;
  --radius-sm: 20px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.background-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;
  background:
    radial-gradient(72rem 45rem at 100% -8%, rgba(100, 169, 255, 0.16), transparent 58%),
    radial-gradient(54rem 34rem at -4% 20%, rgba(110, 228, 255, 0.16), transparent 58%),
    radial-gradient(52rem 30rem at 50% 110%, rgba(165, 210, 255, 0.22), transparent 68%),
    linear-gradient(180deg, #fdfefe 0%, #f7f9fc 42%, #f4f7fb 100%);
}

.glass {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.92));
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
}

.eyebrow {
  margin-bottom: 1rem;
  color: rgba(55, 101, 188, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.94), rgba(247, 249, 252, 0.75), rgba(247, 249, 252, 0));
  backdrop-filter: blur(14px);
}
.brand img { width: 164px; }
.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }
.progress {
  min-width: 72px;
  text-align: right;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.ghost-button,
.primary-button,
.floating-nav-button,
.tab,
.overview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.86);
  color: var(--text);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ghost-button { padding: 0.8rem 1rem; box-shadow: 0 10px 24px rgba(15,23,42,0.05); }
.ghost-button.small { padding: 0.64rem 0.8rem; }
.ghost-button:hover,
.primary-button:hover,
.floating-nav-button:hover:not(:disabled),
.tab:hover,
.overview-link:hover { transform: translateY(-1px); }
.ghost-button svg,
.primary-button svg,
.floating-nav-button svg,
.tab svg { width: 17px; height: 17px; stroke-width: 1.8; }
.icon-only { width: 42px; height: 42px; padding: 0; }

.primary-button {
  padding: 0.98rem 1.28rem;
  border-color: transparent;
  background: var(--accent);
  color: #07101f;
  font-weight: 760;
  box-shadow: 0 16px 32px rgba(82, 155, 255, 0.25);
}

main { scroll-snap-type: y mandatory; }
.slide {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem 2rem 4.8rem;
  scroll-snap-align: start;
  opacity: 0.72;
  transition: opacity .35s ease;
}
.slide.active { opacity: 1; }
.slide-inner { width: min(var(--max), 100%); margin: 0 auto; }

.hero-minimal {
  min-height: calc(100svh - 12rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 1180px;
}
.hero h1 {
  margin: 0;
  max-width: 1080px;
  font-size: clamp(3.6rem, 7.8vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
  font-weight: 700;
}
.hero h1 span {
  background: linear-gradient(135deg, #0b1220 0%, #4c8fff 65%, #2ab8cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle {
  max-width: 760px;
  margin: 1.55rem 0 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  line-height: 1.58;
}
.hero-talk { margin-top: 1.7rem; }

.slide h2,
.statement-layout h2 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.statement-layout { max-width: 980px; }
.statement-text {
  max-width: 790px;
  margin-top: 1.35rem;
  color: var(--muted);
  font-size: clamp(1.2rem, 2.4vw, 1.58rem);
  line-height: 1.62;
}
.lede {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.38rem);
  line-height: 1.58;
}
.lede.small { max-width: 620px; font-size: 1rem; }

.grid-two {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 2.1rem;
  align-items: start;
}
.card-grid { display: grid; gap: 1rem; margin-top: 1.45rem; }
.card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.metric-card,
.feature-card,
.profile-card,
.kpi-card,
.partner-row,
.growth-box,
.chart-card,
.timeline-card,
.ask-card,
.win-card,
.contact-card {
  border-radius: var(--radius);
}
.metric-card,
.feature-card,
.profile-card,
.kpi-card,
.growth-box,
.timeline-card,
.ask-card,
.win-card,
.contact-card { padding: 1.45rem; }

.icon-card { position: relative; }
.icon-card::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -64px;
  top: -74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 181, 255, .18), rgba(124, 181, 255, 0) 70%);
  pointer-events: none;
}
.lucide-icon-wrap,
.mini-icon,
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(76, 143, 255, 0.18);
  background: linear-gradient(180deg, rgba(241,247,255,1), rgba(234,242,253,0.95));
  color: #2b65c8;
  box-shadow: 0 8px 18px rgba(76, 143, 255, 0.10);
}
.lucide-icon-wrap {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1rem;
  border-radius: 15px;
}
.lucide-icon-wrap.large { width: 3.25rem; height: 3.25rem; border-radius: 18px; }
.lucide-icon-wrap svg { width: 20px; height: 20px; stroke-width: 1.8; }
.lucide-icon-wrap.large svg { width: 23px; height: 23px; }
.mini-icon { width: 2rem; height: 2rem; border-radius: 10px; }
.mini-icon svg { width: 15px; height: 15px; }

.metric-card h3,
.feature-card h3,
.ask-card h3,
.profile-card h3,
.win-card h3,
.contact-card h3 { margin: 0 0 .62rem; }
.metric-card p,
.feature-card p,
.profile-card p,
.ask-card p,
.win-card p,
.contact-card p,
.timeline-item p,
.chart-note,
.closing-text { margin: 0; color: var(--muted); line-height: 1.58; }

.section-headline-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.35rem;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.kpi-card { position: relative; }
.kpi-label { color: var(--muted-2); font-size: .94rem; margin-bottom: 0.72rem; }
.kpi-value {
  font-size: clamp(2rem, 4vw, 3.45rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}
.kpi-sub { margin-top: .5rem; color: var(--muted); font-size: 0.94rem; line-height: 1.52; }

.partners-list { margin-top: 1.4rem; display: grid; gap: .9rem; }
.partner-row {
  padding: 1rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.partner-name {
  display: flex; align-items: center; gap: .85rem; font-weight: 650;
}
.partner-row small { color: var(--muted); text-align: right; }
.growth-title { font-size: 1.14rem; font-weight: 750; margin-bottom: .75rem; }

.check-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
.check-list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #4c8fff, #25b5c7);
}

.timeline-card { padding: 1.55rem; }
.timeline-line {
  position: absolute;
  left: 2.1rem; top: 2.3rem; bottom: 2.3rem; width: 1px;
  background: linear-gradient(180deg, rgba(76,143,255,.68), rgba(76,143,255,.12));
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1rem;
}
.timeline-item + .timeline-item { margin-top: 2rem; }
.timeline-point {
  width: 16px; height: 16px; border-radius: 999px; margin-top: .3rem;
  background: linear-gradient(135deg, #4c8fff, #25b5c7);
  box-shadow: 0 0 0 6px rgba(76,143,255,.12);
}
.timeline-date {
  color: #3d6ec4;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: .3rem;
}
.timeline-item h3 { margin: 0 0 0.35rem; }

.business-grid, .team-grid { margin-top: 1.45rem; }
.projection-tabs { display: flex; gap: .65rem; flex-wrap: wrap; }
.tab {
  padding: .74rem .98rem;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--muted);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.tab.active {
  background: #eff6ff;
  border-color: rgba(76, 143, 255, 0.28);
  color: var(--text);
}
.chart-card { padding: 1rem 1rem .8rem; }
.compact-chart { border-radius: 32px; }
#projectionChart,
#tractionChart { width: 100%; height: auto; display: block; }
.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 0.8rem 0.3rem;
  flex-wrap: wrap;
}
.chart-legend { display: flex; flex-wrap: wrap; gap: .95rem; }
.legend-item { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; }
.legend-swatch { width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(15,23,42,0.05); }
.chart-note { font-size: 0.9rem; color: var(--muted-2); }

.win-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}
.win-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.45rem;
}
.featured-win {
  grid-column: span 3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,249,255,0.95)),
    linear-gradient(135deg, rgba(76,143,255,0.08), rgba(37,181,199,0.06));
}
.win-kicker {
  color: #356dc2;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.profile-avatar {
  width: 3rem; height: 3rem; border-radius: 14px;
}
.profile-role { color: #3d6ec4; font-size: .95rem; }

.ask-layout { display: grid; gap: 1.45rem; }
.ask-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.contact-slide .slide-inner { display: grid; gap: 1.5rem; }
.contact-copy { max-width: 820px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.contact-card {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.contact-label {
  margin-bottom: .85rem;
  color: #3d6ec4;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.contact-logo-wrap {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
}
.contact-meta {
  color: var(--muted-2);
  font-size: .93rem;
}
.contact-logo {
  width: min(640px, 86vw);
  max-width: 100%;
}

.floating-nav {
  position: fixed;
  right: 2rem;
  bottom: 1.45rem;
  z-index: 210;
  display: flex;
  gap: .65rem;
}
.floating-nav-button {
  padding: .78rem 1rem;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  box-shadow: 0 18px 30px rgba(15,23,42,0.08);
}
.floating-nav-button:disabled { opacity: 0.48; cursor: default; }

.overview-panel {
  position: fixed;
  top: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  width: min(390px, calc(100vw - 2.5rem));
  z-index: 400;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 30px;
  padding: 1.2rem;
  box-shadow: 0 32px 84px rgba(15,23,42,0.12);
  transform: translateX(calc(100% + 2rem));
  transition: transform .28s ease;
  overflow: auto;
}
.overview-panel.open { transform: translateX(0); }
.overview-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.overview-panel h3 { margin: 0; }
.overview-panel ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.overview-link {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: .9rem 1rem;
  border-radius: 18px;
  color: var(--muted);
}
.overview-link.active {
  background: #eff6ff;
  border-color: rgba(76,143,255,0.26);
  color: var(--text);
}


.server-login-shell {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.server-login-card {
  width: min(560px, 100%);
  padding: 2rem;
  border-radius: 34px;
  text-align: center;
}
.gate-logo { width: 185px; margin: 0 auto 1.15rem; }
.server-login-card h1 { margin: 0 0 .7rem; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.05em; }
.login-intro, .login-privacy { color: var(--muted); line-height: 1.6; }
.server-login-form { display: grid; gap: .95rem; margin-top: 1.2rem; text-align: left; }
.server-login-form label span {
  display: block;
  margin-bottom: .45rem;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}
.server-login-form input {
  width: 100%;
  padding: 0.96rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.server-login-form input:focus {
  border-color: rgba(76,143,255,.38);
  box-shadow: 0 0 0 4px rgba(76,143,255,.12);
}
.server-login-submit { width: 100%; margin-top: .2rem; }
.server-login-error {
  border-radius: 16px;
  padding: .9rem 1rem;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.18);
  color: #b53030;
  font-size: .95rem;
}
.login-privacy { margin-top: 1rem; font-size: .9rem; }

@media (max-width: 1100px) {
  .grid-two,
  .card-grid.three,
  .card-grid.two,
  .ask-grid,
  .contact-grid,
  .win-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.four { grid-template-columns: 1fr; }
  .section-headline-row,
  .win-heading-row,
  .chart-footer { flex-direction: column; align-items: start; }
  .featured-win { grid-column: span 1; }
}

@media (max-width: 720px) {
  .topbar { padding: 1rem; }
  .slide { padding: 6.4rem 1rem 5rem; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 4.4rem); }
  .brand img { width: 138px; }
  .topbar-actions { gap: .45rem; }
  .progress { display: none; }
  .ghost-button span { display: none; }
  .ghost-button { width: 42px; height: 42px; padding: 0; }
  .kpi-grid { grid-template-columns: 1fr; }
  .floating-nav { right: 1rem; bottom: 1rem; }
  .floating-nav-button span { display: none; }
  .overview-panel { top: 0.85rem; right: 0.85rem; bottom: 0.85rem; width: calc(100vw - 1.7rem); }
  .server-login-card { padding: 1.5rem; }
}

/* --------------------------------------------------
   v4.1 polish overrides
-------------------------------------------------- */
:root {
  --bg: #ffffff;
  --bg-2: #ffffff;
  --text: #000000;
  --muted: rgba(0, 0, 0, 0.82);
  --muted-2: rgba(0, 0, 0, 0.58);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.12);
  --shadow: 0 26px 60px rgba(10, 22, 70, 0.08), 0 8px 20px rgba(10, 22, 70, 0.04);
}

body {
  background: #ffffff;
  color: #000000;
}

.background-gradient {
  background: #ffffff url('/assets/background-static.png') center center / cover no-repeat fixed;
  opacity: 1;
}

.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84), rgba(255,255,255,0));
}

.brand img { width: 140px; }
.progress { color: rgba(0,0,0,0.72); }

.ghost-button,
.floating-nav-button,
.tab,
.overview-link {
  background: rgba(255,255,255,0.66);
  color: #000000;
  backdrop-filter: blur(18px);
}

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  border: 1px solid rgba(68, 115, 255, 0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.icon-card::after {
  width: 180px;
  height: 180px;
  right: -85px;
  top: -90px;
  background: radial-gradient(circle, rgba(111, 175, 255, .22), rgba(111, 175, 255, 0) 72%);
}

.hero h1,
.slide h2,
.statement-layout h2,
.server-login-card h1 {
  color: #000000;
  font-weight: 600;
  letter-spacing: -0.075em;
}

.hero h1 span {
  background: none;
  color: #000000;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.hero-subtitle,
.statement-text,
.lede,
.metric-card p,
.feature-card p,
.profile-card p,
.ask-card p,
.win-card p,
.timeline-item p,
.chart-note,
.login-intro,
.login-privacy,
.kpi-sub,
.partner-row small,
.contact-card p {
  color: rgba(0,0,0,0.72);
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card,
.feature-card,
.ask-card,
.win-card,
.contact-card,
.profile-card {
  min-height: 238px;
  display: flex;
  flex-direction: column;
}

.profile-card,
.contact-card {
  min-height: 310px;
}

.profile-card p {
  flex: 1;
}

.profile-actions {
  margin-top: 1.25rem;
}

.inline-link,
.email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-blue);
  font-weight: 600;
  text-decoration: none;
}
.inline-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.inline-link:hover,
.email-link:hover {
  text-decoration: underline;
}

.team-grid {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: start;
  gap: 1.25rem;
}

.profile-role,
.contact-label,
.timeline-date,
.win-kicker {
  color: var(--accent-blue);
}

.lucide-icon-wrap,
.mini-icon,
.profile-avatar {
  background: linear-gradient(180deg, rgba(239,246,255,0.92), rgba(230,242,255,0.72));
}

.contact-slide .slide-inner {
  gap: 1.8rem;
}

.contact-copy {
  max-width: none;
}

.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 1.25rem;
}

.contact-card {
  justify-content: center;
  min-height: 240px;
}

.contact-card h3 {
  margin: 0 0 0.85rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.email-link {
  font-size: 1.05rem;
  color: #000000;
}

.contact-logo-wrap {
  width: 100%;
  margin-top: 1.6rem;
  align-items: stretch;
}

.contact-logo {
  width: 100%;
  max-width: 100%;
}

.chart-card,
.timeline-card,
.featured-win,
.server-login-card,
.overview-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.36));
}

.overview-link.active,
.tab.active,

@media (max-width: 1350px) {
  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .team-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .card-grid.four {
    grid-template-columns: 1fr;
  }
  .profile-card,
  .contact-card {
    min-height: 0;
  }
}

/* --------------------------------------------------
   v4.2 requested refinements
-------------------------------------------------- */
@keyframes bluePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,143,255,0.22), 0 12px 28px rgba(76,143,255,0.24); }
  50% { box-shadow: 0 0 0 12px rgba(76,143,255,0), 0 18px 36px rgba(76,143,255,0.38); }
}

.server-login-submit {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  box-shadow: 0 14px 30px rgba(76,143,255,0.34);
}

#talkToDeckButton,
.hero-talk {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  box-shadow: 0 14px 32px rgba(76,143,255,0.32);
  animation: bluePulse 2.6s ease-in-out infinite;
}
#talkToDeckButton svg,
.hero-talk svg { stroke: #ffffff; }

/* static background image */
.background-gradient {
  background: #ffffff url('/assets/background-static.png') center center / cover no-repeat fixed !important;
}

/* stronger text */
body, .progress, .overview-link, .tab, .ghost-button, .floating-nav-button { color: #000000; }
.eyebrow { color: var(--accent-blue); }

/* remove bubble accent, use even tints */
.metric-card.icon-card::after,
.feature-card.icon-card::after,
.kpi-card.icon-card::after,
.ask-card.icon-card::after,
.win-card.icon-card::after,
.profile-card.icon-card::after,
.growth-box.icon-card::after {
  display: none;
}

/* portrait cards */
.metric-card,
.feature-card,
.kpi-card,
.ask-card,
.win-card:not(.featured-win) {
  aspect-ratio: var(--card-ratio);
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.25rem;
}

#team .profile-card {
  aspect-ratio: var(--card-ratio);
  min-height: 0;
  padding: 1.35rem;
}

/* slide 3 below subtitle */
#problem .slide-inner.grid-two {
  display: block;
}
#problem .slide-inner > div:first-child {
  max-width: 100%;
}
#problem .card-grid.four {
  margin-top: 1.4rem;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  align-items: start;
}

/* slide 4 — six capabilities on two rows, so the cards size to their content
   instead of stretching to the 9/16 portrait ratio the four-up layout used. */
#platform .platform-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  align-items: stretch;
}
#platform .feature-card {
  aspect-ratio: auto;
  min-height: 0;
}

/* slide 5 */
#traction .section-headline-row {
  align-items: start;
}
#traction .kpi-grid {
  grid-template-columns: repeat(5, minmax(165px, 1fr));
  align-items: start;
}

/* slide 6 */
.distribution-layout {
  display: grid;
  gap: 1.25rem;
}
.distribution-head .lede.small { max-width: 100%; }
.distribution-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 1rem;
  align-items: stretch;
}
.distribution-content .partners-list {
  margin-top: 0;
}
.growth-box {
  min-height: 100%;
}

/* slide 8 */
#business-model .business-grid {
  grid-template-columns: repeat(4, minmax(200px, 250px));
  justify-content: start;
  align-items: start;
}

/* slide 10 */
/* six reasons on a single 9/16 row. Two rows of three made the slide taller
   than the viewport once the featured card and the headline block were added. */
#moat .win-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}
#moat .win-card:not(.featured-win) {
  aspect-ratio: var(--card-ratio);
  min-height: 0;
  padding: 1.15rem;
}
/* narrower columns than the rest of the deck, so the titles come down a step */
#moat .win-card:not(.featured-win) h3 {
  font-size: clamp(1.05rem, 1.15vw, 1.3rem);
  margin-bottom: 0.5rem;
}
#moat .win-card:not(.featured-win) p {
  font-size: 0.92rem;
  line-height: 1.5;
}
#moat .featured-win {
  grid-column: 1 / -1;
}

/* slide 11 */
#team .team-grid {
  grid-template-columns: repeat(2, minmax(250px, 320px));
  justify-content: start;
  align-items: start;
}
#team .profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
}

/* slide 12 */
#ask .ask-grid {
  grid-template-columns: repeat(3, minmax(220px, 250px));
  justify-content: start;
  align-items: start;
}
#ask .ask-card,
#business-model .feature-card,
#platform .feature-card,
#problem .metric-card,
#traction .kpi-card,
#moat .win-card:not(.featured-win) {
  text-align: left;
}

/* slide 13 */
.contact-layout {
  min-height: calc(100svh - 12rem);
  display: flex !important;
  flex-direction: column;
}
.single-contact-grid {
  grid-template-columns: minmax(0, 640px) !important;
}
.contact-card-wide {
  min-height: 230px;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.contact-person {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-logo-wrap {
  margin-top: auto;
  padding-top: 0.5rem;
  align-items: stretch;
}
.contact-logo {
  width: 100%;
  margin-top: 0;
}

/* tinted card palettes */
/* Tint dial. Previous (pale) setting was:
   strength 0.16 / 0.05 with hues 216,234,255 · 232,222,255 · 219,245,231 · 255,236,216 */
:root {
  --tint-top: 0.34;
  --tint-bottom: 0.14;
  --tint-blue: 142, 190, 255;
  --tint-violet: 182, 162, 255;
  --tint-green: 143, 222, 180;
  --tint-amber: 255, 194, 136;
}

#problem .metric-card:nth-child(4n+1),
#platform .feature-card:nth-child(4n+1),
#traction .kpi-card:nth-child(4n+1),
#opportunity .kpi-card:nth-child(4n+1),
#business-model .feature-card:nth-child(4n+1),
#gtm .feature-card:nth-child(4n+1),
#moat .win-card:nth-child(5n+2),
#ask .ask-card:nth-child(3n+1) {
  background: linear-gradient(180deg, rgba(var(--tint-blue), var(--tint-top)), rgba(var(--tint-blue), var(--tint-bottom)));
}
#problem .metric-card:nth-child(4n+2),
#platform .feature-card:nth-child(4n+2),
#traction .kpi-card:nth-child(4n+2),
#opportunity .kpi-card:nth-child(4n+2),
#business-model .feature-card:nth-child(4n+2),
#gtm .feature-card:nth-child(4n+2),
#moat .win-card:nth-child(5n+3),
#ask .ask-card:nth-child(3n+2) {
  background: linear-gradient(180deg, rgba(var(--tint-violet), var(--tint-top)), rgba(var(--tint-violet), var(--tint-bottom)));
}
#problem .metric-card:nth-child(4n+3),
#platform .feature-card:nth-child(4n+3),
#traction .kpi-card:nth-child(4n+3),
#opportunity .kpi-card:nth-child(4n+3),
#business-model .feature-card:nth-child(4n+3),
#gtm .feature-card:nth-child(4n+3),
#moat .win-card:nth-child(5n+4),
#ask .ask-card:nth-child(3n+3) {
  background: linear-gradient(180deg, rgba(var(--tint-green), var(--tint-top)), rgba(var(--tint-green), var(--tint-bottom)));
}
#problem .metric-card:nth-child(4n+4),
#platform .feature-card:nth-child(4n+4),
#traction .kpi-card:nth-child(4n+4),
#opportunity .kpi-card:nth-child(4n+4),
#moat .win-card:nth-child(5n+5) {
  background: linear-gradient(180deg, rgba(var(--tint-amber), var(--tint-top)), rgba(var(--tint-amber), var(--tint-bottom)));
}

.growth-box,
.featured-win,
.timeline-card,
.chart-card,
.partner-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
}

.overview-panel,
.server-login-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.40));
}

/* No intermediate tablet stage: the desktop grid holds until 1100px, then the
   layout goes straight to the single-column mobile treatment below. Halving the
   columns while the cards keep their 9/16 portrait ratio made them enormously
   tall, which is what this used to do. */

@media (max-width: 1100px) {
  .distribution-content { grid-template-columns: 1fr; }
  #business-model .business-grid,
  #ask .ask-grid,
  #team .team-grid,
  .single-contact-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-card-wide {
    grid-template-columns: 1fr;
  }
  #moat .win-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #problem .card-grid.four,
  #platform .platform-grid,
  #traction .kpi-grid,
  #business-model .business-grid,
  #ask .ask-grid,
  #moat .win-grid {
    grid-template-columns: 1fr;
  }
  .metric-card,
  .feature-card,
  .kpi-card,
  .ask-card,
  .win-card:not(.featured-win),
  #team .profile-card {
    aspect-ratio: auto;
  }
}

/* true frosted glass on every deck card */
.slide .glass {
  border: 1px solid rgba(255,255,255,0.60);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    0 22px 52px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
.slide .glass::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
}

/* large black titles on every card in the deck */
.slide .metric-card h3,
.slide .feature-card h3,
.slide .ask-card h3,
.slide .win-card h3,
.slide .profile-card h3,
.slide .contact-card h3,
.slide .timeline-card h3,
.slide .timeline-item h3,
.slide .growth-box h3 {
  margin: 0 0 0.75rem;
  color: #000000;
  font-size: clamp(1.5rem, 1.75vw, 1.95rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

@media (max-width: 720px) {
  .slide .metric-card h3,
  .slide .feature-card h3,
  .slide .ask-card h3,
  .slide .win-card h3,
  .slide .profile-card h3,
  .slide .contact-card h3,
  .slide .timeline-card h3,
  .slide .timeline-item h3,
  .slide .growth-box h3 {
    font-size: 1.55rem;
  }
}

/* flat black icons, no frame or tinted plate */
.lucide-icon-wrap,
.lucide-icon-wrap.large,
.mini-icon,
.profile-avatar {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #000000;
  align-items: center;
}

/* keep the footprint the old frame occupied, but sit flush with the text */
.lucide-icon-wrap,
.mini-icon {
  width: auto;
  justify-content: flex-start;
}
.lucide-icon-wrap { height: 2.9rem; margin-bottom: 1rem; }
.lucide-icon-wrap.large { width: auto; height: 3.25rem; }
.mini-icon { height: 2rem; }
.profile-avatar { width: 3rem; height: 3rem; justify-content: center; }

.lucide-icon-wrap svg,
.mini-icon svg,
.profile-avatar svg {
  stroke: currentColor;
  stroke-width: 1.7;
}
.lucide-icon-wrap svg { width: 28px; height: 28px; }
.lucide-icon-wrap.large svg { width: 32px; height: 32px; }
.mini-icon svg { width: 20px; height: 20px; }
.profile-avatar svg { width: 30px; height: 30px; }

/* slide 13 — founder portraits. The source files are already round with their
   own grey ring, so no border or radius is added here; they just need sizing. */
#team .profile-photo {
  width: clamp(7rem, 9vw, 9.5rem);
  height: clamp(7rem, 9vw, 9.5rem);
  flex: 0 0 auto;
  object-fit: contain;
}

/* same 980px measure as the statement slides, so the team content lines up
   with the vision and thesis slides rather than the full 1320px container */
#team .slide-inner {
  max-width: 980px;
}

/* slide 11 — name and role stacked under the icon, name on two rows */
#team .profile-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
#team .profile-avatar {
  width: auto;
  height: auto;
  justify-content: flex-start;
}
#team .profile-identity h3 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.35rem, 1.6vw, 1.7rem);
  white-space: nowrap;
}

/* slide 13 — centre the copy and card the way slide 2 sits, while the wordmark
   stays pinned to the bottom of the slide. The auto margin above .contact-copy
   pairs with the existing auto above .contact-logo-wrap, so the free space
   splits evenly and the content group lands centred in the area above the logo. */
/* Halve the slide's bottom padding so the wordmark sits nearer the viewport
   edge, and give the layout back the same amount of height so the auto margin
   still pushes the logo all the way down. */
#contact.slide {
  /* matches .floating-nav bottom, so the links sit on the same row as Back/Next */
  padding-bottom: 1.45rem;
}
#contact .contact-layout {
  /* left edge lines up with the statement slides (thesis, vision) rather than
     sitting centred in the slide */
  align-items: flex-start;
  min-height: calc(100svh - 8.45rem);
}
/* Vision puts max-width:980px on .slide-inner itself, so its 980px column is
   centred and the text starts (container - 980) / 2 inside. Match that inset
   here, while leaving the wordmark spanning the full width. */
#contact .contact-copy,
#contact .contact-block {
  margin-left: max(0px, calc((100% - 980px) / 2));
}
#contact .contact-copy {
  width: min(32rem, 100%);
  max-width: none;
  text-align: left;
  margin-top: auto;
}
#contact .contact-grid {
  justify-content: center;
  /* .contact-layout centres its flex children, which otherwise shrink to
     content width — this keeps the grid spanning the slide. */
  width: 100%;
}

/* contact: no card, everything stacked and centred. */
/* The block is centred on the slide; the text inside it is left aligned.
   .contact-copy shares the same width so both share a left edge. */
#contact .contact-block {
  width: min(32rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
}
#contact .contact-people {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
#contact .contact-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
/* the deck-wide card-title rule targets .contact-card h3, and there is no card
   here any more - so the names need the size restating */
#contact .contact-people h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.75vw, 1.95rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
#contact .email-link {
  color: var(--accent-blue);
}
/* website and LinkedIn, right aligned under the wordmark */
#contact .contact-links {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 1.4rem;
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}
#contact .contact-links a {
  color: rgba(0, 0, 0, 0.62);
}
#contact .contact-links a:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

/* slide 6 — partner names and the growth-box title match the card titles */
#distribution .partner-name,
#distribution .growth-title {
  color: #000000;
  font-size: clamp(1.5rem, 1.75vw, 1.95rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
#distribution .growth-title {
  margin-bottom: 0.75rem;
}
/* One fixed slot for the leading mark, so names and URLs align across every row
   whatever each partner's logo aspect ratio turns out to be. */
#distribution .partner-logo,
#distribution .partner-name .mini-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: center;
}
#distribution .partner-site {
  display: inline-block;
  margin-top: 0.28rem;
  /* the logo now sits on its own row above the name, so nothing to indent past */
  padding-left: 0;
  color: var(--accent-blue);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
}
#distribution .partner-site:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  #distribution .partner-name,
  #distribution .growth-title {
    font-size: 1.55rem;
  }
}

/* slide 2 — supporting points under the statement */
#thesis .statement-points {
  margin-top: 1.6rem;
  max-width: 790px;
}
#thesis .statement-points li {
  font-size: 1.02rem;
}

/* slide 7 — match the headline-to-content gap used on the other slides */
#pipeline .timeline-card {
  margin-top: 1.45rem;
}

/* slide 7 — the carrier's reachable business base, given KPI-sized emphasis */
#pipeline .timeline-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin: 0.1rem 0 0.55rem;
}
#pipeline .timeline-figure-value {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  color: #000000;
}
#pipeline .timeline-figure-label {
  color: rgba(0, 0, 0, 0.72);
  font-size: 1rem;
  line-height: 1.4;
}

/* slide 10 — featured card hugs its text now that the icon is gone */
#moat .featured-win {
  min-height: 0;
  padding: 1.35rem 1.45rem;
}

/* welcome card */
.gate-logo {
  filter: brightness(0);
  margin: 1.75rem auto 2.25rem;
}
.server-login-submit { font-weight: 600; }

/* slides 5 and 8 — outsized KPI values */
/* five columns leaves ~211px of text width; EUR110K needs ~2.75em, so 4.5rem
   is the largest that fits with margin to spare. Opportunity keeps four
   columns and stays at the bigger size. */
#traction .kpi-value {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  letter-spacing: -0.07em;
  margin-top: 0.2rem;
}
#opportunity .kpi-value {
  font-size: clamp(3.5rem, 6.6vw, 6.25rem);
  letter-spacing: -0.07em;
  margin-top: 0.2rem;
}

/* slide 9 — these cards are tall by design, but .kpi-card was never a flex
   container, so the align/justify declarations on the portrait-card rule did
   nothing and the content simply stacked at the top leaving the bottom third
   empty. Make it a real flex column and anchor the closing line to the bottom,
   so the card reads as two deliberate zones instead of content plus a void. */
#opportunity .kpi-card {
  display: flex;
  flex-direction: column;
}
#opportunity .kpi-sub {
  margin-top: auto;
  margin-bottom: 0;
}

/* slide 6 — the three partner cards and the growth box become one 4-up row of
   9/16 portrait cards, matching the card treatment on the other slides.
   .partners-list uses display:contents so its children join the same grid. */
#distribution .distribution-content {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  align-items: start;
}
#distribution .partners-list {
  display: contents;
}
#distribution .partner-row,
#distribution .growth-box {
  aspect-ratio: var(--card-ratio);
  min-height: 0;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
#distribution .partner-identity {
  width: 100%;
}
/* logo alone on the first row, company name beneath it — same stacking as the
   icon-and-title cards on the other slides */
#distribution .partner-name {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
#distribution .partner-logo {
  margin-bottom: 2.4rem;
}
/* type and location sit between the link and the description */
#distribution .partner-type {
  margin-top: 1rem;
  color: var(--accent-blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.45;
}
#distribution .partner-row small {
  margin-top: 0.55rem;
  text-align: left;
  font-size: 1.02rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  #distribution .distribution-content {
    grid-template-columns: 1fr;
  }
  #distribution .partner-row,
  #distribution .growth-box {
    aspect-ratio: auto;
  }
}

/* slide 11 — headline spans the slide, subtitle sits beneath it rather than
   sharing a row with it */
#moat .win-heading-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.95rem;
}
#moat .win-heading-row .lede.small {
  max-width: 880px;
}

/* slides 5 and 9 — margin / pricing line. Same emphatic treatment as the closing
   line on the ask. */
#traction .model-margin,
#business-model .model-margin {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 1.15rem 0 0;
  max-width: 62rem;
  color: rgba(0, 0, 0, 0.72);
  font-size: 1.02rem;
  line-height: 1.5;
}
#traction .model-margin strong,
#business-model .model-margin strong {
  color: #000000;
  font-weight: 680;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
#traction .model-margin-label,
#business-model .model-margin-label {
  border: 1px solid rgba(39, 94, 208, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* slide 14 — closing timeline. Sits under the lede as a single emphatic line. */
#ask .ask-timing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 1.15rem 0 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 1.08rem;
  line-height: 1.5;
}
#ask .ask-timing strong {
  color: #000000;
  font-weight: 680;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
#ask .ask-timing-label {
  border: 1px solid rgba(39, 94, 208, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* emphasised clause inside a lede — the one phrase that should carry weight */
.lede .lede-emphasis {
  color: #000000;
  font-weight: 680;
}

/* slides 5 and 8 — the KPI cards are the tallest in the deck, so the icon gets
   more room beneath it before the label starts */
#traction .kpi-card .lucide-icon-wrap,
#opportunity .kpi-card .lucide-icon-wrap {
  margin-bottom: 2rem;
}

/* slides 5 and 8 — closing lines run the full width of the slide */
#opportunity .opportunity-targets,
#traction .traction-resellers {
  max-width: 100%;
  margin-top: 1.45rem;
}

@media (max-width: 720px) {
  #traction .kpi-value,
  #opportunity .kpi-value {
    font-size: 4rem;
  }
}

/* ---------------------------------------------------------------------------
   WHITE CARDS + COLOURED ICONS  (toggle)
   Active while <body> carries .theme-white-cards. Delete that class in
   deck.html to fall straight back to tinted cards with black icons - nothing
   below applies without it, and no earlier rule was modified.
   --------------------------------------------------------------------------- */
.theme-white-cards #problem .metric-card,
.theme-white-cards #platform .feature-card,
.theme-white-cards #traction .kpi-card,
.theme-white-cards #opportunity .kpi-card,
.theme-white-cards #business-model .feature-card,
.theme-white-cards #gtm .feature-card,
.theme-white-cards #moat .win-card,
.theme-white-cards #ask .ask-card,
.theme-white-cards #team .profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.30));
}

/* blue */
.theme-white-cards #problem .metric-card:nth-child(4n+1),
.theme-white-cards #platform .feature-card:nth-child(4n+1),
.theme-white-cards #traction .kpi-card:nth-child(4n+1),
.theme-white-cards #opportunity .kpi-card:nth-child(4n+1),
.theme-white-cards #business-model .feature-card:nth-child(4n+1),
.theme-white-cards #gtm .feature-card:nth-child(4n+1),
.theme-white-cards #moat .win-card:nth-child(5n+2),
.theme-white-cards #ask .ask-card:nth-child(3n+1) {
  --icon-color: #2563eb;
}

/* violet */
.theme-white-cards #problem .metric-card:nth-child(4n+2),
.theme-white-cards #platform .feature-card:nth-child(4n+2),
.theme-white-cards #traction .kpi-card:nth-child(4n+2),
.theme-white-cards #opportunity .kpi-card:nth-child(4n+2),
.theme-white-cards #business-model .feature-card:nth-child(4n+2),
.theme-white-cards #gtm .feature-card:nth-child(4n+2),
.theme-white-cards #moat .win-card:nth-child(5n+3),
.theme-white-cards #ask .ask-card:nth-child(3n+2) {
  --icon-color: #6d4aec;
}

/* green */
.theme-white-cards #problem .metric-card:nth-child(4n+3),
.theme-white-cards #platform .feature-card:nth-child(4n+3),
.theme-white-cards #traction .kpi-card:nth-child(4n+3),
.theme-white-cards #opportunity .kpi-card:nth-child(4n+3),
.theme-white-cards #business-model .feature-card:nth-child(4n+3),
.theme-white-cards #gtm .feature-card:nth-child(4n+3),
.theme-white-cards #moat .win-card:nth-child(5n+4),
.theme-white-cards #ask .ask-card:nth-child(3n+3) {
  --icon-color: #0f8a5f;
}

/* amber */
.theme-white-cards #problem .metric-card:nth-child(4n+4),
.theme-white-cards #platform .feature-card:nth-child(4n+4),
.theme-white-cards #traction .kpi-card:nth-child(4n+4),
.theme-white-cards #opportunity .kpi-card:nth-child(4n+4),
.theme-white-cards #moat .win-card:nth-child(5n+5) {
  --icon-color: #c2650b;
}


/* the icon is the only coloured thing on the card; titles and figures stay black */
.theme-white-cards .lucide-icon-wrap,
.theme-white-cards .mini-icon,
.theme-white-cards .profile-avatar {
  color: var(--icon-color, #000000);
}


/* ---------------------------------------------------------------------------
   PORTRAIT CARD RATIO  (toggle)
   Every portrait card reads its shape from --card-ratio. Default is 9/16;
   .ratio-golden on <body> swaps in the golden rectangle, which is about 9%
   shorter at the same width. Remove that class in deck.html to go back.
   --------------------------------------------------------------------------- */
:root {
  --card-ratio: 9 / 16;
}
body.ratio-golden {
  --card-ratio: 1 / 1.618;
}


/* ---------------------------------------------------------------------------
   Slide 7 pipeline detail, slide 10 GTM, slide 11 model assumptions
   --------------------------------------------------------------------------- */

/* slide 7 — the reach list under "Beyond" */
#pipeline .pipeline-reach {
  margin: 0.7rem 0 0;
  gap: 0.4rem;
}
#pipeline .pipeline-reach li {
  font-size: 0.98rem;
  line-height: 1.45;
}
#pipeline .pipeline-note {
  margin-top: 0.6rem;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.88rem;
  font-style: italic;
}

/* slide 10 — three sequenced stages, sized to content rather than portrait */
#gtm .gtm-grid {
  grid-template-columns: repeat(3, minmax(0, 290px));
  justify-content: start;
  align-items: stretch;
}
#gtm .feature-card {
  aspect-ratio: var(--card-ratio);
  min-height: 0;
}

/* slide 6 — voice conversation trend. Series toggle sits in the top right of
   the chart box itself, matching the projection layer toggles on slide 12. */
#growth .chart-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}
#growth .layer-tabs .tab {
  padding: 0.44rem 0.8rem;
  font-size: 0.85rem;
}
#growth .layer-tabs svg {
  width: 15px;
  height: 15px;
}

/* slide 11 — chart and assumptions as two views of one control */
#projections .projection-views {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
/* the view tabs ride on the headline row, so they cost the slide no height */
#projections .view-tabs {
  flex: 0 0 auto;
  white-space: nowrap;
}
#projections .view-tabs .tab {
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
}
/* layer toggles sit in the top right of the chart box itself */
#projections .chart-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}
#projections .layer-tabs .tab {
  padding: 0.44rem 0.8rem;
  font-size: 0.85rem;
}
#projections .layer-tabs svg {
  width: 15px;
  height: 15px;
}
#projections .view-tabs .tab {
  padding: 0.56rem 1rem;
  font-size: 0.92rem;
}
#projections [data-view-panel][hidden] {
  display: none;
}
#projections .assumptions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 290px));
  justify-content: start;
  gap: 1rem;
  align-items: stretch;
}
#projections .assumption-col {
  border-radius: var(--radius);
  padding: 1.35rem;
  aspect-ratio: var(--card-ratio);
  min-height: 0;
}
#projections .assumption-name {
  margin-bottom: 0.7rem;
  color: var(--accent-blue);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#projections .assumption-col .check-list {
  margin: 0;
  gap: 0.45rem;
}
#projections .assumption-col li {
  font-size: 0.95rem;
  line-height: 1.45;
}

/* slide 10 — the benefits card is a list rather than a paragraph */
#gtm .gtm-benefits {
  margin: 0;
  gap: 0.45rem;
}
#gtm .gtm-benefits li {
  font-size: 1rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  #gtm .gtm-grid,
  #projections .assumptions-grid {
    grid-template-columns: 1fr;
  }
  #gtm .feature-card,
  #projections .assumption-col {
    aspect-ratio: auto;
  }
}


/* ---------------------------------------------------------------------------
   GLASS DIAL
   The blur radius, not the alpha, is what makes translucency visible. At a very
   high radius everything behind the card averages into a flat wash that looks
   identical to a solid fill. Lower blur with the same alpha reads as far more
   transparent, because the eye can still make out variation behind the glass.
   The background is near-white with very low-contrast wave contours, so any
   meaningful blur averages it to flat white and the glass reads as solid.
   Currently 10px with the fill pulled right down to compensate. The higher this goes the flatter the glass reads, since the
   contours average out - 0-4px keeps them clearly visible. Earlier settings
   were 36px/190% and 13px/145%, both of which looked solid.
   --------------------------------------------------------------------------- */
:root {
  --glass-blur: 10px;
  --glass-saturate: 105%;
}

/* the white sheen over every card was also flattening the effect */
.slide .glass::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
}


/* ---------------------------------------------------------------------------
   TALK-TO-THE-DECK BUTTONS
   Restored after being lost in an earlier rewrite of this file.
   --------------------------------------------------------------------------- */
#talkToDeckButton,
.hero-talk {
  font-weight: 400;
  box-shadow: 0 15px 34px rgba(76, 143, 255, 0.40);
  animation: bluePulseStrong 2.6s ease-in-out infinite;
}
@keyframes bluePulseStrong {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 143, 255, 0.32), 0 13px 30px rgba(76, 143, 255, 0.34);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(76, 143, 255, 0), 0 18px 38px rgba(76, 143, 255, 0.46);
  }
}

/* the hero copy of the button is mobile only - the topbar one covers desktop */
@media (min-width: 721px) {
  .hero-talk { display: none; }
}


/* ---------------------------------------------------------------------------
   ONE ACCENT BLUE
   Labels, timeline graphics and bullet dots were using four different blues
   (var(--accent-blue) dates, #4c8fff line, and a #4c8fff-to-cyan gradient on both the
   timeline dots and the check-list bullets). They all resolve to one colour now
   - the same blue as "Today", "Q3 2026" and "Beyond".
   --------------------------------------------------------------------------- */
:root {
  /* apple.com's button blue. The iOS system blue #007AFF is a touch lighter
     and drops to 4.0:1 on white, which is under AA for the small uppercase
     labels; #0071E3 is the value Apple itself uses on the web, and clears it. */
  --accent-blue: #0071e3;
  --accent-blue-rgb: 0, 113, 227;
}

.check-list li::before {
  background: var(--accent-blue);
}
.timeline-point {
  background: var(--accent-blue);
  box-shadow: 0 0 0 6px rgba(var(--accent-blue-rgb), 0.12);
}
.timeline-line {
  background: linear-gradient(180deg,
    rgba(var(--accent-blue-rgb), 0.55),
    rgba(var(--accent-blue-rgb), 0.10));
}

/* hero: "distribution" underlined in the accent blue. Thickness and offset are
   set in em so they stay proportional as the headline scales. */
.hero h1 .underline-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-blue);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.13em;
  text-decoration-skip-ink: none;
}