:root{
  --text:#ffffff;
  --muted:#c8c8d8;
  --line:rgba(255,255,255,.10);
  --grad: linear-gradient(45deg,#00ff88,#00ccff);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --card: rgba(20,20,35,.70);
  --card2: rgba(255,255,255,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.86)),
    url("../assets/background.jpg") no-repeat center center fixed;
  background-size:cover;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:90px 0}
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

h1{font-size:54px;line-height:1.1;letter-spacing:-.02em}
h2{font-size:38px;letter-spacing:-.01em}
p{color:var(--muted);line-height:1.7}
.muted{color:var(--muted)}
.lead{margin-top:14px;font-size:16.5px}

.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#particles{position:fixed;inset:0;z-index:-1}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
}
.nav__content{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{width:160px;height:auto;display:block}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:999px;font-weight:800;
  text-decoration:none;color:#000;background:var(--grad);
  transition:.25s;box-shadow: 0 12px 35px rgba(0,255,136,.16);
  border:1px solid rgba(255,255,255,.06);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 50px rgba(0,255,136,.24)}
.btn--big{padding:16px 34px;font-size:16px}
.btn--outline{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
}
.btn--outline:hover{border-color:rgba(255,255,255,.45); box-shadow:0 16px 50px rgba(0,0,0,.35)}
.btn--pulse{position:relative}
.btn--pulse::after{
  content:"";position:absolute;inset:-10px;border-radius:999px;
  border:2px solid rgba(0,255,136,.35);opacity:0;animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.95);opacity:.65}100%{transform:scale(1.15);opacity:0}}

/* HERO */
.hero{padding:70px 0 50px}
.hero__grid{
  display:grid;grid-template-columns: 1.1fr .9fr;
  gap:50px;align-items:center;min-height: calc(100vh - 80px);
}
.badge{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 14px;border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:16px;color:#eaeaf5;font-weight:700;font-size:13px;
}
.badge__dot{
  width:10px;height:10px;border-radius:999px;background:#00ff88;
  box-shadow:0 0 20px rgba(0,255,136,.65);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.trust__item{
  padding:12px 14px;border-radius:14px;background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.trust__item strong{display:block;font-size:13px}
.trust__item span{display:block;font-size:12px;color:var(--muted)}

.hero__image{
  position:relative;display:flex;justify-content:center;align-items:center;min-height:520px;
}
.phone{
  width:min(420px, 90%);
  animation: float 4.2s ease-in-out infinite;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
  z-index:2;
}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
.glow{
  position:absolute;width:380px;height:380px;border-radius:50%;
  background: radial-gradient(circle, rgba(0,255,136,.22), rgba(0,204,255,.12), rgba(0,0,0,0));
  filter: blur(10px);z-index:1;
}
.chip{
  position:absolute;padding:10px 12px;border-radius:999px;
  background: rgba(20,20,35,.75);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);z-index:3;backdrop-filter: blur(12px);
  font-weight:800;font-size:13px;
}
.chip--1{left:10px; top:70px}
.chip--2{right:10px; bottom:70px}

/* HEAD */
.section__head{max-width:760px}
.section__head p{margin-top:10px}

/* CARDS */
.cards{
  margin-top:34px;display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
.cards--3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.card{
  padding:22px;border-radius:18px;background: var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition:.25s;backdrop-filter: blur(12px);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:-60px;
  background: radial-gradient(circle, rgba(0,255,136,.18), rgba(0,0,0,0) 60%);
  transform: translate(-40px, 40px);
  opacity:0;transition:.25s;
}
.card:hover{transform: translateY(-8px);border-color: rgba(0,255,136,.35)}
.card:hover::before{opacity:1}
.card h3{font-size:16px;position:relative}
.card p{margin-top:8px;font-size:14px;position:relative}

/* QUIZ */
.quiz{
  border-radius:22px;padding:34px;
  background: rgba(20,20,35,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.quiz__head p{margin-top:8px}
.quiz__progress{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.quiz__bar{
  width:100%;max-width:520px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.quiz__barFill{
  height:100%;width:0%;
  background: var(--grad);
  border-radius:999px;
  transition: width .35s ease;
}
.quiz__count{color:rgba(255,255,255,.82);font-weight:700;font-size:13px}
.quiz__card{
  margin-top:18px;padding:18px;border-radius:18px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
}
.quiz__q{font-size:18px;font-weight:800}
.quiz__answers{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.answerBtn{
  width:100%;text-align:left;
  padding:14px 14px;border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;font-weight:700;cursor:pointer;
  transition:.2s;
}
.answerBtn:hover{transform:translateY(-2px);border-color: rgba(0,255,136,.35)}
.quiz__result{margin-top:18px}
.quiz__result h3{font-size:22px}
.quiz__result p{margin-top:8px}
#quizRestart{margin-top:10px}

/* TIMELINE 7 DIAS */
.timeline{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:center}
.step__num{
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,255,136,.45);
  color:#00ff88;font-weight:900;
  box-shadow: 0 0 0 6px rgba(0,255,136,.08);
  flex:0 0 auto;
}
.step__box{
  flex:1;
  padding:16px 18px;border-radius:16px;
  background: rgba(20,20,35,.65);
  border:1px solid rgba(255,255,255,.10);
}
.tag{
  display:inline-block;
  font-size:11px;font-weight:900;
  color:#00ff88;
  margin-bottom:4px;
  letter-spacing:.06em;
}

/* GUARANTEE */
.guaranteeBox{
  margin-top:18px;
  display:flex;gap:14px;align-items:center;
  padding:18px 18px;border-radius:18px;
  background: rgba(20,20,35,.65);
  border:1px solid rgba(255,255,255,.10);
}
.shield{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(0,255,136,.12);
  border:1px solid rgba(0,255,136,.25);
}

/* FAQ */
.faq{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.faq__item{
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,20,35,.55);
  backdrop-filter: blur(10px);
}
.faq__q{
  width:100%;
  background:transparent;
  border:0;
  color:#fff;
  text-align:left;
  padding:16px 16px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.faq__icon{font-size:18px;color:#00ff88;font-weight:900}
.faq__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  border-top:1px solid rgba(255,255,255,.08);
}
.faq__a p{padding:14px 16px}

/* CTA + FOOTER */
.cta{
  border-radius:24px;padding:44px 26px;
  background: linear-gradient(45deg, rgba(0,255,136,.16), rgba(0,204,255,.12));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  text-align:center;
  backdrop-filter: blur(10px);
}
.cta p{margin-top:10px}
.hint{display:block;margin-top:10px;color:rgba(255,255,255,.78);font-size:13px}
.footer{
  padding:26px 0;border-top:1px solid var(--line);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.footer__content{display:flex;justify-content:center}

/* Animações no load (não some conteúdo) */
.anim{opacity:1;transform:none}
body.loaded .anim--fade{animation:fadeIn .7s ease both}
body.loaded .anim--up{animation:fadeUp .75s ease both}
body.loaded .anim--scale{animation:scaleIn .75s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* RESPONSIVO */
@media (max-width: 980px){
  h1{font-size:40px}
  h2{font-size:30px}
  .hero__grid{grid-template-columns:1fr; min-height:auto; padding-top:20px}
  .hero__image{min-height:420px}
  .cards, .cards--3{grid-template-columns:1fr}
  .logo{width:140px}
  .quiz__progress{flex-direction:column;align-items:flex-start}
  .quiz__bar{max-width:100%}
}

/* =============================== */
/* OTIMIZAÇÃO DE SCROLL */
/* =============================== */

html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}