:root{
  --bg:#0B0B10;
  --panel:#11121A;
  --muted:#9AA0AA;
  --text:#F4F6F8;
  --brand:#7C4DFF;
  --brand-2:#00D2D3;
  --success:#00C48C;
  --danger:#FF6B6B;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none;opacity:.95}
a:hover{opacity:1}
.container{width:min(1150px,92%);margin:0 auto}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}

.nav{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(11,11,16,.75);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.nav .brand{display:flex;gap:10px;align-items:center;padding:14px 0}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));font-weight:800}
.brand-text{font-weight:700;letter-spacing:.2px}
.menu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.menu a{margin:0 6px;font-weight:500}
.menu .btn-primary{margin-left:8px}

.hero{padding:80px 0;background:radial-gradient(1200px 600px at -10% -30%, rgba(124,77,255,.25), transparent 45%), radial-gradient(1000px 500px at 110% 10%, rgba(0,210,211,.25), transparent 40%)}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 12px}
.highlight{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:18px;color:var(--muted);max-width:680px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:999px;font-size:12px}
.cta-row{display:flex;gap:12px;margin:18px 0 26px;flex-wrap:wrap}
.timer-card{display:flex;gap:18px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:16px 18px;border-radius:var(--radius);box-shadow:var(--shadow);max-width:520px}
.countdown{display:flex;gap:14px}
.countdown div{display:grid;place-items:center}
.countdown span{font-size:26px;font-weight:800}
.countdown small{color:var(--muted);margin-top:-6px}

.hero-card .glass{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow)}
.checks{list-style:none;padding:0;margin:10px 0 0}
.checks li{padding-left:26px;position:relative;margin:10px 0;color:#DDE0E6}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:800}

.method{padding:80px 0;background:linear-gradient(180deg,transparent 0%, rgba(255,255,255,.02) 100%)}
.method h2,.proof h2,.pricing h2,.lead h2,.faq h2{font-size:34px;margin:0 0 10px}
.lead{color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:24px;overflow-x:auto;padding-bottom:8px}
.step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:16px;min-width:200px;scroll-snap-align:start}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));font-weight:800;margin-bottom:10px}

.proof{padding:70px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
blockquote{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:14px;color:#E8EBEF}
blockquote span{display:block;color:var(--muted);margin-top:8px}
.social-proof{display:flex;gap:24px;margin-top:8px;flex-wrap:wrap}
.kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:14px 16px;border-radius:14px}
.kpi strong{font-size:22px;display:block}

.pricing{padding:80px 0}
.cards .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.card-featured{border:1px solid rgba(124,77,255,.5);box-shadow:0 10px 40px rgba(124,77,255,.2)}
.free{background:#0bd39f; padding:2px 8px; border-radius:999px; color:#0B0B10; font-size:16px; font-weight:800}
.features{list-style:none;margin:10px 0;padding:0}
.features li{padding-left:24px;position:relative;margin:10px 0}
.features li::before{content:"•";position:absolute;left:8px;color:var(--brand-2)}

.price{font-size:28px;margin:14px 0}
.note{color:var(--muted)}

.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0B0B10;border:none;padding:14px 18px;border-radius:14px;font-weight:800;display:inline-block;box-shadow:var(--shadow)}
.btn-ghost{border:1px solid rgba(255,255,255,.18);padding:12px 16px;border-radius:14px;font-weight:700;background:rgba(255,255,255,.02)}
.btn-sm{padding:10px 14px;font-size:14px}
.full{display:block;text-align:center}
.full-mobile{}

.lead .ticks{list-style:none;padding:0;margin:12px 0 0}
.lead .ticks li{padding-left:24px;position:relative;margin:10px 0}
.lead .ticks li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:900}

.form .field{display:grid;gap:8px;margin:8px 0}
.form input,.form textarea{background:#0D0F16;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:14px;border-radius:12px}
.form button{margin-top:8px}
.flash{margin-top:12px}
.flash-success{color:#1ee0a1}
.flash-error{color:#ff8c8c}

.faq{padding:70px 0}
.accordion details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:12px 14px;border-radius:12px;margin:10px 0}
.accordion summary{cursor:pointer;font-weight:600}

.footer{padding:30px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.footer .muted{color:var(--muted)}

.small{font-size:12px}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.3px;color:var(--muted);text-transform:uppercase}

.only-desktop{display:inline-block}

@media (max-width: 1000px){
  .grid-2{grid-template-columns:1fr;gap:28px}
  .grid-3{grid-template-columns:1fr;gap:18px}
  .quotes{grid-template-columns:1fr}
  .steps{grid-auto-flow:column;grid-auto-columns:75%;scroll-snap-type:x mandatory}
}

@media (max-width: 768px){
  .hero{padding:48px 0}
  .hero h1{font-size:34px}
  .sub{font-size:16px}
  .timer-card{flex-direction:column;align-items:flex-start}
  .cta-row .btn-primary,.cta-row .btn-ghost{width:100%}
  .full-mobile{width:100%}
  .only-desktop{display:none}
  .menu{gap:6px}
  .menu a{margin:4px 4px}
  .card, .glass{border-radius:16px}
  .form input, .form textarea, .btn-primary, .btn-ghost{min-height:48px}
  .scroller{padding-bottom:4px}
  .kpi strong{font-size:20px}
  .footer-cta .btn-sm{padding:12px 16px}

}

/* Ajuste visual para usar o mesmo roller dos steps com os depoimentos */
.proof .steps.scroller {
  scroll-snap-type: x mandatory;
}

.proof .steps.scroller .step.test-card {
  min-width: 280px;       /* largura mínima do card no carrossel */
  max-width: 360px;       /* limite para não estourar */
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 16px;
  background: var(--surface, #0f0f0f);
  border: 1px solid rgba(255,255,255,0.06);
}

.test-card .meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}

.test-card .avatar.initials {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  font-weight: 600;
}

.test-card .quote { margin: 8px 0 6px; line-height: 1.45; }
.test-card .quote-footer { font-size: 12px; }

/* responsive tweaks */
@media (max-width:1000px){
  .proof-grid{grid-template-columns:1fr;gap:22px}
  .kpis{grid-template-columns:repeat(3,1fr);gap:8px}
  .kpi.large{grid-column:auto}
}
@media (max-width:768px){
  .test-controls .control{width:40px;height:40px;font-size:20px}
  .test-card{min-width:220px;max-width:260px}
}
/* Esconde os links do menu no mobile, mantendo só o botão */
@media (max-width: 768px) {
  .menu a:not(.btn-primary) {
    display: none;
  }
  /* deixa o botão alinhado à direita e ocupa largura toda se quiser */
  .menu { width: 100%; justify-content: flex-end; }
  .menu .btn-primary { width: auto; }
}