/* ==========================================================================
   Nirmaan AI — Mobile Swipe Deck  (v2 — Design Overhaul)
   Poppins · importance-based type scale (12–40px) · left-aligned · reel swipe
   ========================================================================== */

:root {
  /* Brand palette */
  --orange:        #E8330A;
  --orange-2:      #FF6B35;
  --orange-glow:   rgba(232, 51, 10, .25);
  --navy:          #0F1B2D;
  --near-black:    #0D0D0D;
  --card:          #162236;
  --card-2:        #1B2A42;
  --border:        #1E3048;
  --white:         #FFFFFF;
  --off-white:     #C8D0D8;
  --muted:         #94A3B8;
  --ink:           #14202E;   /* body text on light cards */
  --ink-soft:      #51617A;
  --light-bg:      #F4F6F9;
  --light-bg-2:    #FFFFFF;
  --green:         #10B981;

  /* Atmosphere colors */
  --atm-problem:   rgba(232, 51, 10, .06);
  --atm-solution:  rgba(16, 185, 129, .05);
  --atm-financial: rgba(255, 183, 77, .06);
  --atm-hero-glow: rgba(232, 51, 10, .08);

  /* Fit-to-card scale — JS dials this down (per card) when content would
     otherwise overflow, so every card fits without scrolling. 1 = full size. */
  --fit: 1;

  /* Type scale — biggest = most important (key takeaways), smallest = detail */
  --fs-hero:   calc(var(--fit) * clamp(34px, 9.4vw, 42px));   /* the ONE big stat on a card */
  --fs-h1:     calc(var(--fit) * clamp(23px, 6.4vw, 28px));   /* headline / main message */
  --fs-h2:     calc(var(--fit) * clamp(20px, 5.4vw, 24px));   /* hero punchline */
  --fs-lead:   calc(var(--fit) * clamp(16px, 4.4vw, 18px));   /* sub / lead-in */
  --fs-body:   calc(var(--fit) * clamp(14px, 3.9vw, 16px));   /* explanation */
  --fs-small:  calc(var(--fit) * 13px);                        /* secondary detail */
  --fs-micro:  calc(var(--fit) * 12px);                        /* sources, labels, oval title */

  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: calc(var(--fit) * clamp(18px, 5.6vw, 30px));
  --radius: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--near-black);
  color: var(--white);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- App frame: premium "device" on desktop, full-bleed on mobile ---- */
#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--near-black);
}

@media (min-width: 720px) {
  body {
    background: radial-gradient(120% 120% at 50% 0%, #12233b 0%, #070d16 70%);
    display: grid;
    place-items: center;
  }
  #app {
    width: 430px;
    height: min(920px, 96dvh);
    border-radius: 40px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 0 11px #0a1018,
      0 0 0 12px rgba(255,255,255,.04),
      0 20px 60px rgba(0,0,0,.5),
      0 60px 120px rgba(0,0,0,.4);
    position: relative;
  }

  .card { height: 76%; }

  /* Notch */
  #app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 30px;
    background: #0a1018;
    border-radius: 0 0 20px 20px;
    z-index: 100;
  }

  /* Status bar dots */
  #app::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #1a2a40;
    border-radius: 50%;
    z-index: 101;
    box-shadow:
      -12px 0 0 0 #1a2a40,
      12px 0 0 0 #1a2a40;
  }
}

/* ==========================  REEL / SWIPE  ============================== */
/* Cards sit inset on a dark "table" (#app background), each one a rounded,
   shadowed card with the next/previous card peeking in at the edges —
   a physical stack you swipe left/right through. */
.reel {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  padding: 0 4%;
  gap: 16px;
}
.reel::-webkit-scrollbar { display: none; }

/* iOS Safari scroll-snap hardening — dvh + fill-available fallback so the
   URL bar collapsing doesn't break snap points; contain overscroll chaining. */
@supports (-webkit-touch-callout: none) {
  #app { height: -webkit-fill-available; }
  .reel { overscroll-behavior-x: none; }
  .card { scroll-snap-stop: always; }
}

.card {
  position: relative;
  flex: 0 0 94%;
  width: 94%;
  height: 80%;
  border-radius: var(--radius);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    0 4px 18px rgba(0,0,0,.3),
    0 12px 50px rgba(232,51,10,.16),
    0 0 0 1px rgba(255,255,255,.06);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* everything left-aligned */
  justify-content: safe center;
  text-align: left;
  gap: calc(var(--fit) * clamp(10px, 2vh, 16px));
  padding: var(--pad);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  will-change: transform, opacity;
}
.card::-webkit-scrollbar { display: none; }

/* Slide 2 ("Why we're building") — distribute content across the full card
   height instead of clustering it in the vertical center. */
.card[data-index="1"] { justify-content: space-between; }
.card[data-index="2"] { justify-content: space-between; }
.card[data-index="3"] { justify-content: space-between; }
.card[data-index="5"] { justify-content: space-between; }
.card[data-index="7"] { gap: calc(var(--fit) * clamp(22px, 4.5vh, 34px)); }
.card[data-index="10"] { gap: calc(var(--fit) * clamp(18px, 3.6vh, 28px)); }

/* Slide 2 — the "Why?" paragraph (first <p>, not the final-note one) */
.card[data-index="1"] .body:not(.final-note) { font-size: 14px; }

/* Slide 4 ("Solution") — sub line boxed, and the 3 method chips locked to
   a single row instead of wrapping. */
.card[data-index="3"] .sub {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(232,51,10,.05);
  border: 1px solid rgba(232,51,10,.14);
}
.card[data-index="3"] .chips { flex-wrap: nowrap; }
.card[data-index="3"] .chip { flex: 1; text-align: center; padding: 8px 6px; white-space: nowrap; }

/* Slide 10 ("Team") — sub line shrunk to fit on 2 lines. */
.card[data-index="9"] .sub { font-size: calc(var(--fit) * 14px); line-height: 1.35; }

/* Slide 9 ("Economics") — heroLine2 moved to the bottom, styled as a plain
   hero-line (no box) to match its original top-of-card appearance. */
.card[data-index="8"] .hero-line-box {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: calc(var(--fit) * clamp(14px, 3.8vw, 17px));
}

/* Slide 3 ("The Problem") — "40 students. 40 gaps." centered. */
.card[data-index="2"] .hero-line { width: 100%; text-align: center; }

/* Slide 5 ("SIM") — "Others track scores..." line: smaller, unbold, all grey. */
.card[data-index="4"] .hero-line { font-size: 16px; font-weight: 400; color: var(--ink-soft); }
.card[data-index="4"] .hero-line .o { color: var(--ink-soft); }

/* Slide 13 ("Traction") — "3 centres · ~900 students taught." on one line. */
.card[data-index="12"] .hero-line { font-size: calc(var(--fit) * 14px); white-space: nowrap; }

/* Slide 15 ("Our Vision") — center everything, more breathing room between lines. */
.card[data-index="14"] { align-items: center; text-align: center; gap: calc(var(--fit) * clamp(22px, 4.5vh, 36px)); }
.card[data-index="14"] > * { text-align: center; }

/* Slide 16 ("Close/CTA") — logo centered; contact links sized down and
   pulled tighter together underneath the WhatsApp CTA; everything centered
   and spread evenly top-to-bottom instead of clustering in the middle,
   with extra padding above/below on top of the card's usual padding. */
.card[data-index="15"] {
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
  padding-top: calc(var(--pad) + var(--fit) * 16px);
  padding-bottom: calc(var(--pad) + var(--fit) * 16px);
}
.card[data-index="15"] > * { text-align: center; }
.card[data-index="15"] .logo-lockup { justify-content: center; }
.card[data-index="15"] .headline { font-size: calc(var(--fit) * clamp(12px, 3.2vw, 14px)); }
.card[data-index="15"] .contact-list {
  font-size: calc(var(--fit) * clamp(12px, 3.2vw, 13px));
  gap: 6px;
}
.card[data-index="15"] .contact-list a { padding: 6px 12px; }

/* Slide 14 ("Market") — spread content evenly top-to-bottom (space-evenly
   also opens breathing room above the headline and below the source line),
   plus extra top/bottom padding on top of the card's usual padding. */
.card[data-index="13"] {
  justify-content: space-evenly;
  padding-top: calc(var(--pad) + var(--fit) * 16px);
  padding-bottom: calc(var(--pad) + var(--fit) * 16px);
}

/* Slide 7 ("The Loop") */
/* More breathing room between the text blocks and the loop animation —
   the card had excess empty space top/bottom, so put it to use here instead. */
.card[data-index="6"] { gap: calc(var(--fit) * clamp(20px, 4.2vh, 32px)); }
/* Headline: small quiet lead-in line, then the three "every…" lines larger. */
.card[data-index="6"] .headline { display: flex; flex-direction: column; gap: 4px; }
.card[data-index="6"] .headline .ln1 {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap;
}
.card[data-index="6"] .headline .ln2 {
  font-family: var(--font-head);
  font-size: 26px; font-weight: 700; line-height: 1.18;
  color: var(--navy);
}
/* "SIM Compounding Advantage" — solid orange bubble, sized to fit on one line. */
.card[data-index="6"] .hero-line:not(.hero-line-box) {
  width: fit-content; max-width: 100%;
  white-space: nowrap;
  font-size: clamp(14px, 4.4vw, 17px);
  background: var(--orange);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(232,51,10,.25);
}
/* Bottom line: plain grey text, no bubble/box, 16px. */
.card[data-index="6"] .hero-line-box {
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-soft);
}

/* --- Element entrance: staggered slide-up with blur → clarity --- */
.card > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;   /* keep natural height on overflowing cards — card scrolls, images never collapse */
}
.card.in > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity .55s var(--ease),
    transform .6s var(--ease-out),
    filter .5s var(--ease);
}
.card.in > *:nth-child(1) { transition-delay: .02s; }
.card.in > *:nth-child(2) { transition-delay: .07s; }
.card.in > *:nth-child(3) { transition-delay: .12s; }
.card.in > *:nth-child(4) { transition-delay: .18s; }
.card.in > *:nth-child(5) { transition-delay: .24s; }
.card.in > *:nth-child(6) { transition-delay: .30s; }
.card.in > *:nth-child(7) { transition-delay: .36s; }
.card.in > *:nth-child(8) { transition-delay: .42s; }

/* =====================  CARD BACKGROUNDS  ============================= */

/* Dark card — navy-to-orange glow, kept clearly lighter than the near-black page bg */
.card.dark {
  background:
    radial-gradient(ellipse 100% 60% at 15% 0%, rgba(232,51,10,.10) 0%, transparent 50%),
    linear-gradient(155deg, var(--card-2) 0%, var(--navy) 62%, #101a2c 100%);
  color: var(--white);
}

/* Hero card — dramatic radial with animated glow */
.card.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232,51,10,.14) 0%, transparent 60%),
    radial-gradient(130% 100% at 50% 0%, var(--card-2) 0%, var(--navy) 78%);
  color: var(--white);
  overflow: hidden;
}

/* Animated glow orb behind hero cards */
.card.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(232,51,10,.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: hero-pulse 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.card.hero > * { position: relative; z-index: 1; }

@keyframes hero-pulse {
  0%   { transform: translateX(-50%) scale(1); opacity: .6; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

/* Light card — clean white with subtle warm/cool tint depending on card type */
.card.light {
  background: linear-gradient(180deg, var(--light-bg-2) 0%, var(--light-bg) 100%);
  color: var(--ink);
}
.card.light .muted { color: var(--ink-soft); }
.card.dark  .muted, .card.hero .muted { color: var(--muted); }

/* --- Card-type atmospheres --- */
/* Problem cards: subtle red ambient */
.card.light[data-atmosphere="problem"] {
  background:
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(232,51,10,.04) 0%, transparent 70%),
    linear-gradient(180deg, var(--light-bg-2) 0%, var(--light-bg) 100%);
}

/* Solution cards: subtle teal ambient */
.card.light[data-atmosphere="solution"] {
  background:
    radial-gradient(ellipse 70% 50% at 20% 80%, rgba(16,185,129,.04) 0%, transparent 70%),
    linear-gradient(180deg, var(--light-bg-2) 0%, var(--light-bg) 100%);
}

/* Financial cards: subtle gold ambient */
.card.light[data-atmosphere="financial"] {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(255,183,77,.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--light-bg-2) 0%, var(--light-bg) 100%);
}

/* ============================  TYPO  =================================== */
.kicker {
  font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -.01em;
}
.card.light .headline { color: var(--navy); }
.sub {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--off-white);
  font-weight: 400;
}
.card.light .sub { color: var(--ink-soft); }

/* --- Hero number with glow effect --- */
.hero-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1;
  color: var(--orange);
  letter-spacing: -.02em;
  text-shadow: 0 0 40px rgba(232,51,10,.2);
}

/* Animated counter wrapper */
.hero-num[data-count] {
  transition: text-shadow .5s ease;
}

.hero-line {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.22;
}
.hero-line .o { color: var(--orange); }
.hero-line-box {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(232,51,10,.06);
  border: 1px solid rgba(232,51,10,.16);
  border-left: 3px solid var(--orange);
  font-weight: 600;
}
.body { font-size: var(--fs-body); line-height: 1.5; font-weight: 400; }
.card.dark .body, .card.hero .body { color: var(--off-white); }
.final-note { font-weight: 600; font-style: italic; }
.source {
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1.4;
  margin-top: 2px;
  padding: 4px 10px;
  background: rgba(148,163,184,.06);
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.08);
  width: auto !important;
  display: inline-block;
}
.card.light .source { color: #93A2B2; background: rgba(15,27,45,.03); border-color: rgba(15,27,45,.06); }
.card[data-index="4"] .source { color: var(--orange); background: rgba(232,51,10,.08); border-color: rgba(232,51,10,.18); }
.o  { color: var(--orange); }
.g  { color: var(--green); }
strong { font-weight: 700; }

/* ========================= STAT ROWS ================================== */
.rows { display: flex; flex-direction: column; gap: clamp(14px,2.4vh,20px); }
.row {
  display: flex; align-items: center; gap: 16px;
  font-size: var(--fs-body); line-height: 1.3; font-weight: 400;
  padding: 12px 16px;
  background: rgba(232,51,10,.04);
  border-radius: 14px;
  border: 1px solid rgba(232,51,10,.08);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card.in .row { animation: row-slide-in .5s var(--ease-out) both; }
.card.in .row:nth-child(1) { animation-delay: .1s; }
.card.in .row:nth-child(2) { animation-delay: .2s; }
.card.in .row:nth-child(3) { animation-delay: .3s; }

@keyframes row-slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.row .n {
  font-family: var(--font-head); font-weight: 800;
  color: var(--orange); font-size: clamp(26px,7vw,32px);
  min-width: 2.6em; text-align: left; line-height: 1;
}
.row .t { flex: 1; }

/* pill chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: var(--fs-small); font-weight: 500;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(232,51,10,.12); color: var(--orange);
  border: 1px solid rgba(232,51,10,.35);
  width: auto;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,51,10,.15);
}
.card.light .chip { background: rgba(232,51,10,.07); }

/* ========================= CTA BUTTON ================================= */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-lead); color: #fff; text-decoration: none;
  background: #25D366; padding: 14px 24px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(37,211,102,.35);
  width: auto;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(37,211,102,.45);
}

/* Pulse ring on CTA */
.cta::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  border: 2px solid rgba(37,211,102,.4);
  animation: cta-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.06); opacity: 0; }
}

.cta.mail { background: var(--orange); box-shadow: 0 10px 30px rgba(232,51,10,.35); }
.cta.mail::after { border-color: rgba(232,51,10,.4); }

.contact-list { display:flex; flex-direction:column; gap:10px; font-size: var(--fs-body); font-weight:400; }
.contact-list a {
  color: var(--off-white); text-decoration: none;
  overflow-wrap:normal; word-break:keep-all; white-space:nowrap;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s, border-color .2s;
}
.contact-list a:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}

/* logos (left-aligned) */
.logo-mark { width: calc(var(--fit) * clamp(56px, 15vw, 72px)); height: auto; }
.logo-name { width: calc(var(--fit) * clamp(150px, 44vw, 200px)); height: auto; }

/* Mark + live "Nirmaan" text lockup — same horizontal layout on every
   background; only the wordmark color follows the card theme. */
.logo-lockup { display: flex; align-items: center; gap: 10px; }
.logo-mark-icon { width: clamp(34px, 9vw, 46px); height: auto; flex: none; }
.logo-word { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 7.5vw, 38px); line-height: 1; letter-spacing: -.01em; color: var(--white); }
.card.light .logo-word { color: var(--navy); }

/* =====================  TOP: progress + slide info  ================== */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  padding: 12px var(--pad) 8px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

/* Card counter ("4 of 18") */
.card-counter {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
}
.topbar.on-light .card-counter { color: rgba(15,27,45,.35); }

.progress { display: flex; gap: 4px; }
.progress .seg {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.15); overflow: hidden; cursor: pointer; pointer-events: auto;
  transition: background .3s;
}
.progress .seg > i {
  display:block; height:100%; width:0;
  background: var(--orange);
  border-radius:3px;
  transition: width .4s var(--ease-out);
}
.progress .seg.done > i, .progress .seg.active > i { width: 100%; }
.progress .seg.active {
  background: rgba(232,51,10,.2);
}
.topbar.on-light .progress .seg { background: rgba(15,27,45,.1); }
.topbar.on-light .progress .seg.active { background: rgba(232,51,10,.12); }

/* slide-title oval (top-right, 12px) */
.oval {
  align-self: flex-end;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .02em;
  padding: 4px 13px; border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar.on-light .oval {
  color: var(--orange);
  background: rgba(232,51,10,.06);
  border-color: rgba(232,51,10,.18);
}

/* nav hint */
.hint {
  position:absolute; bottom: 16px; left:0; right:0; z-index:30;
  text-align:center; font-size: var(--fs-micro); font-weight:500; letter-spacing:.08em;
  color: rgba(255,255,255,.4); pointer-events:none;
  animation: bob 2.2s var(--ease) infinite;
}
.topbar.on-light ~ .hint { color: rgba(15,27,45,.3); }
@keyframes bob { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-6px);} }

/* tap zones — visual placeholders only. pointer-events:none lets touches
   fall through to the reel so its native horizontal swipe/scroll-snap works;
   discrete taps are handled on the reel itself in deck.js. */
.tapzone { position:absolute; top:12%; bottom:12%; z-index:20; width:38%; pointer-events:none; }
.tapzone.prev { left:0; } .tapzone.next { right:0; width:62%; }

/* ======================  SOFT GATE overlay  =========================== */
.gate {
  position:absolute; inset:0; z-index:60; display:none;
  flex-direction:column; justify-content:center; gap:16px;
  padding: var(--pad);
  background: radial-gradient(130% 100% at 50% 0%, #162943 0%, var(--near-black) 75%);
}
.gate.show { display:flex; }
.gate h2 { font-family: var(--font-head); font-weight:700; font-size: var(--fs-h1); line-height:1.1; }
.gate p  { font-size: var(--fs-lead); color: var(--off-white); line-height:1.4; }
.gate input {
  font-size: var(--fs-lead); padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: #0c1626; color:#fff; width:100%;
  font-family: var(--font-body);
  transition: border-color .2s;
}
.gate input:focus { outline:none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,51,10,.1); }
.gate .cta { border:none; cursor:pointer; width:100%; justify-content:center; background: var(--orange); box-shadow:none; }
.gate .cta::after { display: none; }
.gate .skip { background:none; border:none; color: var(--muted); font-size: var(--fs-body); text-decoration:underline; cursor:pointer; align-self:center; }

/* ============ VISUAL COMPONENTS ====================================== */
.viz { align-self: stretch; display:flex; justify-content:center; min-width: 0; max-width: 100%; }
.viz svg { width: 100%; height: auto; max-height: calc(var(--fit) * 34dvh); overflow: visible; }

/* --- Animated bars (unit economics) --- */
.bars { display:flex; align-items:flex-end; gap: 24px; height: calc(var(--fit) * 26dvh); width: 100%; }
.bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%; }
.bar .fill {
  width:100%; border-radius:12px 12px 0 0;
  transition: height .8s var(--ease-out);
}
/* Animate bars from 0 on card enter */
.card:not(.in) .bar .fill { height: 0 !important; }

.bar .fill.hi { background: linear-gradient(180deg, #4a5d78, #2a3547); }
.bar .fill.lo {
  background: linear-gradient(180deg,var(--orange-2),var(--orange));
  box-shadow: 0 -4px 20px rgba(232,51,10,.2);
}
.bar .val { font-family:var(--font-head); font-weight:800; font-size: clamp(22px,6vw,28px); }
.bar .cap { font-size: var(--fs-small); color:var(--muted); text-align:center; line-height:1.2; }

/* --- Pricing / market cards --- */
.cols { display:flex; flex-direction:column; gap:10px; width:100%; }
.col {
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:16px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 18px; text-align:left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.col:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.card.light .col { background: #fff; border-color: #E5E9EF; box-shadow: 0 2px 10px rgba(15,27,45,.05); }
.col .k { grid-column:1; grid-row:1/3; font-family:var(--font-head); font-weight:800; font-size: clamp(22px,5.4vw,26px); color:var(--orange); min-width:2.4em; }
.col .p { grid-column:2; grid-row:1; font-size: var(--fs-lead); color:#fff; font-weight:600; line-height:1.2; }
.card.light .col .p { color: var(--navy); }
.col .s { grid-column:2; grid-row:2; font-size: var(--fs-small); color:var(--muted); line-height:1.25; }
.col:not(:has(.p)) .s { grid-row:1/3; align-self:center; }

/* --- Timeline (traction) — animated dot sequence --- */
.tl { display:flex; flex-direction:column; gap:14px; width:100%; }
.tl .step {
  display:flex; gap:14px; align-items:flex-start;
  opacity: 0;
  transform: translateX(-16px);
}
.card.in .tl .step {
  animation: step-in .5s var(--ease-out) forwards;
}
.card.in .tl .step:nth-child(1) { animation-delay: .15s; }
.card.in .tl .step:nth-child(2) { animation-delay: .3s; }
.card.in .tl .step:nth-child(3) { animation-delay: .45s; }

@keyframes step-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tl .dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--orange); margin-top:5px; flex:none;
  box-shadow:0 0 0 4px rgba(232,51,10,.16), 0 0 12px rgba(232,51,10,.2);
  position: relative;
}
/* Connecting line between timeline dots */
.tl .step:not(:last-child) .dot::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 14px);
  background: linear-gradient(to bottom, var(--orange), rgba(232,51,10,.1));
}
.tl .step .h { font-family:var(--font-head); font-weight:600; font-size: var(--fs-lead); }
.tl .step .d { font-size: var(--fs-small); color:var(--muted); line-height:1.3; }
.card.light .tl .step .d { color: var(--ink-soft); }

/* --- Team --- */
.team { display:flex; flex-direction:column; gap: calc(var(--fit) * 12px); width:100%; }
.member {
  display:flex; gap: calc(var(--fit) * 14px); align-items:center;
  padding: calc(var(--fit) * 8px) calc(var(--fit) * 10px);
  border-radius: 16px;
  background: rgba(22,34,54,.5);
  border: 1px solid rgba(30,48,72,.6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card.light .member {
  background: #fff;
  border-color: #E5E9EF;
  box-shadow: 0 2px 8px rgba(15,27,45,.04);
}
.member:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.member .av {
  width: calc(var(--fit) * 72px); height: calc(var(--fit) * 72px); border-radius: 50%; flex:none; overflow:hidden;
  display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:calc(var(--fit) * 20px); color:#fff;
  background: linear-gradient(135deg,var(--orange),var(--orange-2));
  box-shadow: 0 4px 16px rgba(232,51,10,.2);
}
.member .av img { width:100%; height:100%; object-fit:cover; display:block; }
.member .nm { font-family:var(--font-head); font-weight:700; font-size: var(--fs-lead); line-height:1.15; }
.card.light .member .nm { color: var(--navy); }
.member .role { font-size: var(--fs-small); color: var(--orange); font-weight:600; margin-top:1px; }
.member .mbody { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.member .nm, .member .role { flex: 0 0 100%; }
.member .rl { font-size: calc(var(--fit) * 11px); color:var(--muted); line-height:1.2; margin-top:2px; flex: 1 1 auto; min-width: 0; }
.card.light .member .rl { color: var(--ink-soft); }

/* LinkedIn icon next to team name */
.member .linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: rgba(10,102,194,.15);
  color: #0A66C2;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
  vertical-align: middle;
  transition: background .2s;
}
.member .linkedin:hover { background: rgba(10,102,194,.3); }

/* --- Real visuals from source deck --- */
.viz-img { border-radius:14px; overflow:hidden; min-width:0; max-width:100%; width:100%; }
.viz-img img { width:100%; max-width:100%; height:auto; display:block; border-radius:14px; }
.viz-img.viz-phone { width:auto; max-width:100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%);
}
.viz-img.viz-phone img { max-height:calc(var(--fit) * 60dvh); width:auto; max-width:100%; border-radius:20px; }
.viz-img.viz-graph { border:1px solid #E5E9EF; }
.viz-caption {
  width: 100%;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-top: -6px;
}
.card.dark .viz-caption, .card.hero .viz-caption { color: var(--muted); }

/* --- Comparison table (moat) --- */
.compare { display:flex; flex-direction:column; gap:14px; width:100%; }
.crow {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.crow .dim { font-size: var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--orange); font-weight:600; margin-bottom:4px; }
.crow .others { font-size: var(--fs-small); color:var(--muted); line-height:1.3; margin-bottom:4px; }
.crow .nirmaan { font-size: var(--fs-lead); color:#fff; font-weight:600; line-height:1.25; }
.crow .nirmaan::before { content:"→ "; color:var(--orange); }

/* --- Allocation bars (the ask) --- */
.alloc { display:flex; flex-direction:column; gap:12px; width:100%; }
.alloc .ar { display:flex; align-items:center; gap:12px; font-size: var(--fs-body); font-weight:500; }
.alloc .track {
  flex:1; height:12px; border-radius:8px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.alloc .track > i {
  display:block; height:100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  border-radius:8px;
  transition: width .8s var(--ease-out);
  box-shadow: 0 0 8px rgba(232,51,10,.2);
}
/* Animate alloc bars from 0 */
.card:not(.in) .alloc .track > i { width: 0 !important; }

.alloc .pct { font-family:var(--font-head); font-weight:700; min-width:2.6em; text-align:right; }

/* --- Native SVG flywheel --- */
.flywheel-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.flywheel-wrap svg {
  max-height: calc(var(--fit) * 30dvh);
  width: auto;
}

/* --- Dots visualization (40 students) --- */
.dots-viz {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  padding: 12px;
  width: 100%;
}
.dots-viz .dot-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #CBD4DE;
  transition: background .4s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dots-viz .dot-cell.lit {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(232,51,10,.3);
}
/* Animate dots lighting up */
.card.in .dots-viz .dot-cell {
  animation: dot-pop .3s var(--ease-spring) both;
}
.card:not(.in) .dots-viz .dot-cell { opacity: 0; transform: scale(0); }

@keyframes dot-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Stagger dot animations */
.card.in .dots-viz .dot-cell:nth-child(1)  { animation-delay: .05s; }
.card.in .dots-viz .dot-cell:nth-child(2)  { animation-delay: .07s; }
.card.in .dots-viz .dot-cell:nth-child(3)  { animation-delay: .09s; }
.card.in .dots-viz .dot-cell:nth-child(4)  { animation-delay: .11s; }
.card.in .dots-viz .dot-cell:nth-child(5)  { animation-delay: .13s; }
.card.in .dots-viz .dot-cell:nth-child(6)  { animation-delay: .15s; }
.card.in .dots-viz .dot-cell:nth-child(7)  { animation-delay: .17s; }
.card.in .dots-viz .dot-cell:nth-child(8)  { animation-delay: .19s; }
.card.in .dots-viz .dot-cell:nth-child(9)  { animation-delay: .21s; }
.card.in .dots-viz .dot-cell:nth-child(10) { animation-delay: .23s; }
.card.in .dots-viz .dot-cell:nth-child(11) { animation-delay: .25s; }
.card.in .dots-viz .dot-cell:nth-child(12) { animation-delay: .27s; }
.card.in .dots-viz .dot-cell:nth-child(13) { animation-delay: .29s; }
.card.in .dots-viz .dot-cell:nth-child(14) { animation-delay: .31s; }
.card.in .dots-viz .dot-cell:nth-child(15) { animation-delay: .33s; }
.card.in .dots-viz .dot-cell:nth-child(16) { animation-delay: .35s; }
.card.in .dots-viz .dot-cell:nth-child(17) { animation-delay: .37s; }
.card.in .dots-viz .dot-cell:nth-child(18) { animation-delay: .39s; }
.card.in .dots-viz .dot-cell:nth-child(19) { animation-delay: .41s; }
.card.in .dots-viz .dot-cell:nth-child(20) { animation-delay: .43s; }
.card.in .dots-viz .dot-cell:nth-child(n+21) { animation-delay: .45s; }

.dots-caption {
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}

/* --- Loading screen --- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--navy);
  transition: opacity .4s ease, visibility .4s ease;
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader .spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(232,51,10,.15);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader img { width: 120px; opacity: .7; }

/* ---- Product demo strip (mockup screens) ---- */
.demo-strip {
  display: flex; gap: 12px; width: 100%;
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.demo-strip::-webkit-scrollbar { display: none; }
.demo-screen { flex: 1 1 0; min-width: 0; scroll-snap-align: center; text-align: left; }
.phone-mini {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #fff, #F4F6F9);
  border: 1px solid #E5E9EF;
  box-shadow: 0 6px 20px rgba(15,27,45,.1), inset 0 0 0 3px #fff;
  aspect-ratio: 120 / 220;
}
.phone-mini svg { width: 100%; height: 100%; display: block; }
.demo-label { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--navy); margin-top: 8px; line-height: 1.2; }
.demo-cap { font-size: 11px; color: var(--ink-soft); line-height: 1.25; margin-top: 2px; }

/* ---- Competitive quadrant ---- */
.quadrant { width: 100%; display: flex; justify-content: center; }
.quadrant svg { width: 100%; max-height: calc(var(--fit) * 40dvh); overflow: visible; }

/* ---- Market funnel (TAM/SAM/SOM) ---- */
.funnel { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.fn-row { width: 100%; display: flex; flex-direction: column; align-items: center; }
.fn-bar {
  width: var(--w); min-width: 42%;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  color: #fff; box-shadow: 0 6px 18px rgba(232,51,10,.18);
  transition: width .7s var(--ease-out);
}
.card:not(.in) .fn-bar { width: 0 !important; }
.fn-row:nth-child(2) .fn-bar { background: linear-gradient(90deg, #C22B08, #E8330A); }
.fn-row:nth-child(3) .fn-bar { background: linear-gradient(90deg, #9A2206, #C22B08); }
.fn-k { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; opacity: .85; }
.fn-v { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 5.2vw, 26px); line-height: 1; }
.fn-d { font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.3; margin-top: 5px; max-width: 88%; }

/* ---- Social proof quotes ---- */
.quotes { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.quote {
  padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid #E5E9EF;
  border-left: 3px solid var(--orange);
  box-shadow: 0 2px 10px rgba(15,27,45,.04);
}
.card.dark .quote, .card.hero .quote { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); border-left-color: var(--orange); }
.quote blockquote { font-size: var(--fs-body); line-height: 1.4; color: var(--navy); font-weight: 500; }
.card.dark .quote blockquote, .card.hero .quote blockquote { color: var(--off-white); }
.quote figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 8px; font-weight: 600; }

/* ---- Ask milestones ---- */
.milestones { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ms {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.ms-h { font-family: var(--font-head); font-weight: 800; color: var(--orange); font-size: 14px; min-width: 4.2em; flex: none; }
.ms-d { font-size: var(--fs-small); color: var(--off-white); line-height: 1.3; }

/* ---- Close-card actions: Share + PDF ---- */
.close-actions { display: flex; flex-wrap: wrap; gap: 10px; width: auto; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-small);
  color: var(--off-white); text-decoration: none; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: background .2s, border-color .2s, transform .2s;
}
.pill-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }

/* ---- Keyboard shortcuts tooltip (desktop) ---- */
.kbd-hint {
  position: absolute; bottom: 16px; right: 20px; z-index: 35;
  display: flex; gap: 14px; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(12,18,28,.72); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; color: rgba(255,255,255,.65);
  transition: opacity .8s ease, transform .8s ease;
}
.kbd-hint.fade { opacity: 0; transform: translateY(8px); }
.kbd-hint span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kbd-hint kbd {
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}

/* ==========================================================================
   v3 STORY COMPONENTS — hook, list, bignums, figure, dialogue,
   3-way compare, cost waterfall, ARR roadmap, segments, 5-step loop
   ========================================================================== */

/* ---- Forward "hook": the open-loop teaser that pulls to the next card ---- */
.hook {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto !important; margin-top: 4px;
  padding: calc(var(--fit) * 8px) calc(var(--fit) * 14px); border-radius: 999px;
  font-size: calc(var(--fit) * 12.5px); font-weight: 600; color: var(--orange);
  background: rgba(232,51,10,.07); border: 1px solid rgba(232,51,10,.18);
}
.hook-t { min-width: 0; }
.hook-a { font-weight: 800; animation: hook-bob 1.6s var(--ease) infinite; }
@keyframes hook-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.card.dark .hook, .card.hero .hook { color: var(--orange-2); background: rgba(232,51,10,.14); border-color: rgba(232,51,10,.3); }

/* ---- Bullet lists (system constraints / why-now) ---- */
.list-wrap { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.list-head { font-size: var(--fs-small); font-weight: 700; }
.card.light .list-head { color: var(--navy); }
.card.dark .list-head, .card.hero .list-head { color: var(--white); }
.blist { list-style: none; display: flex; flex-direction: column; gap: calc(var(--fit) * 9px); }
.blist li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.35; }
.blist .mk { flex: none; width: calc(var(--fit) * 20px); height: calc(var(--fit) * 20px); border-radius: 6px; display: grid; place-items: center; font-size: calc(var(--fit) * 11px); font-weight: 800; margin-top: 1px; }
.list-wrap.x .mk   { background: rgba(232,51,10,.12); color: var(--orange); }
.list-wrap.ok .mk  { background: rgba(16,185,129,.14); color: var(--green); }
.list-wrap.arw .mk { background: rgba(232,51,10,.12); color: var(--orange); }

/* ---- Two big headline stats (market TAMs) ---- */
.bignums { display: flex; gap: 12px; width: 100%; }
.bn { flex: 1; padding: 14px 16px; border-radius: 16px; background: rgba(232,51,10,.08); border: 1px solid rgba(232,51,10,.22); }
.bn-v { font-family: var(--font-head); font-weight: 800; font-size: clamp(25px,7vw,33px); color: var(--orange); line-height: 1; letter-spacing: -.02em; }
.bn-k { font-size: 11.5px; margin-top: 6px; font-weight: 500; color: var(--off-white); line-height: 1.25; }
.card.light .bn-k { color: var(--ink-soft); }

/* ---- Small captioned figure (SIM competency radar) ---- */
.figure { width: 100%; display: flex; flex-direction: row; align-items: center; gap: calc(var(--fit) * 12px); }
.figure img { max-width: 54%; height: auto; flex: none; }
.figure figcaption { font-size: var(--fs-micro); color: var(--ink-soft); text-align: left; line-height: 1.35; flex: none; width: 120px; max-width: 120px; }

/* ---- Whiteboard AI dialogue (reveals bubble by bubble) ---- */
.dialogue { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.dlg-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.bubble { max-width: 88%; padding: 9px 13px; border-radius: 15px; font-size: 12.5px; line-height: 1.38; opacity: 0; transform: translateY(8px); }
.bubble.tutor { align-self: flex-start; background: #EEF2F7; color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.student { align-self: flex-end; background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px rgba(232,51,10,.2); }
.card.in .dialogue .bubble { animation: bubble-in .5s var(--ease-out) forwards; animation-delay: calc(.2s + var(--i) * .32s); }
@keyframes bubble-in { to { opacity: 1; transform: none; } }

/* ---- 3-way comparison (Generic LLMs / EdTech AI / Nirmaan) — dark card ---- */
.compare3 { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.c3-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.c3-col { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,.04); }
.c3-col.us { background: rgba(232,51,10,.14); border: 1px solid rgba(232,51,10,.4); }
.c3-logos { display: flex; gap: 4px; align-items: center; justify-content: center; min-height: 24px; background: #fff; border-radius: 6px; padding: 3px 7px; }
.c3-logos img { height: 15px; width: auto; max-width: 26px; object-fit: contain; }
.c3-k { font-size: 11px; font-weight: 700; color: var(--off-white); text-align: center; line-height: 1.1; }
.c3-col.us .c3-k { color: var(--orange-2); }
.c3-dim { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--orange); font-weight: 700; margin: 9px 0 4px; }
.c3-vals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.c3-v { font-size: 10.5px; line-height: 1.28; color: var(--muted); padding: 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.c3-v.us { color: #fff; font-weight: 600; background: rgba(232,51,10,.13); border: 1px solid rgba(232,51,10,.28); }

/* ---- Cost waterfall (Others vs Nirmaan) — light card ---- */
.waterfall { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.wf-legend { display: flex; gap: 16px; font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.wf-lg.other { color: var(--ink-soft); }
.wf-lg.us { color: var(--orange); }
.wf-row { display: grid; grid-template-columns: 38% 1fr; gap: 10px; align-items: center; }
.wf-t { font-size: 12px; font-weight: 600; line-height: 1.15; color: var(--navy); }
.wf-note { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.wf-bars { display: flex; flex-direction: column; gap: 4px; }
.wf-track { position: relative; height: 15px; background: rgba(15,27,45,.05); border-radius: 4px; overflow: hidden; }
.wf-track > i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; width: var(--w); transition: width .9s var(--ease-out); }
.wf-o { background: linear-gradient(90deg,#9aa7b8,#c2ccd8); }
.wf-n { background: linear-gradient(90deg,var(--orange),var(--orange-2)); }
.card:not(.in) .wf-track > i { width: 0 !important; }
.wf-num { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; color: var(--ink-soft); }

.margin-call { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 12px 16px; border-radius: 14px; background: rgba(255,183,77,.12); border: 1px solid rgba(255,183,77,.32); }
.mc-from { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--ink-soft); text-decoration: line-through; }
.mc-arw { color: var(--orange); font-weight: 800; font-size: 18px; }
.mc-to { font-family: var(--font-head); font-weight: 800; font-size: 27px; color: var(--orange); }
.mc-lbl { flex-basis: 100%; font-size: 12px; color: var(--ink-soft); }

/* ---- ARR growth roadmap — light card ---- */
.roadmap { width: 100%; }
.rm-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: calc(var(--fit) * 25dvh); }
.rm-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.rm-arr { font-family: var(--font-head); font-weight: 800; font-size: clamp(13px,3.8vw,17px); color: var(--navy); line-height: 1; }
.rm-arr span { font-size: 9px; font-weight: 600; color: var(--ink-soft); }
.rm-bar-wrap { width: 68%; flex: 1; display: flex; align-items: flex-end; }
.rm-bar { width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg,#F5B84C,#E8330A); transition: height .9s var(--ease-out); }
.rm-bar.pos { background: linear-gradient(180deg,var(--orange-2),var(--orange)); box-shadow: 0 -4px 16px rgba(232,51,10,.25); }
.card:not(.in) .rm-bar { height: 0 !important; }
.rm-gm { font-size: 10.5px; font-weight: 700; color: var(--green); }
.rm-fy { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.rm-note { font-size: 12px; color: var(--navy); text-align: center; margin-top: 12px; font-weight: 600; }

/* ---- Business segments — light card ---- */
.segments { display: flex; flex-direction: column; gap: calc(var(--fit) * 8px); width: 100%; }
.seg-card { padding: calc(var(--fit) * 10px) calc(var(--fit) * 13px); border-radius: 14px; background: #fff; border: 1px solid #E5E9EF; box-shadow: 0 2px 10px rgba(15,27,45,.04); }
.seg-top { display: flex; align-items: center; gap: 8px; margin-bottom: calc(var(--fit) * 4px); }
.seg-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--orange); padding: 2px 8px; border-radius: 999px; }
.seg-k { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lead); color: var(--navy); line-height: 1.1; }
.seg-v { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.3; }
.seg-p { font-size: calc(var(--fit) * 13px); font-weight: 700; color: var(--orange); margin-top: 6px; }

/* ---- 5-step compounding loop (native SVG) ---- */
.loop5-wrap { width: 100%; display: flex; justify-content: center; padding: 6px 0; }
.loop5-wrap svg { width: 100%; max-width: 408px; max-height: calc(var(--fit) * 40.8dvh); height: auto; overflow: visible; }

/* ==========================================================================
   v4 COMPONENTS — centered cover, tagline, data points, pillars, big number,
   video button, how-list, donut, team logos
   ========================================================================== */

/* ---- Centered cover (slide 1 — deliberate layout exception) ---- */
.card.centered { align-items: center; justify-content: center; text-align: center; gap: calc(var(--fit) * clamp(14px, 3vh, 24px)); }
.card.centered > * { text-align: center; }
.card.centered .logo-name { width: calc(var(--fit) * clamp(200px, 62vw, 290px)); margin: 0 auto; }
.card.centered .logo-lockup { width: auto; margin: 0 auto; }
.card.centered .logo-mark-icon { width: clamp(46px, 11vw, 60px); }
.card.centered .logo-word { font-size: clamp(34px, 9vw, 48px); }
.card.centered .body { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; max-width: 34ch; margin: 0 auto; }

.tagline { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lead); color: var(--off-white); letter-spacing: .01em; }
.card.light .tagline { color: var(--ink-soft); }

/* ---- Cover (slide 1): logo + tagline pinned top, quote centered, CTA pinned bottom ---- */
.card[data-index="0"] { justify-content: flex-start; }
.card[data-index="0"] .body {
  margin-top: auto;
  margin-bottom: auto;
  font-style: italic;
}
.card[data-index="0"] .body::before { content: "\201C"; }
.card[data-index="0"] .body::after  { content: "\201D"; }
.card[data-index="0"] .cta-pill { font-size: 15px; padding: 12px 20px; }

/* ---- Data points row below an image (slide 2) ---- */
.datapoints { width: 100%; }
.dp-row { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; }
.dp { flex: 1; text-align: center; padding: 9px 4px; border-radius: 12px; background: rgba(232,51,10,.05); border: 1px solid rgba(232,51,10,.12); }
.dp-v { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 5.6vw, 26px); color: var(--orange); line-height: 1; }
.dp-g { font-size: 11px; color: var(--ink-soft); margin-top: 3px; font-weight: 500; }
.dp-arw { align-self: center; color: var(--orange); font-weight: 800; flex: none; opacity: .55; }
.dp-cap { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 9px; line-height: 1.35; }

/* ---- Pillars (slide 8 — Built for Bharat, dark card) ---- */
.pillars { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pillar { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--orange); }
.card.light .pillar { background: #fff; border-color: #E5E9EF; box-shadow: 0 2px 8px rgba(15,27,45,.04); }
.pl-body { min-width: 0; }
.pl-k { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lead); color: var(--orange-2); margin-bottom: 3px; }
.card.light .pl-k { color: var(--orange); }
.pl-d { font-size: var(--fs-small); color: var(--off-white); line-height: 1.35; }
.card.light .pl-d { color: var(--ink-soft); }

/* Pillar icons — orange glyph in a soft circular tile, each with its own idle animation. */
.pl-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,51,10,.14); color: var(--orange-2);
}
.card.light .pl-icon { background: rgba(232,51,10,.09); color: var(--orange); }
.pl-icon svg { width: 18px; height: 18px; overflow: visible; }

.pillar[data-icon="interactive"] .eq-bar { transform-box: fill-box; transform-origin: center bottom; animation: eq-bounce 1.1s ease-in-out infinite; }
.pillar[data-icon="interactive"] .eq-bar:nth-child(1) { animation-delay: 0s; }
.pillar[data-icon="interactive"] .eq-bar:nth-child(2) { animation-delay: .15s; }
.pillar[data-icon="interactive"] .eq-bar:nth-child(3) { animation-delay: .3s; }
.pillar[data-icon="interactive"] .eq-bar:nth-child(4) { animation-delay: .45s; }
@keyframes eq-bounce { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.pillar[data-icon="smart"] .sm-ring { transform-box: fill-box; transform-origin: center; animation: radar-ping 2s ease-out infinite; }
.pillar[data-icon="smart"] .sm-core { transform-box: fill-box; transform-origin: center; animation: core-pulse 2s ease-in-out infinite; }
@keyframes radar-ping { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes core-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.pillar[data-icon="affordable"] .pl-icon svg { transform-box: fill-box; transform-origin: center; animation: coin-bounce 1.8s ease-in-out infinite; }
@keyframes coin-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }

/* ---- Big number (slide 11 — the ask) ---- */
.big-num { display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 800; font-size: clamp(46px, 14vw, 64px); color: var(--orange); line-height: 1; letter-spacing: -.02em; text-shadow: 0 0 40px rgba(232,51,10,.25); }
.big-num span { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 600; color: var(--off-white); letter-spacing: 0; margin-top: 8px; }
.card.light .big-num span { color: var(--ink-soft); }

/* ---- Video button (slide 6) ---- */
.video-btn { display: inline-flex; align-self: center; margin: 0 auto; align-items: center; gap: 10px; width: auto !important; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: 12px; background: linear-gradient(135deg, #E8330A, #FF6B35); box-shadow: 0 8px 22px rgba(232,51,10,.28); transition: transform .2s, box-shadow .2s; animation: vb-pulse 2.4s var(--ease) infinite; }
.video-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(232,51,10,.4); animation-play-state: paused; }
.vb-play { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 9px; padding-left: 2px; animation: vb-play-throb 1.6s var(--ease) infinite; }
@keyframes vb-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(232,51,10,.28), 0 0 0 0 rgba(232,51,10,.35); }
  50%      { box-shadow: 0 10px 26px rgba(232,51,10,.36), 0 0 0 10px rgba(232,51,10,0); }
}
@keyframes vb-play-throb {
  0%, 100% { transform: scale(1); background: rgba(255,255,255,.25); }
  50%      { transform: scale(1.12); background: rgba(255,255,255,.4); }
}

/* ---- How list with status pills (slide 9) ---- */
.howlist { display: flex; flex-direction: column; gap: calc(var(--fit) * 8px); width: 100%; }
.how-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--fit) * 10px) calc(var(--fit) * 14px); border-radius: 12px; background: #fff; border: 1px solid #E5E9EF; box-shadow: 0 2px 8px rgba(15,27,45,.04); }
.how-t { font-size: var(--fs-small); font-weight: 600; color: var(--navy); line-height: 1.2; }
.how-st { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.how-st.done { background: rgba(16,185,129,.14); color: var(--green); }
.how-st.pipe { background: rgba(255,183,77,.2); color: #C77B0A; }
.how-st.future { background: rgba(148,163,184,.16); color: var(--ink-soft); }

/* ---- Donut (slide 11) ---- */
.donut-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--fit) * 16px); }
.donut { width: calc(var(--fit) * clamp(270px, 78vw, 324px)); height: auto; }
.donut-seg { stroke-dashoffset: var(--len); transition: stroke-dashoffset .9s var(--ease-out); }
.card.in .donut-seg { stroke-dashoffset: 0; }
.dn-cv { font-family: var(--font-head); font-weight: 800; font-size: 26px; fill: #fff; }
.card.light .dn-cv { fill: var(--navy); }
.dn-ck { font-size: 11px; fill: var(--off-white); }
.donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; }
.dn-li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.dn-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dn-t { flex: 1; color: var(--off-white); }
.card.light .dn-t { color: var(--ink-soft); }
.dn-p { font-family: var(--font-head); font-weight: 700; color: #fff; }
.card.light .dn-p { color: var(--navy); }

/* ---- Team logos (slide 10) — sit beside the .rl text, not below it ---- */
.member .mbody { min-width: 0; }
.mlogos { display: flex; align-items: center; gap: 10px; margin-top: 0; margin-left: auto; flex: none; flex-wrap: wrap; }
.mlogos img { height: calc(var(--fit) * 27px); width: auto; max-width: 99px; object-fit: contain; opacity: .9; }

/* ====================== REDUCED MOTION ================================ */
@media (prefers-reduced-motion: reduce) {
  .card > *, .card.in > * { transition:none !important; transform:none !important; opacity:1 !important; filter:none !important; }
  .card.in .row, .card.in .tl .step, .card.in .dots-viz .dot-cell { animation:none !important; opacity:1 !important; transform:none !important; }
  .card.in .dialogue .bubble { animation:none !important; opacity:1 !important; transform:none !important; }
  .wf-track > i, .rm-bar, .bar .fill { transition:none !important; }
  .donut-seg { transition:none !important; stroke-dashoffset:0 !important; }
  .hook-a { animation:none !important; }
  .eq-bar, .sm-ring, .sm-core, .pillar[data-icon="affordable"] .pl-icon svg { animation:none !important; }
  .card.hero::before { animation:none !important; }
  .cta::after { animation:none !important; }
  .video-btn, .vb-play { animation:none !important; }
  .reel { scroll-behavior:auto; }
  .hint { animation:none; }
}