/* ==========================================================================
   SMF × Flash Empresarial — Proposta CRM + IA (formato slide/deck)
   Direção visual: dark premium (Linear/Stripe/Vercel) — azul SMF (#2A5EEF)
   como ACENTO único sobre fundo navy quase-preto, tipografia consolidada,
   profundidade sutil (borda translúcida + sombra difusa), respiro generoso.
   ========================================================================== */

:root{
  /* Cor */
  --bg: #05070C;
  --bg-2: #080B13;
  --panel: #0B1119;
  --panel-2: #0E141F;
  --border: rgba(148, 163, 196, 0.12);
  --border-active: rgba(58, 110, 240, 0.45);
  --blue: #2A5EEF;
  --blue-light: #5B85F5;
  --blue-soft: rgba(42, 94, 239, 0.1);
  --blue-glow: rgba(42, 94, 239, 0.35);
  --good: #34D399;
  --text-1: #F3F5FA;
  --text-2: #9AA6C3;
  --text-3: #5D6B8C;
  --white: #ffffff;

  /* Tipografia — escala consolidada (poucos tamanhos, uso consistente) */
  --font-head: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-display: clamp(2.3rem, 5vw, 3.9rem);   /* hero h1 */
  --fs-h2: clamp(1.85rem, 3vw, 2.6rem);        /* título de cada slide */
  --fs-h3: 1.14rem;                            /* título de card */
  --fs-body-lg: 1.08rem;                       /* subheadline de slide */
  --fs-body: 1rem;                          /* corpo padrão */
  --fs-small: 0.94rem;                         /* corpo secundário/listas densas */
  --fs-label: 0.84rem;                         /* rótulo mono uppercase */
  --fs-micro: 0.82rem;                         /* menor tamanho permitido no deck */

  /* Forma */
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Profundidade */
  --shadow-card: 0 24px 60px -24px rgba(0,0,0,.6);
  --shadow-card-hover: 0 30px 70px -22px rgba(0,0,0,.65);
  --shadow-cta: 0 14px 34px -10px rgba(42,94,239,.45);
}

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

html, body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}
.container--narrow{ max-width:740px; }

/* ---------- Top progress line ---------- */
.topline{
  position:fixed; top:0; left:0; height:2px; z-index:70;
  width:10%;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Brandbar ---------- */
.brandbar{
  position:fixed; top:26px; left:28px; z-index:60;
  display:flex; align-items:center; gap:10px;
}
.brandbar__logo{ height:40px; width:auto; display:block; }
.brandbar__text{ font-size:.9rem; letter-spacing:.01em; color:var(--text-1); white-space:nowrap; }
.brandbar__text strong{ font-weight:700; }
.brandbar__text em{ font-style:normal; color:var(--text-3); margin-left:6px; letter-spacing:.1em; font-size:var(--fs-micro); }

/* ---------- Confidential tag ---------- */
.confidential-tag{
  position:fixed; top:24px; right:28px; z-index:60;
  font-family:var(--font-mono); font-size:var(--fs-micro); line-height:1.55; text-align:right;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}

/* ---------- Deck navigation ---------- */
.deck-nav{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:16px;
}
.deck-nav__btn{
  width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:rgba(11,17,25,.7); backdrop-filter:blur(6px); color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease, transform .3s ease;
}
.deck-nav__btn svg{ width:16px; height:16px; }
.deck-nav__btn:hover{ border-color:var(--border-active); color:var(--text-1); transform:translateY(-1px); }
.deck-nav__btn--primary{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--shadow-cta); }
.deck-nav__btn--primary:hover{ background:var(--blue-light); }
.deck-nav__btn:disabled{ opacity:.3; cursor:default; box-shadow:none; transform:none; }
.deck-nav__btn:disabled:hover{ border-color:var(--border); color:var(--text-2); }
.deck-counter{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; color:var(--text-3); min-width:48px; text-align:center;
}

/* ==========================================================================
   Deck (scroll-snap por seção)
   ========================================================================== */
.deck{
  height:100vh; height:100svh;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.deck::-webkit-scrollbar{ display:none; }

.slide{
  min-height:100vh; min-height:100svh;
  width:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:112px 0 122px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  background:
    radial-gradient(120% 100% at 12% -10%, rgba(42,94,239,.05) 0%, transparent 55%),
    var(--bg);
}
.slide:nth-child(even){
  background:
    radial-gradient(120% 100% at 88% -10%, rgba(42,94,239,.05) 0%, transparent 55%),
    var(--bg-2);
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:18px; font-weight:500;
}
h1, h2, h3{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  color:var(--white); line-height:1.1;
}
h2{ font-size:var(--fs-h2); letter-spacing:-.005em; margin-bottom:18px; }
h3{ font-size:var(--fs-h3); margin-bottom:12px; text-transform:none; letter-spacing:0; font-weight:600; }
.hl{ color:var(--blue-light); }

.slide__sub{
  font-size:var(--fs-body-lg); line-height:1.55; color:var(--text-2); max-width:620px; margin-bottom:10px;
}
.slide__sub--center{ margin-left:auto; margin-right:auto; text-align:center; max-width:580px; }
.slide__footnote{
  position:static; display:block; text-align:center; margin:22px auto 0;
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}

/* ==========================================================================
   SLIDE 1 — HERO
   ========================================================================== */
.slide--hero{ overflow:hidden; }
.slide__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46% 60% at 82% 6%, rgba(42,94,239,.24) 0%, transparent 62%),
    radial-gradient(38% 40% at 4% 98%, rgba(42,94,239,.1) 0%, transparent 65%),
    linear-gradient(180deg, #070B14 0%, #05070C 55%, #04050A 100%);
}
.slide--hero .container{ position:relative; z-index:1; }
.slide--hero h1{
  font-size:var(--fs-display);
  letter-spacing:-.01em;
  max-width:900px;
  margin-bottom:26px;
}

/* word reveal */
.word-reveal > span{ display:inline-block; }
.word-reveal.fx-in > span{
  opacity:0; transform:translateY(.4em); filter:blur(6px);
  transition:opacity .7s, transform .7s, filter .7s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
.word-reveal.fx-in.is-visible > span{ opacity:1; transform:none; filter:none; }
.word-reveal.fx-in.is-visible > span:nth-child(1){ transition-delay:.02s; }
.word-reveal.fx-in.is-visible > span:nth-child(2){ transition-delay:.07s; }
.word-reveal.fx-in.is-visible > span:nth-child(3){ transition-delay:.12s; }
.word-reveal.fx-in.is-visible > span:nth-child(4){ transition-delay:.17s; }
.word-reveal.fx-in.is-visible > span:nth-child(5){ transition-delay:.22s; }
.word-reveal.fx-in.is-visible > span:nth-child(6){ transition-delay:.27s; }
.word-reveal.fx-in.is-visible > span:nth-child(n+7){ transition-delay:.32s; }

/* ---------- Flow diagram (slide 1) ---------- */
.flow{ width:100%; margin-top:40px; }
.flow__label{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:18px;
}
.flow__steps{
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 22px;
  box-shadow:var(--shadow-card);
}
.flow__step{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  flex:1 1 0; min-width:92px; padding:4px;
}
.flow__num{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-2);
}
.flow__step--ai .flow__num{ background:var(--blue); border-color:var(--blue); color:#fff; }
.flow__name{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-2); line-height:1.5;
}
.flow__step--ai .flow__name{ color:var(--text-1); }
.flow__name em{ font-style:normal; color:var(--blue-light); }
.flow__line{ flex:0 0 auto; width:26px; height:1px; background:var(--border); margin:-18px 2px 0; align-self:center; }

/* ==========================================================================
   Infobox (slide 2)
   ========================================================================== */
.infobox{
  display:flex; align-items:center; gap:14px; margin-top:28px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 20px; color:var(--text-2); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.02em; max-width:fit-content;
}
.infobox svg{ width:18px; height:18px; color:var(--blue-light); flex-shrink:0; }

/* ==========================================================================
   Feature cards (slide 3)
   ========================================================================== */
.feats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:16px;
}
.feat{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; width:100%;
  box-shadow:var(--shadow-card);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .4s ease;
}
.feat:hover{ transform:translateY(-4px); border-color:var(--border-active); box-shadow:var(--shadow-card-hover); }
.feat__icon{
  width:38px; height:38px; border-radius:var(--radius-sm); background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--blue-light);
}
.feat__icon svg{ width:19px; height:19px; stroke-width:1.5; }
.feat h3{ margin-bottom:10px; }
.feat p{ color:var(--text-2); font-size:var(--fs-small); line-height:1.55; }

/* ---------- Comparativo Chatbot x I.A. (slide 3) ---------- */
.compare{
  margin-top:26px; display:flex; align-items:center; gap:24px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 26px;
  box-shadow:var(--shadow-card);
}
.compare__side{ flex:1; min-width:0; }
.compare__tag{
  display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:7px;
}
.compare__side--ai .compare__tag{ color:var(--blue-light); }
.compare p{ font-size:var(--fs-small); color:var(--text-1); line-height:1.5; }
.compare__vs{
  flex:0 0 auto; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em; color:var(--text-3);
}

/* ==========================================================================
   Mockups genéricos (slide 4, 6)
   ========================================================================== */
.mock{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; margin-top:12px;
  box-shadow:var(--shadow-card);
}
.mock__bar{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.03em; color:var(--text-2);
}
.mock__dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-light); flex-shrink:0; }

/* Kanban (slide 4) */
.kanban{
  display:flex; gap:16px; padding:22px; overflow-x:auto;
}
.kcol{
  flex:0 0 152px; display:flex; flex-direction:column; gap:9px;
}
.kcol__head{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:5px; white-space:nowrap;
}
.kcol--ai .kcol__head{ color:var(--blue-light); }
.kcol__head em{ font-style:normal; }
.kcard{
  height:32px; border-radius:7px; background:var(--panel-2); border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.kcard::before{
  content:""; position:absolute; left:10px; right:10px; top:50%; height:5px; transform:translateY(-50%);
  border-radius:3px; background:rgba(154,166,195,.25);
}
.kcol--ai .kcard::before{ background:rgba(91,133,245,.5); }

/* Dashboard (slide 6) */
.dash{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--border);
}
.dtile{
  background:var(--panel); padding:28px 24px; display:flex; flex-direction:column; gap:14px;
}
.dtile--ai{ background:var(--panel-2); }
.dtile__label{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.03em; text-transform:uppercase; color:var(--text-2);
}
.dtile--ai .dtile__label{ color:var(--blue-light); }
.dtile__value{
  font-family:var(--font-head); font-weight:600; font-size:1.9rem; color:var(--white); line-height:1;
}
.dtile__value--good{ color:var(--good); }

/* ==========================================================================
   Cadência (slide 5)
   ========================================================================== */
.cadence{ margin-top:36px; }
.cadence__row{
  display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:26px;
  position:relative; padding:0 4px;
}
.cadence__row::before{
  content:""; position:absolute; top:15px; left:24px; right:24px; height:1px; background:var(--border); z-index:0;
}
.cstep{ display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; z-index:1; flex:1; }
.cstep__num{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-2);
}
.cstep__name{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.03em; text-transform:uppercase; color:var(--text-2); text-align:center; }
.cadence__bars{ display:flex; gap:14px; }
.cbar{
  flex:1; padding:20px 18px; text-align:center; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.03em; color:var(--text-2);
  border-left:3px solid transparent;
}
.cbar em{ display:block; font-style:normal; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:var(--fs-small); color:var(--text-3); margin-top:8px; }
.cbar--ai{ background:var(--blue-soft); border-color:var(--border); border-left-color:var(--blue); color:var(--blue-light); }
.cbar--ai em{ color:var(--text-2); }

/* ==========================================================================
   Fases (slide 7)
   ========================================================================== */
.phases{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:16px; }
.phase{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 22px;
  box-shadow:var(--shadow-card);
}
.phase__tag{
  display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em; color:var(--blue-light);
  margin-bottom:10px;
}
.phase h3{ font-size:1.02rem; margin-bottom:16px; }
.phase li{
  position:relative; padding-left:16px; font-size:var(--fs-small); color:var(--text-2); margin-bottom:10px; line-height:1.5;
}
.phase li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--blue-light); }

/* ==========================================================================
   Responsabilidades (slide 8)
   ========================================================================== */
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; }
.role{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-card); }
.role__tag{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:7px 15px; margin-bottom:20px;
}
.role__tag--smf{ background:var(--blue-soft); color:var(--blue-light); border:1px solid var(--border-active); }
.role__tag--flash{ background:rgba(255,255,255,.04); color:var(--text-2); border:1px solid var(--border); }
.role li{ position:relative; padding:11px 0 11px 22px; font-size:var(--fs-body); color:var(--text-1); border-top:1px solid var(--border); }
.role li:first-child{ border-top:none; padding-top:0; }
.role li::before{ content:"•"; position:absolute; left:0; top:11px; color:var(--text-3); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  padding:14px 22px; white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before{ transform:translateX(120%); }
.btn--block{ width:100%; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-cta); }
.btn--primary:hover{ background:var(--blue-light); transform:translateY(-1px); }
.btn--outline{ background:transparent; color:var(--text-1); border-color:var(--border); }
.btn--outline:hover{ border-color:var(--border-active); background:rgba(255,255,255,.02); transform:translateY(-1px); }

/* ==========================================================================
   Pricing (slide 9)
   ========================================================================== */
.pricing__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; margin-top:16px; }
.plan{
  position:relative; width:100%;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .4s ease;
}
.plan:hover{ transform:translateY(-4px); border-color:var(--border-active); box-shadow:var(--shadow-card-hover); }
.plan--featured{
  background:linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
  border-color:var(--border-active);
  box-shadow:0 30px 70px -20px rgba(42,94,239,.22);
}
.plan__ribbon{
  position:absolute; top:-13px; left:28px;
  background:var(--bg-2); color:var(--blue-light); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.08em; text-transform:uppercase; padding:5px 13px; border-radius:var(--radius-pill);
  border:1px solid var(--border-active); white-space:nowrap;
}
.plan__head{ margin-bottom:22px; }
.plan__tag{
  display:block; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:12px;
}
.plan--featured .plan__tag{ color:var(--blue-light); }
.plan__price{ font-family:var(--font-head); font-weight:600; font-size:2.15rem; color:var(--white); line-height:1; }
.plan__currency{ font-size:1.1rem; vertical-align:top; margin-right:2px; font-weight:500; }
.plan__period{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:400; color:var(--text-3); text-transform:none; }
.plan__list{ flex:1; margin-bottom:24px; }
.plan__list li{
  position:relative; padding:9px 0 9px 26px; font-size:var(--fs-small); color:var(--text-1); border-top:1px solid var(--border);
  line-height:1.45;
}
.plan__list li:first-child{ border-top:none; padding-top:0; }
.plan__list li::before{
  content:"✓"; position:absolute; left:0; top:9px; color:var(--blue-light); font-weight:400; font-size:.85em;
}
.plan__list li.is-muted{ color:var(--text-3); }
.plan__list li.is-muted::before{ content:"-"; color:var(--text-3); }

/* ==========================================================================
   Implantação (slide 10)
   ========================================================================== */
.setup__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:16px; }
.setup__card{
  width:100%; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 24px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);
}
.setup__level{
  display:inline-block; align-self:flex-start;
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-light); border:1px solid var(--border-active); border-radius:var(--radius-pill);
  padding:6px 13px; margin-bottom:16px;
}
.setup__card h3{ font-size:1.02rem; margin-bottom:12px; }
.setup__card p{ color:var(--text-2); font-size:var(--fs-small); line-height:1.55; flex:1; margin-bottom:18px; }
.setup__price{
  font-family:var(--font-head); font-weight:600; font-size:1.3rem; color:var(--white);
  border-top:1px solid var(--border); padding-top:16px;
}
.setup__price span{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-small); color:var(--text-3); text-transform:none; margin-left:7px; }
.setup__legend{ margin-top:22px; color:var(--text-3); font-size:var(--fs-small); max-width:760px; }

/* ---------- Add-ons (slide 10) — informativo, sem CTA ---------- */
.addons{ margin-top:26px; padding-top:26px; border-top:1px solid var(--border); }
.addons__tag{
  display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:14px;
}
.addons__grid{ display:flex; gap:14px; flex-wrap:wrap; }
.addon{
  flex:1 1 220px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.addon__name{ font-size:var(--fs-small); color:var(--text-2); line-height:1.4; }
.addon__name small{ display:block; font-size:var(--fs-micro); color:var(--text-3); margin-top:3px; }
.addon__price{
  font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--white); white-space:nowrap;
}
.addon__price em{
  font-family:var(--font-body); font-style:normal; font-weight:400; font-size:var(--fs-micro); color:var(--text-3);
  margin-left:4px; text-transform:none;
}

/* ==========================================================================
   Scroll reveal — default-visible, animation opt-in (movimento contido)
   ========================================================================== */
.reveal.fx-in{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.fx-in.is-visible{ opacity:1; transform:translateY(0); }
.reveal.fx-in.delay-1{ transition-delay:.05s; }
.reveal.fx-in.delay-2{ transition-delay:.11s; }
.reveal.fx-in.delay-3{ transition-delay:.17s; }
.reveal.fx-in.delay-4{ transition-delay:.23s; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1024px){
  .feats__grid{ grid-template-columns:repeat(2, 1fr); }
  .phases{ grid-template-columns:repeat(2, 1fr); }
  .dash{ grid-template-columns:repeat(2, 1fr); }
  .pricing__grid{ gap:16px; }
  .plan{ padding:24px 18px; }
}

@media (max-width:900px){
  /* Defesa em profundidade: mobile sempre visível, independente de JS */
  .reveal, .reveal.fx-in{ opacity:1 !important; transform:none !important; filter:none !important; }
  .word-reveal > span, .word-reveal.fx-in > span{ opacity:1 !important; transform:none !important; filter:none !important; }
}

@media (max-width:820px){
  body{ overflow:auto; }
  .deck{ height:auto; overflow:visible; scroll-snap-type:none; }
  .slide{ min-height:auto; padding:118px 0 56px; scroll-snap-align:none; }
  .topline, .deck-nav{ display:none; }
  .confidential-tag{ display:none; }

  .feats__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .feat{ padding:24px 20px; }
  .phases{ grid-template-columns:1fr; }
  .roles{ grid-template-columns:1fr; }
  .dash{ grid-template-columns:1fr 1fr; }
  .pricing__grid{ grid-template-columns:1fr; }
  .plan{ padding:26px 22px; }
  .plan--featured{ order:-1; }
  .setup__grid{ grid-template-columns:1fr; }
  .cadence__bars{ flex-direction:column; }
  .flow__steps{ flex-direction:column; align-items:stretch; padding:20px 18px; }
  .flow__step{ flex-direction:row; justify-content:flex-start; text-align:left; padding:9px 4px; }
  .flow__line{ width:1px; height:16px; margin:0 0 0 15px; align-self:flex-start; }
  .brandbar{ top:18px; left:20px; }
  .slide__footnote{ position:static; margin-top:26px; text-align:left; }
  .compare{ flex-direction:column; align-items:stretch; gap:14px; padding:20px 22px; }
  .addon{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width:540px){
  .feats__grid{ grid-template-columns:1fr; }
  .dash{ grid-template-columns:1fr; }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal, .word-reveal > span{ opacity:1; transform:none; filter:none; }
  .deck{ scroll-behavior:auto; }
}
:focus-visible{ outline:2px solid var(--blue-light); outline-offset:3px; border-radius:4px; }

/* Slide 6 — print real do painel */
.mock--img{ width:fit-content; max-width:100%; margin:0 auto; }
.mock--img img{ display:block; width:auto; max-width:100%; height:auto; max-height:calc(100vh - 450px); min-height:180px; border-radius:0 0 var(--radius-md) var(--radius-md); }
@media (max-width:820px){ .mock--img img{ max-height:none; width:100%; } }

/* ==========================================================================
   Port dos desenhos da referência (funil, kanban, cadência, fundos) — azul SMF
   ========================================================================== */
.slide{ position:relative; overflow:hidden; }
.slide > .container{ position:relative; z-index:3; }

.slide__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; pointer-events:none; filter:saturate(.6); }
.slide__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(11,17,25,.28), rgba(5,7,12,.9) 66%, rgba(5,7,12,.98)); }
.slide::after{ content:''; position:absolute; inset:0; z-index:2; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.slide__grid{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%, rgba(42,94,239,.14), transparent 60%); }
.slide__grid::after{ content:''; position:absolute; left:-25%; right:-25%; bottom:-10%; height:75%;
  background-image:linear-gradient(rgba(42,94,239,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(42,94,239,.16) 1px, transparent 1px);
  background-size:44px 44px; transform:perspective(560px) rotateX(66deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 55%); mask-image:linear-gradient(180deg, transparent, #000 55%); }

/* hero centralizado como na referência */
.slide--hero .container{ text-align:center; }
.slide--hero h1{ margin-left:auto; margin-right:auto; }
.slide--hero .slide__sub{ margin-left:auto; margin-right:auto; text-align:center; max-width:720px; }

/* funil (bow-tie) */
.funnel{ width:100%; max-width:760px; margin:26px auto 0; }
.funnel svg{ display:block; width:auto; max-width:100%; height:auto; max-height:calc(100vh - 600px); min-height:150px; margin:0 auto; overflow:visible; }
.fseg{ fill:rgba(255,255,255,.035); stroke:var(--border); stroke-width:1; }
.fseg--core{ fill:rgba(42,94,239,.12); stroke:var(--border-active); }
.fline{ stroke:var(--blue); stroke-width:2; }
.fnode{ fill:var(--blue-light); filter:drop-shadow(0 0 10px var(--blue-glow)); }
.flabel{ fill:var(--text-2); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; }
.faxis{ fill:var(--text-3); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }

/* barra de janela (kanban e painel) */
.mock__dots{ display:inline-flex; gap:6px; }
.mock__dots i{ width:9px; height:9px; border-radius:50%; background:#2A3345; display:block; }
.mock__title{ margin-left:6px; font-family:var(--font-mono); font-size:var(--fs-label); color:var(--text-2); display:inline-flex; align-items:center; gap:7px; }
.mock__title b{ color:var(--blue-light); font-weight:600; }
.mock__pill{ margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-2); border:1px solid var(--border); border-radius:6px; padding:4px 9px; }
.mock--kanban{ max-width:1020px; margin-left:auto; margin-right:auto; }

/* kanban */
.kb{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:12px; }
.kb__col{ background:rgba(255,255,255,.018); border:1px solid var(--border); border-radius:8px; padding:8px 7px; }
.kb__col--ai{ border-color:var(--border-active); background:rgba(42,94,239,.06); }
.kb__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }
.kb__name{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kb__name em{ font-style:normal; color:var(--blue-light); }
.kb__count{ font-family:var(--font-mono); font-size:9.5px; color:#fff; background:var(--blue); border-radius:20px; padding:1px 6px; font-weight:700; flex-shrink:0; }
.kb__card{ background:#111827; border:1px solid var(--border); border-radius:6px; padding:7px 8px; margin-bottom:6px; }
.kb__card:last-child{ margin-bottom:0; }
.kb__row{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.kb__av{ width:15px; height:15px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#5B85F5,#2A5EEF); }
.kb__av--o{ background:linear-gradient(135deg,#9aa4ae,#5d666f); }
.kb__av--t{ background:linear-gradient(135deg,#c4ccd4,#8d959d); }
.kb__ln{ height:6px; border-radius:4px; background:rgba(255,255,255,.14); width:60%; }
.kb__tag{ height:4px; border-radius:3px; margin-top:4px; }
.kb__tag--g{ background:rgba(42,94,239,.7); width:70%; }
.kb__tag--r{ background:rgba(255,255,255,.28); width:45%; }
.kb__tag--a{ background:rgba(42,94,239,.32); width:55%; }
.kb__tag--m{ background:rgba(255,255,255,.12); width:80%; }

/* cadência */
.cad{ width:100%; max-width:1000px; margin:30px auto 0; }
.cad__track{ display:flex; align-items:flex-start; position:relative; }
.cad__line{ position:absolute; top:15px; left:6%; right:6%; height:2px; z-index:0;
  background:linear-gradient(90deg,#1E45C7,var(--blue),var(--blue-light)); }
.cad__step{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.cad__dot{ width:30px; height:30px; border-radius:50%; background:var(--bg-2); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--blue-light);
  box-shadow:0 0 16px var(--blue-glow); }
.cad__name{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); }
.cad__day{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-1); background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:4px; padding:2px 6px; }
.cad__owner{ display:flex; max-width:1000px; margin:26px auto 0; border-radius:8px; overflow:hidden; font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.cad__owner > div{ padding:12px 11px; text-align:center; }
.cad__owner--ai{ flex:.6; background:linear-gradient(90deg,#1E45C7,var(--blue)); color:#fff; }
.cad__owner--team{ flex:.4; background:rgba(255,255,255,.07); color:var(--text-1); border:1px solid var(--border); border-left:none; }
.cad__lbl{ display:block; font-size:10px; opacity:.85; letter-spacing:.1em; margin-top:3px; font-weight:500; }

/* fases: linha de topo em gradiente como a referência */
.phase{ position:relative; }
.phase::before{ content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#1E45C7,var(--blue),var(--blue-light)); }

@media (max-width:820px){
  .kb{ grid-template-columns:repeat(3,1fr); }
  .cad__track{ flex-wrap:wrap; gap:18px 0; }
  .cad__line{ display:none; }
  .cad__step{ flex:1 1 33%; }
  .cad__owner{ flex-direction:column; }
  .cad__owner--ai, .cad__owner--team{ flex:none; }
  .cad__owner--team{ border-left:1px solid var(--border); border-top:none; }
  .funnel svg{ max-height:none; width:100%; }
}
@media (max-width:540px){ .kb{ grid-template-columns:repeat(2,1fr); } }
/* títulos centralizados nos slides de mockup, como na referência */
@media (min-width:821px){
  #slide-4 .container, #slide-5 .container, #slide-6 .container, #slide-7 .container{ text-align:center; }
  #slide-7 .phase{ text-align:left; }
}
/* slide 10 compacto em telas baixas (notebook 768px) */
@media (min-width:821px) and (max-height:830px){
  #slide-10{ padding-top:64px; padding-bottom:64px; }
  #slide-10 .eyebrow{ margin-bottom:8px; }
  #slide-10 h2{ margin-bottom:10px; font-size:clamp(1.5rem,2.4vw,2rem); }
  #slide-10 .setup__grid{ margin-top:10px; gap:10px; }
  #slide-10 .setup__card{ padding:14px 16px; }
  #slide-10 .setup__card h3{ margin-bottom:6px; }
  #slide-10 .setup__card p{ margin-bottom:8px; }
  #slide-10 .setup__legend{ margin-top:10px; }
  #slide-10 .addons{ margin-top:12px; padding:12px 14px; }
  #slide-10 .slide__footnote{ margin-top:12px; }
}
/* slide 9 (planos) compacto em telas baixas */
@media (min-width:821px) and (max-height:830px){
  #slide-9{ padding-top:64px; padding-bottom:64px; }
  #slide-9 .eyebrow{ margin-bottom:8px; }
  #slide-9 h2{ margin-bottom:8px; font-size:clamp(1.5rem,2.4vw,2rem); }
  #slide-9 .slide__sub{ margin-bottom:6px; font-size:var(--fs-body); }
  #slide-9 .pricing__grid{ margin-top:10px; gap:14px; }
  #slide-9 .plan{ padding:18px 20px; }
  #slide-9 .plan__head{ margin-bottom:12px; }
  #slide-9 .plan__price{ font-size:1.8rem; }
  #slide-9 .plan__list{ margin-bottom:14px; }
  #slide-9 .plan__list li{ padding:6px 0 6px 24px; }
  #slide-9 .btn{ padding-top:10px; padding-bottom:10px; }
}

@media (max-width:540px){ .brandbar__logo{ height:30px; } }