/* ════════════════════════════════════════════════════════════
   QUITTE — Landing Page · styles.css
   Alinhado ao Design System oficial Quitte (petróleo + Schibsted/Hanken)
   Mobile-first.
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Marca: petróleo / teal ── */
  --brand-50:#ECF3F6; --brand-100:#D3E4EB; --brand-200:#A8C9D6; --brand-300:#76A8BB;
  --brand-400:#48849F; --brand-500:#226A86; --brand-600:#115A73; --brand-700:#0E4E63;
  --brand-800:#0C4153; --brand-900:#0B3744; --brand-950:#07242E;

  /* ── Quitação / sucesso ── */
  --green-50:#E9F6EF; --green-100:#C8E9D7; --green-300:#69C79A; --green-400:#3CB07E;
  --green-500:#149A60; --green-600:#12824F; --green-700:#0F6741;

  /* ── Conquista / âmbar ── */
  --amber-50:#FBF1DF; --amber-100:#F6E0B8; --amber-400:#E5A23B; --amber-500:#D2882A; --amber-600:#AC6E22;

  /* ── Atraso / terracota ── */
  --red-50:#FBEBE9; --red-100:#F6D2CE; --red-500:#CD4A40; --red-600:#B23A31; --red-700:#8F2E27;

  /* ── WhatsApp ── */
  --wa:#25D366; --wa-dark:#075E54;

  /* ── Neutros frios ── */
  --n-0:#FFFFFF; --n-25:#FAFBFC; --n-50:#F5F8F9; --n-100:#ECF1F3; --n-150:#E2E9EC;
  --n-200:#D6DEE2; --n-300:#C0CACF; --n-400:#98A5AC; --n-500:#6C7A81; --n-600:#4E5A61;
  --n-700:#3A444A; --n-800:#283036; --n-900:#182025;

  /* ── Aliases compat (markup antigo) ── */
  --teal-950:var(--brand-950); --teal-900:var(--brand-900); --teal-800:var(--brand-800);
  --teal-700:var(--brand-700); --teal-600:var(--brand-700); --teal-500:var(--brand-500);
  --teal-400:var(--brand-400); --teal-300:var(--brand-300); --teal-200:var(--brand-200);
  --teal-100:var(--brand-100); --teal-75:#D2EEF4; --teal-50:var(--brand-50); --teal-25:#EEF3F6;
  --gray-900:var(--n-900); --gray-800:var(--n-800); --gray-700:var(--n-700); --gray-600:var(--n-600);
  --gray-500:var(--n-500); --gray-400:var(--n-400); --gray-300:var(--n-300); --gray-200:var(--n-200);
  --gray-100:var(--n-100); --gray-50:var(--n-50); --white:var(--n-0);
  --amber-700:var(--amber-600); --green-50b:var(--green-50);

  --font-display:'Schibsted Grotesk',system-ui,sans-serif;
  --font-heading:'Schibsted Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --sh-sm:0 1px 2px rgba(11,55,68,.06),0 2px 6px rgba(11,55,68,.06);
  --sh-md:0 2px 4px rgba(11,55,68,.05),0 8px 20px rgba(11,55,68,.08);
  --sh-lg:0 8px 16px rgba(11,55,68,.08),0 24px 48px rgba(11,55,68,.12);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-body); color:var(--n-900); background:var(--n-0); overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:var(--font-body); cursor:pointer; border:none; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-.02em; line-height:1.12; }
::selection{ background:var(--brand-200); }

/* ── Layout helpers ── */
.container{ max-width:1140px; margin:0 auto; padding:0 20px; }
.section{ padding:64px 0; }
.section-label{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-500); margin-bottom:14px; }
.section-title{ font-size:30px; font-weight:700; line-height:1.12; color:var(--n-900); margin-bottom:16px; letter-spacing:-.025em; }
.section-sub{ font-size:17px; line-height:1.6; color:var(--n-600); max-width:580px; }

/* ════════ NAVBAR ════════ */
.navbar{ position:fixed; top:0; left:0; width:100%; z-index:100; padding:16px 0; transition:all .3s var(--ease); }
.navbar.scrolled{ background:rgba(255,255,255,.94); backdrop-filter:blur(16px); box-shadow:0 2px 24px rgba(11,55,68,.08); padding:11px 0; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{ display:flex; align-items:center; }
.navbar-logo{ height:30px; transition:opacity .3s var(--ease); }
.navbar-logo-dark{ display:none; }
.navbar.scrolled .navbar-logo-white{ display:none; }
.navbar.scrolled .navbar-logo-dark{ display:block; }
.navbar-links{ display:none; }

.btn-nav{ padding:11px 22px; border-radius:10px; font-size:14px; font-weight:600; transition:all .25s var(--ease); min-height:44px; display:inline-flex; align-items:center; }
.btn-nav-primary{ background:var(--n-0)!important; color:var(--brand-700)!important; box-shadow:var(--sh-sm); }
.btn-nav-primary:hover{ background:var(--brand-50)!important; transform:translateY(-1px); }
.navbar.scrolled .btn-nav-primary{ background:var(--brand-700)!important; color:#fff!important; }
.navbar.scrolled .btn-nav-primary:hover{ background:var(--brand-800)!important; }

.mobile-menu-btn{ display:block; background:none; color:#fff; padding:12px; min-height:44px; min-width:44px; }
.navbar.scrolled .mobile-menu-btn{ color:var(--n-700); }
.navbar-links.mobile-open{ display:flex; flex-direction:column; position:fixed; inset:0; background:var(--brand-950); z-index:8000; align-items:center; justify-content:center; gap:8px; padding:80px 24px 40px; }
.navbar-links.mobile-open a{ font-size:20px; font-weight:600; color:rgba(255,255,255,.82); padding:12px 24px; border-radius:12px; width:100%; max-width:280px; text-align:center; }
.navbar-links.mobile-open a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.navbar-links.mobile-open .btn-nav-primary{ background:var(--green-600)!important; color:#fff!important; border-radius:12px; margin-top:12px; font-size:17px; }
.mobile-menu-btn[aria-expanded="true"]{ position:fixed; top:10px; right:8px; z-index:8001; color:#fff; }

/* ════════ HERO ════════ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 85% -10%,rgba(34,106,134,.45),transparent 55%),
             linear-gradient(165deg,var(--brand-950) 0%,var(--brand-800) 45%,var(--brand-700) 100%); }
.hero::before{ content:''; position:absolute; right:-12%; bottom:-18%; width:620px; height:620px; opacity:.08;
  background:url('assets/quitte-marca.png') center/contain no-repeat; filter:brightness(0) invert(1); pointer-events:none; }
.hero::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:90px; background:linear-gradient(to top,var(--n-50),transparent); }
.hero .container{ position:relative; z-index:2; padding-top:104px; padding-bottom:60px; }
.hero-split{ display:flex; flex-direction:column; gap:42px; align-items:center; text-align:center; width:100%; }
.hero-content{ max-width:560px; }

.hero-badge{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:500; color:rgba(255,255,255,.88); margin-bottom:26px; backdrop-filter:blur(8px); }
.hero-badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-400); box-shadow:0 0 0 0 rgba(60,176,126,.6); animation:pulse-dot 2.4s infinite; }
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(60,176,126,.5);} 70%{ box-shadow:0 0 0 7px rgba(60,176,126,0);} 100%{ box-shadow:0 0 0 0 rgba(60,176,126,0);} }
.hero-badge-star{ color:var(--brand-300); }

.hero h1{ font-size:38px; font-weight:800; line-height:1.05; color:#fff; letter-spacing:-.035em; margin-bottom:20px; }
.hero h1 .hl{ color:var(--green-300); }
.hero h1 span{ color:var(--brand-200); }
.hero-desc{ font-size:17px; line-height:1.65; color:rgba(255,255,255,.74); margin-bottom:30px; max-width:540px; }
.hero-desc strong{ font-weight:600; color:rgba(255,255,255,.92); }
.hero-wa-highlight{ color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--wa); text-underline-offset:5px; text-decoration-thickness:3px; }
.hero-platform-highlight{ color:var(--brand-200); font-weight:700; }

.hero-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-bottom:18px; width:100%; }
.btn-hero{ padding:16px 30px; border-radius:12px; font-size:16px; font-weight:700; transition:all .25s var(--ease); text-align:center; min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.btn-hero-whatsapp{ background:#fff; color:var(--brand-700); box-shadow:0 8px 28px rgba(0,0,0,.22); width:100%; }
.btn-hero-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.28); }
.btn-hero-whatsapp:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:2px; }
.btn-hero-outline{ background:transparent; color:rgba(255,255,255,.9); border:1.5px solid rgba(255,255,255,.32); width:100%; }
.btn-hero-outline:hover{ color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }

.hero-microcopy{ font-size:13px; color:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; flex-wrap:wrap; }
.hero-microcopy-dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.34); display:inline-block; }

/* Hero cards mockup */
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero-cards-stack{ display:flex; flex-direction:column; gap:16px; align-items:center; position:relative; width:100%; max-width:360px; margin:0 auto; animation:float 6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .hero-cards-stack,.hero::before{ animation:none; } }

.hero-wa-card{ background:#ECE5DD; border-radius:16px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.24); width:100%; max-width:300px; align-self:flex-start; }
.hero-wa-card-header{ background:var(--wa-dark); padding:10px 14px; display:flex; align-items:center; gap:10px; }
.hero-wa-card-avatar{ width:30px; height:30px; border-radius:50%; background:var(--brand-600); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }
.hero-wa-card-name{ font-size:13px; font-weight:600; color:#fff; line-height:1.2; }
.hero-wa-card-status{ font-size:10px; color:rgba(255,255,255,.65); }
.hero-wa-card-chat{ padding:10px 8px; display:flex; flex-direction:column; gap:6px; }
.hero-wa-bubble{ max-width:88%; padding:6px 9px 4px; border-radius:7px; font-size:12px; line-height:1.4; color:#303030; }
.hero-wa-bubble-user{ background:#DCF8C6; align-self:flex-end; border-top-right-radius:2px; }
.hero-wa-bubble-bot{ background:#fff; align-self:flex-start; border-top-left-radius:2px; }
.hero-wa-bubble-time{ font-size:9px; color:#8696A0; text-align:right; margin-top:2px; }

.hero-dash-card{ background:#fff; border-radius:16px; padding:18px 20px; box-shadow:0 20px 60px rgba(0,0,0,.2); width:100%; max-width:320px; align-self:flex-end; }
.hero-dash-title{ font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--n-400); text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.dash-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.dash-bar-label{ font-size:11px; color:var(--n-600); font-weight:600; min-width:84px; flex-shrink:0; }
.dash-bar-track{ flex:1; height:8px; background:var(--n-100); border-radius:999px; overflow:hidden; }
.dash-bar-fill{ height:100%; border-radius:999px; }
.dash-bar-fill--teal{ background:linear-gradient(90deg,var(--brand-500),var(--brand-400)); }
.dash-bar-fill--amber{ background:linear-gradient(90deg,var(--amber-500),var(--amber-400)); }
.dash-bar-fill--green{ background:linear-gradient(90deg,var(--green-600),var(--green-400)); }
.dash-bar-pct{ font-size:11px; font-weight:700; color:var(--n-700); min-width:32px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.hero-dash-footer{ margin-top:14px; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--green-700); padding-top:12px; border-top:1px solid var(--n-100); }
.hero-dash-footer-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-500); flex-shrink:0; }

/* ════════ TRUST BAR ════════ */
.trust-bar{ background:var(--n-50); border-top:1px solid var(--n-150); border-bottom:1px solid var(--n-150); padding:26px 0; }
.trust-bar .container{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.trust-bar-eyebrow{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--n-400); }
.trust-bar-items{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.trust-bar-item{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--n-600); }
.trust-bar-item svg{ color:var(--green-600); flex-shrink:0; }

/* ════════ DIFERENCIAL (a pergunta que importa) ════════ */
.diff-section{ background:var(--n-0); padding:64px 0; }
.diff-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:44px; }
.diff-card{ border-radius:20px; padding:34px 30px; }
.diff-card .diff-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.diff-card .diff-q{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.18; letter-spacing:-.02em; }
.diff-card .diff-ico{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.diff-card--muted{ background:var(--n-50); border:1px solid var(--n-150); }
.diff-card--muted .diff-tag{ color:var(--n-400); }
.diff-card--muted .diff-q{ color:var(--n-500); }
.diff-card--muted .diff-ico{ background:var(--n-100); color:var(--n-500); }
.diff-card--brand{ background:var(--brand-700); color:#fff; box-shadow:var(--sh-lg); }
.diff-card--brand .diff-tag{ color:var(--brand-200); }
.diff-card--brand .diff-q{ color:#fff; }
.diff-card--brand .diff-ico{ background:rgba(255,255,255,.14); color:var(--green-300); }
.diff-statement{ margin-top:32px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--brand-700); letter-spacing:-.02em; line-height:1.3; }
.diff-statement b{ color:var(--green-600); }

/* ════════ COMO FUNCIONA ════════ */
.how-it-works{ background:var(--n-50); }
.steps-hybrid{ display:grid; grid-template-columns:1fr; gap:32px; margin-top:48px; }
.step-hybrid{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.step-hybrid-num-wrap{ position:relative; margin-bottom:18px; }
.step-hybrid-num{ width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); color:#fff; font-family:var(--font-display); font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(14,78,99,.24); }
.step-hybrid-icon-badge{ position:absolute; bottom:-4px; right:-4px; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--n-100); display:flex; align-items:center; justify-content:center; color:var(--brand-600); }
.step-hybrid h4{ font-size:19px; font-weight:700; color:var(--n-900); margin-bottom:10px; }
.step-hybrid p{ font-size:15px; line-height:1.6; color:var(--n-500); max-width:300px; margin:0 auto; }

/* ════════ JORNADA (6 fases) ════════ */
.journey-section{ background:linear-gradient(165deg,var(--brand-900),var(--brand-800)); color:#fff; position:relative; overflow:hidden; padding:64px 0; }
.journey-section::before{ content:''; position:absolute; left:-10%; top:-30%; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,rgba(34,106,134,.4),transparent 70%); pointer-events:none; }
.journey-section .section-label{ color:var(--brand-300); }
.journey-section .section-title{ color:#fff; }
.journey-section .section-sub{ color:rgba(255,255,255,.66); margin:0 auto; }
.journey-rail{ position:relative; margin-top:48px; display:grid; grid-template-columns:1fr; gap:14px; }
.jstep{ display:flex; gap:18px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px; text-align:left; transition:all .25s var(--ease); }
.jstep:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.jstep-num{ flex:none; width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.1); color:var(--brand-200); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; }
.jstep.is-win .jstep-num{ background:var(--green-600); color:#fff; }
.jstep-body h4{ font-size:18px; font-weight:700; color:#fff; margin-bottom:5px; }
.jstep-body .jstep-obj{ font-size:14px; color:rgba(255,255,255,.6); margin-bottom:12px; line-height:1.5; }
.jstep-emo{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.jstep-emo .bef{ color:#E8A89F; }
.jstep-emo .aft{ color:var(--green-300); }
.jstep-emo svg{ color:rgba(255,255,255,.34); flex-shrink:0; }
.journey-quote{ margin-top:36px; text-align:center; }
.journey-quote p{ font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; line-height:1.35; letter-spacing:-.01em; max-width:34ch; margin:0 auto; }
.journey-quote p b{ color:var(--green-300); }

/* ════════ METODOLOGIA ════════ */
.method-section{ background:var(--n-0); position:relative; overflow:hidden; padding:64px 0; }
.method-cards-row{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:48px; }
.method-card-new{ background:var(--n-50); border:1px solid var(--n-150); border-radius:20px; padding:32px 24px; text-align:center; transition:all .35s var(--ease); }
.method-card-new:hover{ box-shadow:var(--sh-md); transform:translateY(-4px); border-color:var(--brand-200); }
.method-pct-big{ font-family:var(--font-display); font-size:56px; font-weight:800; line-height:1; margin-bottom:8px; letter-spacing:-.04em; }
.method-pct-big--teal{ color:var(--brand-600); }
.method-pct-big--amber{ color:var(--amber-500); }
.method-pct-big--green{ color:var(--green-600); }
.method-card-new h3{ font-size:19px; font-weight:700; color:var(--n-900); margin-bottom:10px; }
.method-card-new p{ font-size:14px; line-height:1.6; color:var(--n-500); }
.method-distrib-bar{ margin-top:44px; max-width:620px; margin-left:auto; margin-right:auto; text-align:center; }
.method-distrib-bar p{ font-size:16px; color:var(--n-600); margin-bottom:20px; line-height:1.6; }
.method-bar-composite{ display:flex; height:16px; border-radius:999px; overflow:hidden; gap:3px; }
.method-bar-seg{ border-radius:999px; }
.method-bar-seg--50{ background:var(--brand-500); width:50%; }
.method-bar-seg--30{ background:var(--amber-500); width:30%; }
.method-bar-seg--20{ background:var(--green-500); width:20%; }
.method-bar-labels{ display:flex; justify-content:space-between; margin-top:12px; }
.method-bar-label{ font-size:11px; color:var(--n-400); font-weight:600; }
.method-cta-row{ margin-top:40px; text-align:center; }
.btn-method-secondary{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--brand-200); color:var(--brand-700); border-radius:999px; padding:13px 28px; font-size:14px; font-weight:600; transition:all .25s var(--ease); }
.btn-method-secondary:hover{ border-color:var(--brand-400); background:var(--brand-50); }

/* ════════ PLATAFORMA ════════ */
.platform-section{ background:var(--n-50); padding:64px 0; }
.platform-inner{ display:flex; flex-direction:column; gap:48px; align-items:center; }
.platform-content{ max-width:480px; }
.platform-features-list{ list-style:none; display:flex; flex-direction:column; gap:20px; margin-top:32px; }
.platform-feature-item{ display:flex; gap:14px; align-items:flex-start; }
.platform-feature-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.platform-feature-icon--teal{ background:var(--brand-50); color:var(--brand-700); }
.platform-feature-icon--green{ background:var(--green-50); color:var(--green-700); }
.platform-feature-icon--amber{ background:var(--amber-50); color:var(--amber-600); }
.platform-feature-icon--blue{ background:var(--brand-50); color:var(--brand-500); }
.platform-feature-text h4{ font-size:16px; font-weight:700; color:var(--n-900); margin-bottom:4px; }
.platform-feature-text p{ font-size:14px; line-height:1.6; color:var(--n-500); }

.platform-mockup{ background:#fff; border-radius:20px; box-shadow:var(--sh-lg); overflow:hidden; width:100%; max-width:440px; border:1px solid var(--n-150); }
.platform-mockup-bar{ background:var(--n-50); border-bottom:1px solid var(--n-150); padding:14px 18px; display:flex; align-items:center; gap:8px; }
.platform-mockup-dots{ display:flex; gap:5px; flex-shrink:0; }
.platform-mockup-dot{ width:10px; height:10px; border-radius:50%; }
.platform-mockup-dot--red{ background:#FC605B; } .platform-mockup-dot--yellow{ background:#FDBC40; } .platform-mockup-dot--green{ background:#34C749; }
.platform-mockup-url{ flex:1; background:var(--n-150); border-radius:6px; height:24px; display:flex; align-items:center; padding:0 10px; font-size:10px; color:var(--n-500); font-family:var(--font-mono); }
.platform-tabs{ display:flex; border-bottom:1px solid var(--n-150); padding:0 18px; }
.platform-tab{ padding:12px 16px; font-size:13px; font-weight:600; color:var(--n-400); border-bottom:2px solid transparent; white-space:nowrap; }
.platform-tab--active{ color:var(--brand-700); border-bottom-color:var(--brand-700); }
.platform-mockup-body{ padding:20px; }
.platform-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.platform-stat-box{ background:var(--n-50); border-radius:10px; padding:12px 10px; text-align:center; border:1px solid var(--n-150); }
.platform-stat-label{ font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--n-400); margin-bottom:4px; }
.platform-stat-value{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--n-900); }
.platform-stat-value--teal{ color:var(--brand-700); } .platform-stat-value--green{ color:var(--green-700); } .platform-stat-value--amber{ color:var(--amber-600); }
.platform-main-bar-label{ display:flex; justify-content:space-between; font-size:11px; color:var(--n-500); margin-bottom:6px; font-weight:600; }
.platform-main-bar-track{ height:10px; background:var(--n-100); border-radius:999px; overflow:hidden; margin-bottom:18px; }
.platform-main-bar-fill{ height:100%; width:62%; background:linear-gradient(90deg,var(--brand-600),var(--brand-400)); border-radius:999px; }
.platform-chart{ display:flex; align-items:flex-end; gap:6px; height:60px; margin-bottom:16px; }
.platform-chart-bar{ flex:1; border-radius:4px 4px 0 0; min-width:20px; }
.platform-chart-bar:nth-child(1){ height:40%; background:var(--brand-200); }
.platform-chart-bar:nth-child(2){ height:65%; background:var(--brand-400); }
.platform-chart-bar:nth-child(3){ height:50%; background:var(--brand-300); }
.platform-chart-bar:nth-child(4){ height:80%; background:var(--brand-500); }
.platform-chart-bar:nth-child(5){ height:55%; background:var(--brand-300); }
.platform-chart-bar:nth-child(6){ height:72%; background:var(--brand-400); }
.platform-status-row{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--green-700); }
.platform-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-500); flex-shrink:0; }

/* ════════ FEATURES ════════ */
.features{ background:var(--n-0); }
.features .container{ text-align:center; }
.features-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; }
.feature-card{ background:var(--n-0); border-radius:16px; padding:28px 24px; text-align:left; box-shadow:var(--sh-sm); border:1px solid var(--n-150); transition:all .35s var(--ease); }
.feature-card:hover{ border-color:var(--brand-200); box-shadow:var(--sh-md); transform:translateY(-4px); }
.feature-icon{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feature-card h3{ font-size:18px; font-weight:700; color:var(--n-900); margin-bottom:8px; }
.feature-card p{ font-size:14px; line-height:1.6; color:var(--n-500); }

/* ════════ EMOCIONAL ════════ */
.emotional-section{ background:var(--n-50); padding:64px 0; }
.emotional-cards{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px; }
.emotional-card{ background:#fff; border-radius:16px; padding:28px 24px; border:1px solid var(--n-150); transition:all .3s var(--ease); }
.emotional-card:hover{ border-color:var(--brand-200); box-shadow:var(--sh-md); transform:translateY(-3px); }
.emotional-card-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:var(--brand-50); color:var(--brand-600); margin-bottom:18px; }
.emotional-card h4{ font-size:17px; font-weight:700; color:var(--n-900); margin-bottom:8px; }
.emotional-card p{ font-size:14px; line-height:1.6; color:var(--n-500); }

/* ════════ DEPOIMENTOS ════════ */
.testimonials{ background:var(--n-0); }
.testimonials .container{ text-align:center; }
.testimonials-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; text-align:left; }
.testimonial{ background:var(--n-0); border-radius:16px; padding:28px; box-shadow:var(--sh-sm); border:1px solid var(--n-150); transition:all .3s var(--ease); }
.testimonial:hover{ box-shadow:var(--sh-md); transform:translateY(-4px); }
.testimonial-stars{ color:var(--amber-500); font-size:15px; margin-bottom:14px; letter-spacing:2px; }
.testimonial p{ font-size:15px; line-height:1.65; color:var(--n-700); margin-bottom:18px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.testimonial-name{ font-weight:700; font-size:14px; color:var(--n-900); }
.testimonial-role{ font-size:12px; color:var(--n-400); }

/* ════════ FAQ ════════ */
.faq{ background:var(--n-50); }
.faq-list{ margin-top:40px; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--n-150); border-radius:14px; overflow:hidden; transition:box-shadow .2s var(--ease); }
.faq-item:hover{ box-shadow:var(--sh-sm); }
.faq-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:none; text-align:left; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--n-900); }
.faq-btn:hover{ color:var(--brand-700); }
.faq-chevron{ flex-shrink:0; transition:transform .3s var(--ease); color:var(--n-400); }
.faq-item.open .faq-chevron{ transform:rotate(180deg); color:var(--brand-600); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-item.open .faq-answer{ max-height:340px; }
.faq-answer-inner{ padding:0 24px 20px; font-size:15px; line-height:1.65; color:var(--n-600); text-align:left; }

/* ════════ CTA FINAL ════════ */
.cta{ background:var(--n-0); padding:64px 0; }
.cta-box{ background:radial-gradient(120% 120% at 85% -10%,var(--brand-600),var(--brand-800) 60%); border-radius:24px; padding:44px 24px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--sh-lg); }
.cta-box::before{ content:''; position:absolute; right:-8%; bottom:-30%; width:340px; height:340px; opacity:.1; background:url('assets/quitte-marca.png') center/contain no-repeat; filter:brightness(0) invert(1); }
.cta-box .cta-badge,.cta-box .cta-btn-primary,.cta-box .cta-social-proof,.cta-box .cta-form,.cta-box .cta-feedback,.cta-box .cta-note,.cta-box h2,.cta-box p{ position:relative; z-index:1; }
.cta-badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(105,199,154,.18); border:1px solid rgba(105,199,154,.3); border-radius:999px; padding:6px 15px; font-size:13px; font-weight:500; color:rgba(255,255,255,.92); margin:0 auto 20px; }
.cta-box h2{ font-size:30px; font-weight:800; color:#fff; margin-bottom:14px; letter-spacing:-.03em; }
.cta-box p{ font-size:16px; color:rgba(255,255,255,.74); margin:0 auto 22px; max-width:480px; }
.cta-social-proof{ font-size:13px; color:rgba(255,255,255,.6); margin-bottom:22px; }
.cta-form{ display:flex; flex-direction:column; gap:16px; max-width:460px; margin:0 auto; }
.cta-fields{ display:flex; flex-direction:column; gap:12px; }
.cta-input{ width:100%; padding:14px 18px; border-radius:11px; border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; font-size:15px; font-family:var(--font-body); backdrop-filter:blur(8px); transition:border-color .2s var(--ease); }
.cta-input::placeholder{ color:rgba(255,255,255,.5); }
.cta-input:focus{ outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.14); }
.cta-submit{ width:100%; padding:16px 32px; border-radius:11px; background:#fff; color:var(--brand-700); font-size:16px; font-weight:700; transition:all .25s var(--ease); white-space:nowrap; min-height:54px; }
.cta-submit:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.cta-submit:disabled{ opacity:.7; cursor:wait; }
.cta-feedback{ font-size:14px; padding:12px 16px; border-radius:11px; margin-top:4px; text-align:center; }
.cta-feedback-success{ background:rgba(20,154,96,.18); color:#A7F3D0; border:1px solid rgba(20,154,96,.34); }
.cta-feedback-warning{ background:rgba(210,136,42,.18); color:#FDE68A; border:1px solid rgba(210,136,42,.34); }
.cta-feedback-error{ background:rgba(205,74,64,.18); color:#FCA5A5; border:1px solid rgba(205,74,64,.34); }
.cta-note{ font-size:12px; color:rgba(255,255,255,.5); margin-top:14px; }
.cta-or-divider{ display:flex; align-items:center; gap:16px; margin:22px auto; max-width:400px; }
.cta-or-divider::before,.cta-or-divider::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.2); }
.cta-or-divider span{ font-size:12px; color:rgba(255,255,255,.45); }

/* ════════ FOOTER ════════ */
.footer{ background:var(--brand-950); color:rgba(255,255,255,.6); padding:48px 0 28px; }
.footer-logo{ height:28px; opacity:.9; }
.footer-bottom{ display:flex; flex-direction:column; gap:10px; align-items:center; font-size:13px; text-align:center; }
.footer a{ transition:color .2s var(--ease); }
.footer a:hover{ color:var(--brand-300); }

/* ════════ SECTION CTA LINK ════════ */
.section-cta-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand-700); border-bottom:1px solid var(--brand-200); padding-bottom:2px; transition:all .2s var(--ease); }
.section-cta-link:hover{ color:var(--brand-800); border-color:var(--brand-400); }

/* ════════ ANIMAÇÕES ════════ */
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.fade-up.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .fade-up{ opacity:1; transform:none; transition:none; } }

/* ════════ CONTACT MODAL ════════ */
.contact-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(7,36,46,.7); backdrop-filter:blur(6px); z-index:9000; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s var(--ease); }
.contact-modal-overlay.open{ opacity:1; }
.contact-modal{ background:#fff; border-radius:20px; padding:40px 36px 36px; max-width:480px; width:100%; position:relative; transform:translateY(20px) scale(.97); transition:transform .35s var(--ease); box-shadow:var(--sh-lg); max-height:calc(100vh - 40px); overflow-y:auto; }
.contact-modal-overlay.open .contact-modal{ transform:translateY(0) scale(1); }
.contact-modal-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:8px; background:var(--n-100); color:var(--n-500); display:flex; align-items:center; justify-content:center; }
.contact-modal-close:hover{ background:var(--n-150); color:var(--n-800); }
.contact-modal-icon{ width:48px; height:48px; border-radius:13px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.contact-modal h2{ font-size:22px; font-weight:700; color:var(--n-900); margin-bottom:6px; }
.contact-modal-subtitle{ font-size:14px; color:var(--n-500); margin-bottom:28px; line-height:1.5; }
.contact-modal-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.contact-modal-field label{ font-size:13px; font-weight:600; color:var(--n-700); }
.contact-modal-field input,.contact-modal-field textarea{ font-family:var(--font-body); font-size:14px; color:var(--n-900); background:var(--n-50); border:1.5px solid var(--n-200); border-radius:10px; padding:11px 14px; outline:none; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); resize:vertical; }
.contact-modal-field input:focus,.contact-modal-field textarea:focus{ border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(14,78,99,.12); background:#fff; }
.contact-modal-field textarea{ min-height:120px; }
.contact-modal-submit{ width:100%; padding:13px 24px; background:var(--brand-700); color:#fff; font-family:var(--font-body); font-size:15px; font-weight:700; border-radius:10px; margin-top:8px; transition:all .2s var(--ease); min-height:48px; }
.contact-modal-submit:hover:not(:disabled){ background:var(--brand-800); transform:translateY(-1px); }
.contact-modal-submit:disabled{ opacity:.6; cursor:not-allowed; }
.contact-modal-feedback{ margin-top:14px; padding:12px 16px; border-radius:10px; font-size:14px; font-weight:500; line-height:1.5; }
.contact-modal-feedback.success{ background:var(--green-50); color:var(--green-700); border:1px solid var(--green-100); }
.contact-modal-feedback.error{ background:var(--red-50); color:var(--red-700); border:1px solid var(--red-100); }
.contact-modal-feedback.warning{ background:var(--amber-50); color:var(--amber-600); border:1px solid var(--amber-100); }

/* ════════════════════ TABLET ≥640px ════════════════════ */
@media(min-width:640px){
  .container{ padding:0 24px; }
  .section{ padding:84px 0; }
  .section-title{ font-size:34px; }
  .hero h1{ font-size:46px; }
  .hero-actions{ flex-direction:row; }
  .btn-hero{ width:auto; }
  .diff-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .steps-hybrid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .journey-rail{ grid-template-columns:1fr 1fr; gap:16px; }
  .method-cards-row{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .features-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .emotional-cards{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .testimonials-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .trust-bar .container{ flex-direction:row; gap:40px; }
  .trust-bar-items{ gap:28px; }
  .cta-box{ padding:52px 36px; }
  .cta-box h2{ font-size:36px; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ════════════════════ DESKTOP ≥960px ════════════════════ */
@media(min-width:960px){
  .section{ padding:104px 0; }
  .section-title{ font-size:42px; }
  .section-sub{ font-size:18px; }

  .navbar-links{ display:flex; gap:32px; align-items:center; }
  .navbar-links a{ font-size:14px; font-weight:500; color:rgba(255,255,255,.82); transition:color .2s var(--ease); }
  .navbar.scrolled .navbar-links a{ color:var(--n-600); }
  .navbar-links a:hover{ color:#fff; }
  .navbar.scrolled .navbar-links a:hover{ color:var(--brand-700); }
  .mobile-menu-btn{ display:none; }

  .hero .container{ padding-top:96px; padding-bottom:0; }
  .hero-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; text-align:left; }
  .hero-split .hero-actions{ justify-content:flex-start; }
  .hero-split .hero-microcopy{ justify-content:flex-start; }
  .hero h1{ font-size:56px; }
  .hero-desc{ font-size:18px; line-height:1.7; max-width:540px; }
  .hero-cards-stack{ max-width:100%; align-items:flex-start; }
  .hero::after{ height:120px; }

  .diff-grid{ max-width:920px; margin-left:auto; margin-right:auto; }
  .diff-card{ padding:42px 38px; }
  .diff-card .diff-q{ font-size:30px; }

  .steps-hybrid{ gap:40px; margin-top:56px; }
  .journey-rail{ grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
  .method-section{ padding:104px 0; }
  .method-pct-big{ font-size:64px; }
  .platform-section{ padding:104px 0; }
  .platform-inner{ flex-direction:row; gap:80px; justify-content:space-between; align-items:center; }
  .features-grid{ grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
  .feature-card{ padding:34px 28px; }
  .feature-card h3{ font-size:20px; }
  .feature-card p{ font-size:15px; }
  .testimonials-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .testimonial{ padding:32px; }
  .cta{ padding:100px 0; }
  .cta-box{ padding:64px; border-radius:28px; }
  .cta-box h2{ font-size:42px; }
  .cta-box p{ font-size:18px; }
  .footer{ padding:56px 0 32px; }
}

@media (max-width:480px){ .contact-modal{ padding:32px 24px 28px; } }