/* ===================================================
   MIRA FUNNEL v3 — DESIGN SYSTEM (Manychat-level)
   Tokens → Base → Components → Sections
   =================================================== */

/* =========================================
   1. TOKENS
   ========================================= */

:root {
  /* Cores de fundo */
  --bg:        #F9F9F7;     /* off-white quente — corpo da página */
  --bg-alt:    #F0F0EB;     /* alternativo — seções zebradas */
  --bg-dark:   #0B0B0A;     /* seções escuras dramáticas */
  --bg-card:   #FFFFFF;     /* cards em fundo claro */
  --bg-dm:     #111110;     /* dark mid - seções de contraste */

  /* Cor de marca */
  --brand:     #b8ff57;
  --brand-dim: #9AE03A;
  --brand-bg:  rgba(184,255,87,0.10);
  --brand-bd:  rgba(184,255,87,0.22);

  /* Texto */
  --t1:  #111111;            /* primário em fundo claro */
  --t2:  #505050;            /* secundário em fundo claro */
  --t3:  #9A9A9A;            /* muted/placeholder */
  --t-d1:#FFFFFF;            /* primário em fundo escuro */
  --t-d2:rgba(255,255,255,0.55); /* secundário em fundo escuro */
  --t-d3:rgba(255,255,255,0.30); /* muted em fundo escuro */

  /* Bordas */
  --bd-l:  rgba(0,0,0,0.08);
  --bd-lm: rgba(0,0,0,0.13);
  --bd-d:  rgba(255,255,255,0.08);
  --bd-dm: rgba(255,255,255,0.14);

  /* Acento vermelho/laranja para dor */
  --pain: #E8442A;
  --pain-bg: rgba(232,68,42,0.08);

  /* Tipografia */
  --ff-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* Escala */
  --h-hero:   clamp(3.5rem, 8vw, 7.5rem);
  --h-2:      clamp(2.25rem, 4.5vw, 3.75rem);
  --h-3:      clamp(1.35rem, 2.2vw, 1.875rem);
  --body-lg:  1.125rem;
  --body:     1rem;
  --sm:       0.875rem;
  --xs:       0.75rem;

  /* Espaçamento */
  --sy:  clamp(88px, 10vw, 140px);
  --sx:  clamp(20px, 5vw, 56px);
  --cw:  1240px;

  /* Radius */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:9999px;

  /* Sombras */
  --sh-sm: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --sh-md: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --sh-lg: 0 16px 64px rgba(0,0,0,0.12);
  --sh-brand: 0 8px 32px rgba(184,255,87,0.28);

  /* Transições */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --tf:  160ms;
  --ts:  320ms;
}

/* =========================================
   2. BASE RESET
   ========================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

.wrap {
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 var(--sx);
}
.sec { padding: var(--sy) 0; }
.sec--dark  { background: var(--bg-dark); }
.sec--dm    { background: var(--bg-dm);   }
.sec--alt   { background: var(--bg-alt);  }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd-lm); border-radius: 3px; }

/* =========================================
   3. TIPOGRAFIA
   ========================================= */

h1,h2,h3,h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.t-hero { font-size: var(--h-hero); font-weight: 900; letter-spacing: -0.04em; line-height: 0.97; }
.t-h2   { font-size: var(--h-2);   font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
.t-h3   { font-size: var(--h-3);   font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.t-tag  {
  font-family: var(--ff-mono);
  font-size: var(--xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t-label {
  font-family: var(--ff-display);
  font-size: var(--xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.accent { color: var(--brand); }
.pain-c { color: var(--pain); }

/* =========================================
   4. BOTÕES
   ========================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-display); font-weight: 700; font-size: var(--sm);
  padding: 13px 26px; border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  letter-spacing: -0.01em;
  transition: all var(--tf) var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn-brand {
  background: var(--brand); color: #111; border-color: var(--brand);
}
.btn-brand:hover { background: var(--brand-dim); border-color: var(--brand-dim); transform: translateY(-1px); box-shadow: var(--sh-brand); }
.btn-brand:active { transform: translateY(0); }

.btn-ghost-dark {
  background: transparent; color: var(--t-d1); border-color: var(--bd-dm);
}
.btn-ghost-dark:hover { border-color: var(--bd-dm); background: rgba(255,255,255,0.07); transform: translateY(-1px); }

.btn-ghost-light {
  background: transparent; color: var(--t1); border-color: var(--bd-lm);
}
.btn-ghost-light:hover { background: rgba(0,0,0,0.04); border-color: var(--bd-lm); transform: translateY(-1px); }

.btn-outline-brand {
  background: transparent; color: #111; border-color: var(--brand);
}
.btn-outline-brand:hover { background: var(--brand); transform: translateY(-1px); box-shadow: var(--sh-brand); }

.btn--lg { padding: 16px 34px; font-size: var(--body); }
.btn--sm { padding: 9px 18px; font-size: var(--xs); }

/* =========================================
   5. ANIMAÇÕES REVEAL
   ========================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ts) var(--ease), transform var(--ts) var(--ease);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }

/* =========================================
   6. NAVBAR
   ========================================= */

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0 var(--sx);
  transition: background var(--tf), border-color var(--tf);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(11,11,10,0.88);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-color: var(--bd-d);
}
.nav-inner {
  max-width: var(--cw); margin: 0 auto;
  height: 66px; display: flex; align-items: center; gap: 36px;
}
.nav-logo {
  font-family: var(--ff-display); font-weight: 900; font-size: 1.1rem;
  letter-spacing: -0.04em; color: var(--t-d1);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.logo-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
  animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-links a { font-size: var(--sm); font-weight: 500; color: var(--t-d2); transition: color var(--tf); }
.nav-links a:hover { color: var(--t-d1); }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-login { font-size: var(--sm); font-weight: 600; color: var(--t-d2); transition: color var(--tf); }
.nav-login:hover { color: var(--t-d1); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--t-d1); border-radius: 1px; transition: all var(--tf) var(--ease); }

/* Drawer */
.overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:298;opacity:0;pointer-events:none;transition:opacity var(--tf);backdrop-filter:blur(4px); }
.overlay.on { opacity:1;pointer-events:all; }
.drawer {
  position:fixed;top:0;right:0;width:min(300px,86vw);height:100vh;
  background:#111;border-left:1px solid var(--bd-d);z-index:299;
  transform:translateX(100%);transition:transform var(--ts) var(--ease);
  display:flex;flex-direction:column;padding:80px 28px 40px;gap:0;
}
.drawer.on { transform:translateX(0); }
.drawer a { display:block;font-size:1.2rem;font-weight:600;color:var(--t-d2);padding:14px 0;border-bottom:1px solid var(--bd-d);transition:color var(--tf); }
.drawer a:hover { color:var(--t-d1); }
.drawer .btn { margin-top:auto;justify-content:center; }

/* =========================================
   7. SEÇÃO 1 — HERO (DARK)
   ========================================= */

#hero {
  background: var(--bg);
  padding: 140px 0 100px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--bd-l);
}
.hero-glow {
  display: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: var(--xs);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #5A7A00; margin-bottom: 28px;
}
.kicker-dot { width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 2s ease-in-out infinite; }
.hero-h1 { font-size: var(--h-hero); font-weight:900; letter-spacing:-0.045em; line-height:0.95; color:var(--t1); margin-bottom:28px; }
.hero-h1 .ln { display:block; }
.hero-h1 .ln-accent { color:var(--brand-dim); }
.hero-sub { font-size:var(--body-lg); color:var(--t2); line-height:1.65; max-width:460px; margin-bottom:40px; }
.hero-ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:40px; }
.hero-trust { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.trust-chip {
  display:flex;align-items:center;gap:7px;
  font-size:var(--xs);color:var(--t3);font-weight:500;
}
.trust-check { font-size:12px;color:#5A7A00; }

/* Mockup */
.hero-visual { position: relative; }
.mockup {
  background: #FFFFFF; border: 1px solid var(--bd-l);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--sh-lg);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.mock-bar {
  background:var(--bg-alt);border-bottom:1px solid var(--bd-l);
  padding:12px 16px;display:flex;align-items:center;gap:10px;
}
.mock-dots { display:flex;gap:6px; }
.dot-r{width:11px;height:11px;border-radius:50%;background:#FF5F57;}
.dot-y{width:11px;height:11px;border-radius:50%;background:#FFBD2E;}
.dot-g{width:11px;height:11px;border-radius:50%;background:#28C840;}
.mock-title { font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;color:var(--t3);text-transform:uppercase;margin-left:4px; }
.mock-body { padding: 0; }
.mock-row {
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--bd-l);transition:background var(--tf);
}
.mock-row:last-child{border-bottom:none;}
.mock-row:hover,.mock-row.act{background:var(--bg-alt);}
.m-av {
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:900;font-size:12px;
  color:#111;flex-shrink:0;
}
.m-io{flex:1;min-width:0;}
.m-n{font-size:var(--sm);font-weight:700;color:var(--t1);letter-spacing:-.01em;}
.m-m{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-aside{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.m-t{font-size:10px;color:var(--t3);}
.m-badge{background:var(--brand);color:#111;font-size:9px;font-weight:900;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.m-closed{font-size:9px;font-weight:700;color:#22C55E;background:rgba(34,197,94,.1);padding:2px 8px;border-radius:9px;}

.hero-chip {
  position:absolute;bottom:-18px;right:-18px;
  background:#FFFFFF;border:1px solid var(--bd-l);border-radius:14px;
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--sh-md);
  animation: float 5s ease-in-out infinite 1.5s;
}
.chip-txt .lbl{font-size:10px;color:var(--t3);font-weight:500;}
.chip-txt .val{font-family:var(--ff-display);font-size:var(--sm);font-weight:900;color:#5A7A00;}

/* =========================================
   8. SEÇÃO 2 — DOR (BRANCO)
   ========================================= */

#pain { background: var(--bg); }
.pain-header { text-align: center; margin-bottom: 64px; }
.pain-label { color: var(--pain); margin-bottom: 16px; }
.pain-header .t-h2 { max-width: 600px; margin:0 auto; }

.pain-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--bd-l); border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 56px;
}
.pain-item {
  display: flex; align-items: center; gap: 24px;
  padding: 28px 36px;
  border-bottom: 1px solid var(--bd-l);
  background: var(--bg-card);
  transition: background var(--tf);
}
.pain-item:last-child { border-bottom: none; }
.pain-item:hover { background: var(--bg-alt); }
.pi-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pain-bg); color: var(--pain);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.pi-text {
  font-family: var(--ff-display); font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em; color: var(--t1);
  flex: 1;
}
.pi-text s { color: var(--t3); text-decoration-color: var(--pain); }
.pi-num {
  font-family: var(--ff-mono); font-size: var(--xs);
  color: var(--t3); white-space: nowrap; flex-shrink: 0;
}

.pain-transition {
  text-align: center;
  padding: 48px;
  background: var(--bg-dark);
  border-radius: var(--r-xl);
  margin: 0 auto;
  max-width: 720px;
}
.pain-transition .t-h3 { color: var(--t-d1); margin-bottom:16px; }
.pain-transition p { color: var(--t-d2); font-size: var(--body-lg); margin-bottom: 28px; }

/* =========================================
   9. SEÇÃO 3 — AUTORIDADE (BRANCO)
   ========================================= */

#authority { background: var(--bg-alt); }
.auth-header { text-align: center; margin-bottom: 56px; }
.auth-header .t-h2 { max-width: 560px; margin: 16px auto 0; }

.stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--bd-l);
  border: 1px solid var(--bd-l); border-radius: var(--r-xl);
  overflow: hidden; margin-bottom: 48px;
}
.stat-cell {
  background: var(--bg-card); padding: 44px 28px; text-align: center;
}
.stat-n {
  font-family: var(--ff-display); font-size: clamp(2.5rem,5vw,4rem);
  font-weight: 900; letter-spacing: -0.04em; color: var(--brand);
  line-height: 1; display: block; margin-bottom: 6px;
}
.stat-l { font-size: var(--xs); font-weight: 600; color: var(--t3); letter-spacing: .06em; text-transform: uppercase; }

/* Ticker de integrações */
.ticker { overflow:hidden;position:relative;padding:20px 0; }
.ticker::before,.ticker::after {
  content:''; position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-alt),transparent);}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg-alt),transparent);}
.ticker-t { display:flex;width:max-content;animation:scroll 28s linear infinite; }
@keyframes scroll { from{transform:translateX(0);}to{transform:translateX(-50%);} }
.ticker-item {
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 24px;border-right:1px solid var(--bd-l);
  font-size:var(--sm);font-weight:600;color:var(--t3);white-space:nowrap;
}

/* =========================================
   10. SEÇÃO 4 — FEATURES (BRANCO)
   ========================================= */

#features { background: var(--bg); }
.feat-header { margin-bottom: 80px; }
.feat-header .t-h2 { max-width: 520px; margin: 14px 0 0; }

.feat-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--bd-l);
}
.feat-block:last-child { border-bottom:none; padding-bottom:0; }
.feat-block.flip .feat-copy  { order: 2; }
.feat-block.flip .feat-ui    { order: 1; }

.feat-tag { color: var(--brand); margin-bottom: 16px; font-family: var(--ff-mono); }
.feat-h   { font-size: clamp(1.75rem,3vw,2.5rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--t1); margin-bottom:16px; }
.feat-p   { font-size:var(--body-lg); color:var(--t2); line-height:1.7; margin-bottom:28px; }

.check-list { display:flex;flex-direction:column;gap:10px; }
.check-list li {
  display:flex;align-items:flex-start;gap:10px;
  font-size:var(--sm);color:var(--t2);line-height:1.5;
}
.check-mark {
  width:20px;height:20px;border-radius:50%;
  background:var(--brand-bg);border:1px solid var(--brand-bd);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;color:var(--brand);flex-shrink:0;margin-top:1px;
}

/* UI Cards (light) */
.ui-card {
  background: var(--bg-card);
  border: 1px solid var(--bd-l);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.ui-top {
  background: var(--bg-alt); border-bottom: 1px solid var(--bd-l);
  padding: 12px 20px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t3);
  display: flex; align-items: center; gap: 10px;
}
.ui-dot { width:8px;height:8px;border-radius:50%; }
.ui-dot.g{background:#22C55E;} .ui-dot.y{background:#EAB308;} .ui-dot.r{background:#EF4444;}
.ui-body { padding: 24px; }

/* Flow SVG */
.flow-svg { width:100%; }

/* Voice UI */
.wave { display:flex;align-items:center;gap:3px;height:64px;justify-content:center;margin-bottom:16px; }
.wb { width:4px;border-radius:2px;background:var(--brand);opacity:.7;animation:wa 1.1s ease-in-out infinite; }
.wb:nth-child(2n) { animation-delay:.25s; }
@keyframes wa { 0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);} }

/* Groups */
.g-list { display:flex;flex-direction:column;gap:8px; }
.g-row {
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--bg-alt);
  border-radius:var(--r-md);border:1px solid var(--bd-l);
}
.g-pip{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.g-pip.on{background:#22C55E;box-shadow:0 0 6px #22C55E;}
.g-pip.fl{background:#EF4444;}
.g-n{font-size:var(--sm);font-weight:700;color:var(--t1);flex:1;}
.g-count{font-size:var(--xs);color:var(--t3);}
.g-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);}
.g-ok{background:rgba(34,197,94,.1);color:#22C55E;}
.g-full{background:rgba(239,68,68,.1);color:#EF4444;}

/* Atendimento */
.a-agents{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.a-chip{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  background:var(--bg-alt);border:1px solid var(--bd-l);border-radius:var(--r-pill);
  font-size:var(--xs);font-weight:600;color:var(--t2);
}
.a-pip{width:6px;height:6px;border-radius:50%;}
.a-pip.on{background:#22C55E;} .a-pip.aw{background:#EAB308;} .a-pip.off{background:#9A9A9A;}

.a-rows{display:flex;flex-direction:column;gap:2px;}
.a-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);transition:background var(--tf);}
.a-row:hover,.a-row.act{background:var(--bg-alt);}
.a-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:900;font-size:11px;color:#111;flex-shrink:0;}
.a-io{flex:1;min-width:0;}
.a-n{font-size:var(--sm);font-weight:600;color:var(--t1);}
.a-m{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.a-dept{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);}
.d-s{background:rgba(41,182,246,.1);color:#29B6F6;}
.d-c{background:var(--brand-bg);color:#5A7A00;}
.d-f{background:rgba(249,115,22,.1);color:#F97316;}

/* =========================================
   11. SEÇÃO 5 — PROVA SOCIAL (ALT)
   ========================================= */

#social { background: var(--bg-alt); }
.social-header { text-align:center;margin-bottom:64px; }
.social-header .t-h2 { max-width:560px;margin:14px auto 0; }

.t-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.t-card {
  background:var(--bg-card);border:1px solid var(--bd-l);
  border-radius:var(--r-xl);padding:32px;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--tf),border-color var(--tf);
}
.t-card:hover{box-shadow:var(--sh-md);border-color:var(--bd-lm);}
.t-stars{color:var(--brand);font-size:13px;letter-spacing:2px;}
.t-result {
  font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:900;letter-spacing:-.035em;color:var(--t1);line-height:1.05;
}
.t-quote {font-size:var(--sm);color:var(--t2);line-height:1.65;flex:1;}
.t-author{display:flex;align-items:center;gap:12px;}
.t-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:900;font-size:13px;color:#111;flex-shrink:0;}
.t-name{font-family:var(--ff-display);font-size:var(--sm);font-weight:700;color:var(--t1);}
.t-role{font-size:var(--xs);color:var(--t3);}

/* =========================================
   12. SEÇÃO 6 — PRICING (BRANCO)
   ========================================= */

#pricing { background: var(--bg); }
.pricing-header { text-align:center;margin-bottom:56px; }
.pricing-header .t-h2 { max-width:540px;margin:14px auto 16px; }
.pricing-header p { color:var(--t2);font-size:var(--body-lg); }

.billing-row {
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:48px;
}
.b-label{font-size:var(--sm);font-weight:600;color:var(--t2);cursor:pointer;transition:color var(--tf);}
.b-label.on{color:var(--t1);}
.b-switch {
  width:44px;height:24px;background:var(--bg-alt);
  border-radius:var(--r-pill);border:1.5px solid var(--bd-lm);
  position:relative;cursor:pointer;transition:background var(--tf);
}
.b-switch::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  background:var(--t3);top:2px;left:2px;transition:transform var(--tf) var(--ease),background var(--tf);
}
.b-switch.on{background:var(--brand-bg);border-color:var(--brand-bd);}
.b-switch.on::after{transform:translateX(20px);background:var(--brand);}
.b-pill{
  font-size:var(--xs);font-weight:700;color:#5A7A00;
  background:var(--brand-bg);border:1px solid var(--brand-bd);
  padding:3px 10px;border-radius:var(--r-pill);
}

.p-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px; }
.p-card {
  background:var(--bg-card);border:1px solid var(--bd-l);
  border-radius:var(--r-xl);padding:36px 28px;
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow var(--tf),border-color var(--tf);
  box-shadow:var(--sh-sm);
}
.p-card:hover{box-shadow:var(--sh-md);}
.p-card.pop{
  border-color:var(--bd-lm);
  box-shadow: 0 0 0 2px var(--brand),var(--sh-md);
}
.pop-chip{
  position:absolute;top:20px;right:20px;
  background:var(--brand);color:#111;
  font-family:var(--ff-display);font-size:9px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--r-pill);
}
.p-name{font-family:var(--ff-display);font-weight:900;font-size:1.5rem;letter-spacing:-.03em;color:var(--t1);margin-bottom:4px;}
.p-tag{font-size:var(--xs);color:var(--t3);margin-bottom:24px;}
.p-price-row{display:flex;align-items:flex-end;gap:3px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--bd-l);}
.p-cur{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:var(--t2);margin-bottom:5px;}
.p-amount{font-family:var(--ff-display);font-size:3.75rem;font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--t1);}
.p-period{font-size:var(--sm);color:var(--t3);margin-bottom:7px;}
.p-feats{display:flex;flex-direction:column;gap:11px;flex:1;margin-bottom:24px;}
.p-feat{display:flex;align-items:flex-start;gap:8px;font-size:var(--sm);color:var(--t2);line-height:1.45;}
.p-y{color:var(--brand);font-weight:900;font-size:12px;flex-shrink:0;margin-top:1px;}
.p-no{color:var(--t3);flex-shrink:0;}
.p-cta{
  display:flex;align-items:center;justify-content:center;
  padding:13px;border-radius:var(--r-md);
  font-family:var(--ff-display);font-weight:700;font-size:var(--sm);
  border:1.5px solid var(--bd-lm);color:var(--t1);
  transition:all var(--tf) var(--ease);text-align:center;
}
.p-cta:hover{background:var(--bg-alt);border-color:var(--bd-lm);}
.p-cta.primary{background:var(--brand);border-color:var(--brand);color:#111;}
.p-cta.primary:hover{background:var(--brand-dim);border-color:var(--brand-dim);box-shadow:var(--sh-brand);}

.ent-row {
  background:var(--bg-alt);border:1px solid var(--bd-l);border-radius:var(--r-xl);
  padding:28px 36px;display:flex;align-items:center;justify-content:space-between;gap:40px;
  max-width:800px;margin:0 auto;
}
.ent-row h3{font-family:var(--ff-display);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--t1);margin-bottom:4px;}
.ent-row p{font-size:var(--sm);color:var(--t2);}

/* =========================================
   13. SEÇÃO 7 — FAQ (ALT)
   ========================================= */

#faq { background: var(--bg-alt); }
.faq-layout { display:grid;grid-template-columns:1fr 2.2fr;gap:80px;align-items:start; }
.faq-left { position:sticky;top:90px; }
.faq-left .t-h2 { max-width:240px;margin:14px 0 16px; }
.faq-left p { font-size:var(--body);color:var(--t2);line-height:1.7;margin-bottom:24px; }

.faq-items { display:flex;flex-direction:column;gap:0; }
.faq-it { border-bottom: 1px solid var(--bd-l); }
.faq-it summary {
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0; font-family:var(--ff-display);font-size:var(--body-lg);font-weight:700;
  letter-spacing:-.02em;color:var(--t1);cursor:pointer;list-style:none;gap:24px;
  transition:color var(--tf);
}
.faq-it summary::-webkit-details-marker{display:none;}
.faq-it summary:hover{color:#5A7A00;}
.faq-ic {
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bd-lm);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:300;flex-shrink:0;color:var(--t3);
  transition:all var(--tf) var(--ease);
}
.faq-it[open] summary .faq-ic{background:var(--brand);border-color:var(--brand);color:#111;transform:rotate(45deg);}
.faq-body{padding-bottom:22px;font-size:var(--body);color:var(--t2);line-height:1.75;max-width:620px;}

/* =========================================
   14. SEÇÃO 8 — CTA FINAL (DARK)
   ========================================= */

#final-cta { background: var(--bg-dark); position:relative;overflow:hidden; }
.cta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(184,255,87,0.06),transparent 65%);}
.cta-inner{text-align:center;position:relative;z-index:1;}
.cta-inner .t-h2 { color:var(--t-d1); max-width:680px; margin:14px auto 20px; }
.cta-inner .t-h2 .ln-accent { color:var(--brand); }
.cta-inner p { font-size:var(--body-lg);color:var(--t-d2);max-width:440px;margin:0 auto 44px; }
.cta-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.cta-micro{margin-top:18px;font-size:var(--xs);color:var(--t-d3);display:flex;align-items:center;justify-content:center;gap:20px;}
.cta-micro span{display:flex;align-items:center;gap:6px;}

/* =========================================
   15. FOOTER
   ========================================= */

#footer { background:#0A0A09; border-top:1px solid var(--bd-d); padding:64px 0 36px; }
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;padding-bottom:48px;border-bottom:1px solid var(--bd-d);margin-bottom:28px;}
.foot-logo{font-family:var(--ff-display);font-weight:900;font-size:1.1rem;letter-spacing:-.04em;color:var(--t-d1);display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.foot-tagline{font-size:var(--sm);color:var(--t-d2);line-height:1.65;max-width:280px;margin-bottom:20px;}
.foot-socials{display:flex;gap:8px;}
.foot-soc-btn{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--bd-d);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--t-d3);transition:all var(--tf);
}
.foot-soc-btn:hover{background:rgba(255,255,255,.1);color:var(--t-d1);}
.foot-col-title{font-family:var(--ff-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--t-d3);margin-bottom:18px;}
.foot-col-links{display:flex;flex-direction:column;gap:12px;}
.foot-col-links a{font-size:var(--sm);color:var(--t-d2);transition:color var(--tf);}
.foot-col-links a:hover{color:var(--t-d1);}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;font-size:var(--xs);color:var(--t-d3);}

/* =========================================
   16. ROI CALCULATOR (bg-alt section)
   ========================================= */

#roi { background: var(--bg); border-top: 1px solid var(--bd-l); }
.roi-wrap { max-width: 680px; margin: 0 auto; text-align: center; }
.roi-wrap .t-h2 { margin: 14px auto 8px; }
.roi-wrap > p { color: var(--t2); font-size: var(--body-lg); margin-bottom: 44px; }

.roi-fields { display:flex;flex-direction:column;gap:20px;margin-bottom:36px;text-align:left; }
.roi-field label {
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--ff-display);font-size:var(--sm);font-weight:700;color:var(--t2);margin-bottom:10px;
}
.roi-field label span { font-weight:800;color:var(--t1); }
.roi-field input[type=range] { width:100%;accent-color:var(--brand);cursor:pointer; }
.roi-field input[type=number] {
  width:100%;padding:11px 14px;background:var(--bg-card);
  border:1.5px solid var(--bd-l);border-radius:var(--r-md);
  font-size:var(--body);font-family:var(--ff-body);color:var(--t1);outline:none;
  transition:border-color var(--tf);
}
.roi-field input[type=number]:focus { border-color: #5A7A00; }

.roi-result-box {
  background:var(--bg-card);border:1px solid var(--bd-l);border-radius:var(--r-xl);
  padding:28px;display:flex;flex-direction:column;gap:0;
  margin-bottom:28px;text-align:left;box-shadow:var(--sh-sm);
}
.roi-r-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--bd-l);
  font-size:var(--sm);color:var(--t2);
}
.roi-r-row:last-child{border-bottom:none;}
.roi-r-row.tot{font-family:var(--ff-display);font-weight:800;font-size:var(--body);color:var(--t1);padding:18px 0;}
.roi-v{font-family:var(--ff-display);font-weight:900;color:var(--t1);}
.roi-v.brand{color:#5A7A00;}

/* =========================================
   17. RESPONSIVE
   ========================================= */

@media(max-width:1024px){
  .hero-grid   { grid-template-columns:1fr;gap:48px; }
  .hero-visual { display:none; }
  .feat-block  { grid-template-columns:1fr;gap:36px; }
  .feat-block.flip .feat-copy,.feat-block.flip .feat-ui { order:0; }
  .faq-layout  { grid-template-columns:1fr;gap:40px; }
  .faq-left    { position:static; }
  .stats-row   { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .nav-links,.nav-actions { display:none; }
  .hamburger { display:flex; }
  .t-grid    { grid-template-columns:1fr; }
  .p-grid    { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr;gap:36px; }
  .foot-bottom { flex-direction:column;gap:6px;text-align:center; }
  .ent-row    { flex-direction:column;text-align:center; }
  .pain-item  { padding:20px 20px;gap:14px; }
  .pi-text    { font-size:1.1rem; }
  .pi-num     { display:none; }
  .stats-row  { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .stats-row { grid-template-columns:1fr; }
}