:root{
  --bg:#0A0A0A; --surface:#141414; --surface2:#1C1C1C;
  --violet:#D6FF3D; --violet-soft:#E9FF9E; --gold:#D6FF3D; --gold-deep:#B8E600;
  --green:#D6FF3D; --red:#FF7A5C; --text:#FFFFFF; --muted:#9A9A9A; --line:#2A2A2A;
  --on-accent:#0A0A0A;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at 80% -10%, rgba(214,255,61,.18), transparent 60%),
    radial-gradient(500px 350px at 10% 110%, rgba(214,255,61,.08), transparent 60%);
}
.app{position:relative; z-index:1; max-width:480px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; padding:0 20px 40px;}

h1,h2,h3{font-family:'Sora',sans-serif; letter-spacing:-.02em}

/* ---------- TOP BAR ---------- */
.topbar{display:none; align-items:center; gap:12px; padding:16px 0 10px; position:sticky; top:0; background:linear-gradient(var(--bg) 70%, transparent); z-index:5}
.topbar.show{display:flex}
.coin{
  font-family:'Sora'; font-weight:700; font-size:13px; color:var(--gold);
  background:rgba(214,255,61,.1); border:1px solid rgba(214,255,61,.35);
  padding:6px 12px; border-radius:999px; white-space:nowrap; min-width:70px; text-align:center;
}
.progress-wrap{flex:1}
.progress-label{font-size:11px; color:var(--muted); margin-bottom:5px; display:flex; justify-content:flex-end}
.progress-label b{color:var(--violet-soft); font-weight:700}
.segments{display:flex; gap:4px}
.seg{height:7px; flex:1; border-radius:99px; background:var(--line); position:relative; overflow:hidden}
.seg i{position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--violet),var(--violet-soft)); border-radius:99px; transition:width .35s ease; display:block}
.seg.done i{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.sound-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  width:38px;height:38px;border-radius:12px; font-size:16px; cursor:pointer; flex-shrink:0;
}

/* ---------- SCREENS ---------- */
.screen{display:none; flex:1; flex-direction:column; justify-content:center; padding:24px 0 40px; animation:fadeUp .45s ease both}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- INTRO ---------- */
.badge-top{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet-soft); background:rgba(214,255,61,.12); border:1px solid rgba(214,255,61,.4);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.badge-top .dot{width:7px;height:7px;border-radius:99px;background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 1.6s infinite; display:inline-block}
@keyframes pulse{50%{opacity:.4}}
.intro h1{font-size:29px; font-weight:800; line-height:1.2; margin-bottom:16px}
.intro h1 em{font-style:normal; background:linear-gradient(90deg,var(--gold),var(--violet-soft)); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro p{color:var(--muted); font-size:16px; margin-bottom:28px}
.intro p .hl{color:var(--text); font-weight:700}
.intro .check-list{max-width:none; margin:0 0 28px; align-items:stretch}
.intro .check{opacity:1; color:var(--text); font-size:15px}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Sora'; font-weight:700; font-size:16px; letter-spacing:.01em;
  width:100%; padding:18px 20px; border-radius:16px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--violet) 0%, #EBFF8A 100%); color:var(--on-accent);
  box-shadow:0 10px 30px rgba(214,255,61,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease, box-shadow .2s;
}
.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(135deg,var(--gold-deep),var(--gold)); color:var(--on-accent); box-shadow:0 10px 34px rgba(214,255,61,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.pulse{animation:btnPulse 2s infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 10px 34px rgba(214,255,61,.4)}50%{box-shadow:0 10px 44px rgba(214,255,61,.7)}}
.btn-note{text-align:center; font-size:12px; color:var(--muted); margin-top:12px}

/* ---------- QUIZ ---------- */
.block-tag{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:8px}
.block-tag::before{content:""; width:18px; height:2px; background:var(--gold); border-radius:2px}
.q-title{font-size:22px; font-weight:700; line-height:1.3; margin-bottom:22px}
.opts{display:flex; flex-direction:column; gap:11px}
.opt{
  background:var(--surface); border:1.5px solid var(--line); border-radius:15px;
  padding:16px 18px; font-size:15.5px; color:var(--text); text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  transition:border-color .15s, background .15s, transform .12s;
}
.opt .key{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  background:var(--surface2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-size:12px; font-weight:700; color:var(--muted);
  transition:all .15s;
}
.opt:active{transform:scale(.98)}
.opt.picked{border-color:var(--violet); background:rgba(214,255,61,.14)}
.opt.picked .key{background:var(--violet); border-color:var(--violet); color:var(--on-accent)}
.coin-float{
  position:fixed; z-index:50; font-family:'Sora'; font-weight:800; font-size:15px; color:var(--gold);
  pointer-events:none; animation:coinFly .8s ease-out forwards; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
@keyframes coinFly{0%{opacity:0; transform:translateY(0) scale(.7)}25%{opacity:1; transform:translateY(-14px) scale(1.1)}100%{opacity:0; transform:translateY(-52px) scale(1)}}
.coin-fly-real{
  position:fixed; z-index:90; font-size:22px; pointer-events:none;
  transition:transform .42s cubic-bezier(.32,.72,.35,1), opacity .3s ease .12s;
}
.coin.bump{animation:coinBump .3s ease}
@keyframes coinBump{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ---------- SALE TOAST (notificação de venda) ---------- */
.sale-toast{
  position:fixed; left:16px; right:16px; bottom:20px; z-index:80; max-width:340px; margin:0 auto;
  background:var(--surface); border:1.5px solid rgba(214,255,61,.45); border-radius:16px;
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5); transform:translateY(140%); opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.sale-toast.show{ transform:translateY(0); opacity:1; }
.sale-toast .st-ic{
  width:38px; height:38px; border-radius:11px; flex-shrink:0; font-size:19px;
  background:rgba(214,255,61,.14); border:1px solid rgba(214,255,61,.4);
  display:flex; align-items:center; justify-content:center;
}
.sale-toast .st-txt{display:flex; flex-direction:column; gap:2px; flex:1}
.sale-toast .st-txt b{font-family:'Sora'; font-size:14px; color:var(--text)}
.sale-toast .st-txt span{font-size:12px; color:var(--muted); line-height:1.3}
.sale-toast .st-valor{font-family:'Sora'; font-weight:800; font-size:16px; color:var(--gold); flex-shrink:0; white-space:nowrap;}

/* ---------- LEVEL UP (etapa concluída) ---------- */
.levelup{text-align:center; align-items:center}
.medal{
  width:110px; height:110px; margin:0 auto 22px; border-radius:32px;
  background:linear-gradient(140deg,var(--surface2),var(--surface));
  border:1.5px solid rgba(214,255,61,.5);
  display:flex; align-items:center; justify-content:center; font-size:48px;
  box-shadow:0 0 60px rgba(214,255,61,.25), inset 0 1px 0 rgba(255,255,255,.1);
  animation:medalIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes medalIn{from{transform:scale(.3) rotate(-14deg); opacity:0}to{transform:scale(1) rotate(0); opacity:1}}
.levelup .etapa{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px}
.levelup h2{font-size:22px; margin-bottom:8px}
.levelup p{color:var(--muted); font-size:14px; margin-bottom:6px}

/* ---------- INTERSTITIAL ---------- */
.interstitial{align-items:flex-start; text-align:left}
.interstitial h3{font-size:20px; margin:10px 0}
.interstitial p{color:var(--muted); font-size:15px; margin-bottom:14px; line-height:1.6}
.interstitial .btn{margin-top:8px}

/* ---------- ANALYZING ---------- */
.analyzing{text-align:center; align-items:center}
.scanner{
  width:130px;height:130px; margin:0 auto 26px; border-radius:50%; position:relative;
  background:conic-gradient(var(--violet) var(--deg,0deg), var(--line) 0deg);
  display:flex; align-items:center; justify-content:center;
}
.scanner::after{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--bg)}
.scanner b{position:relative; z-index:1; font-family:'Sora'; font-size:26px}
.analyzing h2{font-size:22px; margin-bottom:20px}
.check-list{display:flex; flex-direction:column; gap:11px; text-align:left; max-width:310px; margin:0 auto}
.check{display:flex; gap:11px; align-items:center; font-size:14.5px; color:var(--muted); opacity:.25; transition:opacity .3s}
.check.on{opacity:1; color:var(--text)}
.check .ic{width:22px;height:22px;border-radius:99px; background:var(--surface2); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-size:12px; flex-shrink:0}
.check.on .ic{background:var(--green); border-color:var(--green); color:var(--on-accent)}

/* ---------- LEAD ---------- */
.lead h2{font-size:24px; line-height:1.25; margin-bottom:10px}
.lead h2 em{font-style:normal; color:var(--gold)}
.lead>p{color:var(--muted); margin-bottom:24px; font-size:15px}
.ready-chip{
  display:inline-flex; align-items:center; gap:9px; background:rgba(214,255,61,.1);
  border:1px solid rgba(214,255,61,.4); color:var(--green); font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:999px; margin-bottom:20px; align-self:flex-start;
}
#lead-form{display:flex; flex-direction:column}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:7px; letter-spacing:.03em}
.field input{
  width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  padding:16px; color:var(--text); font-size:16px; font-family:'DM Sans'; outline:none;
}
.field input:focus{border-color:var(--violet)}
.field small{display:block; font-size:12px; color:var(--muted); margin-top:6px}
.safe{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--muted); margin-top:14px}

/* ---------- RESULT ---------- */
.result{padding-top:30px}
.r-badge{
  background:linear-gradient(150deg,var(--surface2),var(--surface));
  border:1.5px solid rgba(214,255,61,.45); border-radius:24px; padding:26px 22px; text-align:center;
  box-shadow:0 0 70px rgba(214,255,61,.15); margin-bottom:26px; position:relative; overflow:hidden;
  animation:medalIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.r-badge .shine{position:absolute; top:0; left:-70%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent); animation:shine 3.2s infinite}
@keyframes shine{to{left:140%}}
.r-badge .lbl{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:8px}
.r-badge .icon{font-size:44px; margin-bottom:8px; display:block}
.r-badge h1{font-size:24px; font-weight:800; line-height:1.2; color:var(--gold)}
.r-badge .tag{margin-top:10px; font-size:14px; color:var(--violet-soft); font-weight:500}

.r-sec{margin-bottom:26px}
.r-sec h3{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:8px}
.r-sec h3::before{content:""; width:16px; height:2px; background:var(--gold)}

/* diagnostic bars */
.diag{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.dbar{margin-bottom:16px}
.dbar:last-child{margin-bottom:0}
.dbar .row{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:7px}
.dbar .row b{font-weight:700}
.dbar .row .val{font-family:'Sora'; font-weight:700}
.dbar .track{height:10px; background:var(--line); border-radius:99px; overflow:hidden}
.dbar .fill{height:100%; border-radius:99px; width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.dbar.good .fill{background:linear-gradient(90deg,#2AB57D,var(--green))}
.dbar.good .val{color:var(--green)}
.dbar.bad .fill{background:linear-gradient(90deg,#E5484D,var(--red))}
.dbar.bad .val{color:var(--red)}
.dbar.mid .fill{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.dbar.mid .val{color:var(--gold)}

/* generic dark card used for bullets/next-step/authority/faq */
.mirror{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.mirror p{font-size:14px; color:var(--muted); margin-bottom:10px; line-height:1.6}
.mirror p:last-child{margin-bottom:0}
.mirror p b{color:var(--text)}
.mirror .k{color:var(--gold); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em}
.mirror .next-title{color:var(--text); font-weight:700; font-size:16px; margin-bottom:10px}
.bullet-list, .check-tick-list, .x-list{list-style:none; margin:0 0 4px}
.bullet-list li, .check-tick-list li, .x-list li{padding:6px 0; font-size:14.5px; color:var(--muted)}
.authority{text-align:center}
.authority .names{font-size:12.5px; color:var(--muted); margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}

/* faq */
.faq details{border-top:1px solid var(--line); padding:12px 0}
.faq details:first-child{border-top:none}
.faq summary{font-weight:700; cursor:pointer; color:var(--text); font-size:14.5px}
.faq details p{margin-top:8px; margin-bottom:0}

/* offer */
.offer{
  background:linear-gradient(160deg, #1E1A45, var(--surface));
  border:1.5px solid rgba(214,255,61,.55); border-radius:24px; padding:24px 20px;
  position:relative; overflow:hidden;
}
.offer::before{content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(214,255,61,.28), transparent 70%)}
.offer .kicker{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; position:relative}
.offer h2{font-size:22px; line-height:1.25; margin-bottom:6px; position:relative}
.offer .sub{font-size:14px; color:var(--muted); margin-bottom:18px; position:relative}
.deliv{display:flex; flex-direction:column; gap:11px; margin-bottom:20px; position:relative}
.dl{display:flex; gap:11px; align-items:flex-start; font-size:14.5px}
.dl .ic{width:26px;height:26px;border-radius:9px; background:rgba(214,255,61,.18); border:1px solid rgba(214,255,61,.4); display:flex;align-items:center;justify-content:center; font-size:13px; flex-shrink:0}
.dl span b{color:var(--text)}
.dl span{color:var(--muted)}
.price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:16px; position:relative}
.price-old{font-size:15px; color:var(--muted); text-decoration:line-through}
.price{font-family:'Sora'; font-size:36px; font-weight:800; color:var(--gold)}
.price small{font-size:13px; color:var(--muted); font-weight:400; font-family:'DM Sans'}
.benefit-value{font-family:'Sora'; font-size:40px; font-weight:800; color:var(--gold); text-align:center; margin:8px 0; position:relative}
.bonus{
  margin:16px 0; padding:13px 14px; border:1px dashed rgba(214,255,61,.5); border-radius:13px;
  font-size:13px; color:var(--muted); background:rgba(214,255,61,.05); text-align:center; position:relative;
}
.bonus b{color:var(--gold)}
.countdown{font-family:'Sora'; font-weight:800; color:var(--red); font-size:16px}

.closing{text-align:center}
.closing h2{font-size:22px; margin-bottom:10px}
.closing p{color:var(--text); margin-bottom:8px}
.closing p.sub{color:var(--muted); font-size:14.5px}
.closing-price{font-family:'Sora'; font-size:20px; font-weight:800; color:var(--gold); margin:16px 0}
.closing .btn{margin-bottom:16px}
.ps{font-size:12.5px; color:var(--muted); margin-top:10px; text-align:left}

footer{padding:22px 0 10px; text-align:center; font-size:11.5px; color:var(--muted); opacity:.7}