:root{--blue:#071d87;--blue2:#113ac2;--accent:#13c79a;--accent2:#09a981;--orange:#ffb323;--ink:#111a34;--muted:#68728a;--bg:#f4f7fb;--line:#dfe5ef;--white:#fff;--shadow:0 20px 60px rgba(13,31,90,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}button,input,select{font:inherit}button{cursor:pointer}.container{width:min(1180px,calc(100% - 40px));margin:auto}.top-alert{background:#ffcb3d;color:#151515;font-size:14px}.alert-inner{min-height:38px;display:flex;align-items:center;justify-content:center;gap:24px}.link-btn{border:0;background:transparent;font-weight:800;text-decoration:underline}.site-header{position:sticky;top:0;z-index:30;background:rgba(4,24,125,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.12)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:900;font-size:26px;letter-spacing:1px}.brand-mark{width:36px;height:36px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center}.brand-logo{height:38px;width:auto;display:block}.desktop-nav{display:flex;gap:28px}.desktop-nav a{color:#dfe6ff;text-decoration:none;font-weight:600;font-size:14px}.desktop-nav a:hover{color:#fff}.btn{border:0;border-radius:10px;padding:14px 20px;font-weight:800;transition:.25s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.btn-primary{background:linear-gradient(135deg,#2f67ec,#1442ce);color:#fff;box-shadow:0 10px 24px rgba(35,86,220,.25)}.btn-accent{background:linear-gradient(135deg,#18d7a5,#0ca57f);color:#fff;box-shadow:0 12px 30px rgba(15,190,145,.28)}.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}.btn-small{padding:11px 16px;font-size:13px}.btn-large{padding:17px 24px}.full{width:100%}.section-dark{background:linear-gradient(145deg,#03136d 0%,#06268f 52%,#0b3cc4 100%);color:#fff}.hero{position:relative;padding:88px 0 36px;overflow:hidden}.hero-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.22}.glow-one{width:520px;height:520px;background:#20e2b2;right:-180px;top:-210px}.glow-two{width:400px;height:400px;background:#7a5cff;left:-190px;bottom:-180px}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:54px}.eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;font-weight:900;color:#dce7ff}.eyebrow span{width:24px;height:2px;background:#20dbaa}.eyebrow.blue{color:#2456d5}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.04;margin:18px 0 22px;letter-spacing:-2px}.hero-subtitle{font-size:19px;color:#dce4ff;max-width:680px}.hero-points{display:grid;gap:10px;margin:26px 0;color:#eef3ff;font-weight:600}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;color:#cfd8fb;font-size:12px}.hero-visual{position:relative}.browser-frame{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.35);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)}.browser-top{height:38px;background:#edf1f8;display:flex;align-items:center;gap:6px;padding:0 12px;color:#758099;font-size:10px}.browser-top i{width:8px;height:8px;background:#c2cad8;border-radius:50%}.browser-top span{margin-left:8px}.browser-frame img{display:block;width:100%}.floating{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-12px)}}.price-badge{position:absolute;z-index:4;right:-20px;top:-42px;background:#ffca35;color:#151515;padding:15px 21px;border-radius:14px;box-shadow:0 16px 34px rgba(0,0,0,.25);transform:rotate(3deg)}.price-badge small,.price-badge span{display:block;font-size:11px}.price-badge strong{display:block;font-size:27px;line-height:1}.mini-proof{position:absolute;background:#fff;color:var(--ink);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column}.mini-proof strong{color:#1150db}.mini-proof span{font-size:11px}.proof-one{left:-30px;bottom:50px}.proof-two{right:-20px;bottom:-25px}.countdown-card{position:relative;margin-top:78px;background:linear-gradient(135deg,#ff6b6b,#ffb03d);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 18px 45px rgba(255,107,107,.28)}.countdown-kicker{display:block;color:rgba(255,255,255,.9);font-size:12px}.countdown{display:flex;align-items:center;gap:10px}.countdown div{min-width:67px;text-align:center;background:rgba(0,0,0,.22);padding:9px 12px;border-radius:10px}.countdown strong{display:block;font-size:26px;line-height:1;color:#fff}.countdown b{color:rgba(255,255,255,.75)}.countdown span{font-size:10px;text-transform:uppercase;color:rgba(255,255,255,.82)}.countdown-card #countdownMessage{color:#fff}.countdown-card .btn-accent{box-shadow:0 12px 30px rgba(0,0,0,.22)}.section{padding:96px 0}.section-light{background:var(--bg)}.section-heading{max-width:760px;margin-bottom:42px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2{font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-1.4px;margin:12px 0 16px}.section-heading p{color:var(--muted);font-size:17px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.benefit-card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:18px;box-shadow:0 12px 35px rgba(25,45,99,.06);transition:.25s}.benefit-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.benefit-card h3{margin:18px 0 8px}.benefit-card p{color:var(--muted);font-size:14px}.icon-box{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:900}.icon-box.blue{background:#e7efff;color:#2e68e8}.icon-box.green{background:#dbfbf1;color:#06aa7b}.icon-box.orange{background:#fff0da;color:#ed8700}.icon-box.purple{background:#eee7ff;color:#7045df}.benefit-grid--3{grid-template-columns:repeat(3,1fr)}.benefit-grid--3 .benefit-card{padding:26px}.benefit-grid--3 .benefit-card h3{font-size:19px}.benefit-grid--3 .benefit-card p{font-size:14.5px}.icon-box[class*=grad-]{width:52px;height:52px;color:#fff;font-size:22px;box-shadow:0 8px 18px rgba(13,31,90,.12)}.icon-box.grad-blue{background:linear-gradient(135deg,#2b5cff,#086ad8)}.icon-box.grad-teal{background:linear-gradient(135deg,#18d7a5,#0ca57f)}.icon-box.grad-green{background:linear-gradient(135deg,#28b45a,#1b9b45)}.icon-box.grad-navy{background:linear-gradient(135deg,#113ac2,#071d87)}.icon-box.grad-amber{background:linear-gradient(135deg,#ffb43d,#f5a623)}.icon-box.grad-purple{background:linear-gradient(135deg,#9a7bff,#7c5cff)}.showcase-section{background:#fff}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tab{border:1px solid var(--line);background:#fff;color:#5e6880;padding:11px 15px;border-radius:9px;font-weight:700}.tab.active{color:#fff;background:var(--blue2);border-color:var(--blue2)}.showcase-card{display:grid;grid-template-columns:.72fr 1.28fr;border-radius:24px;background:linear-gradient(135deg,#051c85,#113bc2);overflow:hidden;box-shadow:var(--shadow);min-height:520px}.showcase-copy{padding:50px;color:#fff;align-self:center}.showcase-copy>span{font-size:11px;font-weight:900;letter-spacing:1.4px;color:#82f1d2}.showcase-copy h3{font-size:36px;line-height:1.1;margin:12px 0}.showcase-copy p{color:#dce5ff}.showcase-copy ul{padding-left:18px;color:#eef3ff;margin:24px 0 30px}.showcase-image-wrap{padding:35px 0 35px 35px;display:flex;align-items:center}.showcase-image-wrap img{width:110%;max-width:none;border-radius:14px 0 0 14px;box-shadow:0 25px 60px rgba(0,0,0,.35);transition:.25s}.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-stack{position:relative;padding-bottom:90px}.stack-main{width:100%;border-radius:18px;box-shadow:var(--shadow)}.stack-small{position:absolute;width:70%;right:-28px;bottom:0;border:8px solid #fff;border-radius:16px;box-shadow:var(--shadow)}.feature-copy h2{font-size:44px;line-height:1.13;margin:12px 0 18px}.feature-copy>p{color:var(--muted)}.feature-list{display:grid;gap:16px;margin-top:28px}.feature-list>div{display:flex;gap:14px}.feature-list span{flex:0 0 40px;height:40px;border-radius:11px;background:#e7efff;color:#2354d4;display:grid;place-items:center;font-weight:900}.feature-list p{margin:0;color:var(--muted);font-size:14px}.feature-list strong{display:block;color:var(--ink);font-size:16px}.section-dark-soft{background:radial-gradient(1100px 380px at 50% -10%,#122356,#0a1740 60%);color:#fff;position:relative;overflow:hidden}.section-dark-soft .section-heading p{color:#b9c5e6}
.grad-word{background:linear-gradient(135deg,#3f7bff,#9a7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.loss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.loss-card{position:relative;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:26px 24px 30px;border-radius:16px;transition:.25s}
.loss-card:hover{transform:translateY(-4px);border-color:rgba(63,123,255,.4);background:linear-gradient(180deg,rgba(63,123,255,.1),rgba(255,255,255,.02))}
.loss-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.loss-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(43,224,176,.5);color:#2be0b0;font-weight:800;font-size:14px}
.loss-ic{width:34px;height:34px;color:#aebbe0}
.loss-card h3{font-size:18px;margin-bottom:8px}
.loss-card p{color:#b9c5e6;font-size:14px;margin:0}
/* conectores tracejados entre os cards (desktop) */
.loss-grid > .loss-card:not(:last-child)::after{content:"";position:absolute;top:44px;right:-9px;width:18px;height:0;border-top:2px dotted rgba(120,140,200,.55);transform:translateY(-50%);z-index:1}
.guarantee-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 6px;margin-top:24px;padding:18px 26px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)}
.guarantee-bar span{display:inline-flex;align-items:center;gap:10px;color:#e7edff;font-size:14.5px;font-weight:600;flex:1 1 auto;justify-content:center;position:relative}
.guarantee-bar span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:rgba(255,255,255,.14)}
.guarantee-bar svg{width:20px;height:20px;color:#2be0b0;flex:0 0 auto}.offer-section{background:linear-gradient(180deg,#fff,#eef3ff)}.offer-grid{display:grid;grid-template-columns:1fr .78fr;gap:70px;align-items:center}.offer-copy h2{font-size:50px;line-height:1.08;margin:14px 0}.offer-copy>p{color:var(--muted);font-size:17px}.scarcity-box,.guarantee{display:flex;gap:15px;padding:18px;border-radius:14px;margin-top:18px}.scarcity-box{background:#fff4da;border:1px solid #f4d894}.guarantee{background:#e8f9f4;border:1px solid #b9eadc}.scarcity-box p,.guarantee p{margin:0;font-size:14px}.pricing-card{position:relative;background:#fff;border:2px solid #17c79a;border-radius:24px;padding:42px;box-shadow:0 30px 80px rgba(20,68,175,.16)}.pricing-ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#ffbd20;padding:7px 18px;border-radius:99px;font-size:11px;font-weight:900;white-space:nowrap}.plan-name{font-size:13px;font-weight:900;color:#1a50cd}.price{margin:18px 0}.price small,.price em{display:block;color:var(--muted);font-style:normal}.price strong{display:block;font-size:64px;line-height:1;color:#0c1c56}.price strong .cents{font-size:28px}.price-anchor{transition:opacity .45s ease}.price-anchor s{color:#e23b3b;font-weight:800}.price-value{will-change:contents}.price-value.price-pop{animation:pricePop .5s cubic-bezier(.2,1.3,.4,1)}@keyframes pricePop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}.price-anchor.anchor-in{animation:anchorIn .5s ease}@keyframes anchorIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.pricing-card ul{list-style:none;padding:0;display:grid;gap:12px;margin:24px 0}.pricing-card li{border-bottom:1px solid #edf0f5;padding-bottom:10px}.microcopy{display:block;text-align:center;color:var(--muted);margin-top:12px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.step{text-align:center;background:#fff;border:1px solid var(--line);padding:35px 25px;border-radius:18px}.step span{display:grid;place-items:center;margin:auto;width:46px;height:46px;border-radius:50%;background:#123ec1;color:#fff;font-weight:900}.step p{color:var(--muted);font-size:14px}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.accordion details{border-bottom:1px solid var(--line);padding:20px 0}.accordion summary{font-weight:800;cursor:pointer}.accordion p{color:var(--muted);font-size:14px}.final-cta{padding:56px 0;position:relative;overflow:hidden}.final-cta::after{content:"";position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(43,224,176,.12),transparent 65%);pointer-events:none}.final-cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:35px}.final-cta-left{display:flex;align-items:center;gap:22px}.final-cta-icon{flex:0 0 auto;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;color:#2be0b0;background:rgba(43,224,176,.1);border:1px solid rgba(43,224,176,.25)}.final-cta-icon svg{width:38px;height:38px}.final-cta .eyebrow.green{color:#2be0b0}.final-cta h2{max-width:640px;font-size:33px;line-height:1.15;margin:10px 0 0;color:#fff}.final-cta-btn{gap:10px}.final-cta-btn svg{width:20px;height:20px}
footer{background:linear-gradient(180deg,#0a1330,#070c22);color:#fff;padding:56px 0 40px;position:relative;overflow:hidden}
.footer-grid{position:relative;display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1.1fr;gap:40px}
.footer-col .brand-logo{height:34px;margin-bottom:16px}
.footer-brand>p{color:#9aa6cd;font-size:14px;max-width:280px;margin:0 0 20px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#cdd7f5;font-size:15px;transition:.2s}
.footer-social a:hover{background:#18d7a5;border-color:#18d7a5;color:#fff;transform:translateY(-2px)}
.footer-col h4{color:#fff;font-size:16px;font-weight:800;margin:0 0 18px}
.footer-link,.footer-item{display:flex;align-items:center;gap:11px;color:#9aa6cd;font-size:14px;padding:7px 0;text-decoration:none;transition:color .2s}
.footer-link:hover{color:#fff}
.footer-link i,.footer-item i{width:16px;text-align:center;color:#2be0b0;font-size:14px;flex:0 0 auto}
.footer-muted{color:#7d89b3;font-size:13px;margin:0 0 10px}
/* ---- Segmentos atendidos ---- */
.segments-section{background:#fff}
.segments-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:940px;margin:0 auto}
/* text-decoration:none porque parte dos chips virou <a> (link para a pagina do
   segmento em apolloweb.com.br). A regra estiliza a CLASSE, nao a tag, entao
   <span> e <a> ficam identicos — sem o reset, so' os que viraram link
   apareceriam sublinhados. */
.segment-chip{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:.2s}
.segment-chip:hover{border-color:#18d7a5;background:#eafaf5;transform:translateY(-2px)}
.segment-chip i{color:#0ca57f;font-size:12px}
/* Linha de links para as paginas de conteudo em apolloweb.com.br, abaixo dos
   chips. Discreta de proposito: e navegacao, nao chamada de venda — a CTA da
   secao continua sendo o botao da oferta. */
.segments-more{text-align:center;margin:28px auto 0;max-width:640px;color:var(--muted);font-size:14.5px}
.segments-more a{color:#1a50cd;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(26,80,205,.3)}
.segments-more a:hover{border-bottom-color:#1a50cd}
/* ---- 12 módulos ---- */
.modules-section{background:var(--bg)}
.modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.module-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:0 10px 30px rgba(25,45,99,.05);transition:.25s}
.module-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.module-ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:20px;margin-bottom:16px}
.module-ic.i-blue{background:linear-gradient(135deg,#2b5cff,#086ad8)}
.module-ic.i-teal{background:linear-gradient(135deg,#18d7a5,#0ca57f)}
.module-ic.i-green{background:linear-gradient(135deg,#28b45a,#1b9b45)}
.module-ic.i-navy{background:linear-gradient(135deg,#113ac2,#071d87)}
.module-ic.i-amber{background:linear-gradient(135deg,#ffb43d,#f5a623)}
.module-ic.i-purple{background:linear-gradient(135deg,#9a7bff,#7c5cff)}
.module-card h3{font-size:16.5px;margin:0 0 7px}
.module-card p{color:var(--muted);font-size:13.5px;margin:0}
/* ---- Urgência do contador ---- */
.countdown-warn{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;color:#dfe6ff}
.countdown-warn__title{font-weight:800;color:#fff}
.countdown-warn__item{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#cdd9ff}
.countdown-warn__item i{color:#ff8a8a}
/* ---- Big idea ---- */
.bigidea{padding:52px 0;text-align:center}
.bigidea-inner p{max-width:820px;margin:0 auto;font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.3;color:#fff}
.bigidea-em{background:linear-gradient(135deg,#ff6b6b,#ffb03d);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- Faixa de números ---- */
.stats-strip{background:#fff;padding:30px 0;border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;text-align:center}
.stat strong{display:block;font-size:38px;font-weight:900;line-height:1;background:linear-gradient(135deg,#2f67ec,#7a5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13px;color:var(--muted);font-weight:600}
/* ---- Cascata da dor ---- */
.pain-cascade{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.pain-cascade>span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#dbe4ff;font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:999px}
.pain-cascade i{color:#7d89b3;font-size:11px}
.pain-cascade__end{background:linear-gradient(135deg,#e23b3b,#ff6b6b)!important;border-color:transparent!important;color:#fff!important;font-weight:800!important}
/* ---- Comparativo Antes x Depois ---- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.compare-col{border-radius:18px;padding:28px 26px;border:1px solid var(--line);background:#fff}
.compare-col--before{background:#fff5f5;border-color:#f6d5d5}
.compare-col--after{background:#eafaf4;border-color:#bfe9db;box-shadow:0 16px 40px rgba(15,190,145,.14)}
.compare-head{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin-bottom:18px;color:var(--ink)}
.compare-col--before .compare-head i{color:#e23b3b}
.compare-col--after .compare-head i{color:#0ca57f}
.compare-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.compare-col li{position:relative;padding-left:26px;font-size:15px;color:#40495f}
.compare-col li::before{position:absolute;left:0;top:0;font-family:"Font Awesome 5 Free";font-weight:900;font-size:13px}
.compare-col--before li::before{content:"\f00d";color:#e23b3b}
.compare-col--after li::before{content:"\f00c";color:#0ca57f}
/* ---- Prova social (placeholder) ---- */
.proof-section{background:var(--bg)}
.proof-placeholder-note{display:inline-block;background:#fff6e8;border:1px dashed #f0c67a;color:#8a5a00;font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;margin-top:6px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 10px 30px rgba(25,45,99,.05);display:flex;flex-direction:column}
.testimonial-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #eef1f6}
.testimonial-brand{flex:0 0 auto;display:grid;place-items:center;min-width:74px;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#f7f9ff;color:#1a2b6b;font-weight:800;font-size:13px;text-align:center;line-height:1.1}
.testimonial-logo{flex:0 0 auto;height:46px;width:auto;max-width:120px;object-fit:contain}
.testimonial-meta{min-width:0}
.stars{color:#ffb400;font-size:14px;letter-spacing:2px;margin-bottom:6px}
.testimonial-name b{color:var(--ink);font-size:15px}
.testimonial-name span{color:var(--muted);font-size:13px;font-weight:600}
.testimonial-text{color:#40495f;font-size:15px;line-height:1.6;margin:0}
.testimonial-who{display:flex;align-items:center;gap:12px}
.avatar-ph{width:44px;height:44px;border-radius:50%;background:#e7edf7;color:#9aa6cd;display:grid;place-items:center;flex:0 0 auto}
.testimonial-who b{display:block;font-size:14px;color:var(--ink)}
.testimonial-who small{color:var(--muted);font-size:12.5px}
.proof-logos{margin-top:34px;text-align:center}
.proof-logos__label{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;margin-bottom:16px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.logo-ph{width:130px;height:52px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;color:#b6c0d6;font-size:12px;text-transform:uppercase;letter-spacing:1px;background:#fff}
/* ---- Autoridade / Lunar ---- */
.authority-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;align-items:center}
.authority-copy .eyebrow.green{color:#2be0b0}
.authority-copy h2{font-size:clamp(28px,3.4vw,40px);color:#fff;margin:12px 0 14px}
.authority-copy>p{color:#cdd9ff;font-size:16px}
.authority-copy em{color:#8ff0dd;font-style:normal;font-weight:700}
.authority-badges{display:grid;gap:12px;margin-top:22px}
.authority-badges span{display:flex;align-items:center;gap:12px;color:#dbe4ff;font-size:14.5px;font-weight:500}
.authority-badges i{color:#2be0b0;width:18px;text-align:center}
.authority-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.astat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;text-align:center}
.astat strong{display:block;font-size:40px;font-weight:900;color:#fff;line-height:1}
.astat span{font-size:13px;color:#b9c5e6}
/* ---- Vídeo (placeholder) ---- */
.video-embed{position:relative;margin:22px auto 0;max-width:820px;aspect-ratio:16/9;border-radius:16px;background:linear-gradient(135deg,#0a1650,#123fb0);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;overflow:hidden}
.video-embed__play{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;color:#fff;font-size:24px;transition:.2s}
.video-embed:hover .video-embed__play{background:#18d7a5;border-color:#18d7a5;transform:scale(1.06)}
.video-embed__label{color:#cdd9ff;font-weight:600;font-size:14px}
/* Vídeo de apresentação — VERTICAL (360x640), dentro de um mockup de iPhone.

   O mockup é CSS puro, sem imagem de moldura: a CSP da landing só permite `img-src
   'self'`, e uma moldura em PNG ainda custaria mais um download e uma borda para
   alinhar com o vídeo em cada largura de tela. Aqui a moldura É a caixa do vídeo.

   A LARGURA é limitada, não a altura: solto num container largo, um 9:16 esticaria a
   seção para baixo e empurraria o resto da página para fora da primeira dobra. */
.video-apresentacao{margin:38px auto 0;display:flex;flex-direction:column;align-items:center;gap:16px}

/* Corpo do aparelho. O `padding` é a espessura da bezel; o `border-radius` externo é
   maior que o da tela pela mesma diferença, senão o canto interno "vaza" para fora da
   curva do corpo. As duas sombras: a de fora dá o peso do objeto na página, a `inset`
   clara no topo imita o brilho da lateral metálica. */
/* 380px é o teto de propósito: descontada a bezel, a tela fica com ~358px de largura —
   praticamente os 360px nativos do arquivo. Passar disso amplia o vídeo acima da
   resolução original e ele começa a borrar, ganhando presença e perdendo nitidez. */
.iphone-mock{position:relative;width:min(380px,84vw);padding:11px;border-radius:52px;background:linear-gradient(150deg,#3a3f4d 0%,#15171f 26%,#0b0d13 52%,#15171f 76%,#43485a 100%);box-shadow:0 34px 70px rgba(4,12,45,.38),0 6px 16px rgba(4,12,45,.22),inset 0 1px 2px rgba(255,255,255,.5),inset 0 -1px 2px rgba(255,255,255,.22)}
/* Botões laterais — pseudo-elementos porque são pura decoração e não devem existir
   para leitor de tela. */
.iphone-mock::before,.iphone-mock::after{content:"";position:absolute;width:3px;border-radius:3px;background:linear-gradient(180deg,#4a4f5e,#23262f)}
/* Volume + e volume −: o segundo vem de um `box-shadow` sólido deslocado, que copia a
   forma do elemento. O offset é em px porque `box-shadow` NÃO aceita porcentagem — com
   `%` a declaração inteira é descartada em silêncio e o botão simplesmente não aparece. */
.iphone-mock::before{left:-3px;top:24%;height:38px;box-shadow:0 50px 0 0 #34394a}
/* Botão de bloqueio, no lado oposto e mais abaixo, como no aparelho real. */
.iphone-mock::after{right:-3px;top:30%;height:60px}

.iphone-mock__screen{position:relative;aspect-ratio:9/16;border-radius:42px;overflow:hidden;background:#000;border:1px solid rgba(0,0,0,.85)}
/* `object-fit:cover` aqui: a tela do mockup tem a MESMA proporção do arquivo (9:16),
   então não há corte nenhum hoje — e se um dia entrar um vídeo levemente diferente,
   preencher a tela do aparelho é o que mantém a ilusão (tarja preta dentro de um
   celular parece defeito, não enquadramento). */
.iphone-mock__screen video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
/* Dynamic Island. `pointer-events:none` para não roubar o clique do play, e fica acima
   do vídeo (z-index) porque é a única parte da moldura que se sobrepõe à imagem. */
.iphone-mock__island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:99px;background:#000;z-index:2;pointer-events:none}

/* Legenda: cor ESCURA. A seção `.showcase-section` é branca — o tom claro de antes
   (#cdd9ff, herdado dos blocos sobre fundo azul) ficava ilegível aqui. */
.video-apresentacao__legenda{color:var(--muted);font-weight:600;font-size:14.5px;margin:0;display:flex;align-items:center;gap:8px;text-align:center}
.video-apresentacao__legenda i{color:#2456d5;font-size:17px}
/* Seção dedicada ao vídeo institucional (#conheca-a-lunar). O cabeçalho já traz o
   respiro de baixo (.section-heading margin-bottom), então aqui a moldura não repete
   o `margin-top:38px` que ela usa quando aparece colada no fim do bloco de showcase. */
.video-section .video-apresentacao{margin-top:0}
/* ================= OFERTA (redesign) ================= */
.offer-section{background:linear-gradient(180deg,#fbfcff,#eef3ff)}
.offer-grid{align-items:start}
.offer-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#3f6bff,#7a5cff);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(63,107,255,.3)}
/* raio de luz varrendo a tag, em loop infinito */
.offer-badge::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.15) 65%,transparent 100%);transform:translateX(-220%) skewX(-18deg);animation:badgeShine 3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes badgeShine{0%{transform:translateX(-220%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.offer-badge::after,.pricing-ribbon::after{animation:none;opacity:0}}
.offer-copy h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;margin:18px 0 14px}
.offer-h2-em{background:linear-gradient(135deg,#ff8a3d,#f5652b);-webkit-background-clip:text;background-clip:text;color:transparent}
.offer-copy>p{color:var(--muted);font-size:16.5px;margin-bottom:22px}
.scarcity-box,.guarantee{align-items:flex-start;gap:14px}
.note-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.note-ic--warn{background:#fff1d6;color:#e08c00;border:1px solid #f6d79a}
.note-ic--ok{background:#dcf7ee;color:#0ca57f;border:1px solid #b3e8d5}
.scarcity-box p strong,.guarantee p strong{display:block;margin-bottom:2px;color:var(--ink)}
/* mockup com prints reais */
.offer-devices{position:relative;margin-top:34px;padding-bottom:26px}
.device{background:#0e1a3f;border-radius:14px;padding:9px 9px 10px;box-shadow:0 26px 60px rgba(10,25,80,.28);border:1px solid rgba(255,255,255,.12)}
.device__bar{display:flex;gap:5px;padding:0 3px 8px}
.device__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.device img{display:block;width:100%;border-radius:8px}
.device--tablet{width:86%;margin-left:auto}
.device--mini{position:absolute;left:0;bottom:0;width:40%;background:#0a1330;border-radius:12px;padding:7px 7px 8px;box-shadow:0 18px 40px rgba(10,25,80,.34)}
/* card de preço */
.pricing-ribbon{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#ffb03d,#f59120);color:#3b2400;box-shadow:0 8px 18px rgba(245,145,32,.35);position:relative;overflow:hidden}
.pricing-ribbon::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.15) 65%,transparent 100%);transform:translateX(-220%) skewX(-18deg);animation:badgeShine 3s cubic-bezier(.4,0,.2,1) infinite}
.pricing-card{border:1px solid var(--line);box-shadow:0 30px 80px rgba(20,68,175,.14)}
.plan-list{list-style:none;padding:0;display:grid;gap:0;margin:22px 0}
.plan-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eef1f6;padding:12px 0;font-size:15px;color:#33405c}
.plan-list li:last-child{border-bottom:0}
.plan-list i{color:#2f67ec;font-size:17px;flex:0 0 auto}
.pricing-card .btn-accent{background:linear-gradient(135deg,#18d7a5,#0f9f78);gap:10px}
.microcopy i{color:#0ca57f;margin-right:5px}
/* selo do desconto da roleta (dinâmico) */
.roulette-badge{background:#0e1a3f!important;color:#dbe4ff!important;border:1px solid rgba(255,255,255,.12);justify-content:space-between!important;gap:12px!important;text-align:left!important;padding:14px 16px!important;border-radius:12px!important;font-size:13.5px!important;box-shadow:none!important}
.roulette-badge s{color:#ff8a8a}
/* barra de garantias abaixo */
.offer-assurance{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 44px rgba(20,68,175,.08);padding:24px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.assurance{display:flex;align-items:center;gap:14px}
.assurance__ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:#2f67ec;font-size:17px;background:#f7f9ff}
.assurance b{display:block;font-size:14.5px;color:var(--ink)}
.assurance small{color:var(--muted);font-size:13px;line-height:1.35;display:block}.modal{position:fixed;inset:0;z-index:100;display:none}.modal.open{display:block}.modal-overlay{position:absolute;inset:0;background:rgba(2,8,37,.72);backdrop-filter:blur(5px)}.modal-dialog{position:relative;background:#fff;width:min(760px,calc(100% - 28px));max-height:92vh;overflow:hidden;margin:4vh auto;border-radius:20px;padding:34px;box-shadow:0 30px 100px rgba(0,0,0,.4);animation:modalIn .25s ease;display:flex;flex-direction:column}@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}}.modal-close{position:absolute;right:18px;top:14px;border:0;background:#eef1f6;width:34px;height:34px;border-radius:50%;font-size:24px;z-index:2}.modal-head{flex:0 0 auto}.modal-head h2{margin:8px 0}.modal-head p{color:var(--muted)}#leadForm{display:flex;flex-direction:column;flex:1;min-height:0}.modal-scroll{overflow-y:auto;flex:1;min-height:0;padding:2px 4px 2px 2px;margin:0 -4px 0 -2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-group{display:flex;flex-direction:column;gap:6px}.full-field{grid-column:1/-1}.form-group label{font-size:12px;font-weight:800}.form-group input,.form-group select{width:100%;border:1px solid #cfd7e5;border-radius:9px;padding:13px;outline:none}.form-group input:focus,.form-group select:focus{border-color:#1d55de;box-shadow:0 0 0 3px rgba(29,85,222,.1)}.input-action{display:flex}.input-action input{border-radius:9px 0 0 9px}.input-action button{border:0;background:#143fc1;color:#fff;padding:0 20px;border-radius:0 9px 9px 0;font-weight:800}.form-group small,.form-note{color:var(--muted)}.modal-footer{flex:0 0 auto;background:#fff;padding-top:16px;margin-top:6px;border-top:1px solid #eef1f6}.lead-error{display:flex;gap:8px;align-items:flex-start;background:#fdecec;border:1px solid #f3bcbc;color:#a11d1d;border-radius:10px;padding:11px 13px;margin:0 0 13px;font-size:13px;font-weight:600;line-height:1.4}
.lead-error[hidden]{display:none}
/* Botão travado por região esgotada: o cinza de um botão desabilitado passa por "carregando",
   e o cliente fica clicando. Vermelho + "Esgotado" diz na hora que não é falha da tela. */
.btn.btn-soldout{background:linear-gradient(135deg,#e34d4d,#b81f1f)!important;color:#fff;box-shadow:none;cursor:not-allowed;opacity:1}
.btn.btn-soldout:hover{transform:none;filter:none}
.consent{display:flex;gap:9px;margin:0 0 14px;font-size:12px;color:var(--muted)}.req{color:#e23b3b;font-weight:800;margin-left:2px}
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:999}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#10172d;color:#fff;padding:13px 20px;border-radius:10px;z-index:120;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.pulse{animation:pulse 2.2s infinite}@keyframes pulse{0%,100%{box-shadow:0 12px 30px rgba(15,190,145,.28)}50%{box-shadow:0 12px 38px rgba(15,190,145,.55)}}.reveal{opacity:0;transform:translateY(28px);transition:.75s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}
/* ---- Roleta "Gire e ganhe" ---- */
.spin-modal{position:fixed;inset:0;z-index:130;display:none}.spin-modal.open{display:block}.spin-overlay{position:absolute;inset:0;background:rgba(2,6,30,.82);backdrop-filter:blur(4px)}.spin-dialog{position:relative;width:min(920px,calc(100% - 24px));max-height:94vh;overflow:auto;margin:3vh auto;display:grid;grid-template-columns:1fr 1.05fr;background:#0a1650;border-radius:22px;box-shadow:0 40px 120px rgba(0,0,0,.6);border:3px solid #f5b301;animation:modalIn .3s ease}.spin-x{position:absolute;right:12px;top:10px;z-index:6;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1;cursor:pointer}.spin-left{position:relative;background:radial-gradient(circle at 50% 30%,#123fb0,#0a1650 72%);display:flex;align-items:center;justify-content:center;padding:36px;border-radius:19px 0 0 19px;overflow:hidden}.spin-left::after{content:"";position:absolute;inset:0;border-radius:19px 0 0 19px;background:repeating-linear-gradient(90deg,#f5b301 0 8px,transparent 8px 22px) top/100% 6px no-repeat,repeating-linear-gradient(90deg,#f5b301 0 8px,transparent 8px 22px) bottom/100% 6px no-repeat,repeating-linear-gradient(0deg,#f5b301 0 8px,transparent 8px 22px) left/6px 100% no-repeat,repeating-linear-gradient(0deg,#f5b301 0 8px,transparent 8px 22px) right/6px 100% no-repeat;opacity:.85;animation:bulbs 1s steps(2) infinite;pointer-events:none}@keyframes bulbs{50%{opacity:.35}}.marquee{position:relative;text-align:center;color:#fff}.spin-logo{height:40px;width:auto;margin:0 auto 18px;display:block}.show-title{display:inline-block;background:#c8102e;border:4px solid #fff;border-radius:14px;padding:12px 22px;transform:rotate(-2deg);box-shadow:0 10px 0 rgba(0,0,0,.35)}.show-title span{display:block;font-size:19px;font-weight:900;color:#fff;letter-spacing:1px}.show-title strong{display:block;font-size:46px;line-height:.95;color:#f5b301;text-shadow:2px 2px 0 #7a0a1c}.show-sub{margin-top:20px;color:#cdd9ff;font-size:14px;max-width:260px;margin-left:auto;margin-right:auto}.spin-right{padding:30px 28px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spin-right h2{color:#fff;font-size:30px;letter-spacing:1px;margin:0}.spin-hint{color:#c7d2f5;font-size:14px;margin:6px 0 14px}.wheel-wrap{position:relative;width:300px;max-width:76vw;aspect-ratio:1;margin:4px auto 16px}.wheel{width:100%;height:100%;transform:rotate(0deg)}.wheel.spinning{transition:transform 5s cubic-bezier(.17,.67,.16,1)}.wheel-hub{position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);background:#fff;border:4px solid #f5b301;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.4);z-index:3}.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:28px solid #fff;z-index:4;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}.spin-field{width:100%;max-width:340px}.spin-field input{width:100%;text-align:center;border:2px solid #f5b301;border-radius:12px;padding:14px;font-size:16px;font-weight:700;color:#0a1650;background:#fff;outline:none}.spin-field input:focus{box-shadow:0 0 0 3px rgba(245,179,1,.35)}.spin-field small{display:block;min-height:16px;color:#ffb4b4;font-size:12px;margin-top:6px}.spin-go{margin-top:10px;max-width:340px}.spin-no{background:none;border:0;color:#aab6e0;text-decoration:underline;margin-top:12px;font-size:13px;cursor:pointer}.spin-result{color:#fff;max-width:430px;animation:modalIn .35s ease}.result-emoji{font-size:46px}.spin-result h2{font-size:26px;margin:6px 0}.spin-result h2 span{color:#ffca35}.result-lead{color:#dbe4ff;font-size:15px}.result-lead s{color:#ff8a8a}.result-price{font-size:48px;font-weight:900;color:#18d7a5;margin:10px 0;line-height:1}.result-price span{font-size:22px}.result-price em{display:block;font-style:normal;font-size:13px;color:#c7d2f5;font-weight:600}.result-note{background:rgba(255,203,53,.12);border:1px solid rgba(255,203,53,.4);border-radius:12px;padding:12px 14px;font-size:13px;color:#ffe6a8;margin:14px 0;text-align:left}.roulette-badge{display:flex;align-items:center;gap:8px;justify-content:center;text-align:center;background:linear-gradient(135deg,#18d7a5,#0ca57f);color:#fff;font-weight:800;font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:14px;box-shadow:0 8px 20px rgba(15,190,145,.3)}
@media(max-width:760px){.spin-dialog{grid-template-columns:1fr;margin:2vh auto}.spin-left{border-radius:19px 19px 0 0;padding:24px}.spin-left::after{border-radius:19px 19px 0 0}.show-title strong{font-size:38px}.spin-right{padding:24px 18px}.spin-right h2{font-size:26px}}
@media(max-width:980px){.loss-grid > .loss-card:not(:last-child)::after{display:none}.section-heading h2 br,.section-heading p br{display:none}.guarantee-bar{gap:12px 8px;padding:16px 18px}.guarantee-bar span{flex:1 1 45%;justify-content:flex-start}.guarantee-bar span:not(:last-child)::after{display:none}}
@media(max-width:640px){.guarantee-bar span{flex:1 1 100%}}
@media(max-width:980px){.stats-grid{grid-template-columns:repeat(3,1fr);gap:22px 12px}.compare-grid{grid-template-columns:1fr;max-width:520px}.authority-grid{grid-template-columns:1fr;gap:32px}.proof-grid{grid-template-columns:1fr}.pain-cascade{gap:8px}}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat strong{font-size:32px}.authority-stats{grid-template-columns:1fr 1fr}.countdown-warn{flex-direction:column;gap:8px}.bigidea{padding:40px 0}}
@media(max-width:980px){.offer-assurance{grid-template-columns:repeat(2,1fr);padding:22px}.offer-devices{margin-top:28px}}
@media(max-width:640px){.offer-assurance{grid-template-columns:1fr;gap:16px}.device--tablet{width:100%}.device--mini{position:static;width:66%;margin:-10px auto 0}.offer-devices{padding-bottom:0}}
@media(max-width:980px){.desktop-nav{display:none}.hero-grid,.split-feature,.offer-grid,.faq-grid,.showcase-card{grid-template-columns:1fr}.hero-visual{margin-top:35px}.benefit-grid,.loss-grid,.modules-grid{grid-template-columns:repeat(2,1fr)}.showcase-image-wrap{padding:0 20px 30px}.showcase-image-wrap img{width:100%;border-radius:14px}.countdown-card{flex-direction:column;text-align:center}.offer-grid{gap:40px}.final-cta-inner{flex-direction:column;text-align:center;gap:26px}.final-cta-left{flex-direction:column;text-align:center}.footer-grid{grid-template-columns:1fr 1fr}.price-badge{right:0}.proof-one{left:0}.proof-two{right:0}}
@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.top-alert{display:none}.nav{height:66px}.nav .btn{display:none}.hero{padding-top:55px}.hero h1{font-size:40px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.trust-row{display:grid}.countdown{gap:4px}.countdown div{min-width:55px;padding:8px 6px}.countdown strong{font-size:21px}.benefit-grid,.loss-grid,.modules-grid,.steps-grid,.form-grid,.footer-grid{grid-template-columns:1fr}.section{padding:68px 0}.showcase-copy{padding:30px}.showcase-copy h3{font-size:30px}.feature-copy h2,.offer-copy h2{font-size:36px}.stack-small{right:0}.pricing-card{padding:32px 22px}.price strong{font-size:53px}.faq-grid{gap:15px}.final-cta h2{font-size:31px}.modal-dialog{padding:26px 18px}.full-field{grid-column:auto}.browser-frame{transform:none}.floating{animation:none}.mini-proof{display:none}}

/* =========================================================================
   CHECKOUT DA PRÉ-VENDA — etapa 2 do modal (Pix / Cartão) e modal do contrato.
   Bloco escrito por extenso (o resto do arquivo é compactado) porque é o
   trecho que mais vai ser mexido enquanto a pré-venda estiver no ar.
   ========================================================================= */

/* As duas etapas são irmãs dentro do mesmo .modal-dialog e alternam pelo atributo
   `hidden`. O seletor com [hidden] é obrigatório: a regra `#leadForm{display:flex}`
   é mais específica que o `[hidden]{display:none}` do navegador e, sem isto, a
   etapa 1 continuaria aparecendo por cima da etapa 2. */
#leadForm[hidden],#payStep[hidden]{display:none}
#payStep{display:flex;flex-direction:column;flex:1;min-height:0}
/* Mesmo motivo: `.btn` declara display:inline-flex e venceria o `hidden` do
   botão de pagar quando o Pix assume a tela. */
.btn[hidden]{display:none}

/* Cabeçalho compacto: os passos vêm ANTES do título e o título encolhe, para
   sobrar altura para os campos — o modal é a tela mais disputada da landing. */
.modal-dialog{padding-top:26px}
.modal-head{padding-right:40px}
.modal-head h2{margin:0;font-size:23px;line-height:1.25}

/* Trilha de passos: bolinha numerada + traço de ligação.
   Prefixo `ck-` porque `.step` JÁ EXISTE na seção "Como funciona" da landing, como
   card branco com `.step span` virando um círculo azul de 46px — reusar o nome
   transformava o rótulo do passo nesse círculo, por cima do texto. */
.ck-steps{list-style:none;display:flex;align-items:center;margin:0 0 14px;padding:0}
.ck-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#9aa4bd;white-space:nowrap}
.ck-step i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#eef1f6;color:#8b95ae;display:grid;place-items:center;font-size:11.5px;font-style:normal;font-weight:800;transition:.22s ease}
/* Traço entre um passo e o próximo (o último não tem). */
.ck-step::after{content:"";width:34px;height:2px;border-radius:2px;background:#e7ebf3;margin:0 12px;transition:.22s ease}
.ck-step:last-child::after{display:none}
.ck-step.active{color:#143fc1}
.ck-step.active i{background:#2f67ec;color:#fff;box-shadow:0 0 0 4px rgba(47,103,236,.14)}
.ck-step.done{color:#0ca57f}
.ck-step.done i{background:#18d7a5;color:#fff;font-size:0}
.ck-step.done i::after{content:"✓";font-size:13px}
.ck-step.done::after{background:#18d7a5}

@media(max-width:420px){
  .ck-step span{display:none}
  .ck-step::after{width:28px;margin:0 8px}
}

/* Resumo do que está sendo comprado */
.pay-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f7f9ff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:20px}
.pay-summary strong{display:block;font-size:15px;color:var(--ink)}
.pay-summary small{color:var(--muted);font-size:12.5px}
.pay-price{font-size:26px;font-weight:900;color:#0c1c56;white-space:nowrap}
.pay-price span{font-size:15px}

/* Escolha da forma de pagamento */
.pay-label{font-size:12px;font-weight:800;margin:0 0 10px}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.pay-method{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#fff;border:2px solid #dfe5f0;border-radius:14px;padding:16px 12px;cursor:pointer;transition:.18s}
.pay-method i{font-size:20px;color:#2f67ec}
.pay-method b{font-size:14px;color:var(--ink)}
.pay-method small{font-size:11.5px;color:var(--muted);line-height:1.3}
.pay-method:hover{border-color:#b9c7e6}
.pay-method.active{border-color:#18d7a5;background:#f2fdf9;box-shadow:0 6px 18px rgba(15,190,145,.16)}
.pay-method.active i{color:#0ca57f}

/* Pix: QR + copia e cola */
.pix-box{text-align:center;border:1px dashed #cfd7e5;border-radius:14px;padding:20px 16px;margin-bottom:6px}
/* aspect-ratio reserva a altura ANTES de o QR carregar. Sem isto o box nasce
   curto, o scroll automático conclui que já está tudo visível, e aí a imagem
   chega e empurra o copia-e-cola para fora da área rolável. */
.pix-qr{width:210px;max-width:70%;aspect-ratio:1;border-radius:10px;background:#fff}
.pix-hint{font-size:12.5px;color:var(--muted);margin:12px 0 10px;line-height:1.5}
.pix-copy{display:flex;gap:0}
.pix-copy input{flex:1;min-width:0;border:1px solid #cfd7e5;border-right:0;border-radius:9px 0 0 9px;padding:11px;font-size:12px;color:#54607a;background:#f7f9ff;outline:none}
.pix-copy button{border:0;background:#143fc1;color:#fff;padding:0 18px;border-radius:0 9px 9px 0;font-weight:800;cursor:pointer;white-space:nowrap}
.pix-waiting{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12.5px;color:#0ca57f;font-weight:700;margin:14px 0 0}
.spinner{width:14px;height:14px;border:2px solid rgba(12,165,127,.25);border-top-color:#0ca57f;border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mensagem de erro/estado do checkout */
.pay-msg{font-size:13px;line-height:1.5;border-radius:10px;padding:12px 14px;margin:14px 0 0;background:#fff4f4;border:1px solid #f6cccc;color:#c02b2b}
.pay-msg.ok{background:#f2fdf9;border-color:#b6ecdc;color:#0a7f60}

/* Rodapé da etapa de pagamento */
.contract-note{font-size:11.5px;color:var(--muted);line-height:1.5;margin:12px 0 0;text-align:center}
.link-inline{background:none;border:0;padding:0;font:inherit;color:#2f67ec;font-weight:700;text-decoration:underline;cursor:pointer}

/* Aceite do contrato — obrigatório para pagar */
.contract-check{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--muted);line-height:1.5;border:1px solid transparent;border-radius:10px;padding:9px 10px;margin-bottom:12px;transition:.2s ease}
.contract-check input{flex:0 0 auto;width:16px;height:16px;margin:0;cursor:pointer;accent-color:#0ca57f}
.contract-check label{cursor:pointer}
/* Estado de recusa: aceso quando o cliente tenta pagar sem marcar. */
.contract-check.erro{border-color:#f0b4b4;background:#fff6f6;color:#c02b2b}
.contract-check.erro input{outline:2px solid #e05252;outline-offset:2px}
/* Marcado: confirma visualmente que o passo foi cumprido. */
.contract-check.ok{border-color:#b6ecdc;background:#f4fdfa;color:#0a7f60}
.pay-back{display:block;width:100%;background:none;border:0;color:#8b95ae;font-size:12.5px;margin-top:10px;cursor:pointer}
.pay-back:hover{color:#2f67ec}

/* Modal do contrato */
.contract-modal .modal-dialog{width:min(880px,calc(100% - 28px))}
.contract-modal .modal-head h2{font-size:20px;line-height:1.35}
.contract-body{text-align:justify;hyphens:auto;font-size:13.5px;line-height:1.72;color:#33405c;padding-right:14px}
.contract-body h3{font-size:14px;color:#0c1c56;text-transform:uppercase;letter-spacing:.4px;margin:26px 0 10px}
.contract-body p{margin:0 0 12px}
.contract-body strong{color:#0c1c56}
/* Campo preenchido com os dados da ficha — some o destaque quando resolvido. */
.contract-body .fill{background:#fff6e0;border-bottom:1px dashed #e0b34d;padding:0 3px;font-weight:700;color:#7a5a10}
.contract-body .fill.filled{background:none;border-bottom:0;padding:0;color:#0c1c56}
.contract-place{text-align:center!important;margin-top:22px!important;color:var(--muted)}
.contract-signs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 10px;text-align:center}
.contract-signs .sign-line{display:block;border-top:1px solid #9aa4bd;margin-bottom:8px}
.contract-signs strong{display:block;font-size:12.5px;color:#0c1c56}
.contract-signs small{color:var(--muted);font-size:11.5px}

@media(max-width:640px){
  .pay-methods{grid-template-columns:1fr}
  .pay-summary{flex-direction:column;align-items:flex-start;gap:8px}
  .contract-signs{grid-template-columns:1fr;gap:32px}
  .contract-body{padding-right:0;text-align:left}
}

/* ===== Selo "10 licenças por estado" (hero) ===== */
.seal-badge{position:absolute;z-index:6;left:-42px;top:-56px;width:138px;height:138px;transform:rotate(-9deg);filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));animation:seal-float 6s ease-in-out infinite}
.seal-badge::before{content:"";position:absolute;inset:0;background:conic-gradient(from 210deg,#8a5f10,#f7d67a 12%,#c9971f 24%,#fff2c2 36%,#d2a12a 48%,#8a5f10 58%,#f4d071 70%,#b8851a 82%,#ffeab5 92%,#8a5f10);clip-path:polygon(50.0% 0.0%, 55.8% 9.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.8% 19.0%, 87.8% 17.3%, 84.5% 27.8%, 95.5% 29.2%, 89.3% 38.4%, 99.5% 42.9%, 91.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 84.5% 72.2%, 87.8% 82.7%, 76.8% 81.0%, 77.0% 92.1%, 67.0% 87.3%, 64.1% 98.0%, 55.8% 90.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.0% 87.3%, 23.0% 92.1%, 23.2% 81.0%, 12.2% 82.7%, 15.5% 72.2%, 4.5% 70.8%, 10.7% 61.6%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 10.7% 38.4%, 4.5% 29.2%, 15.5% 27.8%, 12.2% 17.3%, 23.2% 19.0%, 23.0% 7.9%, 33.0% 12.7%, 35.9% 2.0%, 44.2% 9.4%)}
.seal-badge::after{content:"";position:absolute;inset:11px;border-radius:50%;background:conic-gradient(from 30deg,#a4711a,#ffeab5 18%,#c9971f 34%,#fff6d6 52%,#b8851a 68%,#f7d67a 86%,#a4711a)}
.seal-face{position:absolute;z-index:2;inset:20px;border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,#12235f,#05103d 70%);box-shadow:inset 0 0 0 1px rgba(255,228,160,.55),inset 0 6px 14px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
.seal-top{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#f3d68f}
.seal-num{font-size:34px;font-weight:900;letter-spacing:-1px;margin:1px 0 2px;background:linear-gradient(180deg,#fff6d8,#e8b73a);-webkit-background-clip:text;background-clip:text;color:transparent}
.seal-label{font-size:9.5px;font-weight:800;line-height:1.25;letter-spacing:.6px;text-transform:uppercase;color:#ffe9ac}
.seal-stars{margin-top:4px;font-size:8px;letter-spacing:2px;color:#f0c14b}
@keyframes seal-float{50%{transform:rotate(-9deg) translateY(-9px)}}
@media(max-width:980px){.seal-badge{left:-10px;top:-34px;width:118px;height:118px}}
/* No mobile o selo e o `.price-badge` disputam o mesmo canto superior direito, e o
   selo (z-index 6) cobria justamente o valor (z-index 4). O preço ocupa de -42px a
   +49px (padding 30 + 17 + 27 + 17); o selo sobe para ACIMA dele, com 10px de folga:
   -42 - 10 - 98 = -150px.
   O `.hero-visual` ganha a margem que essa subida exige — sem ela o selo só trocaria
   de vítima e passaria a cobrir a `.trust-row` logo acima. */
@media(max-width:640px){.hero-visual{margin-top:158px}.seal-badge{left:auto;right:8px;top:-150px;width:98px;height:98px}.seal-num{font-size:26px}.seal-label{font-size:8px}.seal-top{font-size:7.5px}}

/* =========================================================================
   TOPO NOVO + FAIXA DE CLIENTES REAIS (03/08/2026)

   Pedido do comercial: a página tem de ABRIR dizendo que o ERP evoluiu e já
   mostrando cliente de verdade — foto de fachada convence mais que texto.
   ========================================================================= */

/* Destaque da segunda linha do H1. NÃO reusa `.grad-word` (azul -> roxo) de
   propósito: aquele gradiente foi feito para seção clara, e sobre o azul
   #03136d~#0b3cc4 do hero ele some. O verde-água do CTA contrasta e ainda
   amarra com a cor de ação da página. */
.hero-hl{background:linear-gradient(135deg,#3ee6b4,#8ad8ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* A faixa fica ENTRE o hero e a `.bigidea`, ambos escuros: o fundo repete o
   degradê do hero para a emenda não aparecer como uma listra. */
.clients-strip{position:relative;background:linear-gradient(180deg,#0b3cc4 0%,#092e9e 100%);padding:34px 0 44px;overflow:hidden}
.clients-lead{text-align:center;color:#dce4ff;font-size:19px;line-height:1.5;margin:0 0 24px}
.clients-lead strong{color:#fff}

/* `mask-image` esmaece as pontas: sem isso o card entra e sai da tela cortado
   no meio, e a esteira parece um bug de layout. */
.clients-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* `width:max-content` impede o flex de espremer os cards para caber na tela.
   A lista está duplicada no HTML, então -50% cai exatamente sobre a 2ª cópia
   e o loop reinicia sem salto visível. */
.clients-track{display:flex;gap:18px;width:max-content;padding:4px 0;animation:clientsScroll 60s linear infinite;will-change:transform}
@keyframes clientsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Parar no hover/foco deixa o visitante ler a placa da loja com calma. */
.clients-marquee:hover .clients-track,.clients-marquee:focus-within .clients-track{animation-play-state:paused}

/* ARRASTAR PARA OS LADOS — estado ligado pelo clientsMarquee() do script.js.
   Quando o JS assume, quem anda é o scrollLeft do container, então a animação
   CSS SAI: as duas somariam deslocamento e o arrasto sairia dobrado. Sem JS,
   nada disso é aplicado e a esteira continua rodando só no CSS.
   `touch-action:pan-y` entrega o gesto horizontal ao JS (é o que mantém o loop
   infinito no celular) sem tirar do dedo a rolagem vertical da página. */
.clients-marquee.is-draggable{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.clients-marquee.is-draggable .clients-track{animation:none}
.clients-marquee.is-dragging{cursor:grabbing}
/* Sem isso o navegador entende o gesto como "arrastar a imagem" e o fantasma da
   foto sai colado no cursor no meio do arrasto. */
.clients-marquee.is-draggable img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.clients-marquee.is-draggable:focus-visible{outline:2px solid #8ad8ff;outline-offset:3px;border-radius:14px}

.client-shot{position:relative;flex:0 0 auto;width:300px;height:195px;margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 32px rgba(2,10,45,.35);background:#0a2270}
/* As fotos originais são pequenas e foram tiradas em horários diferentes; o
   tratamento pesado está nos arquivos (clientes/otimizar.sh). Aqui fica só um
   acerto fino de brilho/contraste para todas fecharem no mesmo tom. */
.client-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.04) contrast(1.04) saturate(1.06)}
.client-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);background:linear-gradient(180deg,transparent,rgba(3,12,60,.85))}

@media(max-width:640px){
  .clients-strip{padding:26px 0 34px}
  .clients-lead{font-size:17px;margin-bottom:18px}
  .client-shot{width:236px;height:158px}
  .clients-track{gap:12px}
}

/* Quem pede menos movimento no sistema não recebe esteira nenhuma: vira uma
   grade estática, sem perder nenhuma foto. */
@media(prefers-reduced-motion:reduce){
  .clients-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .clients-marquee{-webkit-mask-image:none;mask-image:none;width:min(100% - 24px,1180px);margin:0 auto}
  .clients-track > .client-shot[aria-hidden="true"]{display:none}
}