/* ============================================================
   Clerie — Investor Pitch
   Single-page scrolling experience. Brand: Midnight Harbor navy,
   Signal cyan, health green. Figtree single-family type system.
   ============================================================ */

:root {
  /* Palette (from Pencil mockup tokens) */
  --navy: #0B3658;
  --slate: #486984;
  --pale-steel: #688DAC;
  --fog: #DDE7EE;
  --ice: #EAF6FA;
  --mist: #C8D8E4;
  --cyan: #18B6D8;
  --teal: #1A7EA6;      /* action / AA-safe on white */
  --green: #5FC29A;
  --data-green: #3E9E7A;
  --white: #FFFFFF;

  /* Semantic */
  --bg: #FFFFFF;
  --ink: var(--navy);
  --ink-2: var(--slate);
  --ink-3: var(--pale-steel);
  --line: var(--fog);
  --surface: #FFFFFF;
  --accent: var(--cyan);
  --action: var(--teal);

  /* Type */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --page-max: 1160px;
  --pad-x: clamp(20px, 5vw, 100px);

  /* Radius */
  --r-card: 20px;
  --r-pill: 999px;
  --r-badge: 6px;

  /* Shadow (blue-tinted, per brand) */
  --shadow-card: 0 12px 48px rgba(11, 54, 88, 0.08);
  --shadow-soft: 0 4px 24px rgba(11, 54, 88, 0.06);
  --shadow-btn: 0 6px 18px rgba(26, 126, 166, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  /* Z-scale */
  --z-ambient: 0;
  --z-base: 1;
  --z-nav: 40;
  --z-bottomnav: 45;
  --z-overlay: 60;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Global ambient wash (fixed, very subtle) ---------- */
.ambient {
  position: fixed;
  inset: -20vmax;
  z-index: var(--z-ambient);
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, rgba(24, 182, 216, 0.05), transparent 60%),
    radial-gradient(40vmax 40vmax at 82% 82%, rgba(95, 194, 154, 0.05), transparent 62%);
  animation: drift 40s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.05); }
}

/* ---------- Per-slide drifting organic gradients ----------
   Every slide carries its own pair of slow-moving cyan + green washes,
   echoing the tinted gradients in the mockups. Positions vary per slide. */
.slide::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 54% at var(--g1x, 18%) var(--g1y, 18%),
      rgba(24, 182, 216, 0.26) 0%, rgba(24, 182, 216, 0.15) 32%, rgba(24, 182, 216, 0.05) 58%, transparent 78%),
    radial-gradient(56% 52% at var(--g2x, 84%) var(--g2y, 82%),
      rgba(95, 194, 154, 0.24) 0%, rgba(95, 194, 154, 0.13) 34%, rgba(95, 194, 154, 0.04) 60%, transparent 80%),
    radial-gradient(66% 60% at var(--g3x, 52%) var(--g3y, 48%),
      rgba(96, 152, 224, 0.16) 0%, rgba(96, 152, 224, 0.06) 42%, transparent 72%);
  animation: slideDrift var(--drift-dur, 30s) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes slideDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.04) rotate(-1.5deg); }
  100% { transform: translate3d(3%, 2.5%, 0) scale(1.12) rotate(1.5deg); }
}
/* Position presets echo the mockup's per-slide gradient placement (g3 = accent hue) */
#hero::before      { --g1x: 82%; --g1y: 12%; --g2x: 8%;  --g2y: 90%; --g3x: 45%; --g3y: 55%; --drift-dur: 34s; }
#problem::before   { --g1x: 10%; --g1y: 15%; --g2x: 90%; --g2y: 85%; --g3x: 60%; --g3y: 30%; --drift-dur: 30s; }
#opportunity::before { --g1x: 88%; --g1y: 20%; --g2x: 12%; --g2y: 90%; --g3x: 40%; --g3y: 60%; --drift-dur: 32s; }
#target::before    { --g1x: 15%; --g1y: 85%; --g2x: 85%; --g2y: 12%; --g3x: 55%; --g3y: 45%; --drift-dur: 28s; }
#landscape::before { --g1x: 50%; --g1y: 6%;  --g2x: 6%;  --g2y: 75%; --g3x: 88%; --g3y: 55%; --drift-dur: 33s; }
#team::before      { --g1x: 90%; --g1y: 10%; --g2x: 10%; --g2y: 90%; --g3x: 50%; --g3y: 40%; --drift-dur: 29s; }
#model::before     { --g1x: 8%;  --g1y: 20%; --g2x: 92%; --g2y: 88%; --g3x: 48%; --g3y: 55%; --drift-dur: 31s; }
#momentum::before  { --g1x: 50%; --g1y: 90%; --g2x: 90%; --g2y: 10%; --g3x: 15%; --g3y: 40%; --drift-dur: 27s; }
#market::before    { --g1x: 12%; --g1y: 12%; --g2x: 88%; --g2y: 90%; --g3x: 55%; --g3y: 50%; --drift-dur: 35s; }
#proforma::before  { --g1x: 90%; --g1y: 85%; --g2x: 10%; --g2y: 10%; --g3x: 50%; --g3y: 55%; --drift-dur: 30s; }
#funds::before     { --g1x: 10%; --g1y: 88%; --g2x: 90%; --g2y: 15%; --g3x: 50%; --g3y: 50%; --drift-dur: 32s; }
#raise::before     { --g1x: 50%; --g1y: 10%; --g2x: 50%; --g2y: 95%; --g3x: 15%; --g3y: 50%; --drift-dur: 28s; }
#thanks::before    { --g1x: 82%; --g1y: 12%; --g2x: 8%;  --g2y: 90%; --g3x: 45%; --g3y: 55%; --drift-dur: 34s; }

/* ============================================================
   Top navigation
   ============================================================ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad-x);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.topnav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(11, 54, 88, 0.04);
}
.topnav__logo { display: flex; align-items: center; }
.topnav__logo img { height: 28px; width: auto; }
.topnav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.topnav__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.topnav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--cyan);
  transition: right 0.3s var(--ease-out);
}
.topnav__links a:hover,
.topnav__links a.active { color: var(--navy); }
.topnav__links a.active::after,
.topnav__links a:hover::after { right: 0; }
.topnav__right { display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  border: none;
  border-radius: var(--r-pill);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, background 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--action);
  color: #fff;
  padding: 11px 22px;
  font-size: 15px;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: #17708f; box-shadow: 0 8px 22px rgba(26, 126, 166, 0.34); transform: translateY(-1px); }
.btn--lg { padding: 15px 30px; font-size: 17px; }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--fog);
  padding: 10px 20px;
  font-size: 15px;
}
.btn--ghost:hover { background: var(--ice); }

/* ============================================================
   Section / slide scaffold
   ============================================================ */
main { position: relative; z-index: var(--z-base); }

.slide {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 12vh, 140px) var(--pad-x) clamp(80px, 10vh, 120px);
}
.slide__inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  gap: 8px;
}
.eyebrow .num { color: var(--cyan); }

.slide__title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--navy);
  max-width: 20ch;
}
.slide__lead {
  margin-top: 18px;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--slate);
  max-width: 60ch;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(32px, 5vh, 56px);
}
.two-col--imgleft .col-media { order: -1; }

.media {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--mist);
  aspect-ratio: 5 / 4;
}
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Accordion (Subhead → Expanded dropdown)
   ============================================================ */
.accordions { display: flex; flex-direction: column; }
.acc {
  border-bottom: 1px solid var(--line);
}
.acc__trigger {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 20px 0;
  color: var(--navy);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.acc__trigger:hover { color: var(--teal); }
.acc__icon {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  color: var(--teal);
  transition: transform 0.4s var(--ease-out);
}
.acc.is-open .acc__icon { transform: rotate(180deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.acc__body {
  padding: 0 0 22px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
  max-width: 64ch;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.acc.is-open .acc__body { opacity: 1; transform: none; }
.acc__body .src {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--pale-steel);
}

/* ============================================================
   Hero
   ============================================================ */
.hero { text-align: center; align-items: center; overflow: hidden; }
.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.hero__logo {
  width: clamp(300px, 42vw, 520px);
  filter: drop-shadow(0 20px 50px rgba(11, 54, 88, 0.10));
}
.hero__meta {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate);
}
.hero__scrollcue {
  position: absolute;
  bottom: 46px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pale-steel);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* ============================================================
   Team
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: clamp(28px, 4vh, 44px);
}
.team-card {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.team-card__photo {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg, #DDEBF3, #C2D5E1);
  position: relative;
  overflow: hidden;
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
}
.team-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(24, 182, 216, 0.09);
}
.team-card__info { padding: 16px; }
.team-card__namerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-card__name { font-size: 16px; font-weight: 700; color: var(--navy); }
.team-card__info a { color: var(--pale-steel); display: inline-flex; transition: color 0.2s; }
.team-card__info a:hover { color: var(--teal); }
.team-card__role { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--teal); text-transform: uppercase; margin-top: 8px; }
.team-card__cred { font-size: 13px; color: var(--slate); line-height: 1.45; margin-top: 4px; }

.advisors { margin-top: 30px; max-width: 760px; }
.advisors__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 32px;
  padding: 8px 0 20px;
}
.advisors__list li {
  list-style: none;
  color: var(--slate);
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ice);
}
.advisors__list b { color: var(--navy); font-weight: 700; }

/* ============================================================
   Logo cloud
   ============================================================ */
.logo-cloud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 4vh, 40px);
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.logo-chip {
  flex: 1 1 220px;
  max-width: 300px;
  height: 84px;
  display: grid;
  place-items: center;
  padding: 0 26px;
  background: #fff;
  border: 1px solid var(--fog);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(11, 54, 88, 0.04);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.logo-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.logo-chip img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
.logo-chip--dark { background: var(--navy); border-color: var(--navy); }
.logo-chip--dark img { max-height: 42px; }
.logo-caption { margin-top: 20px; font-size: 14px; color: var(--pale-steel); }

/* ============================================================
   Stats (Momentum)
   ============================================================ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 5vh, 48px);
}
.stat-card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stat-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
}
.stat-card__value { font-size: clamp(44px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.stat-card__label { font-size: 16px; color: var(--slate); }

/* Delivery stepper */
.stepper {
  margin-top: clamp(40px, 7vh, 72px);
  position: relative;
}
.stepper__track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}
.stepper__line {
  position: absolute;
  top: 17px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 3px;
  background: var(--fog);
  border-radius: 2px;
  overflow: hidden;
}
.stepper__line-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  border-radius: 2px;
  transition: right 2.4s var(--ease-out) 0.15s;
}
.step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.step__dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cyan); color: #fff;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 5px rgba(24, 182, 216, 0.14);
  transform: scale(0.25); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.stepper.in .step__dot { transform: scale(1); opacity: 1; }
/* dots pop in sequence, timed to the sweeping progress fill */
.stepper.in .stepper__track .step:nth-child(1) .step__dot { transition-delay: 0.20s; }
.stepper.in .stepper__track .step:nth-child(2) .step__dot { transition-delay: 0.60s; }
.stepper.in .stepper__track .step:nth-child(3) .step__dot { transition-delay: 1.00s; }
.stepper.in .stepper__track .step:nth-child(4) .step__dot { transition-delay: 1.40s; }
.stepper.in .stepper__track .step:nth-child(5) .step__dot { transition-delay: 1.80s; }
.stepper.in .stepper__track .step:nth-child(6) .step__dot { transition-delay: 2.20s; }
.step__label, .step__badge { opacity: 0; transition: opacity 0.5s ease; }
.stepper.in .step__label, .stepper.in .step__badge { opacity: 1; }
.stepper.in .stepper__track .step:nth-child(1) .step__label { transition-delay: 0.25s; }
.stepper.in .stepper__track .step:nth-child(2) .step__label { transition-delay: 0.65s; }
.stepper.in .stepper__track .step:nth-child(3) .step__label { transition-delay: 1.05s; }
.stepper.in .stepper__track .step:nth-child(4) .step__label { transition-delay: 1.45s; }
.stepper.in .stepper__track .step:nth-child(5) .step__label { transition-delay: 1.85s; }
.stepper.in .stepper__track .step:nth-child(6) .step__label,
.stepper.in .step__badge { transition-delay: 2.30s; }
.step--todo .step__dot { background: var(--white); border: 2px solid var(--fog); color: var(--pale-steel); box-shadow: none; }
.step--current .step__dot {
  background: #fff; border: 3px solid var(--cyan);
  box-shadow: 0 0 0 6px rgba(24, 182, 216, 0.16);
}
.step--current .step__dot::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan);
}
.step__label { font-size: 13.5px; font-weight: 600; color: var(--slate); line-height: 1.3; max-width: 15ch; }
.step--current .step__label { color: var(--navy); font-weight: 700; }
.step__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); background: var(--ice);
  padding: 4px 8px; border-radius: 5px;
}

/* ============================================================
   Market (TAM/SAM/SOM)
   ============================================================ */
.market-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(24px, 3vh, 40px);
}
.rings { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.ring {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: background 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s, filter 0.3s;
  display: flex;
  justify-content: center;
  padding-top: 5%;
}
.ring:hover { filter: brightness(0.97); }
.ring.is-active { box-shadow: 0 0 0 4px rgba(26, 126, 166, 0.5); z-index: 2; }
/* Resting fills */
.ring--tam { width: 100%; height: 100%; top: 0; background: var(--ice); border: 1.5px solid var(--fog); }
.ring--sam { width: 64%; height: 64%; top: 36%; background: #C3E9F5; border: 1.5px solid #9FDCEE; }
.ring--som { width: 32%; height: 32%; top: 68%; background: var(--teal); padding-top: 8%; }
/* Selected = deeper fill for stronger contrast */
.ring--tam.is-active { background: #B4DFF1; border-color: #7CC7E5; }
.ring--sam.is-active { background: #7CC6E8; border-color: #4FB4DE; }
.ring--som.is-active { background: var(--navy); }
.ring--sam.is-active .ring__val,
.ring--sam.is-active .ring__sub { color: var(--navy); }
.ring__label { text-align: center; pointer-events: none; }
.ring__val { font-weight: 800; color: var(--navy); line-height: 1.1; }
.ring--tam .ring__val { font-size: clamp(16px, 2vw, 20px); }
.ring--sam .ring__val { font-size: clamp(13px, 1.5vw, 16px); }
.ring--som .ring__val { font-size: clamp(11px, 1.3vw, 14px); color: #fff; }
.ring__sub { font-size: 12px; color: var(--slate); }
.ring--som .ring__sub { color: var(--ice); font-size: 11px; }

/* ============================================================
   Pricing (Business model)
   ============================================================ */
.pricing-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-top: clamp(28px, 4vh, 48px);
}
.price-list { max-width: 560px; }
.price-line {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.price-line__val { font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.price-line__desc { font-size: 18px; color: var(--slate); }
.price-cta { margin-top: 32px; }
.pricing-flourish { display: grid; place-items: center; }
.pricing-flourish img { width: min(300px, 70%); opacity: 0.55; }

/* ============================================================
   Chart (Pro forma)
   ============================================================ */
.proforma-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  margin-top: clamp(24px, 3vh, 40px);
}
.chart-card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px 20px 12px;
}
.chart-card__title { font-size: 15px; font-weight: 700; color: var(--navy); padding: 4px 8px 12px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { transition: transform 0.3s; }
/* left-to-right reveal: a clip rect grows from the chart's left edge */
.chart-clip { transform: scaleX(0); transform-origin: var(--clip-origin, 58px) 0; transition: transform 1.3s var(--ease-out); }
.chart-svg.in .chart-clip { transform: scaleX(1); }
.chart-grid line { stroke: #EDF3F7; stroke-width: 1; }
.chart-grid line.zero { stroke: var(--mist); }
.chart-axis { fill: var(--pale-steel); font-size: 11px; font-family: var(--font); }
.chart-xlabel { fill: var(--slate); font-size: 13px; font-weight: 600; font-family: var(--font); }

.chart-side { display: flex; flex-direction: column; gap: 24px; }
.toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  align-self: flex-start;
}
.toggle button {
  border: none; background: none;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--slate);
  transition: background 0.25s, color 0.25s;
}
.toggle button[aria-pressed="true"] { background: var(--ice); color: var(--navy); font-weight: 700; }
.legend { display: flex; flex-direction: column; gap: 12px; }
.legend__item { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--navy); }
.legend__swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.legend__note { font-size: 12px; color: var(--pale-steel); font-weight: 400; }
.chart-insight { font-size: 15px; color: var(--slate); line-height: 1.5; }
.chart-insight b { color: var(--navy); }

/* Data tables */
.table-wrap { overflow-x: auto; margin-top: 6px; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--ice); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { color: var(--navy); font-weight: 700; border-bottom-color: var(--fog); }
table.data tbody .scenario td { color: var(--teal); font-weight: 700; background: var(--ice); text-align: left; letter-spacing: 0.02em; }
table.data tbody td { color: var(--slate); }
table.data tbody tr:hover td { background: #FaFdFe; }

/* ============================================================
   Use of funds (donut)
   ============================================================ */
.funds-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(24px, 3vh, 40px);
}
.donut { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut__seg { fill: none; stroke-width: 34; transition: opacity 0.25s, stroke-width 0.25s; cursor: pointer; }
.donut__seg.dim { opacity: 0.35; }
.donut__seg.emph { stroke-width: 40; }
.donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__total { font-size: clamp(36px, 4.5vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.donut__total-label { font-size: 14px; color: var(--slate); }
.fund-legend { display: flex; flex-direction: column; gap: 22px; }
.fund { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; cursor: default; }
.fund__swatch { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.fund__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fund__name { font-size: 17px; font-weight: 700; color: var(--navy); }
.fund__amt { font-size: 15px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.fund__desc { font-size: 13.5px; color: var(--slate); line-height: 1.5; margin-top: 4px; }

/* ============================================================
   The Raise (SAFE terms)
   ============================================================ */
.raise { text-align: center; align-items: center; }
.raise .slide__inner { display: flex; flex-direction: column; align-items: center; }
.raise__title { text-align: center; max-width: 22ch; }
.terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  margin-top: clamp(36px, 6vh, 56px);
}
.term {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.term__icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: grid; place-items: center;
}
.term__value { font-size: clamp(40px, 5vw, 52px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.term__label { font-size: 16px; color: var(--slate); }
.raise__cta { margin-top: clamp(36px, 6vh, 52px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.raise__email { font-size: 14px; color: var(--slate); }

/* ============================================================
   Thank you
   ============================================================ */
.thanks { text-align: center; align-items: center; overflow: hidden; }
.thanks__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.thanks__title { font-size: clamp(56px, 10vw, 104px); font-weight: 800; letter-spacing: -0.045em; color: var(--navy); line-height: 1; }
.thanks__meta { font-size: 16px; color: var(--slate); }
.thanks__cta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Bottom nav + progress
   ============================================================ */
.bottomnav {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: 26px;
  z-index: var(--z-bottomnav);
  display: flex;
  gap: 10px;
}
.navarrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--fog);
  color: var(--navy);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, opacity 0.2s;
}
.navarrow:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.navarrow:disabled { opacity: 0.35; cursor: default; transform: none; }
.progress {
  position: fixed;
  left: 0; bottom: 0;
  height: 4px;
  width: 100%;
  z-index: var(--z-bottomnav);
  background: transparent;
  pointer-events: none;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  transition: width 0.1s linear;
}

/* ============================================================
   Reveal animation (blur-slide-in)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  body { font-size: 17px; }
  .topnav__links { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .two-col--imgleft .col-media { order: 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: 1fr; }
  .market-layout,
  .pricing-layout,
  .proforma-layout,
  .funds-layout { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  .stepper__track { grid-template-columns: 1fr; gap: 0; }
  .stepper__line { display: none; }
  .step { flex-direction: row; text-align: left; gap: 14px; padding: 10px 0; justify-content: flex-start; }
  .step__label { max-width: none; }
  .rings { max-width: 360px; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .hero__logo { width: 78vw; }
  .bottomnav { bottom: 14px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .ambient, .slide::before { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .chart-clip { transform: none; }
  .stepper .step__dot, .stepper .step__label, .stepper .step__badge { opacity: 1; transform: none; }
}