/* ==========================================================
   LP roxo/preto — mobile first, zero dependencia
   ========================================================== */
:root{
  --bg:#08060E;
  --bg-2:#0E0A1A;
  --card:#120C20;
  --line:rgba(168,85,247,.16);
  --txt:#F4F1FA;
  --txt-2:#A79FBC;
  --p-500:#7C3AED;
  --p-400:#9333EA;
  --p-300:#A855F7;
  --p-200:#C084FC;

  --r:18px;
  --wrap:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; width:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .25vw,1.0625rem); line-height:1.6;
  overflow-x:clip; width:100%; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

/* ---------- brilhos de fundo ---------- */
.glow{position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; opacity:.5}
.glow--1{top:-18vh; left:50%; transform:translateX(-50%); width:min(760px,130vw); height:min(560px,70vh);
  background:radial-gradient(circle,rgba(124,58,237,.55),transparent 68%)}
.glow--2{top:62vh; right:-25vw; width:min(620px,100vw); height:min(620px,70vh);
  background:radial-gradient(circle,rgba(168,85,247,.24),transparent 70%)}

/* ---------- layout base ---------- */
main,.topbar,.foot{position:relative; z-index:1}
.hero,.sec,.final,.foot{max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.sec{padding-block:clamp(56px,9vw,104px)}
h1,h2,h3{line-height:1.04; letter-spacing:-.03em; margin:0 0 18px; font-weight:900}
h1{font-size:clamp(2.1rem,7.4vw,4.1rem)}
h2{font-size:clamp(1.65rem,5.2vw,2.9rem)}
h3{font-size:1.12rem; letter-spacing:-.015em; line-height:1.25}
p{margin:0 0 16px; color:var(--txt-2)}
strong{color:var(--txt); font-weight:800}
.grad{background:linear-gradient(100deg,var(--p-300),var(--p-200) 55%,#E9D5FF);
  -webkit-background-clip:text; background-clip:text; color:transparent}

.eyebrow{display:inline-block; margin-bottom:18px; padding:7px 15px; border-radius:100px;
  border:1px solid var(--line); background:rgba(124,58,237,.1);
  font-size:.735rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--p-200)}

/* ---------- topbar ---------- */
.topbar{max-width:var(--wrap); margin-inline:auto; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:900; letter-spacing:-.02em; font-size:1.02rem}
.brand__dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--p-300),var(--p-500));
  box-shadow:0 0 14px rgba(168,85,247,.85)}
.topbar__cta{display:none; padding:10px 18px; border-radius:100px; border:1px solid var(--line);
  background:rgba(124,58,237,.12); font-size:.86rem; font-weight:700; text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.topbar__cta:hover{background:rgba(124,58,237,.26); border-color:rgba(168,85,247,.5)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(28px,6vw,54px); padding-bottom:clamp(52px,8vw,88px); text-align:center}
.hero__sub{max-width:660px; margin:0 auto 34px; font-size:clamp(1rem,2.9vw,1.15rem)}

/* video */
.video{margin:0 auto 30px; max-width:760px}
.video__frame{position:relative; aspect-ratio:var(--vid,16/9); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(160deg,var(--bg-2),#15102A);
  box-shadow:0 30px 80px -30px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.05)}
.video__frame iframe,.video__frame video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; background:#000}
.video--vert{max-width:400px}
.video__soon{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; padding:26px; text-align:center}
.video__play{width:60px; height:60px; margin-bottom:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--p-400),var(--p-500)); position:relative;
  box-shadow:0 0 0 10px rgba(124,58,237,.14), 0 0 40px rgba(124,58,237,.6)}
.video__play::after{content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff}
.video__soontitle{margin:0; font-weight:800; color:var(--txt); font-size:1.02rem}
.video__soontext{margin:0; max-width:380px; font-size:.9rem}

/* botao */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 30px; min-height:56px; border-radius:100px; text-decoration:none;
  font-weight:800; font-size:1.04rem; letter-spacing:-.01em; color:#fff;
  background:linear-gradient(135deg,var(--p-400),var(--p-500));
  box-shadow:0 14px 36px -10px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 20px 46px -10px rgba(124,58,237,1)}
.btn:active{transform:scale(.975)}
.btn--big{width:100%; max-width:400px}
.btn__ico{width:21px; height:21px; fill:currentColor; flex:none}
.microcopy{margin-top:14px; font-size:.84rem; color:var(--txt-2)}

/* strip */
.strip{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px;
  margin:38px 0 0; padding:20px 0 0; list-style:none; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--txt-2)}
.strip b{display:block; font-size:1.5rem; font-weight:900; letter-spacing:-.03em; color:var(--p-200)}

/* ---------- dores ---------- */
.pains{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.pains li{display:flex; gap:14px; padding:20px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.022)}
.pains b{display:block; margin-bottom:5px; font-size:1.04rem}
.pains p{margin:0; font-size:.95rem}
.x{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(239,68,68,.12); color:#F87171; font-size:.78rem; font-weight:700}

/* ---------- cards ---------- */
.cards{display:grid; gap:16px}
.card{position:relative; padding:26px 22px; border-radius:var(--r);
  border:1px solid var(--line); background:linear-gradient(170deg,var(--card),rgba(18,12,32,.35));
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:rgba(168,85,247,.45)}
.card__n{display:block; margin-bottom:14px; font-size:.8rem; font-weight:900; letter-spacing:.12em; color:var(--p-300)}
.card p{margin:0; font-size:.95rem}

/* ---------- passos ---------- */
.steps{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:14px}
.steps li{counter-increment:s; position:relative; padding:20px 20px 20px 66px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.022)}
.steps li::before{content:counter(s); position:absolute; left:20px; top:20px;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--p-400),var(--p-500)); color:#fff; font-weight:900; font-size:.95rem}
.steps b{display:block; margin-bottom:4px; font-size:1.04rem}
.steps p{margin:0; font-size:.95rem}

/* ---------- stats ---------- */
.sec--stats{padding-block:clamp(40px,7vw,72px)}
.stats{display:grid; gap:26px; text-align:center; padding:34px 22px; border-radius:24px;
  border:1px solid var(--line); background:linear-gradient(170deg,rgba(124,58,237,.14),rgba(18,12,32,.5))}
.stat{display:block; font-size:clamp(2.6rem,10vw,3.6rem); font-weight:900; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(140deg,#fff,var(--p-200));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stats small{display:block; margin-top:6px; font-size:.87rem; color:var(--txt-2)}

/* ---------- cta final ---------- */
.final{max-width:760px; margin-inline:auto; text-align:center; padding-block:clamp(56px,9vw,104px)}
.final p{max-width:520px; margin-inline:auto}

/* ---------- faq ---------- */
.sec--faq{max-width:760px}
.faq{border-bottom:1px solid rgba(255,255,255,.08)}
.faq summary{cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-weight:700; font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--p-300); font-size:1.5rem; font-weight:400; line-height:1; transition:transform .25s var(--ease)}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0 0 20px; font-size:.95rem}

/* ---------- footer ---------- */
.foot{padding-block:44px 118px; border-top:1px solid rgba(255,255,255,.07); text-align:center}
.foot p{margin:14px 0 0; font-size:.84rem}
.foot__legal{font-size:.78rem; color:var(--txt-2); max-width:520px; margin-inline:auto}

/* ---------- sticky mobile ---------- */
.sticky{position:fixed; left:14px; right:14px; bottom:14px; z-index:30;
  display:flex; align-items:center; justify-content:center; min-height:54px; padding:15px 22px;
  border-radius:100px; text-decoration:none; color:#fff; font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--p-400),var(--p-500));
  box-shadow:0 12px 34px -8px rgba(124,58,237,.95), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0; transform:translateY(120%); transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sticky.on{opacity:1; transform:translateY(0)}

/* ---------- selo de som ---------- */
.som{position:absolute; inset:0; z-index:2; display:flex; align-items:flex-start; justify-content:center;
  padding:16px 0 0; border:0; width:100%; cursor:pointer; font-family:inherit;
  background:linear-gradient(to bottom,rgba(8,6,14,.7),transparent 38%)}
.som__pill{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:100px;
  background:rgba(12,8,24,.9); border:1px solid rgba(168,85,247,.55); color:var(--txt);
  font-size:.92rem; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.9), 0 0 26px -6px rgba(124,58,237,.8);
  animation:pulso 2.4s var(--ease) infinite}
.som__ico{width:19px; height:19px; fill:currentColor; flex:none}
@keyframes pulso{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- modal de saida ---------- */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.modal__bg{position:absolute; inset:0; background:rgba(4,2,10,.82); backdrop-filter:blur(6px);
  animation:fade .25s var(--ease)}
.modal__box{position:relative; width:100%; max-width:420px; padding:34px 24px 26px; text-align:center;
  border-radius:24px; border:1px solid rgba(168,85,247,.4);
  background:linear-gradient(170deg,#1A1130,#0C0818);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9), 0 0 70px -20px rgba(124,58,237,.7);
  animation:pop .35s var(--ease)}
.modal__x{position:absolute; top:10px; right:12px; width:40px; height:40px; border:0; cursor:pointer;
  background:none; color:var(--txt-2); font-size:1.8rem; line-height:1; border-radius:50%}
.modal__x:hover{color:var(--txt)}
.modal__tag{display:inline-block; margin-bottom:12px; padding:6px 14px; border-radius:100px;
  background:rgba(124,58,237,.18); border:1px solid var(--line);
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--p-200)}
.modal__titulo{font-size:clamp(1.35rem,5.6vw,1.65rem); margin-bottom:12px}
.modal__txt{font-size:.93rem; margin-bottom:22px}
.modal .btn{width:100%}
.modal__nao{display:block; width:100%; margin-top:14px; padding:10px; border:0; background:none;
  color:var(--txt-2); font-size:.84rem; font-family:inherit; cursor:pointer; text-decoration:underline}
.modal__nao:hover{color:var(--txt)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0; transform:translateY(18px) scale(.96)}}

/* ---------- reveal ---------- */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
/* so esconde quando ha JS vivo para revelar de volta */
.js .reveal{opacity:0; transform:translateY(22px)}
.js .reveal.in,
.lp-fallback .reveal{opacity:1; transform:none}

/* ---------- desktop ---------- */
@media (min-width:640px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .btn--big{width:auto; min-width:320px}
  .strip{gap:14px 54px}
}
@media (min-width:860px){
  .topbar__cta{display:inline-flex}
  .sticky{display:none}
  .foot{padding-bottom:56px}
  .pains{grid-template-columns:repeat(3,1fr)}
  .pains li{flex-direction:column}
  .steps{grid-template-columns:repeat(3,1fr)}
}

/* ---------- acessibilidade ---------- */
:focus-visible{outline:3px solid var(--p-200); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .modal__bg,.modal__box,.som__pill{animation:none}
  .reveal{opacity:1; transform:none}
}