/* Layout: uma coluna mobile first, dobras alternando preto e cinza-carvão. Verde forte só em CTA, números e pontos de decisão; o resto é neutro. CTA verde em 4 momentos (hero, cases, formulário, final); nas demais dobras, link discreto que também ancora no formulário. */
:root{
  color-scheme:dark;
  /* Cores do site atual da Fatture Digital */
  --bg:#000000;
  --bg-alt:#0a0a0a;
  --surface:#101010;
  --surface-2:#161616;
  --card-a:#292828;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.18);
  --text:#ffffff;
  --text-2:rgba(255,255,255,.72);
  --text-3:rgba(255,255,255,.54);
  --green:#00a651;
  --green-2:#17dd78;
  --neon:#17dd78;
  --green-deep:#004723;
  --on-green:#03150c;
  --danger:#ff6b6b;
  /* Tipografia do site: Inter nos títulos, Manrope no texto, Sora nos números */
  --font-h:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-b:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-n:"Sora","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:20px;
  --maxw:1120px;
  --space:clamp(56px,9.5vw,56px);
  --r-card:8px;
  --tint:rgba(255,255,255,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:#fff;color:#000;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Estrutura ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.fold{position:relative;overflow:hidden;overflow:clip;padding-block:var(--space);border-top:1px solid var(--line);background:var(--bg)}
.fold--alt{background:var(--bg-alt)}
.fold>.wrap{position:relative;z-index:1}
.glow-c::before{content:"";position:absolute;z-index:0;top:-160px;left:50%;translate:-50% 0;width:760px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(23,221,119,.08),transparent);pointer-events:none}

/* ---------- Tipografia ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 18px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:#b4b4b4;font:500 14px/1.25 var(--font-b);cursor:default;transition:border-color .35s var(--fx-ease),background-color .35s var(--fx-ease),color .25s var(--fx-ease),box-shadow .35s var(--fx-ease),transform .35s var(--fx-ease)}
.pill::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(23,221,119,.22);transition:box-shadow .35s var(--fx-ease),transform .35s var(--fx-ease)}
@media (hover:hover){
  .pill:hover{color:#fff;border-color:rgba(23,221,119,.45);background-color:rgba(23,221,119,.07);transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(23,221,119,.55),inset 0 1px 0 rgba(255,255,255,.08)}
  .pill:hover::before{box-shadow:0 0 0 7px rgba(23,221,119,.16),0 0 14px rgba(23,221,119,.7);transform:scale(1.1)}
}
.pill:active{transform:translateY(0) scale(.98)}
.h1{font:600 clamp(32px,8.6vw,41px)/1.06 var(--font-h);letter-spacing:-.045em;text-wrap:balance}
.h2{font:600 clamp(28px,7.6vw,36px)/1.12 var(--font-h);letter-spacing:-.04em;text-wrap:balance}
.h3{font:600 22px/1.2 var(--font-h);letter-spacing:-.025em}
.hl{color:var(--green)}
/* destaques em verde: degradê de verdes animado em loop (mesmo efeito do "com método." do ciclo) */
.h1 .hl,.h2 .hl,.metric__n,.mini__n{color:var(--green-2);background-image:linear-gradient(100deg,#0bb25a 0%,#2ff08a 50%,#0bb25a 100%);background-size:220% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gtxt 7s ease-in-out infinite}
@keyframes gtxt{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.h1 .hl,.h2 .hl,.metric__n,.mini__n{animation:none}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.h1 .hl,.h2 .hl,.metric__n,.mini__n{-webkit-text-fill-color:currentColor}}
.ident-lead,.step3 .h3,.formcard__h,.faq__q span,.metric__l,.result__tag{text-wrap:balance}
.checks li>span:last-child,.lead,.result__d,.step p{text-wrap:pretty}
.lead{font-size:clamp(16px,4.3vw,19px);line-height:1.6;color:var(--text-2);text-wrap:pretty}
.head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:40px}
.head .h2{max-width:22ch}
.head .lead{max-width:60ch}

/* ---------- CTA ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:8px 10px 8px 26px;border:0;border-radius:8px;cursor:pointer;text-decoration:none;text-align:left;
  background:linear-gradient(180deg,var(--green-2) 0%,var(--green) 100%);color:var(--on-green);font:700 16px/1.2 var(--font-h);letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px -14px rgba(23,221,119,.4);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:5px;background:var(--on-green);color:var(--green-2)}
.btn__icon svg{width:20px;height:20px}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline-color:#fff}
@media (hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 32px -12px rgba(23,221,119,.5)}}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:4px 5px 4px 18px;font-size:14px;gap:10px}
.btn--sm .btn__icon{width:34px;height:34px}
.btn--sm .btn__icon svg{width:17px;height:17px}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:40px}
.cta--center{align-items:stretch;max-width:420px;margin-inline:auto}
.cta__note{font-size:13px;color:var(--text-3);text-align:center}
/* CTA discreto: mesmo destino (formulário), sem brilho nem verde */
.cta--link{max-width:none;align-items:center}
/* botão secundário: relevo (luz no topo, sombra embaixo), chip verde com a seta, hover com elevação e glow */
.cta-link{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 8px 8px 22px;border:1px solid rgba(255,255,255,.16);border-radius:8px;
  background:linear-gradient(180deg,#242424 0%,#121212 100%);color:#fff;font:700 15px/1.2 var(--font-h);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.55),0 10px 22px -8px rgba(0,0,0,.6);
  transition:transform .2s var(--fx-ease),border-color .25s,box-shadow .25s var(--fx-ease),background .25s}
.cta-link__i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:5px;background:linear-gradient(180deg,var(--green-2) 0%,var(--green) 100%);color:var(--on-green);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -4px rgba(23,221,119,.5);transition:transform .25s var(--fx-ease),box-shadow .25s}
.cta-link__i svg{width:19px;height:19px;transition:transform .25s var(--fx-ease)}
@media (hover:hover){.cta-link:hover{transform:translateY(-2px);border-color:rgba(23,221,119,.55);background:linear-gradient(180deg,#2a2a2a 0%,#151515 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5),0 4px 6px rgba(0,0,0,.55),0 16px 30px -10px rgba(0,0,0,.65),0 0 26px -4px rgba(23,221,119,.4)}
  .cta-link:hover .cta-link__i svg{transform:translateY(2px)}
  .cta-link:hover .cta-link__i{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -4px rgba(23,221,119,.75)}}
.cta-link:active{transform:translateY(1px) scale(.99);background:linear-gradient(180deg,#101010 0%,#171717 100%);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.05),0 0 14px -4px rgba(23,221,119,.35)}
.cta-link:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}

/* ---------- Header ---------- */

/* ---------- Dobra 1: Hero ---------- */
.hero{padding-top:calc(env(safe-area-inset-top,0px) + 104px);padding-bottom:0;border-top:0;text-align:center}
.hero::before{content:"";position:absolute;z-index:0;top:-200px;left:50%;translate:-50% 0;width:860px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(23,221,119,.15),transparent);pointer-events:none}
.hero .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.hero .h1{max-width:20ch}
.hero .lead{max-width:44ch}
.hero .cta{width:100%;max-width:420px;margin-top:10px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:440px;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);text-align:center;font:600 13px/1.35 var(--font-b);color:var(--text)}
.proof li{display:flex;align-items:center;justify-content:center;padding:12px 8px;text-wrap:balance}
.proof li+li{border-left:1px solid var(--line)}
.trust{margin-top:40px;padding-block:24px 36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,10,10,.42);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
.trust__label{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font:700 17px/1.3 var(--font-h);letter-spacing:-.01em;color:#fff;margin-bottom:24px}
.trust__label::before,.trust__label::after{content:"";flex:none;width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--green-2))}
.trust__label::after{background:linear-gradient(270deg,transparent,var(--green-2))}
.ticker{position:relative;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12.5%,#000 87.5%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12.5%,#000 87.5%,transparent 100%)}
.ticker::-webkit-scrollbar{display:none}
.ticker:focus-visible{outline-offset:-4px}
.ticker__track{--logo-h:44px;display:flex;align-items:center;gap:44px;width:max-content;margin-left:48px;padding-block:8px;padding-right:44px}
.ticker__track img{height:calc(var(--logo-h) * var(--s,1));width:auto;flex:none;opacity:.92}
.js .ticker{overflow:hidden}
.js .ticker__track{animation:tick 90s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ticker{overflow-x:auto}
  .js .ticker__track{animation:none}
  .btn,.faq__a,.faq__ico::before,.faq__ico::after,.sticky,.sticky.on,.link-btn svg{transition:none}
}

/* ---------- Cards ---------- */
.card{position:relative;padding:28px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:radial-gradient(62.9% 56.9% at 0 -7%,var(--card-a) 0%,#000 100%)}
.fold--alt .card{background:radial-gradient(62.9% 56.9% at 0 -7%,var(--card-a) 0%,#050505 100%)}
.icon{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:var(--tint);border:1px solid var(--line-2);color:#9fd8b8}
.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Dobra 2: Problema ---------- */
.grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:640px;margin-inline:auto}
.problem{display:grid;grid-template-columns:48px 1fr;column-gap:14px;row-gap:10px;align-items:center}
.problem p{grid-column:1 / -1}
.problem .icon{width:44px;height:44px}
.problem .h3{font-size:clamp(24px,6.4vw,28px)}
.problem p{color:var(--text-2)}
.statement{margin-top:36px;padding-top:32px;border-top:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.statement .h2{font-size:clamp(28px,7.4vw,36px);max-width:20ch}
.statement p{font:600 clamp(18px,4.8vw,22px)/1.45 var(--font-h);letter-spacing:-.02em;color:var(--text);max-width:34ch;text-wrap:balance}
.statement--text p{font-size:18px;line-height:1.55;max-width:40ch;text-wrap:pretty}

/* ---------- Dobra 3: Bowtie ---------- */
.stage{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:18px 18px;border-radius:var(--r-card);border:1px solid var(--line);background:radial-gradient(62.9% 56.9% at 0 -7%,var(--card-a) 0%,#000 100%)}
.stage__n{grid-row:1 / span 3;display:grid;place-items:center;align-self:start;width:44px;height:44px;border-radius:6px;border:1px solid var(--line-2);background:var(--tint);color:var(--text);font:700 16px/1 var(--font-n)}
.stage__t{font:600 20px/1.2 var(--font-h);letter-spacing:-.02em;text-transform:uppercase}
.stage__s{margin-top:4px;color:var(--text-2);font:600 15px/1.35 var(--font-b)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips li{padding:5px 11px;border-radius:6px;background:rgba(0,166,81,.35);border:1px solid rgba(23,221,119,.5);font-size:13px;font-weight:600;line-height:1.3;color:#fff}
.infra .chips li{background:transparent;border-color:rgba(0,166,81,.8);color:#fff}
.stage:not(:last-child)::after{content:"";position:absolute;left:41px;bottom:-15px;width:2px;height:16px;background:linear-gradient(var(--line-2),transparent);z-index:2}

/* ---------- Dobra 4: Frentes de atuação ---------- */
.fronts{display:grid;gap:14px}
.front{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;padding:18px 16px;border-radius:var(--r-card);border:1px solid var(--line);background:radial-gradient(62.9% 56.9% at 0 -7%,var(--card-a) 0%,#050505 100%)}
.front .stage__n{grid-row:auto;width:36px;height:36px;font-size:13px}
.front>.front__d,.front>.chips{grid-column:1 / -1}
.front__t{align-self:center;font:600 20px/1.2 var(--font-h);letter-spacing:-.02em;text-transform:uppercase}
.front__d{color:var(--text);font:600 16px/1.4 var(--font-h);letter-spacing:-.01em;text-wrap:balance}
.front .chips{margin-top:2px}
.infra{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:28px;padding:26px 22px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));text-align:center}
.infra__t{font:600 clamp(19px,5vw,24px)/1.25 var(--font-h);letter-spacing:-.025em;text-wrap:balance}
.chips--center{justify-content:center;margin-top:0}
.infra__s{max-width:34ch;font-size:15px;line-height:1.5;color:var(--text-2);text-wrap:balance}
.h2--split span{display:block}
.h2--split span+span{margin-top:14px}
.btl{display:none}

/* ---------- Dobra 4: Resultados ---------- */
.result{display:flex;flex-direction:column;gap:14px}
.result__logo{height:var(--lh,38px);width:auto;align-self:flex-start;opacity:.95}
.metric{display:flex;align-items:center;gap:14px;padding-block:10px;border-top:1px solid var(--line)}
.metric:first-of-type{border-top:0;padding-top:4px}
.metric__n{flex:none;min-width:5.6ch;font:700 clamp(36px,10.4vw,46px)/1 var(--font-n);letter-spacing:-.04em;color:var(--green-2);font-variant-numeric:tabular-nums}
.metric__l{font:600 15px/1.35 var(--font-h);letter-spacing:-.01em;color:var(--text)}
.result__tag{align-self:flex-start;padding:8px 14px;border-radius:8px;background:var(--tint);border:1px solid var(--line-2);font:700 15px/1.35 var(--font-h);color:var(--green-2)}
.result__d{color:var(--text-2);font-size:15px}
.result__d strong{color:var(--text);font-weight:700}
.link-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font:700 15px/1 var(--font-h);color:var(--text)}
a.link-btn{text-decoration:none}
.link-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
@media (hover:hover){.link-btn:hover svg{transform:translateX(4px)}}
.results-cta{margin-top:44px}

/* ---------- Dobra 5: Método + diferencial ---------- */
.part+.part{margin-top:clamp(56px,9vw,56px)}
.cycle{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"l4 l1" "ring ring" "l3 l2";gap:0 16px;width:100%;max-width:400px;margin:0 auto 22px}
.cycle__ring{grid-area:ring;width:min(100%,290px);margin:6px auto 10px}
.cycle__ring svg{width:100%;height:auto;overflow:visible}
.cycle__lbl{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.3;color:var(--text-2)}
.cycle__lbl b{font:700 17px/1.2 var(--font-h);letter-spacing:-.02em;color:var(--text)}
.cycle__lbl b i{font:700 13px/1 var(--font-n);font-style:normal;color:var(--text);margin-right:7px}
.cycle__lbl--1{grid-area:l1;align-items:flex-end;text-align:right}
.cycle__lbl--2{grid-area:l2;align-items:flex-end;text-align:right}
.cycle__lbl--3{grid-area:l3;align-items:flex-start;text-align:left}
.cycle__lbl--4{grid-area:l4;align-items:flex-start;text-align:left}
.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin-bottom:6px;font:600 clamp(15px,4.3vw,18px)/1.4 var(--font-h);letter-spacing:-.02em;color:var(--text)}
.flow span{color:var(--text-3)}
.steps4{display:grid;gap:12px}
.step{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center;padding:18px 20px}
.step>.step__q,.step>p{grid-column:1 / -1}
.step__n{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;border:1px solid var(--line-2);background:var(--tint);color:var(--text);font:700 14px/1 var(--font-n)}
.step .h3{font-size:24px}
.step__q{font:700 16px/1.35 var(--font-b);color:var(--text)}
.step p:last-child{color:var(--text-2);font-size:15px}
/* Faixa do diferencial: título, parágrafo e 3 etapas compactas, sem cards */
.strip{padding:28px 22px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.strip__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.strip__head .h2{font-size:clamp(24px,6.2vw,30px);max-width:30ch}
.strip__head .lead{font-size:clamp(15px,4vw,17px);max-width:62ch}
.strip__list{display:grid;gap:0;margin-top:22px}
.strip__item{display:grid;align-content:start;gap:6px;padding-block:18px;border-top:1px solid var(--line)}
.strip__tag{font:700 12px/1 var(--font-h);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.strip__item .h3{font-size:19px}
.strip__item p{color:var(--text-2);font-size:15px}
.strip__close{margin-top:6px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font:600 clamp(17px,4.6vw,20px)/1.4 var(--font-h);letter-spacing:-.02em;color:var(--text);text-wrap:balance}

/* ---------- Dobra 6: Identificação ---------- */
.checks{max-width:760px;margin-inline:auto;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:center;padding:14px 18px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 clamp(16px,4.3vw,18px)/1.4 var(--font-h);letter-spacing:-.015em}
.checks__i{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--tint);border:1px solid var(--line-2);color:var(--green-2)}
.checks__i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ident-close{margin:36px auto 0;text-align:center;max-width:22ch;font:600 clamp(24px,6.6vw,32px)/1.2 var(--font-h);letter-spacing:-.035em;text-wrap:balance}
.icp{max-width:560px;margin:22px auto 0;text-align:center;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:balance}

/* ---------- Dobra 7: Próximo passo + formulário ---------- */
.next{display:grid;gap:36px}
.steps3{display:grid;gap:14px}
.step3{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:6px;padding:20px 20px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.step3 .stage__n{grid-row:1 / span 2}
.step3 .h3{font-size:20px}
.step3 p{color:var(--text-2);font-size:15px}
.formcard{position:relative;scroll-margin-top:8px;padding:28px 16px 20px;border-radius:8px;border:1px solid rgba(23,221,119,.3);background:radial-gradient(70% 45% at 50% 0%,rgba(23,221,119,.09),transparent),linear-gradient(180deg,#0f0f0f,#050505);box-shadow:0 30px 70px -36px rgba(23,221,119,.28)}
.formcard:focus{outline:none}
.formcard__h{font:600 clamp(24px,6.6vw,30px)/1.15 var(--font-h);letter-spacing:-.035em}
.formcard__s{margin:6px 0 22px;color:var(--text-2);font-size:15px}
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font:600 14px/1.3 var(--font-b);color:var(--text)}
.field label small{font-weight:500;color:var(--text-3)}
.input{width:100%;min-height:52px;padding:14px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:#0b0b0b;color:var(--text);font-size:16px;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:rgba(255,255,255,.55)}
.input:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 4px rgba(23,221,119,.18)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,107,107,.15)}
.input[aria-invalid="true"]:focus{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,107,107,.35)}
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select.input:invalid{color:rgba(255,255,255,.55)}
select.input option{color:#fff;background:#111}
.field__err{font:500 13px/1.35 var(--font-b);color:var(--danger)}
.field__err:empty{height:0;margin-top:-7px}
.field__err:not(:empty){animation:rv .35s var(--fx-ease) backwards;--ry:-8px}
.form__err{margin:0;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,107,107,.5);background:rgba(255,107,107,.08);color:#ffb3b3;font-size:14px;line-height:1.45}
.form__err:not([hidden]){animation:rv .35s var(--fx-ease) backwards;--ry:-8px}
.form__hint{font-size:13px;color:var(--text-3);margin-top:-6px}
.form__foot{margin-top:6px;text-align:center;font-size:13px;color:var(--text-3)}
.success{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0}
.success[hidden]{display:none}
.success:not([hidden]){animation:rv .6s var(--fx-ease) backwards}
.success .icon{width:56px;height:56px;border-radius:8px}
.success h3{font:600 26px/1.15 var(--font-h);letter-spacing:-.03em}
.success p{color:var(--text-2)}
.success small{color:var(--text-3);font-size:13px}

/* ---------- Dobra 8: FAQ ---------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:10px}
.faq__item{border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:border-color .2s,background .2s}
.faq__item.open{border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,#131313,#0a0a0a)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:16px 18px 16px 20px;background:none;border:0;cursor:pointer;text-align:left;font:600 clamp(16px,4.4vw,18px)/1.35 var(--font-h);letter-spacing:-.015em;color:var(--text);border-radius:8px}
.faq__ico{position:relative;flex:none;width:32px;height:32px;border-radius:6px;background:var(--tint);border:1px solid var(--line-2)}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--text);transition:transform .25s ease}
.faq__ico::after{transform:rotate(90deg)}
.faq__item.open .faq__ico::after{transform:rotate(0)}
.faq__q{transition:color .3s ease}
.faq__item.open .faq__q{color:var(--green-2)}
.faq__item.open .faq__ico{border-color:rgba(23,221,119,.5)}
.faq__item.open .faq__ico::before,.faq__item.open .faq__ico::after{background:var(--green-2)}
.faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s}
.faq__item.open .faq__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 20px 22px;color:var(--text-2);font-size:16px;max-width:64ch}
html:not(.js) .faq__a{grid-template-rows:1fr;visibility:visible}
html:not(.js) .faq__ico{display:none}

/* ---------- Dobra 9: CTA final + rodapé ---------- */
/* Última dobra: cartão com logo, título, texto e botão (igual ao site atual), continuado pelo rodapé */
.final{text-align:center;padding-bottom:0;border-bottom:0}
.final-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;margin-bottom:18px;padding:38px 18px 40px;border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;background:radial-gradient(80% 60% at 50% 0%,rgba(23,221,119,.14) 0%,transparent 70%),rgba(10,10,10,.5);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.32),0 14px 38px rgba(0,0,0,.45)}
.final-card__logo{width:134px;height:auto;margin-bottom:4px}
.final-card .h2{max-width:14ch;font-size:clamp(30px,8vw,38px)}
.final-card .lead{max-width:38ch}
.final-card .cta{width:100%;max-width:420px;margin-top:10px}
.btn-dark{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 18px;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;text-decoration:none;font:600 16px/1.2 var(--font-h);letter-spacing:-.01em;background:radial-gradient(48% 75% at 72% 0%,rgba(38,138,86,.62),transparent 78%),linear-gradient(180deg,#242424,#050505);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px -16px rgba(38,138,86,.7);transition:border-color .2s,transform .2s}
.btn-dark svg{flex:none;width:16px;height:16px}
@media (min-width:340px){.btn-dark span{white-space:nowrap}}
@media (max-width:369px){.btn-dark{font-size:14.5px}}
.btn-dark:active{transform:scale(.98)}
.btn-dark:focus-visible{outline-color:#fff}
@media (hover:hover){.btn-dark:hover{border-color:rgba(255,255,255,.3)}}

/* ---------- CTA fixo no mobile ---------- */
.sticky{position:fixed;z-index:55;left:0;right:0;bottom:0;padding:22px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(0,0,0,.96) 55%,rgba(0,0,0,0));transform:translateY(120%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;pointer-events:none}
.sticky.on{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
.sticky .btn{max-width:520px;margin-inline:auto}
.sticky.on .btn{pointer-events:auto}
html:not(.js) .sticky{display:none}

@media (max-width:400px){
  .formcard{padding-inline:14px}
  .formcard .btn{font-size:15px;gap:8px;padding-left:18px}
  .formcard .btn__icon{width:36px;height:36px}
}

/* ================= Versão B: só mobile ================= */
[hidden]{display:none!important}
.app{max-width:480px;margin-inline:auto;position:relative;background:var(--bg)}
@media (min-width:500px){.app{border-inline:1px solid rgba(255,255,255,.07)}}
.sticky{max-width:480px;margin-inline:auto}
.sticky .btn{max-width:440px}
.cycle-col{margin-bottom:32px}

/* dobras de prova e decisão: preto neutro */
.fold--dark{background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);border-top-color:rgba(255,255,255,.08)}
.fold--dark .card{background:radial-gradient(62.9% 56.9% at 0 -7%,var(--card-a) 0%,#000 100%);border-color:rgba(255,255,255,.13)}
.fold--dark .step3{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.fold--dark .metric{border-top-color:rgba(255,255,255,.14)}
.fold--dark .pill{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
@media (hover:hover){.fold--dark .pill:hover{background-color:rgba(23,221,119,.07);border-color:rgba(23,221,119,.45)}}
.fold--dark .lead{color:rgba(255,255,255,.76)}

/* itens que só aparecem quando o dado for informado no bloco CONFIG do script */
.result__meta{margin-top:-4px;font:600 13px/1.4 var(--font-b);letter-spacing:.01em;color:var(--text-3)}
.privacy{margin-top:12px;font-size:12.5px;line-height:1.5;text-align:center;color:var(--text-3)}
.privacy a{color:var(--text-2);text-underline-offset:3px}
.wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:12px;border:1px solid var(--line-2);border-radius:8px;background:var(--tint);color:var(--text);font:600 15px/1.2 var(--font-h);text-decoration:none}
.wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.wa--final{max-width:420px;margin-inline:auto;width:100%}

/* ================= Cabeçalho e rodapé: linguagem do site Fatture 2026 (glass + noise + neumorfismo) ================= */
:root{
  --fx-ink:#060606;--fx-ink-1:#0d0d0d;--fx-ash:#b0b0b0;--fx-pearl:#f0f0f0;
  --fx-g:#27d265;--fx-g-hi:#40e877;--fx-g-lo:#19a84e;--fx-glow:rgba(39,210,101,.38);
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --neumo-bg:color-mix(in srgb,var(--fx-ink-1) 90%,#000);--neumo-bg-active:color-mix(in srgb,var(--fx-ink-1) 60%,#000);
  --neumo-light-rest:-1px -1px 4px rgba(255,255,255,.15);--neumo-light-hover:-2px -2px 12px rgba(255,255,255,.15);--neumo-light-active:2px 2px 12px rgba(255,255,255,.10);
  --neumo-shadow-rest:2px 2px 4px rgba(0,0,0,.25);--neumo-shadow-hover:3px 3px 12px rgba(0,0,0,.25);--neumo-shadow-active:-3px -3px 12px rgba(0,0,0,.35);
  --neumo-inset-rest:inset -1px -1px 4px rgba(255,255,255,.15),inset 2px 2px 4px rgba(0,0,0,.25);
  --neumo-inset-hover:inset -2px -2px 12px rgba(255,255,255,.15),inset 3px 3px 12px rgba(0,0,0,.25);
  --neumo-inset-active:inset -3px -3px 12px rgba(255,255,255,.10),inset 2px 2px 12px rgba(0,0,0,.35);
  --fx-noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* vidro com ruído (cabeçalho e cartão do rodapé) */
.hdr,.ft{isolation:isolate;border:1px solid rgba(255,255,255,.10);background:rgba(10,10,10,.42);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.55),0 14px 38px rgba(0,0,0,.45)}
.hdr::before,.ft::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--fx-noise);opacity:.10;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.hdr>*,.ft>*{position:relative;z-index:1}

/* neumorfismo: luz (color-dodge) e sombra (multiply) em pseudo-elementos */
.neumo{position:relative;isolation:isolate;color:var(--fx-ash);background-color:var(--neumo-bg);border:.3px solid transparent;box-shadow:var(--neumo-inset-rest);text-decoration:none;
  transition:color .2s var(--fx-ease),background-color .4s var(--fx-ease),border-color .4s var(--fx-ease),box-shadow .4s var(--fx-ease),transform .25s var(--fx-ease)}
.neumo::before,.neumo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;transition:box-shadow .4s var(--fx-ease)}
.neumo::before{box-shadow:var(--neumo-light-rest);mix-blend-mode:color-dodge}
.neumo::after{box-shadow:var(--neumo-shadow-rest);mix-blend-mode:multiply}
@media (hover:hover){
  .neumo:hover{color:var(--fx-pearl);box-shadow:var(--neumo-inset-hover)}
  .neumo:hover::before{box-shadow:var(--neumo-light-hover)}
  .neumo:hover::after{box-shadow:var(--neumo-shadow-hover)}
}
.neumo:active{color:var(--fx-g);background-color:var(--neumo-bg-active);border-color:color-mix(in srgb,var(--fx-g) 50%,#000);box-shadow:var(--neumo-inset-active)}
.neumo:active::before{box-shadow:var(--neumo-light-active)}
.neumo:active::after{box-shadow:var(--neumo-shadow-active)}
.neumo:focus-visible{outline:2px solid rgba(39,210,101,.55);outline-offset:2px}

/* ---------- Cabeçalho ---------- */
.hdr{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 14px);left:12px;right:12px;max-width:456px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 10px;border-radius:18px;transition:background .4s,box-shadow .4s}
.hdr.scrolled{background:rgba(6,6,6,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.7),0 18px 48px rgba(0,0,0,.6)}
.hdr__logo{display:inline-flex;flex:none;width:48px;height:48px;border-radius:8px;line-height:0;transition:transform .4s var(--fx-ease)}
.hdr__logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(39,210,101,.18));transition:filter .4s var(--fx-ease),transform .4s var(--fx-ease)}
.hdr__logo:active img{transform:scale(.94)}
.hdr__logo:focus-visible{outline:2px solid rgba(39,210,101,.55);outline-offset:2px}
@media (hover:hover){.hdr__logo:hover img{transform:scale(1.06);filter:drop-shadow(0 3px 10px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(39,210,101,.38))}}
.hdr__cta{display:inline-flex;align-items:center;gap:8px;flex:none;height:48px;padding:0 22px;border-radius:8px;white-space:nowrap;
  font:600 14px/1 var(--font-h);color:var(--fx-ink);text-decoration:none;
  background-color:var(--fx-g);background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 45%,rgba(0,0,0,.14) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.32),0 -1px 0 rgba(255,255,255,.10),0 2px 4px rgba(0,0,0,.6),0 10px 22px rgba(0,0,0,.45),0 0 24px var(--fx-glow);
  transition:transform .2s var(--fx-ease),box-shadow .2s var(--fx-ease),background-color .2s var(--fx-ease)}
.hdr__cta:active{background-color:var(--fx-g-lo);background-image:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.06) 55%,rgba(255,255,255,.03) 100%);transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 0 rgba(0,0,0,.4),0 0 14px var(--fx-glow)}
@media (hover:hover){.hdr__cta:hover{background-color:var(--fx-g-hi);transform:translateY(-2px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.32),0 -1px 0 rgba(255,255,255,.16),0 4px 6px rgba(0,0,0,.6),0 16px 32px rgba(0,0,0,.55),0 0 42px var(--fx-glow)}}
.hdr__cta:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px rgba(39,210,101,.45),0 10px 22px rgba(0,0,0,.45),0 0 28px var(--fx-glow)}
.hdr__nav{display:inline-flex;align-items:center;flex:none;height:44px;margin-left:auto;padding:0 16px;border-radius:8px;font:600 14px/1 var(--font-h);letter-spacing:-.005em}
.hdr{gap:8px}
@media (max-width:380px){.hdr__nav{padding:0 12px;font-size:13px}.hdr__cta{padding:0 14px;font-size:13px}}
@media (max-width:350px){.hdr__x{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hdr{animation:hdr-in .6s var(--fx-ease) both}
  .hdr__logo{animation:hdr-item .5s var(--fx-ease) .18s both}
  .hdr__cta{animation:hdr-item .5s var(--fx-ease) .45s both}
  @keyframes hdr-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes hdr-item{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
}

/* ---------- Rodapé ---------- */
.foot-wrap{background:var(--bg-alt);padding:0 0 calc(40px + env(safe-area-inset-bottom,0px))}
.foot-wrap .wrap{padding-inline:var(--gutter)}
.ft{position:relative;padding:30px 24px 22px;border-radius:18px;color:var(--fx-ash);font-family:var(--font-b)}
.ft__top{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.055)}
.ft__brand{grid-column:1/-1}
.ft__logo{display:inline-block;line-height:0;margin-bottom:14px;border-radius:15px;transition:transform .4s var(--fx-ease)}
.ft__logo img{width:88px;height:88px;display:block;object-fit:contain;filter:drop-shadow(0 3px 12px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,255,255,.06));transition:filter .4s var(--fx-ease)}
.ft__logo:focus-visible{outline:2px solid rgba(39,210,101,.55);outline-offset:2px}
@media (hover:hover){.ft__logo:hover{transform:translateY(-2px)}.ft__logo:hover img{filter:drop-shadow(0 5px 16px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(39,210,101,.18))}}
.ft__tag{margin:0 0 14px;font-size:16px;font-style:italic;font-weight:400;color:var(--fx-pearl)}
.ft__social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ft__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px}
@media (hover:hover){.ft__social a:hover{color:var(--fx-g);transform:translateY(-2px)}}
.ft__social svg{width:18px;height:18px;display:block}
.ft__col h6{margin:0 0 14px;font:600 13px/1.2 var(--font-n);letter-spacing:.1em;text-transform:uppercase;color:var(--fx-g)}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ft__col a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;font:500 13px/1 var(--font-b);letter-spacing:.01em}
.ft__bot{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding-top:20px;font:500 13px/1.4 var(--font-b);letter-spacing:.03em;color:var(--fx-g-hi)}

/* dobra 7 encurtada: as 4 frentes viram chips */
.ident-list{display:grid;gap:14px;max-width:340px;margin:0 auto;text-align:left}
.ident-list li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;font:600 18px/1.35 var(--font-h);letter-spacing:-.015em;color:var(--text)}
.ident-list .checks__i{width:30px;height:30px}
.ident-close{margin-top:30px}

/* ================= Funil vertical em bow-tie (A Solução): 4 trapézios, estética do método do site Fatture 2026 ================= */
.fx-funnel{position:relative;margin:0 auto 36px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fx-st{position:relative}
.fx-st__box{position:relative;isolation:isolate;width:100%;min-height:var(--h);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  justify-content:center;padding:var(--pt,20px) var(--pad) var(--pb,20px);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));transition:transform .3s var(--fx-ease)}
.fx-st__box::before,.fx-st__box::after{content:"";position:absolute;pointer-events:none;z-index:-1;
  clip-path:polygon(calc((100% - var(--t))/2) 0,calc((100% + var(--t))/2) 0,calc((100% + var(--b))/2) 100%,calc((100% - var(--b))/2) 100%)}
.fx-st__box::before{inset:0;background:rgba(255,255,255,.26)}      /* borda fina */
.fx-st__box::after{inset:1.5px;background:var(--fill)}               /* preenchimento de vidro escuro */
.fx-st__box:active{transform:scale(.99)}

.fx-st__idx{font:600 12.5px/1 var(--font-n);letter-spacing:.22em;color:var(--fx-g);padding-left:.22em}
.fx-st__name{margin:0;font:600 clamp(18px,5vw,21px)/1.15 var(--font-b);letter-spacing:-.01em;color:var(--fx-pearl)}
.fx-st__desc{margin:0;font:500 13.5px/1.4 var(--font-b);color:var(--fx-ash)}

/* larguras do desenho: topo → base de cada trapézio (% da largura total) */
.fx-st--1{--t:100%;--b:80%;--h:136px;--pad:14%;--fill:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(13,13,13,.96) 38%)}
.fx-st--2{--t:77%;--b:60%;--h:132px;--pad:20%;--fill:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(13,13,13,.96) 38%,rgba(20,60,36,.96) 100%)}
.fx-st--3{--t:56%;--b:44%;--h:150px;--pad:26%;--fill:linear-gradient(160deg,#27d265 0%,#148c40 100%)}
.fx-st--4{--t:44%;--b:64%;--h:112px;--pad:22%;--pt:20px;--pb:26px;--fill:linear-gradient(180deg,rgba(20,60,36,.96) 0%,rgba(13,13,13,.96) 60%,rgba(13,13,13,.96) 100%)}
.fx-st--5{--t:64%;--b:88%;--h:168px;--pad:20%;--pt:34px;--pb:20px;--fill:linear-gradient(180deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.96) 60%,rgba(255,255,255,.05) 100%)}
.fx-st--1 .fx-st__desc,.fx-st--2 .fx-st__desc{max-width:28ch}

/* 03 Conversão: o nó do bow-tie, em verde Fatture com glow (como "Vendas" no site) */
.fx-st--3 .fx-st__box{filter:drop-shadow(0 0 14px rgba(39,210,101,.45)) drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.fx-st--3 .fx-st__box::before{background:color-mix(in srgb,var(--fx-g-hi) 60%,#000 40%)}
.fx-st--3 .fx-st__idx{color:#0a0a0a}
.fx-st--3 .fx-st__name{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);font:700 clamp(19px,5.4vw,23px)/1.1 var(--font-n);letter-spacing:.05em;text-transform:uppercase}
.fx-st--3 .fx-st__desc{color:rgba(0,0,0,.74);font-weight:600;font-size:13px;line-height:1.35}

/* silhueta arredondada e contínua, gerada por JS (o clip-path reto acima fica como fallback) */
.fx-st__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.fx-funnel.fx-svg .fx-st__box::before,.fx-funnel.fx-svg .fx-st__box::after{display:none}
.fx-st__blur{position:absolute;inset:0;z-index:-2;pointer-events:none;-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
.fx-st__noise{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--fx-noise);background-size:200px;opacity:.05}
.fx-funnel.fx-svg .fx-st__box{filter:none}
.fx-funnel.fx-svg .fx-st__svg{filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.fx-funnel.fx-svg .fx-st--3 .fx-st__svg{filter:drop-shadow(0 0 14px rgba(39,210,101,.45)) drop-shadow(0 8px 20px rgba(0,0,0,.4))}

/* entrada em sequência (só com JS; sem JS tudo aparece).
   A animação roda nos FILHOS do bloco (traçado, desfoque, ruído e textos), nunca no bloco:
   opacidade/transform animados num ancestral isolam o fundo e o desfoque só apareceria no fim. */
html.js .fx-funnel:not(.is-in) .fx-st__box>*{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .fx-funnel.is-in .fx-st__box>*{animation:fx-in .7s var(--fx-ease) var(--sd,0s) backwards}
  .fx-st--1{--sd:.05s}.fx-st--2{--sd:.3s}.fx-st--3{--sd:.55s}.fx-st--4{--sd:.8s}.fx-st--5{--sd:1s}
  .fx-funnel.fx-svg.is-in .fx-st--3 .fx-st__svg{animation:fx-in .7s var(--fx-ease) .55s backwards,fx-pulse 1.4s ease-out 1.3s backwards}
  @keyframes fx-in{from{opacity:0;transform:translateY(20px) scale(.94)}}
  @keyframes fx-pulse{40%{filter:drop-shadow(0 0 30px rgba(39,210,101,.85)) drop-shadow(0 8px 20px rgba(0,0,0,.4))}}
}

/* ================= Entradas: fade-in + slide-in (só opacity/transform; sem JS tudo aparece) ================= */
@keyframes rv{from{opacity:0;transform:translate3d(var(--rx,0px),var(--ry,-22px),0)}}
html.js [data-rv]:not(.rv-in){opacity:0}
html.js [data-rv].rv-in{animation:rv .7s var(--fx-ease) var(--rd,0s) backwards}
/* hero: sequência ao carregar (o título fica de fora para não atrasar o LCP) */
html.js #topo .pill,html.js #topo .h1,html.js #topo .crumb,html.js #topo .lead,html.js #topo .cta,html.js #topo .proof,html.js #topo .trust{animation:rv .7s var(--fx-ease) backwards;--ry:-16px}
html.js #topo .crumb{animation-delay:0s}
html.js #topo .pill{animation-delay:.05s}html.js #topo .h1{animation-delay:.1s}html.js #topo .lead{animation-delay:.18s}html.js #topo .cta{animation-delay:.2s}html.js #topo .proof{animation-delay:.28s}html.js #topo .trust{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){html.js [data-rv]{opacity:1!important;animation:none!important}html.js #topo .pill,html.js #topo .h1,html.js #topo .crumb,html.js #topo .lead,html.js #topo .cta,html.js #topo .proof,html.js #topo .trust{animation:none}}

/* números: fade-in + contador (sobe de baixo para cima; negativos descem de cima para baixo) */
.cnt{display:inline-block;font-variant-numeric:tabular-nums}
html.js .cnt-host:not(.cnt-in){opacity:0}
html.js .cnt-host.cnt-in{animation:cnt-in .7s var(--fx-ease) backwards}
html.js .metric__n.cnt-host.cnt-in,html.js .mini__n.cnt-host.cnt-in{animation:cnt-in .7s var(--fx-ease) backwards,gtxt 7s ease-in-out infinite}
@keyframes cnt-in{from{opacity:0;transform:translateY(var(--cy,16px))}}
@media (prefers-reduced-motion:reduce){html.js .cnt-host{opacity:1!important;animation:none!important}}

/* ciclo PDCA: anel premium animado em loop (cometa percorre o círculo e acende cada etapa em sequência) */
.cyc-comet circle{animation:cyc-run var(--dur,10s) linear infinite}
@keyframes cyc-run{from{stroke-dashoffset:var(--d)}to{stroke-dashoffset:calc(var(--d) - 100px)}}
.cyc-comet{filter:drop-shadow(0 0 3px rgba(23,221,120,.55))}
.cyc-node{transform-box:fill-box}
.cyc-glow,.cyc-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:cyc-pulse var(--dur,10s) ease-out infinite;animation-delay:var(--nd,0s)}
.cyc-glow{filter:blur(3.5px)}
.cyc-node{--dur:10s}
@keyframes cyc-pulse{0%{opacity:0;transform:scale(.92)}3%{opacity:1;transform:scale(1.08)}13%{opacity:0;transform:scale(1.18)}100%{opacity:0}}
.cyc-spin{transform-origin:150px 150px;animation:cyc-rot 48s linear infinite}
@keyframes cyc-rot{to{transform:rotate(360deg)}}
.cyc-breathe{transform-origin:150px 150px;animation:cyc-br 6s ease-in-out infinite}
@keyframes cyc-br{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.cycle__lbl b i{display:inline-block;min-width:1.1em}
.cycle__lbl b i{animation:lbl-i 10s ease-out infinite;animation-delay:var(--nd,0s)}
.cycle__lbl>span{animation:lbl-s 10s ease-out infinite;animation-delay:var(--nd,0s)}
@keyframes lbl-i{0%{color:var(--text)}3%{color:var(--green-2);text-shadow:0 0 10px rgba(23,221,120,.65)}16%{color:var(--text);text-shadow:none}100%{color:var(--text)}}
@keyframes lbl-s{0%{color:var(--text-2)}3%{color:#fff}16%{color:var(--text-2)}100%{color:var(--text-2)}}
.flow__w{animation:flow-w 10s ease-out infinite;animation-delay:var(--nd,0s)}
@keyframes flow-w{0%{color:inherit}3%{color:var(--green-2)}16%{color:inherit}100%{color:inherit}}
@media (prefers-reduced-motion:reduce){.cyc-comet circle,.cyc-glow,.cyc-ring,.cyc-spin,.cyc-breathe,.cycle__lbl,.cycle__lbl b i,.cycle__lbl>span,.flow__w{animation:none!important}.cyc-comet{display:none}}

/* animações contínuas: pausadas fora da tela, iniciam quando o scroll chega */
html.js [data-live]:not(.live),html.js [data-live]:not(.live) *{animation-play-state:paused!important}

/* "Elo quebrado": cena ilustrada (várias iniciativas -> operação integrada ausente -> receita e lucro vazios). Mobile vertical, desktop horizontal */
.statement.gap{margin-top:0;position:relative;align-items:stretch;gap:26px;padding:28px 18px 30px;border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden;
  background:radial-gradient(70% 40% at 50% 0%,rgba(23,221,119,.1),transparent),rgba(10,10,10,.42);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.32),0 14px 38px rgba(0,0,0,.4)}
.statement.gap::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 60% at 50% 38%,#000,transparent 85%);mask-image:radial-gradient(70% 60% at 50% 38%,#000,transparent 85%);opacity:.55}
.statement.gap>*{position:relative}
.statement.gap+.grid3{margin-top:24px}
.statement.gap p{max-width:none;font:600 clamp(18px,4.9vw,21px)/1.5 var(--font-h);letter-spacing:-.02em;text-align:center;text-wrap:pretty}
.statement.gap .hl{white-space:nowrap;color:var(--green-2);background-image:linear-gradient(100deg,#0bb25a 0%,#2ff08a 50%,#0bb25a 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gtxt 7s ease-in-out infinite}
.gap-viz{display:flex;justify-content:center}
.gap-svg{display:block;width:100%;height:auto;overflow:visible}
.gap-svg--v{max-width:320px}
.gap-svg--h{display:none}
.gap-svg text{font-family:var(--font-h)}
.gap-card{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.16);stroke-width:1.2}
.gap-card--g{fill:rgba(23,221,119,.05);stroke:rgba(23,221,119,.55);filter:drop-shadow(0 0 16px rgba(23,221,119,.28))}
.gap-nc{fill:#141414;stroke:rgba(255,255,255,.22);stroke-width:1.2}
.gap-ic{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.gap-t{font-weight:700;font-size:15px;letter-spacing:-.01em;fill:#fff}
.gap-t--m{font-size:13px;font-weight:700;fill:rgba(255,255,255,.88)}
.gap-t--g{fill:var(--green-2)}
.gap-line{fill:none;stroke:rgba(23,221,119,.75);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(23,221,119,.55))}
.gap-dash{fill:none;stroke:rgba(255,255,255,.34);stroke-width:2.2;stroke-dasharray:5 7;stroke-linecap:round}
.gap-ring{fill:rgba(255,107,107,.1);stroke:rgba(255,107,107,.9);stroke-width:2;stroke-dasharray:5 5;filter:drop-shadow(0 0 12px rgba(255,107,107,.45));transform-box:fill-box;transform-origin:center}
.gap-x{fill:none;stroke:#ff8a8a;stroke-width:3.4;stroke-linecap:round}
.gap-base{stroke:rgba(23,221,119,.4);stroke-width:1.5;stroke-linecap:round}
.gap-bar{fill:rgba(23,221,119,.04);stroke:rgba(23,221,119,.5);stroke-width:1.5;stroke-dasharray:4 4}
.gap-dot{fill:#d6ffe8;filter:drop-shadow(0 0 7px rgba(23,221,119,.95));offset-rotate:0deg;offset-distance:0%;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .gap-svg.live .gap-dot{animation:gap-travel 3.6s cubic-bezier(.45,0,.55,1) infinite}
  .gap-svg.live .gap-ring{animation:gap-hit 3.6s ease-out infinite}
  .gap-svg.live .gap-x{animation:gap-xflash 3.6s ease-out infinite}
  .gap-svg.live .gap-bar{animation:gap-bar 3.6s ease-out infinite;animation-delay:calc(var(--i) * .07s)}
}
@keyframes gap-travel{0%{offset-distance:0%;opacity:0}6%{opacity:1}68%{offset-distance:100%;opacity:1}76%,100%{offset-distance:100%;opacity:0}}
.gap-svg .gap-dot{animation-delay:0s!important}
@keyframes gap-hit{0%,66%{transform:scale(1)}72%{transform:scale(1.22);filter:drop-shadow(0 0 24px rgba(255,107,107,.95))}90%,100%{transform:scale(1)}}
@keyframes gap-xflash{0%,66%{stroke:#ff8a8a}72%{stroke:#fff}90%,100%{stroke:#ff8a8a}}
@keyframes gap-bar{0%,70%{stroke:rgba(23,221,119,.5);fill:rgba(23,221,119,.04)}80%{stroke:rgba(23,221,119,.95);fill:rgba(23,221,119,.2)}100%{stroke:rgba(23,221,119,.5);fill:rgba(23,221,119,.04)}}


/* Etapa 04 = duas etapas em ciclo (Retenção <-> Expansão): selo giratório na emenda e nomes que acendem em alternância */
.fx-cycle{position:absolute;left:50%;top:-28px;z-index:4;display:block;width:48px;height:48px;margin-left:-24px;border-radius:8px;pointer-events:none;cursor:default;
  background:linear-gradient(180deg,var(--green-2) 0%,var(--green) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -10px rgba(23,221,119,.7),0 0 0 1px rgba(23,221,119,.35),0 0 22px rgba(23,221,119,.35)}
.fx-cycle svg{position:absolute;inset:7px;display:block;width:34px;height:34px;overflow:visible}
.fx-cycle__bg{display:none}
.fx-cycle__ar{transform-origin:22px 22px}
.fx-cycle__ar path{fill:none;stroke:var(--on-green);stroke-width:3;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .fx-funnel.live .fx-cycle__ar{animation:fx-spin 3.2s linear infinite}
  .fx-funnel.live .fx-cycle{animation:fx-cyglow 3.2s ease-in-out infinite}
  .fx-funnel.live .fx-st--4 .fx-st__name{animation:fx-namea 3.2s ease-in-out infinite}
  .fx-funnel.live .fx-st--5 .fx-st__name{animation:fx-namea 3.2s ease-in-out -1.6s infinite}
}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-cyglow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -10px rgba(23,221,119,.7),0 0 0 1px rgba(23,221,119,.35),0 0 22px rgba(23,221,119,.35)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -10px rgba(23,221,119,.9),0 0 0 4px rgba(23,221,119,.22),0 0 38px rgba(23,221,119,.6)}}
@keyframes fx-namea{0%,100%{color:var(--fx-pearl);text-shadow:none}15%,35%{color:#40e877;text-shadow:0 0 14px rgba(39,210,101,.6)}55%{color:var(--fx-pearl);text-shadow:none}}

/* mancha escura orgânica atrás do ciclo (entre o fundo animado e o gráfico): só escurece e dá contraste */
.cycle-col{position:relative;isolation:isolate}
.cycle-col::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12% -20% -10% -20%;
  background:
    radial-gradient(46% 40% at 47% 46%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.34) 74%,transparent 100%),
    radial-gradient(30% 26% at 72% 28%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 62%,transparent 100%),
    radial-gradient(34% 30% at 26% 74%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.3) 62%,transparent 100%),
    radial-gradient(26% 22% at 84% 66%,rgba(0,0,0,.5) 0%,transparent 100%),
    radial-gradient(24% 20% at 14% 24%,rgba(0,0,0,.5) 0%,transparent 100%);
  filter:blur(14px)}

/* ================= Fundo WebGL verde (green-webgl-background / LP 2026) ================= */
#bg-gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.app{background:transparent;z-index:1}
/* películas escuras sobre o shader mantêm o texto legível; o hero deixa o brilho aparecer mais */
.fold{background:rgba(0,0,0,.42)}
.fold--alt{background:rgba(3,6,5,.58)}
.fold--dark{background:rgba(0,0,0,.5)}
.hero{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 35%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%)}
.foot-wrap{background:linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.8))}
.sticky{background:linear-gradient(to top,rgba(0,0,0,.9) 55%,rgba(0,0,0,0))}
#jornada.fold{background:rgba(0,0,0,.08)}
/* vidro desfocado (mesmo do menu fixo) nos números do hero, no bloco "Dados" e nos 3 passos */
.proof,.infra,.step3,.fold--dark .step3{background:rgba(10,10,10,.42);border-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.55),0 14px 38px rgba(0,0,0,.45)}
/* hover nos passos, nas frentes e no bloco "Dados": título verde + luz verde percorrendo o contorno em velocidade constante */
.front,.step3,.infra{position:relative}
.glow-ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;filter:drop-shadow(0 0 4px rgba(23,221,119,.7))}
.glow-ring rect{fill:none;stroke-linecap:round;animation:ring-run var(--dur,4s) linear infinite;animation-play-state:paused}
@keyframes ring-run{from{stroke-dashoffset:var(--d)}to{stroke-dashoffset:calc(var(--d) - 100px)}}
.front .front__t,.step3 .h3,.infra .infra__t{transition:color .3s ease}
@media (hover:hover){
  .front:hover .glow-ring,.step3:hover .glow-ring,.infra:hover .glow-ring{opacity:1}
  .front:hover .glow-ring rect,.step3:hover .glow-ring rect,.infra:hover .glow-ring rect{animation-play-state:running}
  .front:hover .front__t,.step3:hover .h3,.infra:hover .infra__t{color:var(--green-2)}
}
.front:focus-within .glow-ring,.step3:focus-within .glow-ring,.infra:focus-within .glow-ring{opacity:1}
.front:focus-within .glow-ring rect,.step3:focus-within .glow-ring rect,.infra:focus-within .glow-ring rect{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.glow-ring{display:none}
  .front:hover,.step3:hover,.infra:hover{border-color:rgba(23,221,119,.5)}}
html:not(.js) #bg-gl{display:none}
/* @@DESKTOP:START */
/* ================= Versão desktop (≥1024px) =================
   Abaixo disso nada muda: a coluna mobile de 480px continua igual. */
.hdr__links{display:none}
@media (min-width:1024px){
:root{--maxw:1200px;--gutter:40px;--space:120px}
html{scroll-padding-top:108px}
.app{max-width:none;border-inline:0}
.sticky{display:none!important}

/* tipografia e controles */
.h1{font-size:clamp(56px,5.4vw,80px);line-height:1.02;letter-spacing:-.05em}
.h2{font-size:clamp(40px,3.5vw,54px);line-height:1.08}
.h3{font-size:24px}
.lead{font-size:20px}
.pill{font-size:15px;padding:9px 20px}
.head{margin-bottom:64px;gap:22px}
.head .h2{max-width:22ch}
.btn{min-height:60px;font-size:17px}
.cta-link{min-height:60px;font-size:16px}
.cta{margin-top:48px}
.glow-c::before{width:1200px;height:520px}

/* cabeçalho: links de navegação ao centro-direita */
.hdr{top:20px;left:24px;right:24px;max-width:1200px;padding:12px 14px 12px 12px;gap:16px}
.hdr__logo{width:52px;height:52px}
.hdr__links{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr__links a{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:8px;font:600 15px/1 var(--font-h);letter-spacing:-.005em}
.hdr__nav{margin-left:0;height:48px;padding:0 20px;font-size:15px}
.hdr__cta{height:52px;padding:0 26px;font-size:15px}

/* hero */
.hero{padding-top:200px}
.hero::before{width:1400px;height:700px}
.hero .wrap{gap:28px}
.hero .h1{max-width:18ch}
.hero .lead{max-width:58ch;font-size:21px}
.hero .cta{max-width:380px;margin-top:14px}
.proof{max-width:760px;font-size:15px}
.proof li{padding:20px 16px}
.trust{margin-top:96px;padding-block:40px 56px}
.trust__label{font-size:19px;margin-bottom:34px}
.ticker__track{--logo-h:56px;gap:72px}

/* problema e resultados: 3 colunas */
.grid3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px}
.card{padding:36px 32px}
.problem{grid-template-columns:56px 1fr;column-gap:18px;row-gap:14px}
.problem .icon{width:56px;height:56px}
.problem .icon svg{width:28px;height:28px}
.problem .h3{font-size:30px}
.problem p{font-size:17px}
.statement{margin-top:64px;padding-top:56px}
.statement.gap{margin-top:0}
.statement.gap+.grid3{margin-top:32px}
.statement.gap{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding:44px 56px 46px;justify-items:center}
.statement.gap p{text-align:center;font-size:clamp(20px,1.7vw,24px);line-height:1.5;max-width:56ch}
.gap-viz{width:100%}
.gap-svg--v{display:none}
.gap-svg--h{display:block;width:100%;max-width:860px}
.gap-t{font-size:14px}
.gap-t--m{font-size:13px}
.result{gap:20px}
.result__logo{height:calc(var(--lh,38px) * 1.2)}
.result .metric{flex-direction:column;align-items:flex-start;gap:8px;padding-block:16px}
.metric__n{font-size:clamp(44px,4.2vw,58px)}
.metric__l{font-size:17px}
.result__d,.result__tag{font-size:16px}
.results-cta{max-width:380px}
.results-all{margin-top:56px}

/* jornada (bow-tie): texto à esquerda, funil à direita */
#jornada .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-areas:"head fun" "cta fun";column-gap:96px;align-content:center;align-items:center}
#jornada .head{grid-area:head;align-items:flex-start;text-align:left;margin-bottom:0}
#jornada .head .h2{max-width:16ch}
#jornada .fx-funnel{grid-area:fun;margin:0}
#jornada .cta{grid-area:cta;align-items:flex-start;margin-top:40px}
.fx-st__name{font-size:clamp(20px,1.6vw,24px)}
.fx-st__desc{font-size:15px}
.fx-st--1{--h:150px}.fx-st--2{--h:146px}.fx-st--3{--h:164px}.fx-st--4{--h:128px}.fx-st--5{--h:168px}

/* frentes */
.fronts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.front{padding:28px}
.front__t{font-size:24px}
.front__d{font-size:18px}
.infra{margin-top:40px;padding:48px 40px}
.infra__t{font-size:32px}
.infra__s{max-width:52ch;font-size:17px}

/* método e diferencial */
.part+.part{margin-top:120px}
.method{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:72px;align-items:center}
.cycle-col{margin-bottom:0}
.cycle{max-width:560px;gap:0 24px}
.cycle__ring{width:min(100%,430px);margin:10px auto 14px}
.cycle__lbl{font-size:14px}
.cycle__lbl b{font-size:19px}
.flow{font-size:19px}
.steps4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.step{min-width:0}
.step{padding:26px}
.step .h3{font-size:28px}
.strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 80px;padding:64px;align-items:start}
.strip__head{align-items:flex-start;text-align:left;gap:20px;position:sticky;top:120px}
.strip__head .h2{font-size:clamp(34px,3vw,44px);max-width:20ch}
.strip__head .lead{font-size:18px}
.strip__list{margin-top:0}
.strip__item{padding-block:28px}
.strip__item:first-child{border-top:0;padding-top:0}
.strip__item .h3{font-size:24px}
.strip__item p{font-size:17px}

/* identificação */
.ident-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;gap:24px 56px}
.ident-list li{font-size:22px}
.ident-close{font-size:clamp(36px,3vw,46px);max-width:24ch;margin-top:64px}
.icp{font-size:17px;max-width:680px}

/* próximo passo + formulário */
.next{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px;align-items:start}
.steps3{gap:20px}
.step3{grid-template-columns:52px 1fr;padding:28px}
.step3 .h3{font-size:24px}
.step3 p{font-size:16px}
.formcard{padding:44px 40px 32px;scroll-margin-top:110px}
.formcard__h{font-size:34px}

/* faq: título fixo à esquerda, perguntas à direita */
#faq .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head list" "cta list";column-gap:96px;align-items:start}
#faq .head{grid-area:head;align-items:flex-start;text-align:left;position:sticky;top:120px;margin-bottom:0}
#faq .faq{grid-area:list;max-width:none;margin:0}
#faq .cta{grid-area:cta;align-items:flex-start}
.faq__q{font-size:19px}
.faq__a p{font-size:17px}

/* cta final e rodapé */
.final-card{padding:72px 40px 76px;border-radius:24px;margin-bottom:24px}
.final-card .h2{max-width:18ch;font-size:clamp(44px,4vw,60px)}
.final-card .lead{max-width:56ch;font-size:20px}
.final-card .cta{max-width:420px}
.final-card__logo{width:170px}
.foot-wrap .wrap{padding-inline:var(--gutter)}
.ft{padding:56px 56px 32px;border-radius:24px}
.ft__top{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:56px}
.ft__brand{grid-column:auto}
.ft__bot{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:1024px) and (max-width:1279px){
.method{grid-template-columns:minmax(0,1fr);gap:48px;justify-items:center}
.cycle-col{width:100%;max-width:520px}
.steps4{width:100%}
.strip{padding:48px;gap:0 48px}
.next{gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,480px)}
#jornada .wrap{column-gap:56px}
#faq .wrap{column-gap:56px}
}

/* ================= Tablet (700px a 1023px) =================
   Mobile (<700px) continua a coluna de 480px; desktop (>=1024px) tem layout próprio. */
@media (min-width:700px) and (max-width:1023px){
:root{--maxw:760px;--gutter:32px;--space:88px}
html{scroll-padding-top:96px}
.app{max-width:none;border-inline:0}
.sticky{max-width:760px}
.sticky .btn{display:flex;max-width:420px;margin-inline:auto}

.h1{font-size:clamp(46px,6.4vw,58px);line-height:1.04}
.h2{font-size:clamp(36px,5vw,44px)}
.lead{font-size:19px}
.head{margin-bottom:52px}
.hdr{top:18px;max-width:720px;padding:11px 12px 11px 11px}
.hdr__logo{width:50px;height:50px}
.hdr__nav,.hdr__cta{height:48px;font-size:15px}
.hdr__cta{padding:0 24px}

.hero{padding-top:176px}
.hero .lead{max-width:52ch;font-size:20px}
.hero .cta{max-width:380px}
.proof{max-width:620px;font-size:14px}
.proof li{padding:16px 12px}
.trust{margin-top:72px}
.ticker__track{--logo-h:52px;gap:64px}

.grid3{max-width:680px;gap:18px}
.card{padding:32px 30px}
.statement.gap{padding:40px 36px}
.statement.gap p{font-size:22px}
.gap-svg--v{max-width:380px}

.result__logo{height:calc(var(--lh,38px) * 1.15)}
.metric__n{font-size:48px}

#jornada .fx-funnel{max-width:560px;margin-inline:auto}
.fx-st__name{font-size:22px}
.fx-st__desc{font-size:15px}
.fx-st--1{--h:150px}.fx-st--2{--h:146px}.fx-st--3{--h:164px}.fx-st--4{--h:128px}.fx-st--5{--h:168px}

.fronts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.front{padding:24px}
.front__t{font-size:18px}
.infra{padding:40px 32px}

.method{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;justify-items:center}
.cycle-col{width:100%;max-width:480px;margin-bottom:0}
.steps4{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.step{padding:24px}
.strip{padding:48px 44px}
.strip__head .h2{font-size:clamp(30px,4vw,36px)}

.ident-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;gap:20px 40px}
.ident-close{font-size:38px;max-width:24ch}

.next{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto;gap:40px}
.formcard{padding:36px 32px 28px}
.faq{max-width:680px}

.final-card{padding:60px 40px 64px;border-radius:22px;margin-bottom:22px}
.final-card .h2{font-size:42px;max-width:18ch}
.foot-wrap .wrap{padding-inline:var(--gutter)}
.ft{padding:44px 40px 28px;border-radius:22px}
.ft__top{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:40px}
.ft__brand{grid-column:auto}
.ft__bot{flex-direction:row;justify-content:space-between;text-align:left}
.wa-fab,body:has(.sticky.on) .wa-fab{right:24px}
.wa-panel,body:has(.sticky.on) .wa-panel{right:24px}
}
/* @@DESKTOP:END */