/* Vora Pitch Deck — Design System
 * Mirrors the Figma build: dark warm-black + metallic copper accent
 * Inter (display + body) · Roboto Mono (numerals + tags)
 * Slides: 1920×1080 base, scaled responsively
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600&display=swap");

:root {
  --bg-deep:    #0A0907;
  --bg-layer:   #131110;
  --bg-panel:   #1C1812;
  --copper:     #B87333;
  --copper-br:  #E29451;
  --copper-dim: #70461F;
  --text-pri:   #F7F3ED;
  --text-sec:   #A8A39B;
  --text-mut:   #605C55;
  --divider:    #2F2820;
  --green-live: #4FD578;
  --red-warn:   #F26B6B;
  --yellow:     #F5B14D;

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Roboto Mono", "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-pri);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Slide stage and scaling === */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  background: var(--bg-deep);
  overflow: hidden;
  transform-origin: center center;
  display: none;
}

/* Defensive fallback: if JS doesn't run, at least show slide 1 */
.slide:first-of-type { display: block; }
.slide.active { display: block; }

/* When JS HAS marked any slide active, hide non-active first-of-type too */
.stage:has(.slide.active) .slide:not(.active) { display: none; }

/* ============================================================
 * ANIMATIONS — investor-grade, subtle, premium
 * Tasteful only. No bounce, no flash, no jitter.
 * ============================================================ */
@keyframes voraFadeUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes voraFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes voraScaleIn {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes voraGlowBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 1.15; transform: scale(1.04); }
}
@keyframes voraCopperShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes voraSlideTransition {
  0%   { opacity: 0; transform: translateY(12px) scale(0.998); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes voraUnderlineDraw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes voraLogoReveal {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.04) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes voraDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,213,120,0.6); }
  50%      { opacity: 1; box-shadow: 0 0 0 8px rgba(79,213,120,0); }
}

/* ============================================================
 * SLIDE-TYPE-SPECIFIC ENTRANCES — different feel per slide
 * The JS sets data-anim="<style>" on the active slide based on
 * either an explicit slide id mapping or a layout heuristic.
 * Styles: hero · fade-up · split · grid-pop · timeline · zoom-in
 * ============================================================ */

/* Top bar + section pill always fade in */
.slide.active > .top-bar,
.slide.active > .section-pill,
.slide.active > .footer,
.slide.active > .sources {
  animation: voraFadeIn 0.6s ease-out both;
  animation-delay: 0s;
}
.slide.active > .section-pill { animation-delay: 0.10s; }

/* DEFAULT: classic stagger fade-up (used when no data-anim is set) */
.slide.active > [style*="position:absolute"] > *,
.slide.active > [style*="position: absolute"] > * {
  animation: voraFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.slide.active > [style*="position:absolute"] > *:nth-child(1) { animation-delay: 0.15s; }
.slide.active > [style*="position:absolute"] > *:nth-child(2) { animation-delay: 0.27s; }
.slide.active > [style*="position:absolute"] > *:nth-child(3) { animation-delay: 0.39s; }
.slide.active > [style*="position:absolute"] > *:nth-child(4) { animation-delay: 0.51s; }
.slide.active > [style*="position:absolute"] > *:nth-child(5) { animation-delay: 0.63s; }
.slide.active > [style*="position:absolute"] > *:nth-child(6) { animation-delay: 0.75s; }
.slide.active > [style*="position:absolute"] > *:nth-child(7) { animation-delay: 0.87s; }

/* ====== STYLE 1 · HERO — cover slide drama ====== */
@keyframes voraHeroRise {
  0%   { opacity: 0; transform: translateY(40px) scale(0.94); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.slide.active[data-anim="hero"] .h-hero {
  animation: voraHeroRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}
.slide.active[data-anim="hero"] .h-hero span {
  display: inline-block;
  animation: voraFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.85s;
}

/* ====== STYLE 2 · SPLIT — left-right pair (origin, moats) ====== */
@keyframes voraSlideFromLeft {
  0%   { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes voraSlideFromRight {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide.active[data-anim="split"] .row > *:nth-child(1) {
  animation: voraSlideFromLeft 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.35s !important;
}
.slide.active[data-anim="split"] .row > *:nth-child(2) {
  animation: voraSlideFromRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.35s !important;
}
.slide.active[data-anim="split"] .row > *:nth-child(3) {
  animation: voraFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.55s !important;
}

/* ====== STYLE 3 · GRID-POP — cards pop in with scale ====== */
@keyframes voraPopIn {
  0%   { opacity: 0; transform: scale(0.82) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > * {
  animation: voraPopIn 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(1) { animation-delay: 0.30s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(2) { animation-delay: 0.38s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(3) { animation-delay: 0.46s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(4) { animation-delay: 0.54s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(5) { animation-delay: 0.62s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(6) { animation-delay: 0.70s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(7) { animation-delay: 0.78s; }
.slide.active[data-anim="grid-pop"] div[style*="grid-template-columns"] > *:nth-child(8) { animation-delay: 0.86s; }

/* ====== STYLE 4 · TIMELINE — catalysts slide in from left like a feed ====== */
@keyframes voraTimelineSlide {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide.active[data-anim="timeline"] .catalyst-row {
  animation: voraTimelineSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.slide.active[data-anim="timeline"] .catalyst-row:nth-child(1) { animation-delay: 0.30s !important; }
.slide.active[data-anim="timeline"] .catalyst-row:nth-child(2) { animation-delay: 0.45s !important; }
.slide.active[data-anim="timeline"] .catalyst-row:nth-child(3) { animation-delay: 0.60s !important; }
.slide.active[data-anim="timeline"] .catalyst-row:nth-child(4) { animation-delay: 0.75s !important; }

/* ====== STYLE 5 · ZOOM — market sizing slide, numbers grow into view ====== */
@keyframes voraZoomIn {
  0%   { opacity: 0; transform: scale(0.7); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.slide.active[data-anim="zoom"] .row > .card-pad-lg,
.slide.active[data-anim="zoom"] .row > div.card {
  animation: voraZoomIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.slide.active[data-anim="zoom"] .row > *:nth-child(1) { animation-delay: 0.30s !important; }
.slide.active[data-anim="zoom"] .row > *:nth-child(2) { animation-delay: 0.45s !important; }
.slide.active[data-anim="zoom"] .row > *:nth-child(3) { animation-delay: 0.60s !important; }
.slide.active[data-anim="zoom"] .row > *:nth-child(4) { animation-delay: 0.75s !important; }

/* ====== STYLE 6 · DEMO — slide 4 mock UI "boots up" ====== */
@keyframes voraDemoLine {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide.active[data-anim="demo"] .url-input {
  animation: voraFadeUp 0.5s ease-out both;
  animation-delay: 0.55s;
}
.slide.active[data-anim="demo"] .stage-row {
  animation: voraDemoLine 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.slide.active[data-anim="demo"] .stage-row:nth-child(1) { animation-delay: 0.85s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(2) { animation-delay: 0.95s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(3) { animation-delay: 1.05s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(4) { animation-delay: 1.15s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(5) { animation-delay: 1.25s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(6) { animation-delay: 1.35s; }
.slide.active[data-anim="demo"] .stage-row:nth-child(7) { animation-delay: 1.45s; }

/* Cards inside .row get the default cascade ONLY when no data-anim variant claims them */
.slide.active:not([data-anim]) .row > .card,
.slide.active:not([data-anim]) div[style*="grid-template-columns"] > * {
  animation: voraFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.slide.active:not([data-anim]) .row > *:nth-child(1),
.slide.active:not([data-anim]) div[style*="grid-template-columns"] > *:nth-child(1) { animation-delay: 0.40s; }
.slide.active:not([data-anim]) .row > *:nth-child(2),
.slide.active:not([data-anim]) div[style*="grid-template-columns"] > *:nth-child(2) { animation-delay: 0.50s; }
.slide.active:not([data-anim]) .row > *:nth-child(3),
.slide.active:not([data-anim]) div[style*="grid-template-columns"] > *:nth-child(3) { animation-delay: 0.60s; }
.slide.active:not([data-anim]) .row > *:nth-child(4),
.slide.active:not([data-anim]) div[style*="grid-template-columns"] > *:nth-child(4) { animation-delay: 0.70s; }

/* Ambient: copper glows breathe */
.slide.active .glow-tr,
.slide.active .glow-bl {
  animation: voraGlowBreathe 7s ease-in-out infinite, voraFadeIn 1.2s ease-out both;
}
.slide.active .glow-bl { animation-delay: 0s, 0.2s; animation-duration: 9s, 1.2s; }

/* Cover slide hero — special entrance */
.slide.active .h-hero {
  animation: voraFadeUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}

/* Copper text — accent underline shimmer on hover */
.copper-text {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(90deg, transparent, rgba(226,148,81,0.0) 50%, transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  transition: background-image 0.4s;
}

/* Stat numbers — scale-pop in */
.slide.active .stat .big {
  animation: voraScaleIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.55s;
}

/* Logo on cover — premium reveal */
.slide#s1.active .top-bar .logo,
.slide#s1.active img.logo {
  animation: voraLogoReveal 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.1s;
}

/* Card hover — subtle lift */
.card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(184,115,51,0.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(184,115,51,0.08);
}
.card.highlight:hover {
  border-color: rgba(226,148,81,0.7);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 36px rgba(184,115,51,0.15);
}

/* Live dot pulse on slide 4 mock */
.dot.live {
  animation: voraDotPulse 2.2s ease-in-out infinite;
}

/* Section pill — slow gradient shimmer */
.section-pill {
  background: linear-gradient(90deg,
    rgba(184,115,51,0.04) 0%,
    rgba(184,115,51,0.10) 50%,
    rgba(184,115,51,0.04) 100%);
  background-size: 200% 100%;
  animation: voraCopperShimmer 6s linear infinite;
}

/* URL input on slide 4 — gentle copper glow */
.url-input {
  position: relative;
  box-shadow: 0 0 0 0 rgba(184,115,51,0);
  animation: voraInputGlow 3.5s ease-in-out infinite;
}
@keyframes voraInputGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,115,51,0); border-color: rgba(184,115,51,0.4); }
  50%      { box-shadow: 0 0 22px 0 rgba(184,115,51,0.18); border-color: rgba(226,148,81,0.7); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Atmosphere — copper glows */
.glow-tr {
  position: absolute; top: -500px; right: -300px;
  width: 1400px; height: 1400px;
  background: radial-gradient(circle, rgba(184,115,51,0.18) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.glow-bl {
  position: absolute; bottom: -300px; left: -200px;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(112,70,31,0.22) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Vertical accent line */
.accent-v {
  position: absolute;
  left: 48px;
  width: 2px;
  background: var(--copper);
  opacity: 0.4;
}

/* === Top bar / header === */
.top-bar {
  position: absolute;
  top: 64px; left: 96px;
  display: flex; align-items: center; gap: 14px;
}
.top-bar .logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(184,115,51,0.18);
}
.top-bar .wordmark {
  font-weight: 600; font-size: 20px; letter-spacing: -0.02em;
  color: var(--text-pri);
}

.section-pill {
  position: absolute;
  top: 72px; right: 96px;
  border: 1px solid var(--copper-dim);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--copper-br);
}

/* === Footer === */
.footer {
  position: absolute;
  bottom: 40px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-mut);
}
.footer.left { left: 96px; }
.footer.right { right: 96px; }

/* === Typography helpers === */
.eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 14px; letter-spacing: 0.14em;
  color: var(--copper-br);
}
.eyebrow-box {
  display: inline-block;
  border: 1px solid rgba(184,115,51,0.5);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.10em;
  color: var(--copper-br);
}
.h-hero  { font-weight: 700; font-size: 92px; line-height: 1.02; letter-spacing: -0.035em; }
.h-1     { font-weight: 700; font-size: 64px; line-height: 1.08; letter-spacing: -0.03em; }
.h-2     { font-weight: 700; font-size: 52px; line-height: 1.1;  letter-spacing: -0.03em; }
.h-3     { font-weight: 600; font-size: 28px; line-height: 1.25; letter-spacing: -0.015em; }
.body-lg { font-weight: 300; font-size: 24px; line-height: 1.45; color: var(--text-sec); letter-spacing: -0.01em; }
.body    { font-weight: 400; font-size: 16px; line-height: 1.5;  color: var(--text-sec); }
.body-sm { font-weight: 400; font-size: 14px; line-height: 1.5;  color: var(--text-sec); }
.mono-sm { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.10em; color: var(--text-mut); }
.copper-text { color: var(--copper-br); }
.primary { color: var(--text-pri); }

/* === Stat strip === */
.stat-strip { display: flex; gap: 56px; }
.stat .big {
  font-weight: 700; font-size: 40px; letter-spacing: -0.03em;
  color: var(--copper-br); line-height: 1;
}
.stat .label {
  margin-top: 6px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.10em;
  color: var(--text-sec);
}

/* === Cards === */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 24px 28px;
}
.card.outline {
  background: rgba(28,24,18,0.5);
}
.card.highlight {
  border: 2px solid rgba(184,115,51,0.6);
}
.card-pad-lg { padding: 36px; border-radius: 16px; }

/* === Catalyst rows (Why Now) === */
.catalyst-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 40px;
  background: rgba(28,24,18,0.5);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 20px 28px;
}
.catalyst-date {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 18px; letter-spacing: 0.04em;
  color: var(--copper-br);
}
.catalyst-tag {
  margin-top: 6px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--text-mut);
}
.catalyst-title { font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: var(--text-pri); margin-bottom: 8px; }
.catalyst-body  { font-size: 15px; line-height: 1.5; color: var(--text-sec); }

/* === Window-styled product UI mock === */
.product-mock {
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 80px rgba(184,115,51,0.15);
}
.mock-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--divider);
}
.mock-dots { display: flex; gap: 8px; }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-dot.red { background: #F26B6B; }
.mock-dot.yellow { background: #F5B14D; }
.mock-dot.green { background: #74D578; }
.mock-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-mut); }
.mock-body { padding: 24px 28px; }

.url-input {
  display: flex; align-items: center;
  padding: 14px 18px;
  background: var(--bg-deep);
  border: 1px solid rgba(184,115,51,0.4);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 16px;
  color: var(--text-pri);
}

.stage-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.stage-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-row .label { flex: 1; font-size: 15px; color: var(--text-pri); }
.stage-row .state {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.08em;
}
.dot.live { background: var(--green-live); }
.dot.busy { background: var(--copper-br); }
.dot.queue { background: var(--text-mut); }

/* === Competition matrix === */
.matrix {
  position: relative;
  width: 1400px; height: 700px;
  background: rgba(19,17,16,0.5);
  border: 1px solid var(--divider);
  border-radius: 16px;
  margin-top: 24px;
}
.matrix-axis-x, .matrix-axis-y {
  position: absolute;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.10em;
  color: var(--text-sec);
}
.matrix-dot {
  position: absolute;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  font-weight: 500; font-size: 14px;
  color: var(--text-sec);
}
.matrix-dot.us { background: var(--copper); color: var(--bg-deep); border-color: var(--copper-br); font-weight: 700; }

/* === Misc utility === */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-56 { gap: 56px; }
.mt-12  { margin-top: 12px; }
.mt-24  { margin-top: 24px; }
.mt-32  { margin-top: 32px; }
.mt-40  { margin-top: 40px; }
.mt-56  { margin-top: 56px; }

.content {
  position: absolute;
  left: 96px;
  right: 96px;
}
.content.center-v { top: 50%; transform: translateY(-50%); }
.content-pad { padding-top: 160px; }

/* === Slide footer sources === */
.sources {
  position: absolute;
  bottom: 78px; left: 96px; right: 96px;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-mut);
}

/* === Navigation hint === */
.nav-hint {
  position: fixed;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--text-mut);
  opacity: 0.5;
  z-index: 100;
  pointer-events: none;
}

/* === On-screen nav buttons (left / right + slide counter) === */
.nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(184,115,51,0.35);
  background: rgba(19,17,16,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--copper-br);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.85;
  user-select: none;
}
.nav-btn:hover {
  opacity: 1;
  background: rgba(28,24,18,0.85);
  border-color: rgba(226,148,81,0.7);
  box-shadow: 0 0 24px rgba(184,115,51,0.25), 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-50%) scale(1.06);
  color: var(--copper-br);
}
.nav-btn:active { transform: translateY(-50%) scale(0.96); }
.nav-btn.left  { left: 24px; }
.nav-btn.right { right: 24px; }
.nav-btn[disabled] { opacity: 0.25; pointer-events: none; }

.nav-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(184,115,51,0.30);
  background: rgba(19,17,16,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-sec);
  user-select: none;
}
.nav-counter .nc-num { color: var(--copper-br); font-weight: 600; }
.nav-counter .nc-bar {
  width: 120px; height: 3px;
  background: rgba(184,115,51,0.18);
  border-radius: 2px;
  overflow: hidden;
}
.nav-counter .nc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-br) 100%);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hide on print */
@media print {
  .nav-btn, .nav-counter { display: none !important; }
}

/* Mobile: shrink buttons, hide counter bar */
@media (max-width: 768px) {
  .nav-btn {
    width: 44px; height: 44px;
    font-size: 18px;
  }
  .nav-btn.left  { left: 10px; }
  .nav-btn.right { right: 10px; }
  .nav-counter {
    bottom: 14px;
    padding: 6px 14px;
    font-size: 10px;
    gap: 10px;
  }
  .nav-counter .nc-bar { width: 80px; height: 2px; }
}

/* === Print: each slide on its own landscape page ===
 * Page size = 1920×1080 (exact slide ratio at full resolution).
 * Chrome treats 1in = 96px → 1920px = 20in wide, 1080px = 11.25in tall.
 * That's a custom landscape size Chrome supports cleanly.
 */
@media print {
  @page { size: 1920px 1080px; margin: 0; }

  html, body {
    overflow: visible !important;
    background: var(--bg-deep) !important;
    width: 1920px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body { display: block !important; }

  .stage {
    transform: none !important;
    width: 1920px !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    display: block !important;
  }

  .slide {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    width: 1920px !important;
    height: 1080px !important;
    max-height: 1080px !important;
    min-height: 1080px !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    break-after: page !important;
    break-inside: avoid !important;
    overflow: hidden !important;
    contain: strict !important;
    background: var(--bg-deep) !important;
  }
  /* Last slide: don't force a trailing empty page */
  .slide:last-of-type {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  .nav-hint { display: none !important; }

  /* Ensure all backgrounds/colors render in print */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* === Founder card === */
.founder {
  display: flex; gap: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 24px;
}
.founder-photo {
  width: 160px; height: 160px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--divider);
}
.founder-name { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; }
.founder-role { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.10em; color: var(--copper-br); margin-top: 6px; }
.founder-bio  { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--text-sec); }

/* ============================================================
 * MOBILE — phones and small tablets (max-width: 768px)
 * Strategy: kill the 1920x1080 fixed canvas, let slides flow
 * naturally at viewport width with stacked single-column content.
 * ============================================================ */
@media (max-width: 768px) {
  body { overflow-y: auto; align-items: stretch; }

  .stage {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .slide {
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw;
    height: auto !important;
    min-height: 100vh;
    padding: 64px 20px 96px;
    overflow: visible;
  }

  /* Most slides position content with inline `position:absolute` — override */
  .slide > div[style*="position:absolute"],
  .slide > div[style*="position: absolute"] {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
  }

  /* Decorative blur glows — keep but soften so they don't dominate */
  .glow-tr {
    top: -200px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(184,115,51,0.20) 0%, transparent 65%);
  }
  .glow-bl {
    bottom: -200px; left: -100px;
    width: 400px; height: 400px;
  }
  .accent-v { display: none; }

  /* Top bar shrinks */
  .top-bar {
    position: absolute !important;
    top: 18px !important; left: 20px !important;
    gap: 10px !important;
  }
  .top-bar .logo,
  .top-bar img.logo { width: 28px !important; height: 28px !important; }
  .top-bar .wordmark { font-size: 16px !important; }

  /* Section pill: shrink + reposition */
  .section-pill {
    top: 22px !important;
    right: 20px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
  }

  /* Cover-specific: larger logo on cover top */
  .slide#s1 > div:nth-child(4) {
    /* the cover wordmark group has inline styles — handled by general top-bar mobile */
  }

  /* Footer + page indicator */
  .footer {
    bottom: 16px;
    font-size: 9px;
    letter-spacing: 0.05em;
  }
  .footer.left { left: 20px; }
  .footer.right { right: 20px; }
  .sources {
    position: relative !important;
    bottom: auto;
    left: 0;
    right: 0;
    margin-top: 24px;
    font-size: 9px;
  }

  /* Typography scaling */
  .h-hero  { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; }
  .h-1     { font-size: 30px; line-height: 1.1;  letter-spacing: -0.025em; }
  .h-2     { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
  .h-3     { font-size: 19px; line-height: 1.25; }
  .body-lg { font-size: 16px; line-height: 1.45; }
  .body    { font-size: 14px; line-height: 1.55; }
  .body-sm { font-size: 13px; line-height: 1.55; }
  .mono-sm { font-size: 10px; letter-spacing: 0.08em; }
  .eyebrow { font-size: 11px; letter-spacing: 0.10em; }
  .eyebrow-box { font-size: 10px; padding: 6px 10px; letter-spacing: 0.06em; }

  /* Stack all rows vertically on mobile */
  .row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  /* Force common row gap overrides to behave */
  .row.gap-12, .row.gap-16, .row.gap-20, .row.gap-24, .row.gap-32, .row.gap-40, .row.gap-56 {
    gap: 16px !important;
  }

  /* Stat strip: wrap into 2-col grid on phone */
  .stat-strip {
    flex-wrap: wrap;
    gap: 14px 24px;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
  .stat .big { font-size: 24px; }
  .stat .label { font-size: 9px; letter-spacing: 0.06em; }

  /* Cards reduce padding */
  .card { padding: 16px 18px; border-radius: 10px; }
  .card-pad-lg { padding: 22px 20px; border-radius: 12px; }

  /* Catalyst rows: stack date over body on mobile (no grid) */
  .catalyst-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 18px;
  }
  .catalyst-date { font-size: 13px; }
  .catalyst-tag { font-size: 9px; }
  .catalyst-title { font-size: 18px; margin-bottom: 6px; }
  .catalyst-body { font-size: 13px; line-height: 1.5; }

  /* Product mock: full width */
  .product-mock { border-radius: 12px; }
  .mock-header { padding: 10px 14px; }
  .mock-title { font-size: 10px; }
  .mock-body { padding: 16px 16px; }
  .url-input { padding: 10px 12px; font-size: 13px; }
  .stage-row { gap: 10px; padding: 5px 0; }
  .stage-row .label { font-size: 13px; }
  .stage-row .state { font-size: 9px; }

  /* Tables: shrink text, keep structure */
  .slide table {
    font-size: 13px;
  }
  .slide table th,
  .slide table td {
    padding: 8px 4px !important;
    font-size: 12px !important;
  }
  .slide table thead th { font-size: 9px !important; letter-spacing: 0.05em !important; }

  /* Founder card stacks photo above bio on mobile */
  .founder { flex-direction: column; padding: 18px; gap: 14px; }
  .founder-photo { width: 100px; height: 100px; border-radius: 10px; }
  .founder-name { font-size: 22px; }
  .founder-role { font-size: 10px; letter-spacing: 0.06em; }
  .founder-bio { font-size: 13px; }

  /* Competition matrix: simplify on mobile — replace 2D matrix with a stacked list */
  .slide#s11 .row > div:first-child {
    height: auto !important;
    min-height: 340px;
    padding: 16px !important;
  }

  /* Nav hint */
  .nav-hint {
    bottom: 6px;
    font-size: 9px;
    letter-spacing: 0.05em;
    padding: 0 8px;
    text-align: center;
    width: 100%;
    transform: none;
    left: 0;
  }

  /* Mobile slide transitions: each slide fills the viewport, scrollable */
  .slide.active {
    display: block !important;
  }

  /* Add safe area for notched phones */
  @supports (padding-top: env(safe-area-inset-top)) {
    .slide {
      padding-top: calc(64px + env(safe-area-inset-top));
      padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
  }
}

/* ============================================================
 * SMALL PHONES (max-width: 480px) — tighter still
 * ============================================================ */
@media (max-width: 480px) {
  .slide { padding: 56px 16px 80px; }
  .h-hero  { font-size: 34px; }
  .h-1     { font-size: 26px; }
  .h-2     { font-size: 22px; }
  .h-3     { font-size: 17px; }
  .body-lg { font-size: 15px; }
  .body    { font-size: 13px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
  .stat .big { font-size: 20px; }
  .stat .label { font-size: 8px; }
  .card { padding: 14px 14px; }
  .card-pad-lg { padding: 18px 16px; }
  .catalyst-row { padding: 14px 14px; }
  .top-bar { top: 14px !important; left: 16px !important; }
  .section-pill { top: 18px !important; right: 16px !important; }
  .footer { bottom: 12px; }
  .footer.left { left: 16px; }
  .footer.right { right: 16px; }
}