@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&family=Instrument+Sans:wdth,wght@75..100,400..800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --ink: #0a1428;
  --ink-2: #0e1c3a;
  --surface: #0e1c3a;
  --surface-2: #12264a;
  --line: #2a3d5e;
  --line-soft: rgba(6, 92, 245, 0.28);
  --paper: #f4f7fa;
  --paper-soft: #c3cede;
  --muted: #a7b4c8;
  --sage: #ff5b0a;
  --mint: #ff8a3d;
  --green: #16a34a;
  --orange: #ff5b0a;
  --orange-soft: #ff8a3d;
  --blue: #4d8dff;
  --blue-deep: #06345d;
  --blue-soft: #12264a;
  --violet: #8881f8;
  --yellow: #ffee48;
  --font-display: "Instrument Sans", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", "Cascadia Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p,
blockquote {
  margin: 0;
}

em {
  color: var(--sage);
  font-style: normal;
}

.deck-shell {
  position: fixed;
  inset: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 88%, rgba(6, 92, 245, 0.06), transparent 31%),
    radial-gradient(circle at 88% 4%, rgba(255, 91, 10, 0.05), transparent 29%),
    var(--ink);
}

/* Vídeo de background "scrub por slide" — fica entre o fundo do deck e os
   componentes dos slides. Com opacidade baixa, mescla com o fundo claro e
   deixa os componentes (cards, texto, UI) legíveis por cima. */
.bg-scrub {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.7;
  filter: saturate(1.15) contrast(1.12) brightness(1.08);
}
/* O deck de conteúdo fica acima do vídeo */
.deck {
  z-index: 2;
}

/* ===== Glassmorphism dos componentes (slides 2–9) =====
   Os cards/containers ficam semi-transparentes com blur de fundo para
   deixar o vídeo de background transparecer sutilmente por trás. */
.timeline-card,
.metaphor-card,
.sf-node,
.demo-frame,
.demo-copy,
.coverflow-card,
.plan-card,
.eco-stat,
.team-card,
.gtm-engine,
.roadmap-engine {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  background-color: rgba(14, 28, 58, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
/* Cards com fundo próprio definido por regra específica mantêm o blur e
   ganham translucidez apenas onde faz sentido (mantém a identidade). */
.metaphor-card {
  background-color: rgba(14, 28, 58, 0.5);
}
.sf-node {
  background-color: rgba(14, 28, 58, 0.62);
}
.coverflow-card {
  background-color: rgba(14, 28, 58, 0.55);
}
.plan-card {
  background-color: rgba(14, 28, 58, 0.6);
}
.team-card {
  background-color: rgba(14, 28, 58, 0.5);
}


.deck-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(6, 92, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 92, 245, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.deck {
  position: absolute;
  inset: 0;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 0;
  height: 3px;
  background: var(--sage);
  box-shadow: 0 0 20px rgba(119, 209, 190, 0.45);
  transition: width 0.45s var(--ease-out);
}

.brand-rail {
  position: fixed;
  top: clamp(26px, 3.3vh, 42px);
  left: clamp(36px, 4.8vw, 92px);
  right: clamp(36px, 4.8vw, 92px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.brand-rail img {
  width: clamp(92px, 6.2vw, 119px);
  height: auto;
}

.brand-rail span,
.deck-meta,
.eyebrow,
.terminal-label,
.qr-microcopy,
.cover-signature {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.brand-rail span {
  color: var(--muted);
  font-size: clamp(9px, 0.62vw, 12px);
}

.deck-meta {
  position: fixed;
  right: clamp(36px, 4.8vw, 92px);
  bottom: clamp(28px, 4vh, 48px);
  left: clamp(36px, 4.8vw, 92px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(29, 41, 57, 0.55);
  font-size: clamp(8px, 0.56vw, 11px);
  pointer-events: none;
}

.deck-controls {
  position: fixed;
  right: clamp(30px, 3vw, 58px);
  bottom: clamp(52px, 7vh, 78px);
  z-index: 60;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(188, 211, 205, 0.16);
  border-radius: 999px;
  background: rgba(9, 10, 9, 0.88);
  opacity: 0.22;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.deck-controls:hover,
.deck-controls:focus-within {
  opacity: 1;
  transform: translateY(0);
}

.deck-controls button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sage);
  font-weight: 800;
  cursor: pointer;
}

.deck-controls button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.deck-controls span {
  min-width: 64px;
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: clamp(76px, 8vh, 98px) clamp(62px, 6.2vw, 118px) clamp(66px, 7vh, 88px);
  opacity: 0;
  transform: scale(0.992) translateY(10px);
  pointer-events: none;
  transition:
    opacity 1.0s ease,
    transform 1.0s var(--ease-out);
}

.slide::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(188, 211, 205, 0.025);
}

.slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.eyebrow {
  display: block;
  margin-bottom: clamp(12px, 1.4vh, 18px);
  color: var(--sage);
  font-size: clamp(10px, 0.72vw, 14px);
}

.section-heading {
  position: relative;
  z-index: 3;
  margin: 0 auto clamp(30px, 4.2vh, 52px);
  text-align: center;
}

.section-heading.compact {
  margin-bottom: clamp(20px, 2.7vh, 34px);
}

.section-heading h2,
.insight-heading h2,
.solution-heading h2,
.team-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.35vw, 82px);
  font-stretch: condensed;
  font-weight: 670;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

/* Cover */

.slide-cover {
  display: grid;
  padding: 0;
  place-items: center;
  background: var(--ink);
}

.slide-cover::after {
  border: 0;
  background: none;
}

.cover-wave,
.cover-hex,
.cover-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cover-wave {
  z-index: 0;
  opacity: 0.86;
}

.cover-hex {
  z-index: 1;
  opacity: 0.68;
}

.cover-vignette {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 17%, rgba(10, 20, 40, 0.2) 48%, rgba(10, 20, 40, 0.8) 100%),
    linear-gradient(to bottom, rgba(10, 20, 40, 0.2), transparent 32%, rgba(10, 20, 40, 0.7));
}

.cover-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-1.2vh);
}

.cover-prompt {
  max-width: 860px;
  margin-bottom: clamp(24px, 3.2vh, 38px);
  color: var(--paper);
  font-size: clamp(28px, 3.1vw, 60px);
  font-stretch: condensed;
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
}

.slide-cover:not(.is-active) .cover-prompt {
  opacity: 0;
  transform: translateY(22px);
}

.slide-cover.is-active .cover-prompt {
  animation: coverPromptIn 1s var(--ease-out) both 0.2s;
}

.qr-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-frame {
  position: relative;
  z-index: 2;
  width: clamp(280px, 27vh, 412px);
  aspect-ratio: 1;
  padding: clamp(15px, 1.5vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: clamp(18px, 1.6vw, 28px);
  background: #fff;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.46),
    0 0 0 9px rgba(255, 255, 255, 0.025);
  transform: translateZ(0);
}

.slide-cover.is-active .qr-frame {
  animation: qrArrival 1.15s var(--ease-out) both 0.28s;
}

#qr-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  image-rendering: pixelated;
}

.qr-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 23%;
  aspect-ratio: 1;
  place-items: center;
  border: 7px solid #fff;
  border-radius: 21%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.adapta-gem {
  position: relative;
  width: 52%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: gemTurn 8s var(--ease-smooth) infinite;
}

.gem-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  backface-visibility: hidden;
}

.gem-front {
  background: linear-gradient(145deg, #f4f7fb, #ff5b0a 72%);
  transform: translateZ(13px);
}

.gem-left {
  background: linear-gradient(145deg, #ff8a3d, #7a2a00);
  transform: rotateY(120deg) translateZ(13px);
}

.gem-right {
  background: linear-gradient(145deg, #065cf5, #8881f8);
  transform: rotateY(240deg) translateZ(13px);
}

.adapta-gem span {
  position: absolute;
  top: 49%;
  left: 20%;
  z-index: 3;
  width: 60%;
  height: 7px;
  border-radius: 4px;
  background: var(--ink);
  box-shadow: 0 -12px 0 -2px var(--ink), 0 12px 0 2px var(--ink);
  transform: translateZ(18px);
}

.qr-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 135%;
  aspect-ratio: 1;
  border: 1px solid rgba(119, 209, 190, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 46px rgba(119, 209, 190, 0.018),
    0 0 0 92px rgba(119, 209, 190, 0.012);
  transform: translate(-50%, -50%);
  animation: auraBreathe 6s ease-in-out infinite;
}

.qr-microcopy {
  margin-top: clamp(14px, 1.8vh, 22px);
  color: var(--muted);
  font-size: clamp(8px, 0.56vw, 11px);
}

.cover-signature {
  position: absolute;
  bottom: clamp(34px, 4.6vh, 58px);
  left: 50%;
  z-index: 5;
  color: rgba(71, 84, 103, 0.72);
  font-size: clamp(8px, 0.56vw, 11px);
  transform: translateX(-50%);
}

/* Problem */

.slide-problem {
  background:
    radial-gradient(circle at 73% 47%, rgba(6, 92, 245, 0.10), transparent 42%),
    rgba(10, 20, 40, 0.35);
}

.globe-scene {
  position: absolute;
  top: 50%;
  right: -8vw;
  width: min(70vw, 1080px);
  aspect-ratio: 1;
  opacity: 0.8;
  transform: translateY(-50%);
}

.globe-halo {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgba(119, 209, 190, 0.08) 68%, transparent 74%);
  filter: blur(18px);
  animation: globeGlow 6s ease-in-out infinite;
}

.globe {
  position: absolute;
  inset: 15%;
  overflow: hidden;
  border: 1px solid rgba(119, 209, 190, 0.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(169, 230, 214, 0.12), transparent 29%),
    radial-gradient(circle at 62% 74%, rgba(49, 134, 255, 0.13), transparent 34%),
    rgba(12, 39, 37, 0.24);
  box-shadow:
    inset -42px -28px 80px rgba(0, 0, 0, 0.6),
    inset 28px 12px 54px rgba(119, 209, 190, 0.05),
    0 0 90px rgba(74, 183, 163, 0.12);
  animation: globeFloat 8s ease-in-out infinite;
}

.globe::before,
.globe::after {
  position: absolute;
  content: "";
  background: rgba(119, 209, 190, 0.15);
  filter: blur(2px);
  clip-path: polygon(0 40%, 14% 17%, 37% 0, 48% 17%, 64% 18%, 74% 38%, 100% 47%, 83% 64%, 61% 57%, 46% 79%, 23% 69%, 7% 85%);
}

.globe::before {
  inset: 14% 33% 44% 7%;
  animation: continentDrift 18s linear infinite;
}

.globe::after {
  inset: 47% 6% 13% 45%;
  opacity: 0.7;
  transform: rotate(17deg);
  animation: continentDrift 22s linear infinite reverse;
}

.latitude,
.longitude {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(119, 209, 190, 0.17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.latitude {
  width: 94%;
  height: 28%;
}

.lat-a { top: 31%; }
.lat-b { top: 50%; }
.lat-c { top: 69%; }

.longitude {
  width: 30%;
  height: 94%;
}

.lon-a { transform: translate(-50%, -50%) rotate(0deg); }
.lon-b { transform: translate(-50%, -50%) rotate(60deg); }
.lon-c { transform: translate(-50%, -50%) rotate(-60deg); }

.globe-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(169, 230, 214, 0.08), 0 0 18px var(--sage);
  animation: mapDot 2.6s ease-in-out infinite;
}

.dot-a { top: 27%; left: 33%; }
.dot-b { top: 51%; left: 68%; animation-delay: -0.7s; }
.dot-c { top: 69%; left: 40%; animation-delay: -1.4s; }
.dot-d { top: 43%; left: 22%; animation-delay: -2.1s; }

.globe-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(119, 209, 190, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(24deg);
}

.globe-orbit::after {
  position: absolute;
  top: 7%;
  left: 24%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px rgba(255, 42, 0, 0.7);
  content: "";
}

.orbit-a {
  width: 88%;
  height: 57%;
  animation: orbitSpin 18s linear infinite;
}

.orbit-b {
  width: 70%;
  height: 95%;
  animation: orbitSpin 23s linear infinite reverse;
}

.problem-layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(370px, 0.66fr);
  align-items: center;
  height: 100%;
  gap: clamp(40px, 5vw, 100px);
}

.number-zone {
  position: relative;
}

.number-impact {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  margin: clamp(12px, 1.6vh, 20px) 0 18px;
  gap: clamp(12px, 1vw, 20px);
}

.count-number {
  position: relative;
  z-index: 3;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(150px, 18vw, 330px);
  font-stretch: condensed;
  font-weight: 720;
  letter-spacing: -0.09em;
  line-height: 0.72;
  text-shadow: 0 18px 80px rgba(119, 209, 190, 0.12);
  transform-origin: 50% 65%;
}

.count-number.is-counting {
  animation: numberZoom 1.75s var(--ease-out) both;
}

.count-unit {
  position: relative;
  z-index: 3;
  margin-bottom: 1.1vh;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.2vw, 24px);
  letter-spacing: -0.04em;
}

.number-caption {
  max-width: 620px;
  color: var(--paper-soft);
  font-size: clamp(17px, 1.4vw, 27px);
}

.number-zone > small {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.62vw, 12px);
}

.impact-ripples {
  position: absolute;
  top: 50%;
  left: 42%;
  z-index: 1;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.impact-ripples i {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(119, 209, 190, 0.54);
  border-radius: 50%;
  opacity: 0;
}

.number-impact.has-impact .impact-ripples i {
  animation: impactRipple 2.5s var(--ease-out) both;
}

.number-impact.has-impact .impact-ripples i:nth-child(2) { animation-delay: 0.13s; }
.number-impact.has-impact .impact-ripples i:nth-child(3) { animation-delay: 0.26s; }
.number-impact.has-impact .impact-ripples i:nth-child(4) { animation-delay: 0.39s; }

.typed-proof {
  position: relative;
  min-height: 400px;
  padding: clamp(28px, 2.5vw, 48px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(119, 209, 190, 0.04), transparent 58%),
    rgba(17, 21, 20, 0.82);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.28);
}

.typed-proof::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--sage);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
}

.slide-problem.is-active .typed-proof::before {
  animation: proofRail 0.8s var(--ease-out) forwards 1.8s;
}

.terminal-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sage);
  font-size: clamp(9px, 0.62vw, 12px);
}

.terminal-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255, 42, 0, 0.65);
}

.typed-proof h2 {
  min-height: 2.4em;
  margin: clamp(28px, 3.5vh, 42px) 0 22px;
  color: var(--paper);
  font-size: clamp(34px, 3.2vw, 62px);
  font-weight: 630;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.typed-proof p {
  min-height: 3em;
  color: var(--paper-soft);
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.4;
}

.type-target::after {
  display: inline-block;
  width: 0.08em;
  height: 0.92em;
  margin-left: 0.08em;
  background: var(--sage);
  content: "";
  vertical-align: -0.06em;
  animation: cursorBlink 0.7s steps(1) infinite;
}

.type-target.is-done::after {
  display: none;
}

.typed-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: clamp(26px, 3.4vh, 42px);
}

.type-chip {
  min-width: 92px;
  padding: 10px 14px;
  border: 1px solid rgba(119, 209, 190, 0.22);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(9px);
}

.type-chip.is-typed {
  animation: chipTyped 0.48s var(--ease-out) forwards;
}

/* Insight */

.slide-insight {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 42%, rgba(6, 92, 245, 0.08)),
    rgba(10, 20, 40, 0.35);
}

.insight-heading {
  position: relative;
  z-index: 4;
  margin-bottom: clamp(26px, 3.7vh, 44px);
  text-align: center;
}

.insight-heading h2 {
  font-size: clamp(40px, 4vw, 74px);
}

.insight-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(44px, 5vw, 92px) minmax(0, 1fr);
  align-items: stretch;
  height: min(62vh, 660px);
  gap: clamp(18px, 2vw, 36px);
}

.metaphor-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: clamp(16px, 1.5vw, 26px);
  background: var(--surface);
}

.metaphor-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.symptom-card {
  filter: none;
  background: #e8f1ff;
  border-color: rgba(6, 92, 245, 0.3);
}

.vhs-noise {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.17;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255, 255, 255, 0.15) 3px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px);
  background-size: 100% 4px, 5px 100%;
  animation: vhsGrain 0.17s steps(2) infinite;
}

.vhs-track {
  position: absolute;
  left: -8%;
  z-index: 7;
  width: 116%;
  height: 14%;
  background:
    linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.72), transparent),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.18) 8px 9px);
  filter: blur(1px);
  animation: vhsTrack 4.2s linear infinite;
}

.symptom-visual,
.root-visual {
  position: relative;
  min-height: 0;
}

.symptom-visual {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(6, 92, 245, 0.08), transparent 46%),
    #e8f1ff;
}

.ghost-window {
  position: absolute;
  width: 42%;
  height: 35%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 9px 0 0 rgba(255, 255, 255, 0.022);
}

.ghost-window i {
  display: block;
  height: 7px;
  margin-bottom: 9px;
  background: rgba(255, 255, 255, 0.12);
}

.ghost-window i:nth-child(2) { width: 82%; }
.ghost-window i:nth-child(3) { width: 56%; }

.ghost-a {
  top: 18%;
  left: 13%;
  animation: ghostJitter 2.8s steps(2) infinite;
}

.ghost-b {
  top: 31%;
  left: 41%;
  opacity: 0.62;
  animation: ghostJitter 3.1s steps(2) infinite reverse;
}

.ghost-c {
  top: 48%;
  left: 25%;
  opacity: 0.38;
  animation: ghostJitter 2.4s steps(2) infinite;
}

.signal-lost {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.36);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  animation: signalFlicker 1.8s steps(2) infinite;
}

.metaphor-copy {
  position: relative;
  z-index: 8;
  min-height: 166px;
  padding: clamp(22px, 2.1vw, 34px);
  border-top: 1px solid var(--line-soft);
  background: rgba(14, 28, 58, 0.7);
}

.metaphor-copy span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.62vw, 12px);
  letter-spacing: 0.12em;
}

.metaphor-copy h3 {
  margin: 10px 0 8px;
  font-size: clamp(27px, 2.35vw, 44px);
  font-weight: 640;
  letter-spacing: -0.045em;
}

.metaphor-copy p {
  color: var(--muted);
  font-size: clamp(13px, 1vw, 18px);
}

.root-card {
  border-color: rgba(6, 92, 245, 0.38);
  background: #e8f1ff;
  box-shadow:
    0 0 0 1px rgba(6, 92, 245, 0.05),
    0 0 80px rgba(6, 92, 245, 0.1);
}

.root-glow {
  position: absolute;
  top: -30%;
  right: -15%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(6, 92, 245, 0.14);
  filter: blur(60px);
  animation: rootGlow 5s ease-in-out infinite;
}

.root-visual {
  background:
    radial-gradient(circle at center, rgba(6, 92, 245, 0.1), transparent 44%),
    linear-gradient(135deg, rgba(6, 92, 245, 0.04), transparent 48%, rgba(255, 91, 10, 0.05));
}

.root-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: clamp(76px, 6.2vw, 118px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 91, 10, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #ff8a3d, #ff5b0a 46%, #7a2a00 100%);
  box-shadow:
    0 0 0 13px rgba(255, 91, 10, 0.035),
    0 0 60px rgba(255, 91, 10, 0.35);
  transform: translate(-50%, -50%);
  animation: corePulse 3.8s ease-in-out infinite;
}

.root-core span {
  width: 29%;
  height: 29%;
  border: 1px solid rgba(9, 10, 9, 0.68);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(9, 10, 9, 0.18);
}

.root-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 29%;
  height: 2px;
  background: linear-gradient(90deg, var(--sage), rgba(119, 209, 190, 0.08));
  transform-origin: left center;
}

.root-line::after {
  display: block;
  width: 44%;
  height: 100%;
  background: var(--paper);
  box-shadow: 0 0 9px var(--sage);
  content: "";
  animation: rootSignal 2.5s ease-in-out infinite;
}

.r1 { transform: rotate(0deg); }
.r2 { transform: rotate(58deg); }
.r3 { transform: rotate(118deg); }
.r4 { transform: rotate(180deg); }
.r5 { transform: rotate(238deg); }
.r6 { transform: rotate(302deg); }

.root-line:nth-of-type(2)::after { animation-delay: -0.42s; }
.root-line:nth-of-type(3)::after { animation-delay: -0.84s; }
.root-line:nth-of-type(4)::after { animation-delay: -1.26s; }
.root-line:nth-of-type(5)::after { animation-delay: -1.68s; }
.root-line:nth-of-type(6)::after { animation-delay: -2.1s; }

.root-node {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(169, 230, 214, 0.55);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 17px rgba(119, 209, 190, 0.28);
}

.n1 { top: 47.5%; right: 18%; }
.n2 { top: 74%; right: 31%; }
.n3 { bottom: 17%; left: 31%; }
.n4 { top: 47.5%; left: 18%; }
.n5 { top: 20%; left: 30%; }
.n6 { top: 18%; right: 29%; }

.insight-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.insight-arrow i {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--line);
}

.insight-arrow i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  content: "";
  animation: insightLine 2.4s ease-in-out infinite;
}

.insight-arrow i::before {
  position: absolute;
  right: -1px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--sage);
  content: "";
  transform: translateY(-50%);
  filter: drop-shadow(0 0 6px rgba(119, 209, 190, 0.5));
}

.insight-arrow span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  text-shadow: 0 0 10px rgba(119, 209, 190, 0.35);
}

/* Solution and flow */

.slide-solution {
  background:
    radial-gradient(circle at 50% 87%, rgba(6, 92, 245, 0.12), transparent 42%),
    rgba(10, 20, 40, 0.35);
}

.flow-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.solution-heading {
  position: relative;
  z-index: 5;
  margin: 0 auto clamp(34px, 5vh, 62px);
  text-align: center;
}

.solution-heading h2 {
  max-width: 1260px;
  margin: auto;
  font-size: clamp(40px, 4.7vw, 88px);
}

.solution-heading h2 strong {
  color: var(--paper);
  font-weight: 750;
}

.process-flow {
  position: relative;
  z-index: 3;
  width: min(1200px, 90vw);
  height: min(41vh, 390px);
  margin: 0 auto;
}

.flow-lines {
  position: absolute;
  inset: 0;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.flow-line-base,
.flow-line-energy {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
}

.flow-line-base {
  stroke: rgba(6, 92, 245, 0.18);
}

.flow-line-energy {
  stroke: url("#flowGradient");
  stroke: var(--orange);
  stroke-dasharray: 12 18;
  filter: drop-shadow(0 0 8px rgba(255, 91, 10, 0.45));
  animation: flowDash 1.1s linear infinite;
}

.process-runner {
  position: absolute;
  z-index: 7;
  width: 15px;
  height: 15px;
  margin: -7px 0 0 -7px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    0 0 0 6px rgba(255, 91, 10, 0.12),
    0 0 28px rgba(255, 91, 10, 0.85);
  opacity: 0;
}

.slide-solution.is-active .process-runner {
  will-change: left, top, opacity;
}

.flow-node {
  position: absolute;
  z-index: 6;
  display: flex;
  width: clamp(222px, 18vw, 300px);
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  opacity: 0;
  filter: blur(12px);
  transform: translate(-50%, -50%) scale(0.78);
}

.slide-solution.is-active .flow-node {
  animation: nodeAssemble 0.88s var(--ease-out) forwards;
}

.slide-solution.is-active .flow-node-1 { animation-delay: 0.48s; }
.slide-solution.is-active .flow-node-2 { animation-delay: 0.76s; }
.slide-solution.is-active .flow-node-3 { animation-delay: 1.04s; }
.slide-solution.is-active .flow-node-4 { animation-delay: 1.32s; }
.slide-solution.is-active .flow-node-5 { animation-delay: 1.6s; }

.flow-node-1 { top: 50%; left: 9.2%; }
.flow-node-2 { top: 18.6%; left: 31.7%; }
.flow-node-3 { top: 81.4%; left: 54.2%; }
.flow-node-4 { top: 18.6%; left: 76.7%; }
.flow-node-5 { top: 50%; left: 90.8%; }

.flow-node > div:last-child {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(6, 92, 245, 0.1);
}

.flow-node b {
  display: block;
  margin-bottom: 4px;
  color: var(--paper);
  font-size: clamp(15px, 1.15vw, 22px);
  letter-spacing: -0.035em;
}

.flow-node p {
  color: var(--muted);
  font-size: clamp(10px, 0.75vw, 14px);
  line-height: 1.25;
}

.thinking-orb {
  position: relative;
  flex: 0 0 auto;
  width: clamp(58px, 5vw, 84px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(169, 230, 214, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(169, 230, 214, 0.38), rgba(12, 39, 37, 0.58) 48%, var(--ink));
  box-shadow: 0 0 32px rgba(74, 183, 163, 0.14);
}

.thinking-orb::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(169, 230, 214, 0.16);
  border-radius: 50%;
  content: "";
}

.thinking-orb i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 28%;
  border: 1px solid rgba(169, 230, 214, 0.47);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0);
  animation: orbOrbit 4.2s linear infinite;
}

.thinking-orb i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(60deg);
  animation-duration: 5.1s;
  animation-direction: reverse;
}

.thinking-orb i:nth-child(3) {
  transform: translate(-50%, -50%) rotate(120deg);
  animation-duration: 3.6s;
}

.thinking-orb span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  transform: translate(-50%, -50%);
}

.orb-context {
  background: radial-gradient(circle at 35% 28%, rgba(136, 129, 248, 0.45), rgba(53, 35, 82, 0.54) 50%, var(--ink));
}

.orb-decision {
  background: radial-gradient(circle at 35% 28%, rgba(49, 134, 255, 0.5), rgba(3, 85, 115, 0.5) 48%, var(--ink));
}

.orb-result {
  background: radial-gradient(circle at 35% 28%, rgba(255, 106, 50, 0.48), rgba(130, 21, 12, 0.42) 49%, var(--ink));
}

/* ===== Fluxograma ramificado da solução (Slide 4) ===== */
.solution-flow {
  position: relative;
  z-index: 3;
  width: 100%;
  height: min(46vh, 440px);
  margin: 0 auto;
}

.sf-lines {
  position: absolute;
  inset: 0;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.sf-line {
  fill: none;
  stroke: rgba(6, 92, 245, 0.22);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  animation: sfDash 1.4s linear infinite;
}

.sf-line-ok {
  stroke: var(--green);
  stroke-dasharray: 5 8;
}

.sf-line-loop {
  stroke: rgba(255, 91, 10, 0.4);
  stroke-dasharray: 4 7;
}

@keyframes sfDash {
  to { stroke-dashoffset: -16; }
}

.sf-node {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 17px);
  width: clamp(210px, 16vw, 245px);
  padding: clamp(17px, 1.6vw, 24px);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(6, 92, 245, 0.1);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.slide-solution.is-active .sf-node {
  animation: nodeAssemble 0.7s var(--ease-out) forwards;
}
.slide-solution.is-active .sf-n1 { animation-delay: 0.3s; }
.slide-solution.is-active .sf-n2 { animation-delay: 0.55s; }
.slide-solution.is-active .sf-n3 { animation-delay: 0.8s; }
.slide-solution.is-active .sf-n4 { animation-delay: 1.05s; }
.slide-solution.is-active .sf-n5 { animation-delay: 1.3s; }

/* Zigue-zague: 2 fileiras para cards maiores sem sobreposição */
.sf-n1 { top: 63%; left: 9%; }
.sf-n2 { top: 34%; left: 28%; }
.sf-n3 { top: 63%; left: 47%; }
.sf-n4 { top: 34%; left: 66%; }
.sf-n5 { top: 63%; left: 85%; }

/* Conectores em zigue-zague: seta diagonal aponta para o próximo nó */
.sf-node::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, rgba(6, 92, 245, 0.55), rgba(255, 91, 10, 0.65));
}
/* Nós ímpares (n1,n3) conectam para cima (próximo nó acima); pares (n2,n4) para baixo */
.sf-node::before {
  content: "";
  position: absolute;
  right: -26px;
  width: 0;
  height: 0;
  border-left: 9px solid var(--orange);
  opacity: 0.85;
}
.sf-n1::before, .sf-n3::before {
  top: 50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%) rotate(30deg);
}
.sf-n2::before, .sf-n4::before {
  top: 50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%) rotate(-30deg);
}
.sf-node:last-child::after,
.sf-node:last-child::before {
  display: none;
}

.sf-icon {
  display: grid;
  flex: 0 0 auto;
  width: clamp(48px, 3.6vw, 60px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  font-size: clamp(18px, 1.5vw, 24px);
  overflow: hidden;
}
.sf-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.sf-ok .sf-icon {
  background: rgba(22, 163, 74, 0.14);
}

.sf-node b {
  display: block;
  margin-bottom: 3px;
  color: var(--paper);
  font-size: clamp(16px, 1.35vw, 21px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sf-node p {
  color: var(--paper-soft);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.3;
}

.sf-ok b { color: var(--green); }

/* Demo */

.slide-demo {
  background:
    radial-gradient(circle at 24% 52%, rgba(6, 92, 245, 0.10), transparent 42%),
    rgba(10, 20, 40, 0.35);
}

.demo-layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.58fr);
  align-items: center;
  height: 100%;
  gap: clamp(36px, 4.5vw, 84px);
}

.demo-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(15px, 1.4vw, 24px);
  background: var(--surface-2);
  box-shadow:
    0 40px 110px rgba(6, 92, 245, 0.1),
    0 0 0 8px rgba(6, 92, 245, 0.02);
}

.slide-demo.is-active .demo-frame {
  animation: demoIn 1s var(--ease-out) both 0.18s;
}

.demo-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: clamp(42px, 5vh, 56px);
  align-items: center;
  padding: 0 clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.window-dots {
  display: flex;
  gap: 7px;
}

.window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.window-dots span:nth-child(2) { background: var(--yellow); }
.window-dots span:nth-child(3) { background: var(--green); }

.demo-bar b,
.demo-bar em {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.55vw, 11px);
  font-style: normal;
  letter-spacing: 0.1em;
}

.demo-bar em {
  justify-self: end;
  color: var(--sage);
}

.demo-screen {
  position: relative;
  display: grid;
  height: min(65vh, 650px);
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(6, 92, 245, 0.05), transparent 46%, rgba(6, 92, 245, 0.04)),
    var(--surface-2);
}

/* ===== Simulação da Recova (demo) =====
   Loop animado: busca falha → Recova entra → 3 alternativas + add-to-cart */
.demo-sim {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(680px, 90%);
  min-height: 300px;
  place-items: center;
}
.sim-phase {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
/* Fase 1 — busca falha */
.sim-searchbar {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(14, 28, 58, 0.85);
  border: 1px solid rgba(6, 92, 245, 0.18);
  box-shadow: 0 14px 40px rgba(6, 92, 245, 0.08);
}
.sim-query {
  flex: 1;
  color: var(--paper);
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 500;
}
.sim-submit {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--blue);
  position: relative;
}
.sim-submit::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2.5px solid #fff;
  border-radius: 50%;
}
.sim-submit::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 9px;
  height: 2.5px;
  background: #fff;
  transform: rotate(45deg);
}
.sim-zero {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
}
.sim-zero b {
  font-size: clamp(64px, 7vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.06em;
}
.sim-zero span {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.8vw, 15px);
  letter-spacing: 0.2em;
}
/* Fase 2 — Recova entra */
.sim-chat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 560px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(14, 28, 58, 0.8);
  border: 1px solid rgba(6, 92, 245, 0.16);
  box-shadow: 0 18px 50px rgba(6, 92, 245, 0.1);
  backdrop-filter: blur(8px);
}
.sim-rev {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #3d7bff, #065cf5 55%, #06345d);
  position: relative;
}
.sim-rev::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 13px;
  width: 14px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}
.sim-chat p {
  margin: 0;
  color: var(--paper);
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.45;
}
.sim-chat b {
  color: var(--orange);
}
/* Fase 3 — produtos + carrinho */
.sim-products {
  position: relative;
}
.sim-products-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}
.sim-product {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: rgba(14, 28, 58, 0.85);
  border: 1px solid rgba(6, 92, 245, 0.14);
  box-shadow: 0 12px 34px rgba(6, 92, 245, 0.08);
  text-align: center;
}
.sim-prod-art {
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 40%, rgba(6, 92, 245, 0.18), transparent 60%),
    var(--blue-soft);
  margin-bottom: 10px;
  position: relative;
}
.sim-product b {
  display: block;
  color: var(--paper);
  font-size: clamp(11px, 0.85vw, 15px);
  line-height: 1.2;
  min-height: 32px;
}
.sim-product small {
  display: block;
  margin: 4px 0 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.72vw, 13px);
}
.sim-cart {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}
.sim-cart:hover {
  transform: scale(1.04);
}
.sim-cart-added {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.35);
}
.sim-cart-added b {
  color: #fff;
}
/* Loop de fases */
.slide-demo.is-active .sim-search { animation: simPhase 9s infinite; }
.slide-demo.is-active .sim-recovery { animation: simPhase 9s infinite 3s; }
.slide-demo.is-active .sim-products { animation: simPhase 9s infinite 5.4s; }
.slide-demo.is-active .sim-cart-added { animation: simCart 9s infinite 6.6s; }
@keyframes simPhase {
  0%, 4% { opacity: 0; transform: translateY(16px); }
  12%, 30% { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes simCart {
  0%, 72% { opacity: 0; }
  80%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
/* Ajuste para os 3 produtos ficarem lado a lado na fase 3 */
.sim-products .sim-product {
  float: left;
  width: calc((100% - 28px) / 3);
}
.sim-products .sim-product + .sim-product {
  margin-left: 14px;
}
.sim-products::after {
  content: "";
  display: table;
  clear: both;
}


.demo-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(119, 209, 190, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 209, 190, 0.13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.demo-placeholder {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  text-align: center;
}

.demo-play {
  display: grid;
  width: clamp(70px, 6vw, 110px);
  aspect-ratio: 1;
  margin-bottom: 24px;
  place-items: center;
  border: 1px solid rgba(119, 209, 190, 0.34);
  border-radius: 50%;
  background: rgba(119, 209, 190, 0.06);
  box-shadow: 0 0 0 12px rgba(119, 209, 190, 0.025);
  animation: demoPlay 3s ease-in-out infinite;
}

.demo-play i {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid var(--sage);
}

.demo-placeholder strong {
  color: var(--paper);
  font-size: clamp(18px, 1.4vw, 27px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.demo-placeholder span {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.58vw, 11px);
}

.demo-copy h2 {
  margin: 6px 0 22px;
  font-size: clamp(48px, 5vw, 92px);
  font-weight: 670;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.demo-copy > p {
  color: var(--paper-soft);
  font-size: clamp(17px, 1.35vw, 26px);
  line-height: 1.4;
}

.demo-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: clamp(28px, 4vh, 48px);
}

.demo-facts span {
  padding: 15px;
  border-top: 1px solid var(--line);
  color: var(--paper);
  font-size: clamp(12px, 0.9vw, 17px);
}

.demo-facts small {
  display: block;
  margin-bottom: 7px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 8px;
}

/* Value accordion */

.slide-value {
  background: var(--ink);
}

.value-accordion {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(1480px, 100%);
  height: min(60vh, 630px);
  margin: 0 auto;
  gap: 9px;
}

.value-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(188, 211, 205, 0.18);
  border-radius: clamp(15px, 1.3vw, 22px);
  background: var(--surface);
  cursor: pointer;
  transition: flex 0.9s var(--ease-out), border-color 0.5s ease;
}

.value-panel.is-open {
  flex: 4.7;
  border-color: rgba(119, 209, 190, 0.36);
}

.panel-art,
.panel-shade {
  position: absolute;
  inset: 0;
}

.panel-art {
  transform: scale(1);
  transition: transform 0.9s var(--ease-out), filter 0.6s ease;
}

.value-panel.is-open .panel-art {
  transform: scale(1.045);
}

.before-art {
  filter: grayscale(1);
  background:
    radial-gradient(circle at 22% 20%, rgba(6, 92, 245, 0.1), transparent 18%),
    linear-gradient(145deg, #e8f1ff, #d5e4ff 72%);
}

.after-art {
  background:
    radial-gradient(circle at 73% 28%, rgba(255, 91, 10, 0.16), transparent 24%),
    linear-gradient(145deg, #0e1c3a, #12264a 54%, #0a1428);
}

.panel-shade {
  z-index: 2;
  background:
    linear-gradient(to top, rgba(244, 247, 251, 0.94) 0%, rgba(244, 247, 251, 0.34) 46%, transparent 72%),
    linear-gradient(90deg, rgba(244, 247, 251, 0.58), transparent 35%);
}

.before-stack {
  position: absolute;
  top: 17%;
  left: 17%;
  width: 63%;
  height: 47%;
  transform: perspective(700px) rotateY(16deg) rotateX(4deg);
}

.before-stack i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 22px 22px / calc(100% - 44px) 28px no-repeat,
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35);
  animation: stackDrift 6s ease-in-out infinite;
}

.before-stack i:nth-child(2) { transform: translate(32px, 28px); animation-delay: -1s; }
.before-stack i:nth-child(3) { transform: translate(64px, 56px); animation-delay: -2s; }
.before-stack i:nth-child(4) { transform: translate(96px, 84px); animation-delay: -3s; }
.before-stack i:nth-child(5) { transform: translate(128px, 112px); animation-delay: -4s; }

.before-cursor {
  position: absolute;
  top: 23%;
  left: 25%;
  z-index: 3;
  width: 18px;
  height: 24px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 71%, 60% 73%, 77% 100%, 61% 100%, 44% 75%, 18% 100%);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.35));
  animation: frustratedCursor 5s var(--ease-smooth) infinite;
}

.after-path {
  position: absolute;
  top: 18%;
  left: 10%;
  width: 78%;
  height: 53%;
  border: 2px solid rgba(169, 230, 214, 0.32);
  border-color: transparent transparent rgba(169, 230, 214, 0.42) transparent;
  border-radius: 50%;
  transform: rotate(-9deg);
}

.after-path::before {
  position: absolute;
  top: 52%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  box-shadow: 0 0 18px rgba(119, 209, 190, 0.42);
  content: "";
}

.after-path i {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(6, 92, 245, 0.4);
  transform: translateY(-50%);
}

.after-path i:nth-child(1) { left: 4%; }
.after-path i:nth-child(2) { left: 47%; }
.after-path i:nth-child(3) { right: 4%; }

.after-pulse {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 9px rgba(119, 209, 190, 0.1), 0 0 32px var(--sage);
  animation: afterTravel 5s var(--ease-smooth) infinite;
}

.panel-rail-label {
  position: absolute;
  bottom: 32px;
  left: 50%;
  z-index: 5;
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.64vw, 12px);
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
  transition: opacity 0.32s ease;
}

.value-panel.is-open .panel-rail-label {
  opacity: 0;
}

.panel-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  min-width: 600px;
  padding: clamp(30px, 3vw, 54px);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease 0.15s,
    transform 0.7s var(--ease-out) 0.15s;
}

.value-panel.is-open .panel-copy {
  opacity: 1;
  transform: none;
}

.panel-copy small {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.56vw, 11px);
  letter-spacing: 0.13em;
}

.panel-copy h3 {
  max-width: 760px;
  margin: 12px 0 10px;
  font-size: clamp(40px, 4.6vw, 86px);
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 0.93;
}

.panel-copy p {
  color: var(--paper-soft);
  font-size: clamp(15px, 1.2vw, 23px);
}

.panel-copy b {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(119, 209, 190, 0.22);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.62vw, 12px);
}

/* Coverflow */

.slide-difference {
  background:
    radial-gradient(circle at 50% 100%, rgba(6, 92, 245, 0.10), transparent 42%),
    rgba(10, 20, 40, 0.35);
}

.coverflow {
  position: relative;
  z-index: 3;
  width: min(1460px, 94vw);
  height: min(63vh, 640px);
  margin: 0 auto;
  perspective: 1800px;
}

.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(48vw, 760px);
  height: min(58vh, 590px);
  padding: clamp(24px, 2.2vw, 38px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(18px, 1.5vw, 26px);
  background:
    linear-gradient(135deg, rgba(6, 92, 245, 0.03), transparent 45%),
    var(--surface-2);
  box-shadow: 0 40px 100px rgba(6, 92, 245, 0.1);
  transform-origin: center;
  transition:
    transform 1s var(--ease-out),
    opacity 0.65s ease,
    filter 0.65s ease,
    z-index 0s linear;
}

.coverflow-card.is-center {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
}

.coverflow-card.is-left {
  z-index: 3;
  opacity: 0.52;
  filter: saturate(0.55) brightness(0.66);
  transform: translate(-102%, -50%) translateZ(-260px) rotateY(35deg) scale(0.78);
}

.coverflow-card.is-right {
  z-index: 3;
  opacity: 0.52;
  filter: saturate(0.55) brightness(0.66);
  transform: translate(2%, -50%) translateZ(-260px) rotateY(-35deg) scale(0.78);
}

.coverflow-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.coverflow-card header span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.55vw, 11px);
  letter-spacing: 0.1em;
}

.coverflow-card header b {
  color: var(--paper);
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: 620;
  letter-spacing: -0.035em;
  text-align: right;
}

.comparison-table {
  display: grid;
  align-content: center;
}

.table-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(4, 54px);
  min-height: clamp(52px, 5.9vh, 68px);
  align-items: center;
  border-bottom: 1px solid rgba(188, 211, 205, 0.1);
}

.table-row > span:first-child {
  color: var(--paper-soft);
  font-size: clamp(12px, 0.86vw, 16px);
}

.table-row i {
  display: grid;
  width: 27px;
  height: 27px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 15px;
  font-style: normal;
}

.table-row .yes {
  color: var(--green);
  background: rgba(22, 163, 74, 0.1);
}

.table-row .no {
  color: var(--muted);
}

.table-row .ours {
  color: #fff;
  background: var(--sage);
  box-shadow: 0 0 18px rgba(255, 91, 10, 0.24);
}

.table-head {
  min-height: 44px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
}

.table-head span {
  text-align: center;
}

.table-head span:first-child {
  text-align: left;
}

.logo-grid {
  position: relative;
  display: grid;
  width: 86%;
  aspect-ratio: 1.45;
  align-self: center;
  justify-self: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background:
    linear-gradient(rgba(119, 209, 190, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 209, 190, 0.11) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}

.competitor {
  z-index: 2;
  display: grid;
  width: clamp(38px, 3vw, 58px);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--paper-soft);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.8vw, 15px);
  box-shadow: 0 13px 30px rgba(6, 92, 245, 0.08);
}

.grid-beam {
  position: absolute;
  z-index: 1;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119, 209, 190, 0.3), rgba(119, 209, 190, 0.04) 48%, transparent 72%);
  filter: blur(12px);
  animation: gridBeam 8s var(--ease-smooth) infinite;
}

.fake-cursor {
  position: absolute;
  z-index: 5;
  width: 22px;
  height: 29px;
  animation: fakeCursor 8s var(--ease-smooth) infinite;
}

.fake-cursor::before {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 70%, 60% 73%, 78% 100%, 62% 100%, 43% 76%, 18% 100%);
  content: "";
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.fake-cursor i {
  position: absolute;
  top: -32px;
  left: -32px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(119, 209, 190, 0.3);
  border-radius: 50%;
  animation: cursorRing 2s ease-out infinite;
}

.grid-card > p,
.different-card > p {
  align-self: end;
  margin-top: 18px;
  padding: 12px 14px 0;
  border-top: 1px solid rgba(188, 211, 205, 0.12);
  color: var(--muted);
  font-size: clamp(12px, 0.9vw, 17px);
  line-height: 1.4;
}

.different-metaphor {
  position: relative;
  align-self: center;
  width: 90%;
  height: 70%;
}

.crowd-paths {
  position: absolute;
  top: 20%;
  right: 6%;
  left: 6%;
  height: 60%;
}

.crowd-paths i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 92%;
  height: 2px;
  background: linear-gradient(90deg, rgba(194, 204, 202, 0.08), rgba(194, 204, 202, 0.3), rgba(194, 204, 202, 0.04));
  transform-origin: left center;
}

.crowd-paths i:nth-child(1) { transform: rotate(-18deg); }
.crowd-paths i:nth-child(2) { transform: rotate(-9deg); }
.crowd-paths i:nth-child(3) { transform: rotate(0); }
.crowd-paths i:nth-child(4) { transform: rotate(9deg); }
.crowd-paths i:nth-child(5) { transform: rotate(18deg); }

.crowd-paths i::after {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
  transform: translateY(-4px);
}

.own-path {
  position: absolute;
  top: 51%;
  left: 5%;
  width: 90%;
  height: 46%;
  border: 3px solid var(--sage);
  border-color: transparent transparent var(--sage) transparent;
  border-radius: 50%;
  filter: drop-shadow(0 0 9px rgba(119, 209, 190, 0.32));
  transform: rotate(-22deg);
}

.own-path::before {
  position: absolute;
  right: -3px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 16px solid var(--sage);
  content: "";
  transform: rotate(20deg);
}

.own-path span {
  position: absolute;
  top: 66%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 22px rgba(255, 42, 0, 0.6);
  animation: ownPathRun 5s var(--ease-smooth) infinite;
}

.different-card blockquote {
  max-width: 580px;
  align-self: end;
  color: var(--paper);
  font-size: clamp(22px, 1.9vw, 35px);
  font-weight: 570;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.coverflow-dots {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(12px, 1.6vh, 20px);
}

.coverflow-dots i {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  transition: width 0.4s ease, background 0.4s ease;
}

.coverflow-dots i.is-active {
  width: 52px;
  background: var(--sage);
}

/* TAM / SAM / SOM */

.slide-market {
  display: grid;
  grid-template-columns: minmax(340px, 0.62fr) minmax(540px, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  background:
    radial-gradient(circle at 73% 52%, rgba(49, 134, 255, 0.07), transparent 42%),
    var(--ink);
}

.market-copy {
  position: relative;
  z-index: 4;
}

.market-copy h2 {
  max-width: 670px;
  font-size: clamp(44px, 5vw, 96px);
  font-weight: 660;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.market-copy p {
  max-width: 470px;
  margin-top: 24px;
  color: var(--paper-soft);
  font-size: clamp(16px, 1.2vw, 23px);
}

.water-funnel {
  position: relative;
  z-index: 3;
  height: min(78vh, 790px);
}

.water-funnel svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.source-tank,
.som-tank {
  fill: rgba(17, 21, 20, 0.84);
  stroke: rgba(169, 230, 214, 0.34);
  stroke-width: 2;
}

.tank-water,
.water-surface,
.som-wave {
  fill: url("#waterGradient");
  opacity: 0.82;
  animation: liquidWave 3s ease-in-out infinite alternate;
}

.main-stream,
.out-stream {
  fill: none;
  stroke: url("#waterGradient");
  stroke-linecap: round;
  stroke-width: 15;
  opacity: 0.82;
  stroke-dasharray: 30 8;
  animation: streamFlow 0.7s linear infinite;
}

.out-stream {
  stroke-width: 10;
  opacity: 0.7;
}

.funnel-glass {
  fill: url("#funnelGlass");
  stroke: rgba(169, 230, 214, 0.42);
  stroke-width: 3;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.26));
}

.funnel-water-fill {
  fill: url("#waterGradient");
  opacity: 0.3;
  animation: funnelFill 5s ease-in-out infinite;
}

.water-surface {
  fill: none;
  stroke: var(--mint);
  stroke-width: 8;
  filter: drop-shadow(0 0 9px rgba(119, 209, 190, 0.42));
}

.water-label,
.som-label {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 43px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.water-value,
.som-value {
  fill: var(--sage);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.waste path {
  fill: none;
  stroke: rgba(119, 209, 190, 0.16);
  stroke-dasharray: 7 10;
  stroke-linecap: round;
  stroke-width: 2;
}

.som-fill {
  fill: url("#waterGradient");
  opacity: 0.58;
  animation: somFill 4s ease-in-out infinite;
}

.som-wave {
  fill: none;
  stroke: var(--mint);
  stroke-width: 6;
}

.loss-note {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px;
  border-left: 2px solid var(--orange);
  background: rgba(9, 10, 9, 0.68);
}

.loss-note b {
  color: var(--orange-soft);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.76vw, 14px);
}

.loss-note span {
  color: var(--muted);
  font-size: clamp(9px, 0.68vw, 13px);
}

.loss-a { top: 45%; left: 1%; }
.loss-b { top: 52%; right: -1%; }

/* Business concept cards */

.slide-business {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 45%, rgba(6, 92, 245, 0.08)),
    rgba(10, 20, 40, 0.35);
}

.business-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1500px, 100%);
  height: min(61vh, 640px);
  margin: 0 auto;
  gap: clamp(12px, 1.3vw, 22px);
}

.business-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2vw, 34px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: clamp(15px, 1.4vw, 24px);
  background:
    linear-gradient(155deg, rgba(119, 209, 190, 0.035), transparent 45%),
    var(--surface);
  opacity: 0;
  transform: translateY(44px);
}

.slide-business.is-active .business-card {
  animation: businessCardIn 0.9s var(--ease-out) forwards;
}

.slide-business.is-active .business-card:nth-child(1) { animation-delay: 0.15s; }
.slide-business.is-active .business-card:nth-child(2) { animation-delay: 0.3s; }
.slide-business.is-active .business-card:nth-child(3) { animation-delay: 0.45s; }
.slide-business.is-active .business-card:nth-child(4) { animation-delay: 0.6s; }

.concept-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  margin: calc(clamp(22px, 2vw, 34px) * -1);
  margin-bottom: clamp(22px, 2.4vh, 30px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 50% 48%, rgba(119, 209, 190, 0.1), transparent 45%),
    rgba(9, 10, 9, 0.4);
}

.business-card > small {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.56vw, 11px);
  letter-spacing: 0.12em;
}

.business-card h3 {
  margin: 10px 0 9px;
  font-size: clamp(26px, 2.25vw, 43px);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.business-card > p {
  color: var(--muted);
  font-size: clamp(12px, 0.9vw, 17px);
  line-height: 1.35;
}

.payer-key {
  position: absolute;
  top: 50%;
  left: 28%;
  width: 42%;
  height: 12px;
  border-radius: 999px;
  background: var(--sage);
  box-shadow: 0 0 24px rgba(119, 209, 190, 0.25);
  transform: translateY(-50%) rotate(-8deg);
  animation: keyTurn 5s var(--ease-smooth) infinite;
}

.payer-key::before {
  position: absolute;
  top: 50%;
  left: -36px;
  width: 43px;
  height: 43px;
  border: 9px solid var(--sage);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.payer-key i,
.payer-key span {
  position: absolute;
  right: 9px;
  bottom: -13px;
  width: 9px;
  height: 20px;
  background: var(--sage);
}

.payer-key span {
  right: 26px;
  height: 14px;
}

.payer-lock {
  position: absolute;
  top: 50%;
  right: 13%;
  width: 45px;
  height: 54px;
  border: 1px solid rgba(119, 209, 190, 0.28);
  border-radius: 10px;
  background: rgba(119, 209, 190, 0.05);
  transform: translateY(-38%);
}

.payer-lock::before {
  position: absolute;
  top: -34px;
  left: 8px;
  width: 27px;
  height: 40px;
  border: 6px solid rgba(119, 209, 190, 0.35);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  content: "";
}

.payer-lock i {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 9px;
  height: 17px;
  border-radius: 999px;
  background: var(--orange);
}

.exchange {
  position: absolute;
  top: 50%;
  display: grid;
  width: clamp(60px, 5vw, 88px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(119, 209, 190, 0.28);
  border-radius: 50%;
  background: rgba(119, 209, 190, 0.05);
  transform: translateY(-50%);
}

.exchange::before {
  width: 37%;
  height: 37%;
  border: 2px solid var(--sage);
  border-radius: 9px;
  content: "";
}

.ex-a { left: 14%; animation: exchangeA 4.5s var(--ease-smooth) infinite; }
.ex-b { right: 14%; animation: exchangeB 4.5s var(--ease-smooth) infinite; }

.exchange-line {
  position: absolute;
  top: 50%;
  left: 31%;
  width: 38%;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.exchange-line::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  content: "";
  animation: exchangeSignal 2.1s linear infinite;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(120px, 10vw, 180px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(119, 209, 190, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.pulse-ring i {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(119, 209, 190, 0.18);
  border-radius: 50%;
  animation: frequencyPulse 3s ease-out infinite;
}

.pulse-ring i:nth-child(2) { animation-delay: 1s; }
.pulse-ring i:nth-child(3) { animation-delay: 2s; }

.frequency-beat {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 26px rgba(255, 42, 0, 0.5);
  animation: beat 1.35s ease-in-out infinite;
}

.margin-engine {
  position: absolute;
  inset: 0;
}

.gear {
  position: absolute;
  border: 9px dashed rgba(119, 209, 190, 0.7);
  border-radius: 50%;
}

.gear::before {
  position: absolute;
  inset: 26%;
  border: 5px solid rgba(119, 209, 190, 0.48);
  border-radius: 50%;
  content: "";
}

.gear-a {
  top: 29%;
  left: 25%;
  width: clamp(74px, 6vw, 110px);
  aspect-ratio: 1;
  animation: gearSpin 10s linear infinite;
}

.gear-b {
  right: 21%;
  bottom: 21%;
  width: clamp(55px, 4.5vw, 82px);
  aspect-ratio: 1;
  border-color: rgba(49, 134, 255, 0.75);
  animation: gearSpin 7s linear infinite reverse;
}

.margin-output {
  position: absolute;
  top: 28%;
  right: 14%;
  width: 11px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(to top, var(--orange), var(--yellow), var(--sage));
  box-shadow: 0 0 18px rgba(119, 209, 190, 0.28);
  transform-origin: bottom;
  animation: outputGrow 4s var(--ease-out) infinite;
}

/* Smoky CTA */

.slide-cta {
  display: grid;
  padding: clamp(80px, 9vh, 110px) clamp(80px, 10vw, 190px);
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 20, 40, 0.82) 0%, rgba(10, 20, 40, 0.55) 55%, rgba(10, 20, 40, 0.35) 100%);
}

.smoke-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  filter: blur(0.3px);
}

.smoky-text {
  position: relative;
  z-index: 4;
  max-width: 1450px;
}

.smoky-text h2,
.smoky-copy {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(50px, 6.1vw, 118px);
  font-weight: 620;
  letter-spacing: -0.065em;
  line-height: 0.96;
  text-align: center;
}

.smoky-text h2 {
  position: relative;
  z-index: 3;
  text-shadow:
    0 0 1px rgba(242, 247, 245, 0.9),
    0 0 34px rgba(119, 209, 190, 0.08);
}

.smoky-text h2 em {
  color: var(--sage);
  text-shadow:
    0 0 28px rgba(119, 209, 190, 0.28),
    0 2px 12px rgba(10, 20, 40, 0.6),
    0 0 3px rgba(10, 20, 40, 0.9);
}

.smoky-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: rgba(169, 230, 214, 0.2);
  pointer-events: none;
  filter: blur(18px);
}

.copy-a {
  animation: smokeTextA 7s ease-in-out infinite;
}

.copy-b {
  animation: smokeTextB 9s ease-in-out infinite;
}

.slide-cta:not(.is-active) .smoky-text {
  opacity: 0;
  filter: blur(20px);
  transform: scale(0.96);
}

.slide-cta.is-active .smoky-text {
  animation: smokyReveal 2.1s var(--ease-out) both 0.2s;
}

/* CTA acionável no fechamento */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vh, 22px);
  margin-top: clamp(30px, 4.5vh, 56px);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.6vh, 20px) clamp(30px, 3.4vw, 52px);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 28px);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #0e8a3d);
  box-shadow: 0 10px 40px rgba(22, 163, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 50px rgba(22, 163, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cta-note {
  color: var(--muted);
  font-size: clamp(12px, 0.95vw, 17px);
  letter-spacing: 0.01em;
}

.slide-cta.is-active .cta-actions {
  animation: ctaRise 0.9s var(--ease-out) both 1.1s;
}

@keyframes ctaRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Team TCG cards */

.slide-team {
  background:
    radial-gradient(circle at 50% 74%, rgba(6, 92, 245, 0.10), transparent 40%),
    linear-gradient(130deg, rgba(255, 255, 255, 0.06), transparent 40%, rgba(136, 129, 248, 0.06)),
    rgba(10, 20, 40, 0.35);
}

.team-heading {
  position: relative;
  z-index: 3;
  margin-bottom: clamp(20px, 2.5vh, 32px);
  text-align: center;
}

.team-heading h2 {
  font-size: clamp(38px, 4vw, 76px);
}

.team-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1280px, 88vw);
  height: min(63vh, 660px);
  margin: 0 auto;
  gap: clamp(20px, 2.4vw, 42px);
  perspective: 1800px;
}

.team-card-shell {
  position: relative;
  min-width: 0;
  perspective: 1600px;
  opacity: 0;
  transform: translateY(80px) scale(0.82);
}

.slide-team.is-active .team-card-shell {
  animation: cardShellIn 1s var(--ease-out) forwards;
}

.slide-team.is-active .member-1 { animation-delay: 0.15s; }
.slide-team.is-active .member-2 { animation-delay: 0.38s; }
.slide-team.is-active .member-3 { animation-delay: 0.61s; }

.team-card {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

.slide-team.is-active .team-card {
  animation: cardFlip 1.35s var(--ease-out) forwards, cardFloat 6s ease-in-out infinite 2s;
}

.slide-team.is-active .member-2 .team-card { animation-delay: 0.38s, 2.23s; }
.slide-team.is-active .member-3 .team-card { animation-delay: 0.61s, 2.46s; }

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 247, 245, 0.3);
  border-radius: clamp(18px, 1.4vw, 26px);
  backface-visibility: hidden;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.44);
}

.card-back {
  display: grid;
  padding: 24px;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(6, 92, 245, 0.12), transparent 38%),
    repeating-radial-gradient(circle at center, transparent 0 20px, rgba(6, 92, 245, 0.05) 21px 22px),
    var(--surface-2);
  transform: rotateY(180deg);
}

.card-back::before,
.card-back::after {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgba(119, 209, 190, 0.18);
  content: "";
  transform: rotate(45deg);
}

.card-back::after {
  width: 44%;
  border-color: rgba(255, 42, 0, 0.18);
}

.card-back img {
  position: relative;
  z-index: 3;
  width: 42%;
  height: auto;
}

.card-back > span {
  position: absolute;
  bottom: 24px;
  z-index: 3;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.card-front {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: clamp(13px, 1vw, 18px);
  background:
    linear-gradient(150deg, rgba(6, 92, 245, 0.08), transparent 22%),
    var(--surface-2);
  transform: rotateY(0deg);
}

.member-1 .card-front { border-color: rgba(119, 209, 190, 0.62); }
.member-2 .card-front { border-color: rgba(49, 134, 255, 0.62); }
.member-3 .card-front { border-color: rgba(136, 129, 248, 0.62); }

.card-front header,
.card-front footer,
.player-info {
  position: relative;
  z-index: 5;
}

.card-front header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 3px 4px 12px;
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.5vw, 10px);
  letter-spacing: 0.09em;
}

.card-front header b {
  color: var(--paper);
  font-weight: 400;
}

.card-front header em {
  justify-self: end;
  color: var(--sage);
  font-style: normal;
}

.player-window {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(242, 247, 245, 0.22);
  border-radius: clamp(12px, 1vw, 17px);
}

.player-a {
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 91, 10, 0.3), transparent 20%),
    linear-gradient(145deg, #e8f1ff, #d5e4ff 58%, #c9d9f5);
}

.player-b {
  background:
    radial-gradient(circle at 50% 33%, rgba(6, 92, 245, 0.3), transparent 20%),
    linear-gradient(145deg, #e8f1ff, #d5e4ff 62%, #c9d9f5);
}

.player-c {
  background:
    radial-gradient(circle at 50% 33%, rgba(136, 129, 248, 0.3), transparent 20%),
    linear-gradient(145deg, #e8f1ff, #d5e4ff 62%, #c9d9f5);
}

.player-window::before {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, 0.04) 4px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  content: "";
}

.player-silhouette {
  position: absolute;
  inset: 8% 14% 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.player-silhouette i {
  position: relative;
  display: block;
  width: 47%;
  aspect-ratio: 1;
  border: 2px solid rgba(242, 247, 245, 0.42);
  border-radius: 50%;
  background: rgba(242, 247, 245, 0.06);
  box-shadow: 0 0 34px rgba(242, 247, 245, 0.08);
}

.player-silhouette i::after {
  position: absolute;
  top: 105%;
  left: 50%;
  width: 167%;
  height: 184%;
  border: 2px solid rgba(242, 247, 245, 0.34);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(rgba(242, 247, 245, 0.06), transparent);
  content: "";
  transform: translateX(-50%);
}

.player-silhouette span {
  position: absolute;
  bottom: 7%;
  z-index: 2;
  padding: 8px 11px;
  border: 1px solid rgba(242, 247, 245, 0.25);
  border-radius: 999px;
  color: rgba(242, 247, 245, 0.75);
  background: rgba(9, 10, 9, 0.5);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.45vw, 9px);
}

.scan-light {
  position: absolute;
  top: -20%;
  left: -80%;
  width: 54%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(242, 247, 245, 0.2), transparent);
  filter: blur(8px);
  transform: rotate(13deg);
  animation: cardScan 4.8s ease-in-out infinite;
}

.player-info {
  padding: clamp(12px, 1.4vh, 17px) 4px 10px;
}

.player-info h3 {
  font-size: clamp(23px, 1.9vw, 36px);
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.player-info p {
  margin-top: 6px;
  color: var(--muted);
  font-size: clamp(9px, 0.66vw, 13px);
}

.card-front footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(188, 211, 205, 0.12);
}

.card-front footer span {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 14px);
  text-align: center;
}

.card-front footer small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: clamp(5px, 0.35vw, 7px);
}

.team-note {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  color: rgba(194, 204, 202, 0.38);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.52vw, 10px);
  text-align: center;
}

/* Thank-you */

.slide-thanks {
  display: grid;
  place-items: center;
  background: var(--ink);
}

.thanks-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 800px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.thanks-mark i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(119, 209, 190, 0.12);
  clip-path: polygon(50% 4%, 96% 91%, 4% 91%);
  animation: thanksMark 8s ease-in-out infinite;
}

.thanks-mark i:nth-child(2) { inset: 13%; animation-delay: -2.7s; }
.thanks-mark i:nth-child(3) { inset: 26%; animation-delay: -5.4s; }

.thanks-copy {
  position: relative;
  z-index: 4;
  text-align: center;
}

.thanks-copy h2 {
  font-size: clamp(100px, 16vw, 300px);
  font-weight: 700;
  letter-spacing: -0.09em;
  line-height: 0.76;
}

.thanks-copy p {
  margin-top: 40px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.72vw, 14px);
  letter-spacing: 0.12em;
}

/* Animations */

@keyframes coverPromptIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes qrArrival {
  0% { opacity: 0; transform: translateY(45px) scale(0.88); filter: blur(14px); }
  65% { opacity: 1; transform: translateY(-4px) scale(1.016); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes gemTurn {
  0%, 10% { transform: rotateX(-8deg) rotateY(0deg); }
  45%, 55% { transform: rotateX(8deg) rotateY(180deg); }
  90%, 100% { transform: rotateX(-8deg) rotateY(360deg); }
}

@keyframes auraBreathe {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes globeGlow {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes globeFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

@keyframes continentDrift {
  0% { transform: translateX(-8%) rotate(0deg); }
  50% { transform: translateX(10%) rotate(7deg); }
  100% { transform: translateX(-8%) rotate(0deg); }
}

@keyframes mapDot {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes orbitSpin {
  to { transform: translate(-50%, -50%) rotate(384deg); }
}

@keyframes numberZoom {
  0% { transform: scale(0.82); filter: blur(5px); opacity: 0.3; }
  78% { transform: scale(1.026); filter: none; opacity: 1; }
  100% { transform: scale(1); filter: none; opacity: 1; }
}

@keyframes impactRipple {
  0% { opacity: 0.74; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(52); }
}

@keyframes proofRail {
  to { transform: scaleY(1); }
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes chipTyped {
  to { opacity: 1; transform: none; }
}

@keyframes vhsGrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-1px, 2px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(-2px, 0); }
}

@keyframes vhsTrack {
  0% { top: -18%; transform: translateX(0) skewX(0); }
  48% { transform: translateX(0) skewX(0); }
  51% { transform: translateX(-9px) skewX(2deg); }
  54% { transform: translateX(6px) skewX(-2deg); }
  100% { top: 110%; transform: translateX(0) skewX(0); }
}

@keyframes ghostJitter {
  0%, 88%, 100% { transform: translate(0); filter: blur(0); }
  90% { transform: translate(7px, -1px); filter: blur(1px); }
  94% { transform: translate(-4px, 1px); filter: blur(0); }
}

@keyframes signalFlicker {
  0%, 72%, 100% { opacity: 0.34; }
  74% { opacity: 0.82; }
  76% { opacity: 0.1; }
  78% { opacity: 0.72; }
}

@keyframes rootGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes rootSignal {
  0% { opacity: 0; transform: translateX(-30%); }
  30%, 58% { opacity: 1; }
  100% { opacity: 0; transform: translateX(190%); }
}

@keyframes insightLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes flowDash {
  to { stroke-dashoffset: -30; }
}

@keyframes nodeAssemble {
  0% { opacity: 0; filter: blur(12px); transform: translate(-50%, -50%) scale(0.78); }
  58% { opacity: 1; filter: blur(1px); transform: translate(-50%, -50%) scale(1.045); }
  100% { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); }
}

@keyframes orbOrbit {
  to { rotate: 360deg; }
}

@keyframes demoIn {
  from { opacity: 0; transform: translateY(32px) rotateX(6deg); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes demoPlay {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 0 8px rgba(119, 209, 190, 0.02); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(119, 209, 190, 0.035); }
}

@keyframes stackDrift {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

@keyframes frustratedCursor {
  0%, 18% { transform: translate(0, 0); }
  30%, 44% { transform: translate(230px, 120px); }
  52%, 66% { transform: translate(80px, 220px); }
  78%, 92% { transform: translate(310px, 58px); }
  100% { transform: translate(0, 0); }
}

@keyframes afterTravel {
  0%, 5% { transform: translate(-310px, 36px) scale(0.8); }
  48% { transform: translate(0, -12px) scale(1.08); }
  95%, 100% { transform: translate(310px, 24px) scale(0.8); }
}

@keyframes gridBeam {
  0%, 10% { transform: translate(0%, 0%); }
  26% { transform: translate(195%, 0%); }
  42% { transform: translate(195%, 195%); }
  58% { transform: translate(0%, 195%); }
  74% { transform: translate(98%, 98%); }
  100% { transform: translate(0%, 0%); }
}

@keyframes fakeCursor {
  0%, 10% { top: 13%; left: 12%; }
  26% { top: 13%; left: 78%; }
  42% { top: 72%; left: 78%; }
  58% { top: 72%; left: 12%; }
  74% { top: 43%; left: 45%; }
  100% { top: 13%; left: 12%; }
}

@keyframes cursorRing {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes ownPathRun {
  0% { top: 66%; left: 0; opacity: 0; }
  8% { opacity: 1; }
  52% { top: -12%; left: 48%; }
  92% { opacity: 1; }
  100% { top: 43%; left: 94%; opacity: 0; }
}

@keyframes liquidWave {
  from { transform: translateX(-4px); }
  to { transform: translateX(8px); }
}

@keyframes streamFlow {
  to { stroke-dashoffset: -38; }
}

@keyframes funnelFill {
  0%, 100% { transform: translateY(48px); opacity: 0.23; }
  50% { transform: translateY(0); opacity: 0.4; }
}

@keyframes somFill {
  0%, 100% { transform: translateY(14px); opacity: 0.48; }
  50% { transform: translateY(-7px); opacity: 0.7; }
}

@keyframes businessCardIn {
  to { opacity: 1; transform: none; }
}

@keyframes keyTurn {
  0%, 20% { transform: translateY(-50%) rotate(-8deg) translateX(-14px); }
  45%, 60% { transform: translateY(-50%) rotate(12deg) translateX(18px); }
  100% { transform: translateY(-50%) rotate(-8deg) translateX(-14px); }
}

@keyframes exchangeA {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(30px); }
}

@keyframes exchangeB {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-30px); }
}

@keyframes exchangeSignal {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

@keyframes frequencyPulse {
  0% { opacity: 0.8; transform: scale(0.28); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes beat {
  0%, 100% { transform: scale(0.75); }
  16% { transform: scale(1.28); }
  30% { transform: scale(0.88); }
  44% { transform: scale(1.08); }
  60% { transform: scale(0.75); }
}

@keyframes gearSpin {
  to { transform: rotate(360deg); }
}

@keyframes outputGrow {
  0%, 100% { transform: scaleY(0.18); opacity: 0.4; }
  48%, 68% { transform: scaleY(1); opacity: 1; }
}

@keyframes smokeTextA {
  0%, 100% { opacity: 0.14; transform: translate(-1%, 1%) scale(1.01); }
  50% { opacity: 0.35; transform: translate(1.2%, -1.3%) scale(1.025); }
}

@keyframes smokeTextB {
  0%, 100% { opacity: 0.22; transform: translate(0.8%, -0.5%) scale(1.015); }
  50% { opacity: 0.08; transform: translate(-1.4%, 1.2%) scale(1.03); }
}

@keyframes smokyReveal {
  from { opacity: 0; filter: blur(20px); transform: scale(0.96); }
  55% { opacity: 0.82; filter: blur(3px); }
  to { opacity: 1; filter: none; transform: none; }
}

@keyframes cardShellIn {
  0% { opacity: 0; transform: translateY(90px) scale(0.78); }
  65% { opacity: 1; transform: translateY(-8px) scale(1.025); }
  100% { opacity: 1; transform: none; }
}

@keyframes cardFlip {
  0% { transform: rotateY(180deg) rotateX(7deg); }
  62% { transform: rotateY(-8deg) rotateX(-2deg); }
  100% { transform: rotateY(0) rotateX(0); }
}

@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes cardScan {
  0%, 18% { transform: translateX(0) rotate(13deg); opacity: 0; }
  30% { opacity: 0.65; }
  70% { opacity: 0.35; }
  82%, 100% { transform: translateX(440%) rotate(13deg); opacity: 0; }
}

@keyframes thanksMark {
  0%, 100% { opacity: 0.18; transform: scale(0.94) rotate(0deg); }
  50% { opacity: 0.55; transform: scale(1.04) rotate(2deg); }
}

/* Presentation-safe fallbacks */

@media (max-aspect-ratio: 4/3) {
  .problem-layout,
  .demo-layout,
  .slide-market {
    gap: 24px;
  }

  .flow-node {
    width: 220px;
  }

  .team-cards {
    width: 94vw;
  }
}

@media (max-width: 980px) {
  .brand-rail {
    top: 24px;
  }

  .slide {
    padding: 72px 34px 62px;
  }

  .problem-layout,
  .demo-layout,
  .slide-market {
    grid-template-columns: 1fr;
  }

  .typed-proof,
  .demo-copy,
  .market-copy {
    display: none;
  }

  .globe-scene {
    right: -40vw;
    width: 130vw;
  }

  .insight-grid {
    grid-template-columns: 1fr 42px 1fr;
  }

  .flow-node {
    width: 190px;
  }

  .business-grid {
    gap: 8px;
  }

  .business-card {
    padding: 16px;
  }

  .business-card > p {
    display: none;
  }

  .concept-visual {
    margin: -16px -16px 20px;
  }
}

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

/* =========================================================
   Integrações originais — Canvas UI, Backseasy, OriginKit
   ========================================================= */

.backseasy-black-wave {
  display: none; /* Mantém a capa clara; o componente async desenhava ondas pretas */
  position: absolute;
  inset: -4%;
  z-index: 0;
  width: 108%;
  height: 108%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.88;
  filter: saturate(0.54) contrast(1.08) brightness(0.56);
  transform: translateZ(0);
}

.backseasy-black-wave canvas,
.purple-orbit-emitter canvas {
  pointer-events: none !important;
}

.cover-hex {
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: normal;
  filter: none;
}

.cover-vignette {
  z-index: 2;
  display: none;
}

.qr-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  image-rendering: pixelated;
}

.qr-core {
  width: 13%;
  border-width: 4px;
  border-radius: 18%;
  box-shadow: 0 0 0 1px rgba(9, 10, 9, 0.14);
}

.adapta-gem {
  width: 58%;
  animation-duration: 11s;
}

.corner-qr {
  position: absolute;
  top: clamp(68px, 7vh, 94px);
  right: clamp(20px, 2vw, 38px);
  z-index: 30;
  display: grid;
  width: clamp(74px, 5vw, 96px);
  padding: 6px 6px 7px;
  gap: 5px;
  border: 1px solid rgba(242, 247, 245, 0.26);
  border-radius: 10px;
  color: rgba(242, 247, 245, 0.68);
  background: rgba(9, 10, 9, 0.9);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
}

.corner-qr img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #fff;
  image-rendering: pixelated;
}

.corner-qr span {
  font-family: var(--font-mono);
  font-size: clamp(6px, 0.42vw, 8px);
  letter-spacing: 0.11em;
  text-align: center;
}

/* Página 2 — Globe e Ripple originais */

.originkit-globe {
  position: absolute;
  top: -8%;
  right: -5%;
  z-index: 0;
  width: 69%;
  height: 116%;
  pointer-events: none;
  opacity: 0.84;
  filter: saturate(0.86) contrast(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.54) 18%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.54) 18%, #000 45%);
}

.globe-scene-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0 31%, rgba(9, 10, 9, 0.78) 44%, transparent 70%),
    radial-gradient(circle at 78% 50%, transparent 0 27%, rgba(9, 10, 9, 0.64) 70%);
}

.problem-layout {
  position: relative;
  z-index: 4;
}

.number-impact {
  isolation: isolate;
}

.impact-ripple-canvas {
  position: absolute;
  top: 50%;
  left: 40%;
  z-index: 0;
  width: min(52vw, 940px);
  height: min(65vh, 660px);
  pointer-events: none;
  opacity: 0.9;
  filter: sepia(0.55) saturate(1.7) hue-rotate(112deg) brightness(1.25);
  transform: translate(-50%, -50%);
}

.count-number,
.count-unit {
  position: relative;
  z-index: 2;
}

.count-number.is-counting {
  animation-duration: 0.88s;
}

.typed-proof {
  min-height: 360px;
  padding: clamp(30px, 2.6vw, 50px);
  border-color: rgba(242, 247, 245, 0.14);
  border-radius: 24px;
  background: rgba(17, 20, 19, 0.88);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.typed-proof::before,
.slide-problem.is-active .typed-proof::before {
  display: none;
  animation: none;
}

.proof-kicker {
  color: rgba(194, 204, 202, 0.72);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.62vw, 12px);
  letter-spacing: 0.12em;
}

.typed-proof h2 {
  margin-top: clamp(24px, 2.8vh, 34px);
}

.typed-metrics span {
  border-color: rgba(242, 247, 245, 0.12);
  border-radius: 999px;
  color: var(--paper-soft);
  background: rgba(242, 247, 245, 0.035);
}

/* Página 3 — VHS original */

.symptom-card {
  isolation: isolate;
}

.vhs-output {
  position: absolute;
  inset: 0 0 25%;
  z-index: 2;
  width: 100%;
  height: 75%;
  pointer-events: none;
  opacity: 0.3;
}

.symptom-card .symptom-visual {
  z-index: 1;
  opacity: 1;
}

.symptom-card .metaphor-copy,
.root-card .metaphor-copy {
  position: relative;
  z-index: 5;
}

/* Página 4 — Thinking Orbs original */

.flow-orb-wrap {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: clamp(62px, 5vw, 84px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(169, 230, 214, 0.2);
  border-radius: 50%;
  background: #080a09;
  box-shadow: 0 0 30px rgba(119, 209, 190, 0.12);
}

.thinking-orb-mount {
  display: grid;
  width: 64px;
  max-width: 84%;
  aspect-ratio: 1;
  place-items: center;
}

.thinking-orb-mount canvas {
  width: 100% !important;
  height: 100% !important;
}

.flow-orb-wrap > span {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 3;
  display: grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--sage);
  font-family: var(--font-mono);
  font-size: 8px;
}

.orb-context .thinking-orb-mount {
  filter: sepia(0.4) saturate(1.55) hue-rotate(195deg);
}

.orb-decision .thinking-orb-mount {
  filter: sepia(0.6) saturate(1.7) hue-rotate(112deg);
}

.orb-result .thinking-orb-mount {
  filter: sepia(0.7) saturate(2.4) hue-rotate(324deg);
}

.original-components-offline .thinking-orb-mount::after {
  color: var(--muted);
  content: "ORB";
  font-family: var(--font-mono);
  font-size: 9px;
}

/* Página 8 — Interactive Grid original */

.logo-grid {
  display: block;
  width: 88%;
  aspect-ratio: 1.42;
  overflow: visible;
  border: 0;
  background: transparent;
}

.originkit-grid-mount {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
}

.originkit-auto-cursor {
  position: absolute;
  top: -14px;
  left: -10px;
  z-index: 50;
  width: 18px;
  height: 25px;
  pointer-events: none;
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.originkit-auto-cursor::before {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 70%, 60% 73%, 78% 100%, 62% 100%, 43% 76%, 18% 100%);
  content: "";
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.64));
}

.originkit-auto-cursor i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  aspect-ratio: 1;
  border: 1px solid rgba(119, 209, 190, 0.38);
  border-radius: 50%;
  opacity: 0.45;
  animation: cursorPulse 1.5s ease-out infinite;
}

@keyframes cursorPulse {
  0% { opacity: 0.55; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.4); }
}

.original-components-offline .originkit-grid-mount {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background:
    linear-gradient(rgba(119, 209, 190, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 209, 190, 0.1) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}

/* Página 9 — Purple Orbits original como fonte do líquido */

.purple-orbit-emitter {
  position: absolute;
  top: -15%;
  left: 50%;
  z-index: 0;
  width: 66%;
  height: 38%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.82;
  filter: hue-rotate(92deg) saturate(0.82) brightness(0.86) contrast(1.1);
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 76%, transparent 100%);
}

.emitter-nozzle {
  position: absolute;
  top: 5.5%;
  left: 50%;
  z-index: 1;
  width: 42px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(169, 230, 214, 0), rgba(119, 209, 190, 0.65));
  filter: blur(9px);
  transform: translateX(-50%);
}

.water-funnel svg {
  position: relative;
  z-index: 2;
}

.source-tank {
  fill: rgba(9, 10, 9, 0.7);
  stroke: rgba(169, 230, 214, 0.42);
}

.market-stage-legend {
  position: absolute;
  top: 21%;
  right: -3%;
  z-index: 5;
  display: grid;
  width: clamp(180px, 14vw, 270px);
  gap: 8px;
}

.market-stage-legend span {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(6, 92, 245, 0.14);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(14, 28, 58, 0.86);
  font-size: clamp(8px, 0.58vw, 11px);
}

.market-stage-legend b {
  color: var(--paper);
  font-family: var(--font-mono);
}

/* Página 12 — card template fornecido, sem holofoil */

.team-cards {
  width: min(1220px, 86vw);
  height: min(64vh, 680px);
  gap: clamp(22px, 2.5vw, 44px);
}

.card-front {
  display: block;
  padding: 0;
  border-color: rgba(6, 92, 245, 0.52) !important;
  border-radius: clamp(18px, 1.4vw, 26px);
  background: #e8f1ff;
  isolation: isolate;
}

.team-card-bg,
.team-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.team-card-bg {
  z-index: 0;
  opacity: 0.5;
  filter: brightness(1.1) saturate(0.6) contrast(0.9);
}

.team-card-frame {
  z-index: 5;
  opacity: 0.98;
  mix-blend-mode: multiply;
  filter: contrast(1.12) saturate(0.9);
}

.card-front::after {
  position: absolute;
  inset: 1.2%;
  z-index: 6;
  border: 1px solid rgba(6, 92, 245, 0.38);
  border-radius: inherit;
  box-shadow:
    inset 0 0 34px rgba(6, 92, 245, 0.13),
    0 0 22px rgba(6, 92, 245, 0.08);
  content: "";
  pointer-events: none;
}

.card-front .player-window {
  position: absolute;
  top: 21%;
  right: 8%;
  bottom: auto;
  left: 8%;
  z-index: 2;
  height: 49%;
  border: 1px solid rgba(6, 92, 245, 0.2);
  border-radius: 5% 5% 10% 10%;
  background:
    radial-gradient(circle at 50% 34%, rgba(6, 92, 245, 0.1), transparent 30%),
    #e8f1ff;
  box-shadow: inset 0 0 50px rgba(6, 92, 245, 0.06);
}

.team-card-copy {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.team-card-copy h3 {
  position: absolute;
  top: 5.4%;
  left: 11.5%;
  width: 57%;
  overflow: hidden;
  color: #1d2939;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 36px);
  font-stretch: condensed;
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}

.team-card-copy .member-role {
  position: absolute;
  top: 14.1%;
  left: 11.7%;
  width: 60%;
  color: #065cf5;
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.58vw, 11px);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}

.team-card-copy .member-bio {
  position: absolute;
  right: 11%;
  bottom: 11.4%;
  left: 11%;
  color: rgba(29, 41, 57, 0.8);
  font-size: clamp(9px, 0.66vw, 13px);
  line-height: 1.42;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}

.player-silhouette {
  inset: 9% 15% 4%;
}

.player-silhouette span {
  bottom: 5%;
}

.card-back {
  padding: 0;
  background: #e8f1ff;
}

.card-back .card-back-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
}

.card-back > img:not(.card-back-art) {
  position: relative;
  z-index: 4;
  width: 42%;
}

.card-back > span {
  z-index: 4;
}

@media (max-width: 980px) {
  .corner-qr {
    top: 62px;
    right: 18px;
    width: 70px;
  }

  .originkit-globe {
    right: -34%;
    width: 118%;
  }

  .market-stage-legend {
    display: none;
  }

  .thinking-orb-mount {
    width: 52px;
  }
}

/* Revisão 3 — ripple fullscreen, Lottie market, ciclo de negócio e novas páginas */

.slide-problem {
  isolation: isolate;
}

.problem-ripple-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: clamp(76px, 8vh, 98px) clamp(62px, 6.2vw, 118px) clamp(66px, 7vh, 88px);
}

.impact-ripple-source {
  display: none;
}

.canvas-ui-ripple-native .slide-problem .impact-ripple-source {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.canvas-ui-ripple-native .slide-problem .problem-ripple-content {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

.slide-problem .impact-ripple-canvas {
  position: absolute;
  inset: 0;
  z-index: 55;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
}

/* Página 9 — os três arquivos dotLottie fornecidos */

.market-lottie-diagram {
  position: relative;
  z-index: 3;
  width: min(850px, 100%);
  height: min(82vh, 820px);
  margin: 0 auto;
  isolation: isolate;
}

.market-lottie {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  filter: hue-rotate(185deg) saturate(1.05) brightness(1.08) contrast(1.02);
  transition: opacity 0.25s ease;
}

.market-lottie.is-lottie-ready {
  opacity: 1;
}

.market-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.tam-lottie-stage {
  position: absolute;
  top: -18%;
  left: 50%;
  z-index: 1;
  width: 80%;
  height: 56%;
  overflow: hidden;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
}

.tam-lottie-stage::after {
  position: absolute;
  top: 16%;
  bottom: 0;
  left: 50%;
  width: 22%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(6, 92, 245, 0), rgba(6, 92, 245, 0.4) 38%, rgba(6, 92, 245, 0.16));
  content: "";
  filter: blur(12px);
  opacity: 0.72;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
}

.tam-lottie {
  position: relative;
  z-index: 2;
  transform: scaleX(0.54) scaleY(1.95);
  transform-origin: 50% 16%;
}

.sam-funnel-stage {
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 3;
  width: 62%;
  height: 48%;
  transform: translateX(-50%);
}

.sam-funnel-glass,
.sam-funnel-glass::after {
  position: absolute;
  inset: 0;
  clip-path: polygon(4% 0, 96% 0, 62% 70%, 59% 100%, 41% 100%, 38% 70%);
  content: "";
}

.sam-funnel-glass {
  z-index: 0;
  background: linear-gradient(180deg, rgba(6, 92, 245, 0.5), rgba(6, 92, 245, 0.12));
  filter: drop-shadow(0 26px 36px rgba(6, 92, 245, 0.16)) drop-shadow(0 0 18px rgba(6, 92, 245, 0.08));
}

.sam-funnel-glass::after {
  inset: 3px;
  background:
    linear-gradient(180deg, rgba(6, 92, 245, 0.04), rgba(255, 255, 255, 0.72)),
    var(--ink);
}

.sam-lottie {
  position: absolute;
  inset: 4% 4% 2%;
  z-index: 1;
  width: 92%;
  height: 94%;
  opacity: 0.88;
  clip-path: polygon(3% 0, 97% 0, 63% 72%, 59% 100%, 41% 100%, 37% 72%);
  transform: scale(1.25);
}

.som-drop-stage {
  position: absolute;
  bottom: -3%;
  left: 50%;
  z-index: 4;
  width: 42%;
  height: 39%;
  transform: translateX(-50%);
}

.som-lottie {
  position: absolute;
  top: -31%;
  left: 50%;
  width: 100%;
  height: 108%;
  transform: translateX(-50%) scale(0.83);
}

.som-reservoir {
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;
  height: 34%;
  overflow: hidden;
  border: 1px solid rgba(6, 92, 245, 0.4);
  border-radius: 18px 18px 28px 28px;
  background: rgba(232, 241, 255, 0.6);
  box-shadow: inset 0 0 28px rgba(6, 92, 245, 0.08);
}

.som-reservoir i {
  position: absolute;
  right: -8%;
  bottom: -12%;
  left: -8%;
  height: 54%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, #065cf5, #4d8bff);
  opacity: 0.5;
  animation: somReservoirWave 3.2s ease-in-out infinite alternate;
}

.market-stage-label {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 210px;
  padding: 8px 14px;
  border: 1px solid rgba(6, 92, 245, 0.18);
  border-radius: 999px;
  background: rgba(14, 28, 58, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(6, 92, 245, 0.08);
}

.market-stage-label b {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(21px, 1.65vw, 32px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.market-stage-label span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.5vw, 10px);
  letter-spacing: 0.08em;
}

.tam-stage-label {
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
}

.sam-stage-label {
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.som-stage-label {
  right: 50%;
  bottom: 2%;
  transform: translateX(50%);
}

.market-lottie-diagram .market-stage-legend {
  top: 34%;
  right: -1%;
  width: clamp(172px, 12vw, 230px);
}

.lottie-offline .market-lottie {
  opacity: 0;
}

.lottie-offline .tam-lottie-stage,
.lottie-offline .sam-funnel-stage,
.lottie-offline .som-drop-stage {
  background: radial-gradient(circle, rgba(119, 209, 190, 0.13), transparent 62%);
}

.slide-market.is-market-running .tam-lottie-stage {
  animation: tamWaterfallIn 0.72s var(--ease-out) both;
}

.slide-market.is-market-running .tam-lottie-stage::after {
  animation: tamStreamReveal 0.82s var(--ease-out) both 0.12s;
}

.slide-market.is-market-running .sam-funnel-stage {
  animation: samFunnelIn 0.76s var(--ease-out) both 0.54s;
}

.slide-market.is-market-running .som-drop-stage {
  animation: somDropIn 0.62s var(--ease-out) both 1.2s;
}

/* Página 10 — ciclo do modelo de negócio */

.slide-business {
  background:
    radial-gradient(circle at 50% 55%, rgba(6, 92, 245, 0.10), transparent 36%),
    rgba(10, 20, 40, 0.35);
}

.business-cycle {
  position: relative;
  z-index: 3;
  width: min(1500px, 92vw);
  height: min(66vh, 690px);
  margin: 0 auto;
}

.business-cycle-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: 66%;
  border: 1px solid rgba(119, 209, 190, 0.2);
  border-radius: 50%;
  box-shadow:
    inset 0 0 70px rgba(119, 209, 190, 0.025),
    0 0 70px rgba(119, 209, 190, 0.025);
  transform: translate(-50%, -50%);
}

.business-cycle-ring::before {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from -90deg, var(--sage), transparent 20%, rgba(119, 209, 190, 0.16) 48%, transparent 74%, var(--sage));
  content: "";
  opacity: 0.58;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}

.business-cycle-runner {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 7px rgba(119, 209, 190, 0.1), 0 0 28px var(--sage);
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-distance: 0%;
  offset-rotate: 0deg;
}

.slide-business.is-active .business-cycle-runner {
  animation: businessRunner 12s linear infinite;
}

.business-cycle-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: min(410px, 27vw);
  min-height: 224px;
  padding: 28px;
  place-content: center;
  border: 1px solid rgba(169, 230, 214, 0.3);
  border-radius: 28px;
  background: rgba(17, 21, 20, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), inset 0 0 42px rgba(119, 209, 190, 0.04);
  text-align: center;
  transform: translate(-50%, -50%);
}

.business-cycle-core > span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.business-cycle-core h3 {
  margin: 10px 0 18px;
  font-size: clamp(34px, 3vw, 58px);
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.business-core-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.business-core-slots b {
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.48vw, 9px);
  font-weight: 400;
}

.business-cycle-step {
  position: absolute;
  z-index: 5;
  width: clamp(205px, 14vw, 265px);
  min-height: 92px;
  padding: 15px 17px 14px 52px;
  border: 1px solid rgba(188, 211, 205, 0.15);
  border-radius: 16px;
  background: rgba(17, 21, 20, 0.91);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
  opacity: 0.64;
  transition: border-color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.business-cycle-step > span {
  position: absolute;
  top: 14px;
  left: 15px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(119, 209, 190, 0.3);
  border-radius: 50%;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 8px;
}

.business-cycle-step b {
  display: block;
  margin-bottom: 5px;
  color: var(--paper);
  font-size: clamp(13px, 0.95vw, 18px);
}

.business-cycle-step p {
  color: var(--muted);
  font-size: clamp(9px, 0.65vw, 12px);
  line-height: 1.28;
}

.cycle-step-1 { top: 7%; left: 13%; }
.cycle-step-2 { top: 1%; left: 50%; transform: translateX(-50%); }
.cycle-step-3 { top: 7%; right: 13%; }
.cycle-step-4 { top: 42%; right: 1%; transform: translateY(-50%); }
.cycle-step-5 { right: 13%; bottom: 7%; }
.cycle-step-6 { bottom: 1%; left: 50%; transform: translateX(-50%); }
.cycle-step-7 { bottom: 7%; left: 13%; }
.cycle-step-8 { top: 42%; left: 1%; transform: translateY(-50%); }

.slide-business.is-active .business-cycle-step {
  animation: businessStepFocus 12s ease-in-out infinite;
}

.slide-business.is-active .cycle-step-2 { animation-delay: -10.5s; }
.slide-business.is-active .cycle-step-3 { animation-delay: -9s; }
.slide-business.is-active .cycle-step-4 { animation-delay: -7.5s; }
.slide-business.is-active .cycle-step-5 { animation-delay: -6s; }
.slide-business.is-active .cycle-step-6 { animation-delay: -4.5s; }
.slide-business.is-active .cycle-step-7 { animation-delay: -3s; }
.slide-business.is-active .cycle-step-8 { animation-delay: -1.5s; }

/* Página 11 — CAC, LTV e ROI */

.slide-economics {
  background:
    radial-gradient(circle at 20% 80%, rgba(49, 134, 255, 0.05), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(119, 209, 190, 0.06), transparent 28%),
    var(--ink);
}

.economics-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1500px, 92vw);
  height: min(61vh, 635px);
  margin: 0 auto;
  gap: clamp(16px, 1.7vw, 28px);
}

.economics-block {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2vw, 36px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background:
    linear-gradient(155deg, rgba(6, 92, 245, 0.04), transparent 48%),
    var(--surface);
  opacity: 0;
  transform: translateY(36px);
}

.slide-economics.is-active .economics-block {
  animation: economicsBlockIn 0.8s var(--ease-out) forwards;
}

.slide-economics.is-active .economics-block:nth-child(2) { animation-delay: 0.12s; }
.slide-economics.is-active .economics-block:nth-child(3) { animation-delay: 0.24s; }

.economics-block header {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  align-items: baseline;
  gap: 10px;
}

.economics-block header span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 9px;
}

.economics-block header b {
  font-size: clamp(28px, 2.3vw, 44px);
  letter-spacing: -0.06em;
}

.economics-block header small {
  color: var(--muted);
  font-size: clamp(9px, 0.66vw, 12px);
  line-height: 1.2;
}

.economics-block > strong {
  margin-top: auto;
  color: var(--paper);
  font-size: clamp(32px, 3.1vw, 60px);
  letter-spacing: -0.065em;
}

.economics-block > p {
  min-height: 2.7em;
  margin-top: 8px;
  color: var(--paper-soft);
  font-size: clamp(12px, 0.92vw, 17px);
  line-height: 1.35;
}

.economics-block > em {
  margin-top: 14px;
  color: var(--sage);
  font-size: clamp(9px, 0.66vw, 12px);
  line-height: 1.35;
}

.cac-trend {
  position: relative;
  display: flex;
  height: 45%;
  margin: 30px 0 20px;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  border-bottom: 1px solid rgba(6, 92, 245, 0.16);
}

.cac-trend i {
  width: 14%;
  height: var(--bar);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to top, rgba(6, 92, 245, 0.25), var(--blue));
  box-shadow: 0 0 24px rgba(6, 92, 245, 0.1);
  transform: scaleY(0);
  transform-origin: bottom;
}

.slide-economics.is-active .cac-trend i {
  animation: economicsBarIn 0.75s var(--ease-out) forwards 0.4s;
}

.slide-economics.is-active .cac-trend i:nth-child(2) { animation-delay: 0.52s; }
.slide-economics.is-active .cac-trend i:nth-child(3) { animation-delay: 0.64s; }
.slide-economics.is-active .cac-trend i:nth-child(4) { animation-delay: 0.76s; }

.cac-trend > span {
  position: absolute;
  top: 14%;
  right: 2%;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  transform: rotate(-26deg);
}

.retention-dial,
.roi-dial {
  position: relative;
  display: grid;
  width: min(250px, 15vw);
  aspect-ratio: 1;
  margin: 36px auto 24px;
  place-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--sage) 0 72%, rgba(119, 209, 190, 0.1) 72% 100%);
  text-align: center;
}

.retention-dial::after,
.roi-dial::after {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.retention-dial i,
.roi-dial i {
  position: absolute;
  inset: -7%;
  border: 1px solid rgba(6, 92, 245, 0.16);
  border-radius: 50%;
  animation: economicsOrbit 7s linear infinite;
}

.retention-dial i::after,
.roi-dial i::after {
  position: absolute;
  top: 4%;
  left: 27%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 18px var(--orange);
  content: "";
}

.retention-dial b,
.retention-dial span,
.roi-dial b,
.roi-dial span {
  position: relative;
  z-index: 2;
}

.retention-dial b,
.roi-dial b {
  font-size: clamp(25px, 2.2vw, 42px);
  letter-spacing: -0.06em;
}

.retention-dial span,
.roi-dial span {
  margin-top: 4px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 8px;
}

.roi-dial {
  background: conic-gradient(var(--orange) 0 18%, var(--blue) 18% 78%, rgba(6, 92, 245, 0.1) 78% 100%);
}

.ltv-calendar-stage {
  position: relative;
  display: grid;
  width: min(270px, 16vw);
  aspect-ratio: 1;
  margin: 22px auto 14px;
  place-items: center;
}

.ltv-calendar-lottie {
  position: absolute;
  inset: 0;
  filter:
    brightness(0)
    saturate(100%)
    invert(29%)
    sepia(100%)
    saturate(1000%)
    hue-rotate(190deg)
    brightness(100%)
    contrast(96%)
    drop-shadow(0 0 24px rgba(6, 92, 245, 0.2));
}

.ltv-calendar-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

.ltv-calendar-lottie.is-lottie-fallback::before {
  position: absolute;
  inset: 18%;
  display: grid;
  place-items: center;
  border: 2px solid var(--sage);
  border-radius: 24px;
  color: var(--sage);
  content: "CAL";
  font-family: var(--font-mono);
  font-size: 22px;
}

.ltv-calendar-value {
  position: absolute;
  right: 4%;
  bottom: 0;
  left: 4%;
  z-index: 3;
  display: grid;
  padding: 8px 12px;
  border: 1px solid rgba(6, 92, 245, 0.2);
  border-radius: 12px;
  background: rgba(14, 28, 58, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(6, 92, 245, 0.1);
  text-align: center;
}

.ltv-calendar-value b {
  font-size: clamp(20px, 1.7vw, 33px);
  letter-spacing: -0.055em;
}

.ltv-calendar-value span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.48vw, 9px);
  letter-spacing: 0.1em;
}

/* Página 12 — GTM + roadmap */

.slide-gtm {
  background:
    linear-gradient(110deg, rgba(6, 92, 245, 0.05), transparent 46%, rgba(6, 92, 245, 0.035)),
    var(--ink);
}

.gtm-roadmap-layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
  width: min(1540px, 94vw);
  height: min(61vh, 635px);
  margin: 0 auto;
  gap: clamp(18px, 2vw, 34px);
}

.gtm-engine,
.roadmap-engine {
  padding: clamp(26px, 2.3vw, 40px);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(6, 92, 245, 0.08);
}

.gtm-engine header,
.roadmap-engine header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.gtm-engine header span,
.roadmap-engine header span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.gtm-engine header b,
.roadmap-engine header b {
  font-size: clamp(16px, 1.2vw, 23px);
}

.gtm-route {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items: center;
  margin-top: clamp(70px, 10vh, 110px);
}

.gtm-stage {
  position: relative;
  min-height: 170px;
  padding: 22px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--ink-2);
  opacity: 0.52;
  transform: translateY(18px);
}

.slide-gtm.is-active .gtm-stage {
  animation: gtmStageIn 6.4s ease-in-out infinite;
}

.slide-gtm.is-active .gtm-stage:nth-of-type(2) { animation-delay: -4.8s; }
.slide-gtm.is-active .gtm-stage:nth-of-type(3) { animation-delay: -3.2s; }
.slide-gtm.is-active .gtm-stage:nth-of-type(4) { animation-delay: -1.6s; }

.gtm-stage span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 9px;
}

.gtm-stage b {
  display: block;
  margin: 28px 0 8px;
  font-size: clamp(17px, 1.25vw, 24px);
  letter-spacing: -0.04em;
}

.gtm-stage p {
  color: var(--muted);
  font-size: clamp(10px, 0.7vw, 13px);
  line-height: 1.35;
}

.gtm-route > i {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(6, 92, 245, 0.14), var(--orange), rgba(6, 92, 245, 0.14));
}

.gtm-route > i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border: solid var(--orange);
  border-width: 1px 1px 0 0;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.gtm-loop-note {
  margin-top: 52px;
  padding: 12px 14px;
  border-left: 2px solid var(--orange);
  color: var(--paper-soft);
  background: rgba(6, 92, 245, 0.05);
  font-size: clamp(10px, 0.72vw, 14px);
}

.roadmap-track {
  position: relative;
  display: grid;
  height: calc(100% - 60px);
  padding: 26px 0 0 54px;
  align-content: space-around;
}

.roadmap-track::before {
  position: absolute;
  top: 44px;
  bottom: 30px;
  left: 20px;
  width: 1px;
  background: rgba(6, 92, 245, 0.24);
  content: "";
}

.roadmap-phase {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--ink-2);
}

.roadmap-phase::before {
  position: absolute;
  top: 50%;
  left: -40px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--ink);
  content: "";
  transform: translateY(-50%);
}

.roadmap-phase span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 8px;
}

.roadmap-phase b {
  display: block;
  margin: 4px 0;
  font-size: clamp(15px, 1.1vw, 21px);
}

.roadmap-phase p {
  color: var(--muted);
  font-size: clamp(9px, 0.66vw, 12px);
}

.roadmap-runner {
  position: absolute;
  top: 44px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 18px var(--orange);
}

.slide-gtm.is-active .roadmap-runner {
  animation: roadmapTravel 6.4s var(--ease-smooth) infinite;
}

/* Página 14 — proporção original e encaixe dos textos */

.slide-team .team-cards {
  width: min(1120px, 80vw);
  height: auto;
  align-items: center;
  gap: clamp(22px, 2.2vw, 38px);
}

.slide-team .team-card-shell {
  width: 100%;
  min-width: 0;
  aspect-ratio: 2 / 3;
}

.slide-team .team-card-bg,
.slide-team .team-card-frame {
  object-fit: contain;
}

.slide-team .team-card-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4%;
  clip-path: inset(0 round 4%);
  opacity: 1;
  filter: none;
}

.slide-team .team-card-frame {
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

.slide-team .card-front::after {
  inset: 2.2%;
  border-radius: 4%;
}

.slide-team .card-front {
  isolation: auto;
}

.slide-team .card-front .player-window {
  top: 19%;
  right: 9%;
  left: 9%;
  height: 51%;
  z-index: 6;
}

.slide-team .member-gif,
.slide-team .member-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* Patrick (player-c): desce o crop para dar respiro no topo da cabeça,
   alinhando ao enquadramento do Gabriel. */
.slide-team .player-c .member-video {
  object-position: 50% 12%;
}

/* Gabriel (player-a): rosto mais próximo da câmera — desce o crop para
   mostrar o rosto inteiro (queixo/boca não cortados) com respiro no topo. */
.slide-team .player-a .member-video {
  object-position: 50% 24%;
}

/* Vídeos do time: fundo branco vira transparente sobre o card claro */
.slide-team .player-a .member-video,
.slide-team .player-c .member-video {
  mix-blend-mode: multiply;
  filter: none;
  isolation: auto;
}

.slide-team .player-a::before {
  z-index: 2;
}

.slide-team .player-a .scan-light {
  z-index: 3;
  opacity: 0.48;
}

.slide-team .team-card-copy h3 {
  top: 4.6%;
  left: 11.6%;
  width: 62%;
  font-size: clamp(24px, 1.9vw, 34px);
  letter-spacing: -0.045em;
  text-overflow: clip;
}

.slide-team .team-card-copy .member-role {
  top: 11.8%;
  left: 11.8%;
  width: 66%;
  max-height: 6.4%;
  overflow: hidden;
  font-size: clamp(10px, 0.82vw, 15px);
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.slide-team .team-card-copy .member-bio {
  top: 67.7%;
  right: 10.5%;
  bottom: 5.7%;
  left: 10.5%;
  max-height: none;
  overflow: hidden;
  padding: 8px 11px;
  border-radius: 7px;
  background: rgba(14, 28, 58, 0.85);
  backdrop-filter: blur(3px);
  color: #f4f7fa;
  font-size: clamp(13px, 1.02vw, 19px);
  line-height: 1.42;
}

@keyframes somReservoirWave {
  from { transform: translateX(-3%) scaleY(0.9); }
  to { transform: translateX(3%) scaleY(1.08); }
}

@keyframes businessRunner {
  to { offset-distance: 100%; }
}

@keyframes businessStepFocus {
  0%, 10% {
    border-color: rgba(169, 230, 214, 0.48);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26), 0 0 26px rgba(119, 209, 190, 0.1);
    opacity: 1;
  }
  16%, 100% {
    border-color: rgba(188, 211, 205, 0.15);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
    opacity: 0.64;
  }
}

@keyframes economicsBlockIn {
  to { opacity: 1; transform: none; }
}

@keyframes economicsBarIn {
  to { transform: scaleY(1); }
}

@keyframes economicsOrbit {
  to { transform: rotate(360deg); }
}

@keyframes gtmStageIn {
  0%, 18% {
    border-color: rgba(169, 230, 214, 0.46);
    box-shadow: 0 0 26px rgba(119, 209, 190, 0.08);
    opacity: 1;
    transform: none;
  }
  26%, 100% {
    border-color: rgba(169, 230, 214, 0.14);
    box-shadow: none;
    opacity: 0.52;
    transform: translateY(18px);
  }
}

@keyframes roadmapTravel {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(min(61vh, 635px) - 162px)); }
}

@media (max-width: 1180px) {
  .business-cycle {
    transform: scale(0.86);
  }

  .economics-grid,
  .gtm-roadmap-layout {
    width: 96vw;
  }

  .gtm-roadmap-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  }
}

/* Navegação radial — seis páginas por giro */

.radial-menu {
  position: fixed;
  bottom: clamp(20px, 2.7vh, 34px);
  left: clamp(24px, 2.8vw, 52px);
  z-index: 70;
  width: clamp(235px, 17vw, 300px);
  height: clamp(205px, 16vw, 270px);
  pointer-events: none;
}

.radial-wheel,
.radial-items {
  position: absolute;
  inset: 0;
}

.radial-wheel {
  transform-origin: clamp(50px, 3.8vw, 68px) calc(100% - clamp(24px, 2vw, 38px));
}

.radial-orbit {
  position: absolute;
  bottom: calc(clamp(24px, 2vw, 38px) - clamp(128px, 9vw, 154px));
  left: calc(clamp(50px, 3.8vw, 68px) - clamp(128px, 9vw, 154px));
  width: clamp(256px, 18vw, 308px);
  aspect-ratio: 1;
  border: 1px solid rgba(169, 230, 214, 0.14);
  border-radius: 50%;
  background:
    conic-gradient(from 250deg, transparent 0 56%, rgba(119, 209, 190, 0.22) 63%, transparent 75%),
    radial-gradient(circle, transparent 63%, rgba(119, 209, 190, 0.028) 64% 66%, transparent 67%);
  box-shadow: inset 0 0 32px rgba(119, 209, 190, 0.025);
  pointer-events: none;
}

.radial-item,
.radial-active-halo {
  position: absolute;
  bottom: clamp(24px, 2vw, 38px);
  left: clamp(50px, 3.8vw, 68px);
  width: clamp(44px, 3.2vw, 56px);
  aspect-ratio: 1;
  transform:
    translate(-50%, 50%)
    rotate(var(--slot-angle))
    translateX(clamp(128px, 9vw, 154px))
    rotate(var(--slot-counter-angle));
}

.radial-item {
  z-index: 3;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(9, 10, 9, 0.78);
  cursor: pointer;
  pointer-events: auto;
}

.radial-item::after {
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(242, 247, 245, 0.1);
  border-radius: inherit;
  content: "";
  transition: border-color 0.35s ease;
}

.radial-icon-canvas {
  display: block;
  width: 76%;
  height: 76%;
  opacity: 0;
  filter: brightness(0);
  transform: scale(0.35) rotate(-22deg);
  transition:
    opacity 0.42s ease,
    filter 0.42s ease,
    transform 0.7s var(--ease-out);
}

.radial-icon-canvas svg {
  width: 100% !important;
  height: 100% !important;
}

.radial-item.is-entered .radial-icon-canvas {
  opacity: 0.9;
  transform: none;
}

.radial-item.is-active .radial-icon-canvas {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(5320%) hue-rotate(0deg) brightness(102%) contrast(100%);
}

.radial-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
  filter: grayscale(1);
}

.radial-item.is-disabled .radial-icon-canvas {
  opacity: 0.4;
  filter: brightness(0);
}

.radial-item.is-active::after {
  border-color: rgba(169, 230, 214, 0.44);
}

.radial-active-halo {
  z-index: 1;
  border: 1px solid rgba(169, 230, 214, 0.56);
  border-radius: 50%;
  background: rgba(119, 209, 190, 0.14);
  box-shadow: 0 0 0 7px rgba(119, 209, 190, 0.045), 0 0 30px rgba(119, 209, 190, 0.18);
  pointer-events: none;
  transition: transform 0.64s var(--ease-smooth);
}

.radial-active-halo::after {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 12px var(--sage);
  content: "";
  opacity: 0.28;
}

.radial-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  padding: 5px 7px;
  border: 1px solid rgba(169, 230, 214, 0.14);
  border-radius: 6px;
  color: var(--paper-soft);
  background: rgba(9, 10, 9, 0.92);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.radial-item:hover .radial-tooltip,
.radial-item:focus-visible .radial-tooltip {
  opacity: 1;
  transform: translateY(-50%);
}

.radial-hub {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 8;
  display: grid;
  width: clamp(100px, 7.2vw, 128px);
  height: clamp(48px, 3.5vw, 60px);
  padding: 0 16px;
  place-items: center;
  border: 1px solid rgba(6, 92, 245, 0.22);
  border-radius: 999px;
  background: rgba(14, 28, 58, 0.92);
  box-shadow: 0 14px 40px rgba(6, 92, 245, 0.12), inset 0 0 18px rgba(6, 92, 245, 0.04);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.radial-hub:hover,
.radial-hub:focus-visible {
  border-color: rgba(255, 91, 10, 0.5);
  box-shadow: 0 14px 40px rgba(6, 92, 245, 0.12), 0 0 24px rgba(255, 91, 10, 0.12);
  outline: none;
  transform: translateY(-2px);
}

.radial-hub img {
  width: 100%;
  height: auto;
  filter: none;
  transition: filter 0.3s ease;
}

.radial-menu.is-cover .radial-hub img {
  filter: none;
}

.radial-menu.is-cover .radial-wheel {
  visibility: hidden;
  opacity: 0;
  transform: rotate(-110deg) scale(0.72);
  pointer-events: none;
}

.radial-wheel.is-entering {
  animation: radialWheelIn 0.96s var(--ease-out) both;
}

.radial-wheel.is-switching {
  animation: radialWheelSwitch 0.74s var(--ease-smooth) both;
}

.deck-meta {
  left: auto;
  justify-content: flex-end;
}

@keyframes tamWaterfallIn {
  from { opacity: 0; transform: translate(-50%, -22%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes tamStreamReveal {
  from { opacity: 0; transform: translateX(-50%) scaleY(0); }
  to { opacity: 0.72; transform: translateX(-50%) scaleY(1); }
}

@keyframes samFunnelIn {
  from { opacity: 0; transform: translate(-50%, -9%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes somDropIn {
  from { opacity: 0; transform: translate(-50%, -16%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes radialWheelIn {
  0% { opacity: 0; transform: rotate(-138deg) scale(0.64); }
  66% { opacity: 1; transform: rotate(8deg) scale(1.025); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes radialWheelSwitch {
  0% { opacity: 1; transform: rotate(0) scale(1); }
  46% { opacity: 0.18; transform: rotate(176deg) scale(0.84); }
  54% { opacity: 0.18; transform: rotate(184deg) scale(0.84); }
  100% { opacity: 1; transform: rotate(360deg) scale(1); }
}

/* Geometria fiel à roda do vídeo de referência. */

.radial-menu {
  width: clamp(236px, 17vw, 300px);
  height: clamp(236px, 17vw, 300px);
}

.radial-wheel {
  transform-origin: 50% 50%;
}

.radial-orbit {
  inset: 7%;
  width: auto;
  aspect-ratio: auto;
  border: clamp(22px, 1.8vw, 32px) solid rgba(6, 92, 245, 0.18);
  background:
    conic-gradient(from -90deg, rgba(6, 92, 245, 0.08), transparent 24%, rgba(255, 91, 10, 0.05) 50%, transparent 76%, rgba(6, 92, 245, 0.08)),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 48px rgba(6, 92, 245, 0.12),
    inset 0 0 32px rgba(6, 92, 245, 0.05);
}

.radial-item,
.radial-active-halo {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: clamp(42px, 3vw, 54px);
  transform:
    translate(-50%, -50%)
    rotate(var(--slot-angle))
    translateX(clamp(88px, 6.6vw, 116px))
    rotate(var(--slot-counter-angle));
}

.radial-item {
  background: transparent;
}

.radial-item::after {
  opacity: 0;
}

.radial-active-halo {
  width: clamp(54px, 3.8vw, 68px);
  background: rgba(255, 91, 10, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 91, 10, 0.4),
    0 12px 28px rgba(6, 92, 245, 0.12),
    0 0 28px rgba(255, 91, 10, 0.18);
}

.radial-active-halo::after {
  display: none;
}

.radial-hub {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: clamp(92px, 7.2vw, 126px);
  height: auto;
  aspect-ratio: 1;
  padding: clamp(16px, 1.4vw, 24px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radial-hub:hover,
.radial-hub:focus-visible,
.radial-menu.is-cover .radial-hub {
  transform: translate(-50%, -50%);
}

.radial-wheel.is-entering {
  animation-name: radialFullWheelIn;
}

.radial-wheel.is-switching {
  animation-name: radialFullWheelSwitch;
}

@keyframes radialFullWheelIn {
  0% { opacity: 0; transform: rotate(-168deg) scale(0.54); }
  68% { opacity: 1; transform: rotate(7deg) scale(1.03); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes radialFullWheelSwitch {
  0% { opacity: 1; transform: rotate(0) scale(1); }
  48% { opacity: 0.12; transform: rotate(182deg) scale(0.86); }
  52% { opacity: 0.12; transform: rotate(188deg) scale(0.86); }
  100% { opacity: 1; transform: rotate(360deg) scale(1); }
}

/* Revisão 4 — ripple de viewport, globo resiliente e navegação em área segura */

#impact-ripple-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0;
  border-radius: 0;
  contain: none;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  pointer-events: none;
}

.deck-shell:not(.is-problem-slide) #impact-ripple-canvas {
  visibility: hidden;
}

.ripple-capture .slide-problem *,
.ripple-capture .radial-menu {
  animation: none !important;
  transition: none !important;
}

.globe-loading-fallback {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  opacity: 0.34;
  filter: drop-shadow(0 0 34px rgba(119, 209, 190, 0.2));
  animation: globeFallbackTurn 13s linear infinite;
}

.globe-loading-fallback svg {
  width: min(74vh, 74%);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: rgba(169, 230, 214, 0.72);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.originkit-globe.is-ready .globe-loading-fallback {
  display: none;
}

.deck-shell.has-radial-menu .slide:not(.slide-cover) {
  padding-left: clamp(200px, 13vw, 250px);
}

.deck-shell.has-radial-menu .slide-problem .problem-ripple-content {
  padding-left: clamp(200px, 13vw, 250px);
}

.deck-shell.has-radial-menu .process-flow,
.deck-shell.has-radial-menu .coverflow,
.deck-shell.has-radial-menu .business-cycle,
.deck-shell.has-radial-menu .economics-grid,
.deck-shell.has-radial-menu .gtm-roadmap-layout,
.deck-shell.has-radial-menu .team-cards {
  width: 100%;
  max-width: 100%;
}

.radial-menu {
  bottom: clamp(14px, 1.8vh, 22px);
  left: clamp(12px, 1vw, 20px);
  z-index: 46;
  width: clamp(176px, 11.5vw, 210px);
  height: clamp(176px, 11.5vw, 210px);
}

.radial-orbit {
  inset: 1.5%;
  border-width: clamp(14px, 1vw, 19px);
}

.radial-item,
.radial-active-halo {
  width: clamp(28px, 1.65vw, 34px);
  transform:
    translate(-50%, -50%)
    rotate(var(--slot-angle))
    translateX(clamp(52px, 3.2vw, 64px))
    rotate(var(--slot-counter-angle));
}

.radial-active-halo {
  width: clamp(36px, 2.45vw, 44px);
}

.radial-hub {
  width: clamp(62px, 4.6vw, 80px);
  padding: clamp(10px, 0.9vw, 15px);
}

.radial-tooltip {
  display: none;
}

@keyframes globeFallbackTurn {
  0% { transform: perspective(900px) rotateY(-12deg) rotateZ(0deg); }
  50% { transform: perspective(900px) rotateY(12deg) rotateZ(180deg); }
  100% { transform: perspective(900px) rotateY(-12deg) rotateZ(360deg); }
}

@media (max-width: 980px) {
  .deck-shell.has-radial-menu .slide:not(.slide-cover),
  .deck-shell.has-radial-menu .slide-problem .problem-ripple-content {
    padding-left: 152px;
  }

  .radial-menu {
    left: 8px;
    width: 146px;
    height: 146px;
  }

  .radial-item,
  .radial-active-halo {
    transform:
      translate(-50%, -50%)
      rotate(var(--slot-angle))
      translateX(45px)
      rotate(var(--slot-counter-angle));
  }
}

/* Revisão 5 — água monocromática e geometria contínua TAM → SAM → SOM */

.market-lottie {
  filter:
    brightness(0)
    saturate(100%)
    invert(83%)
    sepia(18%)
    saturate(858%)
    hue-rotate(113deg)
    brightness(91%)
    contrast(88%)
    drop-shadow(0 0 10px rgba(119, 209, 190, 0.24));
}

.tam-lottie-stage::after {
  background: linear-gradient(
    to bottom,
    rgba(119, 209, 190, 0),
    rgba(119, 209, 190, 0.44) 38%,
    rgba(119, 209, 190, 0.16)
  );
}

.sam-funnel-glass {
  z-index: 3;
  background: linear-gradient(180deg, rgba(169, 230, 214, 0.5), rgba(119, 209, 190, 0.16));
}

.sam-funnel-glass::after {
  background: linear-gradient(180deg, rgba(9, 10, 9, 0.08), rgba(9, 10, 9, 0.3));
}

.sam-liquid-mask {
  position: absolute;
  inset: 3px;
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(4% 0, 96% 0, 62% 70%, 59% 100%, 41% 100%, 38% 70%);
}

.sam-liquid-mask .sam-lottie {
  position: absolute;
  top: -58%;
  left: -430%;
  width: 960%;
  height: 220%;
  opacity: 0.82;
  clip-path: none;
  transform: none;
}

.sam-water-carrier {
  position: absolute;
  inset: 0;
  transform: translateY(74%);
}

.slide-market.is-active .sam-water-carrier {
  animation: samWaterRise 2.2s cubic-bezier(0.16, 1, 0.3, 1) both 0.58s;
}

.sam-water-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: samWaterLevel 4.8s ease-in-out infinite 2.8s;
}

.sam-water-fill,
.sam-water-level,
.sam-wave,
.sam-bubble {
  transform-box: fill-box;
  transform-origin: center;
}

.sam-wave {
  fill: url("#sam-water-gradient");
}

.sam-wave-back {
  opacity: 0.58;
}

.sam-wave-front {
  opacity: 0.9;
}

.sam-bubble {
  fill: rgba(242, 247, 245, 0.42);
  opacity: 0;
}

.slide-market.is-active .bubble-a { animation: samBubble 3.4s ease-in infinite 2.9s; }
.slide-market.is-active .bubble-b { animation: samBubble 3.9s ease-in infinite 3.6s; }
.slide-market.is-active .bubble-c { animation: samBubble 3.1s ease-in infinite 4.1s; }

.som-drop-stage {
  top: 64%;
  bottom: auto;
  left: 50%;
  width: 42%;
  height: 36%;
  transform: translateX(-50%);
}

.som-lottie {
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: none;
}

.som-reservoir {
  right: 16%;
  bottom: 0;
  left: 16%;
  z-index: 1;
  height: 31%;
  border-color: rgba(119, 209, 190, 0.46);
}

.som-reservoir i {
  background: #065cf5;
}

.som-stage-label {
  right: auto;
  bottom: 1%;
  left: calc(100% + 12px);
  transform: none;
}

@keyframes samWaterRise {
  0% { transform: translateY(74%); }
  72% { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

@keyframes samWaterLevel {
  0%, 100% { transform: translateY(8px); }
  50% { transform: translateY(-14px); }
}

@keyframes samBubble {
  0% { opacity: 0; transform: translateY(60px) scale(0.6); }
  18% { opacity: 0.48; }
  78% { opacity: 0.32; }
  100% { opacity: 0; transform: translateY(-180px) scale(1.15); }
}

/* ===== Timeline (Slide 2) ===== */
.slide-problem {
  background:
    radial-gradient(circle at 73% 47%, rgba(6, 92, 245, 0.08), transparent 38%),
    rgba(10, 20, 40, 0.35);
}
.problem-timeline {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.timeline-heading {
  text-align: center;
  margin-bottom: clamp(20px, 3vh, 36px);
}
.timeline-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 64px);
  font-stretch: condensed;
  font-weight: 670;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.timeline-track {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* Linha contínua central, no estilo "timeline" clássico do vídeo */
.timeline-line {
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  opacity: 0.5;
  transform: translateY(-50%);
}
.timeline-runner {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px var(--orange);
  transform: translateY(-50%);
  z-index: 2;
}
.timeline-card {
  position: absolute;
  width: clamp(200px, 17vw, 285px);
  padding: clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(6, 92, 245, 0.08);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.timeline-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.timeline-card.is-focus {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(6, 92, 245, 0.16);
  transform: translateX(-50%) translateY(-4px) scale(1.03);
}
.timeline-card.is-focus.card-bottom {
  transform: translateX(-50%) translateY(4px) scale(1.03);
}
.timeline-card.is-focus .tl-marker {
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--orange), 0 0 14px var(--orange);
}
/* Cards ficam dentro da área do track, alternando acima/abaixo da linha */
.timeline-card.card-top {
  top: 2%;
}
.timeline-card.card-bottom {
  bottom: 2%;
}
/* Marcador circular conectando o card à linha */
.timeline-card .tl-marker {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--blue);
  transform: translate(-50%, -50%);
}
.timeline-card.card-bottom .tl-marker {
  top: 0;
}
.timeline-card .tl-num {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.timeline-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 700;
  line-height: 1.1;
}
.timeline-card p {
  color: var(--muted);
  font-size: clamp(11px, 0.9vw, 15px);
  line-height: 1.4;
}
/* Planeta OriginKit à direita */
.timeline-globe {
  position: absolute;
  right: 1.5%;
  bottom: 4%;
  z-index: 1;
  width: clamp(180px, 17vw, 300px);
  aspect-ratio: 1;
  opacity: 0.9;
  pointer-events: none;
}
.timeline-globe .originkit-globe-mount {
  width: 100%;
  height: 100%;
}


/* ===== Metáfora do sintoma: busca falha (Slide 3) ===== */
.search-fail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 62%;
  padding: 10px 14px;
  border: 1px solid rgba(6, 92, 245, 0.3);
  border-radius: 999px;
  background: rgba(14, 28, 58, 0.7);
}
.search-bar i {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(6, 92, 245, 0.6);
  border-radius: 50%;
  position: relative;
}
.search-bar i::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: rgba(6, 92, 245, 0.6);
  transform: rotate(45deg);
}
.search-bar span {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(6, 92, 245, 0.2);
}
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.search-empty b {
  font-size: clamp(44px, 4.5vw, 72px);
  font-weight: 800;
  color: rgba(255, 91, 10, 0.9);
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 91, 10, 0.4);
}
.search-empty span {
  color: rgba(6, 92, 245, 0.6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.search-cursor {
  width: 2px;
  height: 22px;
  background: rgba(6, 92, 245, 0.6);
  animation: cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ===== Metáfora da causa-raiz: intenção quebrada (Slide 3) ===== */
.intent-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
}
.intent-node {
  display: grid;
  place-items: center;
  width: clamp(84px, 8vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.8vw, 13px);
  letter-spacing: 0.1em;
  text-align: center;
}
.intent-node span { padding: 0 8px; }
.intent-a {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: rgba(6, 92, 245, 0.08);
  box-shadow: 0 0 30px rgba(6, 92, 245, 0.18);
  animation: intentPulse 3s ease-in-out infinite;
}
.intent-b {
  border: 2px solid var(--orange);
  color: var(--orange);
  background: rgba(255, 91, 10, 0.08);
  box-shadow: 0 0 30px rgba(255, 91, 10, 0.18);
  animation: intentPulse 3s ease-in-out infinite 0.4s;
}
.intent-connector {
  position: relative;
  width: clamp(40px, 5vw, 80px);
  height: 2px;
  background: var(--line);
}
.intent-connector i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: translateY(-50%);
  animation: intentFlow 2.2s ease-in-out infinite;
}
.intent-break {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--orange);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.intent-break::before,
.intent-break::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--orange);
}
.intent-break::before { transform: translate(-50%, -50%) rotate(45deg); }
.intent-break::after { transform: translate(-50%, -50%) rotate(-45deg); }
@keyframes intentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes intentFlow {
  0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0.4; }
}

/* ===== Metáfora ANTES: busca falha (Slide 6) ===== */
.before-search {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.before-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 60%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.before-searchbar i {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: relative;
}
.before-searchbar i::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}
.before-searchbar span {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.before-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.before-zero b {
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 800;
  color: rgba(255, 91, 10, 0.85);
  line-height: 1;
}
.before-zero span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
}

/* ===== Metáfora DEPOIS: recuperação (Slide 6) ===== */
.after-recovery {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
}
.after-node {
  display: grid;
  place-items: center;
  width: clamp(70px, 6.5vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.7vw, 11px);
  letter-spacing: 0.08em;
  text-align: center;
}
.after-node span { padding: 0 6px; }
.after-node-search {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: rgba(6, 92, 245, 0.1);
  box-shadow: 0 0 24px rgba(6, 92, 245, 0.2);
  animation: afterNodePulse 3s ease-in-out infinite;
}
.after-node-product {
  border: 2px solid var(--orange);
  color: var(--orange);
  background: rgba(255, 91, 10, 0.1);
  box-shadow: 0 0 24px rgba(255, 91, 10, 0.2);
  animation: afterNodePulse 3s ease-in-out infinite 0.3s;
}
.after-node-cart {
  border: 2px solid var(--green);
  color: var(--green);
  background: rgba(22, 163, 74, 0.1);
  box-shadow: 0 0 24px rgba(22, 163, 74, 0.2);
  animation: afterNodePulse 3s ease-in-out infinite 0.6s;
}
.after-connector {
  position: relative;
  width: clamp(30px, 3.5vw, 56px);
  height: 2px;
  background: var(--line);
}
.after-connector i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--orange), var(--green));
  transform: translateY(-50%);
  animation: afterFlow 2.4s ease-in-out infinite;
}
.after-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 9px rgba(255, 91, 10, 0.1), 0 0 32px var(--orange);
  animation: afterTravel 2.4s ease-in-out infinite;
}
@keyframes afterNodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes afterFlow {
  0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0.4; }
}
@keyframes afterTravel {
  0% { left: 8%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}

/* ===== Metáfora de recuperação (Slide 7, card 3) ===== */
.recovery-metaphor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 40px);
}
.recovery-fail,
.recovery-save {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(90px, 8vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.recovery-fail {
  border: 2px solid rgba(255, 91, 10, 0.5);
  background: rgba(255, 91, 10, 0.08);
  box-shadow: 0 0 30px rgba(255, 91, 10, 0.15);
  animation: recoveryShake 3.5s ease-in-out infinite;
}
.recovery-save {
  border: 2px solid var(--green);
  background: rgba(22, 163, 74, 0.1);
  box-shadow: 0 0 30px rgba(22, 163, 74, 0.2);
  animation: recoveryGlow 3.5s ease-in-out infinite;
}
.recovery-fail span,
.recovery-save span {
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.7vw, 11px);
  letter-spacing: 0.1em;
}
.recovery-fail span { color: var(--orange); }
.recovery-save span { color: var(--green); }
.recovery-fail b {
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}
.recovery-save b {
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.recovery-fail em,
.recovery-save em {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.6vw, 10px);
  letter-spacing: 0.14em;
  font-style: normal;
}
.recovery-fail em { color: var(--muted); }
.recovery-save em { color: var(--muted); }
.recovery-arrow {
  position: relative;
  width: clamp(30px, 3.5vw, 60px);
  height: 2px;
  background: var(--line);
}
.recovery-arrow i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--green));
  transform: translateY(-50%);
  animation: recoveryFlow 2.4s ease-in-out infinite;
}
.recovery-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes recoveryShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@keyframes recoveryGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(22, 163, 74, 0.2); }
  50% { box-shadow: 0 0 50px rgba(22, 163, 74, 0.4); }
}
@keyframes recoveryFlow {
  0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0.4; }
}

/* ===== Planos por requisição (Slide 9) ===== */
.pricing-plans {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.business-economics {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  max-width: 1200px;
  margin: clamp(22px, 3vh, 36px) auto 0;
}
.eco-stat {
  position: relative;
  padding: clamp(14px, 1.4vw, 20px);
  border: 1px solid var(--line-soft);
  border-radius: clamp(12px, 1.2vw, 18px);
  background: linear-gradient(160deg, rgba(6, 92, 245, 0.05), transparent 60%), var(--surface);
  opacity: 0;
  transform: translateY(20px);
}
.slide-business.is-active .eco-stat {
  animation: businessCardIn 0.8s var(--ease-out) forwards;
}
.slide-business.is-active .eco-stat:nth-child(1) { animation-delay: 0.7s; }
.slide-business.is-active .eco-stat:nth-child(2) { animation-delay: 0.85s; }
.slide-business.is-active .eco-stat:nth-child(3) { animation-delay: 1s; }
.slide-business.is-active .eco-stat:nth-child(4) { animation-delay: 1.15s; }
.eco-stat span {
  display: block;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.62vw, 12px);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.eco-stat b {
  display: block;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.eco-stat p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(10px, 0.75vw, 13px);
  line-height: 1.3;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 34px);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.5vw, 24px);
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(6, 92, 245, 0.08);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(6, 92, 245, 0.14);
}
.plan-card.is-featured {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 24px 60px rgba(255, 91, 10, 0.16);
  transform: scale(1.03);
}
.plan-card.is-featured::before {
  content: "MAIS POPULAR";
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.plan-card header span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 13px);
  letter-spacing: 0.14em;
}
.plan-card header b {
  display: block;
  margin-top: 4px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 700;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: clamp(18px, 2vh, 28px) 0 6px;
}
.plan-price strong {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.plan-price em {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 13px);
  font-style: normal;
}
.plan-usage {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(16px, 2vh, 24px);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink-2);
  box-sizing: border-box;
  min-width: 0;
}
.plan-usage b {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 700;
}
.plan-usage span {
  color: var(--muted);
  font-size: clamp(10px, 0.75vw, 13px);
  overflow-wrap: break-word;
}
.plan-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-card li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  color: var(--paper-soft);
  font-size: clamp(11px, 0.85vw, 15px);
  line-height: 1.35;
}
.plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ===== Card QR do time (Slide 13) ===== */
.team-card-shell.qr-card {
  display: grid;
  place-items: center;
}
.team-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vh, 22px);
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.5vw, 24px);
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(6, 92, 245, 0.1);
}
.team-qr-frame {
  width: clamp(150px, 12vw, 200px);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 28, 58, 0.9);
  box-shadow: 0 0 0 1px var(--line), 0 0 30px rgba(255, 91, 10, 0.12);
}
.team-qr-frame img {
  width: 100%;
  height: 100%;
  display: block;
}
.team-qr-copy {
  text-align: center;
}
.team-qr-copy h3 {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.team-qr-copy p {
  color: var(--muted);
  font-size: clamp(11px, 0.85vw, 15px);
  line-height: 1.4;
}

/* ===== Overrides finais de glassmorphism (slides 2–9) =====
   Garantem que o efeito vidro vence o cascade mesmo contra regras
   específicas de cada componente definidas antes neste arquivo. */
.timeline-card,
.metaphor-card,
.sf-node,
.demo-frame,
.demo-copy,
.coverflow-card,
.plan-card,
.eco-stat,
.team-card,
.gtm-engine,
.roadmap-engine {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.metaphor-card { background-color: rgba(14, 28, 58, 0.5); }
.symptom-card { background-color: rgba(18, 38, 74, 0.6); }
.sf-node { background-color: rgba(14, 28, 58, 0.62); }
.coverflow-card { background-color: rgba(14, 28, 58, 0.55); }
.plan-card { background-color: rgba(14, 28, 58, 0.6); }
.eco-stat { background-color: rgba(14, 28, 58, 0.62); }
.team-card { background-color: rgba(14, 28, 58, 0.5); }
.timeline-card { background-color: rgba(14, 28, 58, 0.55); }
.demo-frame { background-color: rgba(14, 28, 58, 0.45); }
.demo-copy {
  background-color: rgba(14, 28, 58, 0.45);
  padding: clamp(28px, 2.8vw, 48px);
  border-radius: clamp(15px, 1.4vw, 24px);
}
.gtm-engine { background-color: rgba(14, 28, 58, 0.55); }
.roadmap-engine { background-color: rgba(14, 28, 58, 0.55); }