:root{
  --purple:#08B9F2;
  --purple-dark:#057CB5;
  --purple-light:#E8F7FF;
  --text:#071A33;
  --navy:#03152F;
  --gray:#64748B;
  --gray-light:#E2E8F0;
  --green:#16A34A;
  --red:#DC2626;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:#fff;color:var(--text);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{cursor:default}
.icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.c-purple{color:var(--purple)}
.c-green{color:var(--green)}
.c-gray{color:var(--gray)}
.c-white{color:#fff}

/* ---------- Animações ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes pulsePurple{0%,100%{box-shadow:0 0 0 0 rgba(8,185,242,.5)}50%{box-shadow:0 0 0 12px rgba(8,185,242,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes progressFill{from{width:0}to{width:100%}}
@keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:.5}}
.animate-fade-in{animation:fadeIn .4s ease-out both}
.animate-fade-in-up{animation:fadeInUp .5s ease-out both}
.animate-fade-in-scale{animation:fadeInScale .4s ease-out both}
.animate-pop-in{animation:popIn .45s ease-out both}
.animate-pulse-purple{animation:pulsePurple 2s infinite}
.animate-pulse{animation:pulseSoft 1.5s ease-in-out infinite}
.spin{animation:spin 1s linear infinite}
.anim-fill{animation:progressFill 3s linear forwards}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,232,240,.6);
}
.header-row{display:flex;align-items:center;gap:8px;padding:12px 16px 8px}
.back-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  background:var(--purple-light);color:var(--purple);
  transition:all .2s;
}
.back-btn[hidden]{display:none}
.back-btn:hover{background:rgba(8,185,242,.15)}
.back-btn:active{transform:scale(.9)}
.logo{display:flex;align-items:center;gap:4px;font-weight:900;line-height:1;letter-spacing:-.025em}
.logo-sm{font-size:15px;text-shadow:1px 2px 0 #B9EFFF}
.logo-lg{font-size:30px;margin-bottom:24px;gap:8px;text-shadow:2px 3px 0 #B9EFFF}
.logo .l1{color:var(--text);-webkit-text-stroke:.5px #071A33}
.logo .l2{color:var(--purple);-webkit-text-stroke:.5px #057CB5}
.logo-lg .l1{-webkit-text-stroke:1px #071A33}
.logo-lg .l2{-webkit-text-stroke:1px #057CB5}
.progress-track{height:4px;width:100%;background:rgba(226,232,240,.6)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--purple-dark));transition:width .5s ease-out}

/* ---------- Layout ---------- */
.screen-container{display:flex;justify-content:center;min-height:100vh;padding:80px 20px 32px}
.screen-inner{display:flex;flex-direction:column;width:100%;max-width:28rem}
.center-col{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.grow-col{display:flex;flex:1;flex-direction:column;justify-content:center}
.fill-col{display:flex;flex:1;flex-direction:column}
.w-full{width:100%}

/* ---------- Tipografia ---------- */
h1,h2{color:var(--text);font-weight:700;line-height:1.35}
.h-xl{font-size:20px}
.h-lg{font-size:18px}
.h-md{font-size:17px}
.h-2xl{font-size:24px}
.h-vsl{font-size:19px}
.sub{font-size:14px;color:var(--gray);line-height:1.6}
.text-center{text-align:center}
.text-left{text-align:left}
.small{font-size:12px;color:var(--gray)}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}

/* ---------- Botão principal ---------- */
.purple-button{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:100%;padding:16px 24px;border-radius:16px;
  font-size:16px;font-weight:800;color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  box-shadow:0 8px 20px rgba(8,185,242,.35);
  transition:transform .15s,opacity .2s,box-shadow .2s;
}
.purple-button:hover:not(:disabled){box-shadow:0 10px 24px rgba(8,185,242,.45)}
.purple-button:active:not(:disabled){transform:scale(.97)}
.purple-button:disabled{opacity:.45;box-shadow:none}

/* ---------- Bolas de números ---------- */
.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;justify-items:center}
@media (min-width:640px){.num-grid{gap:12px}}
.num{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:2px solid var(--gray-light);
  background:#fff;color:var(--text);font-weight:700;
  transition:all .2s;cursor:default;
}
.num.interactive{cursor:pointer}
.num.interactive:hover:not(.on){border-color:rgba(8,185,242,.5)}
.num.interactive:active{transform:scale(.9)}
.num-sm{width:36px;height:36px;font-size:12px}
.num-md{width:44px;height:44px;font-size:14px}
.num-lg{width:48px;height:48px;font-size:16px}
.num.on{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 4px 10px rgba(8,185,242,.3)}
.num.hit{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 10px rgba(22,163,74,.3);transform:scale(1.1)}
.hit-badge{
  position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:999px;
  background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;
}
.num-box{background:var(--purple-light);border-radius:16px;padding:16px}
.grid-wrap{width:100%;max-width:340px;margin:0 auto}
.label-up{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);text-align:left;margin-bottom:8px}

/* ---------- Contador ---------- */
.counter{display:flex;flex-direction:column;align-items:center}
.counter-row{display:flex;align-items:center;gap:8px}
.counter-row .lbl{font-size:14px;font-weight:500;color:var(--gray)}
.counter-row .val{font-size:18px;font-weight:700;color:var(--purple)}
.counter-row .val.ok{color:var(--green)}
.dots{display:flex;gap:4px;margin-top:8px}
.dot{height:6px;width:12px;border-radius:999px;background:var(--gray-light);transition:all .2s}
.dot.sm{width:10px}
.dot.on{background:var(--purple)}

/* ---------- Pílulas / cards ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--purple-light);border-radius:999px;padding:6px 16px}
.pill .pdot{width:6px;height:6px;border-radius:999px;background:var(--purple)}
.pill span.t{font-size:12px;font-weight:600;color:var(--purple)}
.feature{display:flex;align-items:center;gap:12px;background:var(--purple-light);border-radius:16px;padding:16px;text-align:left}
.feature span{font-size:14px;font-weight:500;color:var(--text)}
.feature-list{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:32px}
.opening-balls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.ball{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;color:#fff;
  font-size:12px;font-weight:700;box-shadow:0 4px 8px rgba(0,0,0,.18);
}

/* ---------- Spinner ---------- */
.ring{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin-bottom:32px}
.ring.sm{width:80px;height:80px;margin-bottom:24px}
.ring .r-bg,.ring .r-spin{position:absolute;inset:0;border-radius:999px;border:4px solid var(--purple-light);animation:spin 1.2s linear infinite}
.ring .r-spin{border-color:transparent;border-top-color:var(--purple)}
.msg-box{height:24px}
.msg{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:var(--text)}
.msg.gray{font-weight:400;color:var(--gray)}
.bar-wrap{width:100%;margin-top:32px}
.bar{height:8px;width:100%;overflow:hidden;border-radius:999px;background:var(--purple-light)}
.bar.thick{height:10px}
.bar-fill{height:100%;border-radius:999px;background:var(--purple);transition:width .1s linear}
.bar-fill.anim-fill{transition:none}
.pct-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.pct-row .pct{font-size:24px;font-weight:700;color:var(--purple)}
.pct-row [hidden]{display:none}
.success-msg{font-size:14px;font-weight:600;color:var(--green)}

/* ---------- Quiz ---------- */
.quiz-badge{display:inline-block;border-radius:999px;background:var(--purple-light);padding:4px 16px;font-size:12px;font-weight:600;color:var(--purple)}
.selection-card{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:16px;border-radius:16px;border:2px solid var(--gray-light);
  background:#fff;text-align:left;transition:all .2s;
}
.selection-card:hover{border-color:rgba(8,185,242,.5)}
.selection-card.selected{border-color:var(--purple);background:var(--purple-light)}
.selection-card.locked.selected{transform:scale(1.02)}
.selection-card .emoji{font-size:24px;line-height:1}
.selection-card .label{flex:1;font-size:14px;font-weight:500;color:var(--text)}
.selection-card .check{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;background:var(--purple);color:#fff;
}
.selection-card .check[hidden]{display:none}
.options{display:flex;flex-direction:column;gap:12px}
.step-circles{display:flex;gap:8px;margin-bottom:40px}
.step-circle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;background:var(--purple-light);
  font-size:14px;font-weight:700;color:var(--purple);
}
.icon-tile{
  display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:24px;background:var(--purple-light);margin-bottom:32px;
}

/* ---------- Resultados ---------- */
.hits-line{font-size:14px;font-weight:500;color:var(--gray)}
.hits-line .big{font-size:30px;font-weight:700;color:var(--purple)}
.ai-badge-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.ai-badge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--purple);color:#fff}
.ai-badge-row span.t{font-size:14px;font-weight:600;color:var(--purple)}
.guide{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chip{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;border:2px solid var(--gray-light);
  background:#fff;color:var(--text);font-size:12px;font-weight:700;transition:all .2s;
}
.chip.on{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 4px 10px rgba(8,185,242,.3)}
.chip.next{background:var(--purple-light);color:var(--purple);border-color:var(--purple);transform:scale(1.1);box-shadow:0 0 0 2px rgba(8,185,242,.4);animation:pulseSoft 1.5s ease-in-out infinite}
.trophy-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.trophy-circle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:var(--green);color:#fff}
.trophy-text{font-size:36px;font-weight:700;color:var(--green)}
.prize-box{width:100%;margin-bottom:12px;border:2px solid rgba(22,163,74,.3);background:var(--purple-light);border-radius:16px;padding:16px}
.prize-box p{font-size:14px;font-weight:700;color:var(--text)}

/* ---------- Comparação ---------- */
.cmp-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media (min-width:640px){.cmp-grid{grid-template-columns:1fr 1fr}}
.cmp-card{position:relative;overflow:hidden;border-radius:16px;padding:20px;text-align:center;background:#fff;border:2px solid var(--gray-light)}
.cmp-card.ai{border-color:var(--purple);background:var(--purple-light)}
.cmp-card .blur{position:absolute;right:-32px;top:-32px;width:128px;height:128px;border-radius:999px;background:rgba(8,185,242,.1);filter:blur(24px)}
.cmp-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;margin:0 auto 12px;background:var(--gray-light);position:relative}
.cmp-card.ai .cmp-icon{background:var(--purple);color:#fff}
.cmp-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px;position:relative}
.cmp-card.ai .cmp-title{color:var(--purple)}
.cmp-num{display:flex;align-items:center;justify-content:center;gap:4px;position:relative}
.cmp-num b{font-size:30px;font-weight:700;color:var(--text)}
.cmp-card.ai .cmp-num b{color:var(--purple)}
.cmp-num small{font-size:12px;color:var(--gray)}
.cmp-prize{margin-top:8px;font-size:12px;font-weight:600;color:var(--purple);position:relative}

/* ---------- VSL ---------- */
.vsl{width:100%}
.vsl-cta{margin-top:24px}
.vsl-fallback{
  position:relative;width:100%;padding-top:56.25%;
  background:linear-gradient(to bottom,var(--purple-light),#fff);border-radius:12px;overflow:hidden;
}
.vsl-fallback>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.vsl-play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:999px;background:rgba(8,185,242,.2)}

/* ---------- Checkout ---------- */
.plans{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.plan{
  position:relative;text-align:left;background:#fff;
  border:2px solid var(--gray-light);border-radius:20px;padding:20px;
}
.plan.hl{border-color:var(--purple);background:var(--purple-light);box-shadow:0 10px 24px rgba(8,185,242,.2)}
.plan-name{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--text)}
.plan.hl .plan-name{color:var(--purple-dark)}
.plan-price{font-size:32px;font-weight:800;color:var(--text);margin:4px 0 16px}
.plan-benefits{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.plan-benefits li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text)}
.plan-benefits li .icon{color:var(--green);margin-top:2px}