:root{
  --bg:#07070B;
  --bg-card:rgba(255,255,255,0.045);
  --ink:#F5F5F7;
  --muted:#A0A0AC;
  --muted-dim:#66666F;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.16);
  --violet:#8B3CFF;
  --violet-soft:#B892FF;
  --blue:#3D6BFF;
  --cyan:#2FB8D9;
  --green:#2FD98F;
  --glow:rgba(139,60,255,0.32);
  --body:'Inter', sans-serif;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  font-family:var(--body);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
img{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--violet-soft); outline-offset:3px;}

/* ============================================================
   LUZES DANÇANTES — 4 orbes + partículas subindo
   Fixas atrás do conteúdo, opacidade baixa,
   não interferem em leitura nem clique.
   ============================================================ */

.lights{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}

.orb1{
  width:420px; height:420px;
  background:var(--violet);
  opacity:0.38;
  top:-140px; left:-120px;
  animation:dance1 14s ease-in-out infinite alternate;
}

.orb2{
  width:360px; height:360px;
  background:var(--blue);
  opacity:0.26;
  top:30%; right:-160px;
  animation:dance2 17s ease-in-out infinite alternate;
}

.orb3{
  width:300px; height:300px;
  background:var(--cyan);
  opacity:0.16;
  top:58%; left:-140px;
  animation:dance3 20s ease-in-out infinite alternate;
}

.orb4{
  width:440px; height:440px;
  background:#6B2FE0;
  opacity:0.28;
  bottom:-200px; right:-120px;
  animation:dance4 16s ease-in-out infinite alternate;
}

@keyframes dance1{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(90px,60px) scale(1.18); }
  100%{ transform:translate(30px,120px) scale(0.95); }
}
@keyframes dance2{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-80px,-50px) scale(1.12); }
  100%{ transform:translate(-140px,40px) scale(1.05); }
}
@keyframes dance3{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(70px,-60px) scale(1.2); }
  100%{ transform:translate(120px,20px) scale(0.9); }
}
@keyframes dance4{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-60px,-80px) scale(1.1); }
  100%{ transform:translate(-110px,-30px) scale(1.15); }
}

.particle{
  position:absolute;
  bottom:-10px;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--violet-soft);
  opacity:0;
  animation:rise linear infinite;
}

.particle:nth-child(5) { left:12%; animation-duration:14s; animation-delay:0s; }
.particle:nth-child(6) { left:26%; animation-duration:18s; animation-delay:3s; width:2px; height:2px; background:var(--cyan); }
.particle:nth-child(7) { left:41%; animation-duration:12s; animation-delay:6s; }
.particle:nth-child(8) { left:55%; animation-duration:20s; animation-delay:1.5s; width:2px; height:2px; }
.particle:nth-child(9) { left:68%; animation-duration:15s; animation-delay:8s; background:var(--blue); }
.particle:nth-child(10){ left:79%; animation-duration:17s; animation-delay:4s; }
.particle:nth-child(11){ left:88%; animation-duration:13s; animation-delay:10s; width:2px; height:2px; background:var(--cyan); }
.particle:nth-child(12){ left:34%; animation-duration:19s; animation-delay:12s; }

@keyframes rise{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:0.7; }
  85%{ opacity:0.4; }
  100%{ transform:translateY(-105vh); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .orb, .particle{ animation:none; }
  .particle{ display:none; }
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  margin:0 auto;
  padding:48px 20px 64px;
}

/* Perfil */

.profile{
  text-align:center;
}

.avatar-wrap{
  width:82px;
  height:82px;
  margin:0 auto 16px;
  border-radius:22px;
  padding:2px;
  background:linear-gradient(145deg, var(--violet), var(--blue));
  box-shadow:0 0 44px var(--glow);
}

.avatar{
  width:100%;
  height:100%;
  border-radius:20px;
  object-fit:cover;
  background:#111;
}

.profile h1{
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.02em;
}

/* Sequência: atrair → qualificar → vender */

.equation{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
}

.equation .side{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--bg-card);
  color:var(--muted);
  opacity:0;
  transform:translateX(var(--from, -16px));
  animation:slideIn .6s ease forwards;
}

.equation .side.right{
  --from:16px;
  animation-delay:.25s;
}

.equation .op{
  color:var(--muted-dim);
  opacity:0;
  animation:fadeIn .4s ease forwards;
  animation-delay:.55s;
}

.equation .result{
  padding:7px 14px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, var(--violet), var(--blue));
  opacity:0;
  transform:scale(0.85);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:.75s;
}

@keyframes slideIn{ to{opacity:1; transform:translateX(0);} }
@keyframes fadeIn{ to{opacity:1;} }
@keyframes popIn{ to{opacity:1; transform:scale(1);} }

@media (prefers-reduced-motion: reduce){
  .equation .side, .equation .op, .equation .result{
    animation:none;
    opacity:1;
    transform:none;
  }
}

/* Headline */

.headline{
  margin-top:36px;
  text-align:center;
}

.headline h2{
  font-size:28px;
  line-height:1.24;
  font-weight:800;
  letter-spacing:-0.025em;
}

.headline h2 span{
  background:linear-gradient(90deg, var(--violet-soft), #6FA8FF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subheadline{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

.subheadline strong{
  color:var(--ink);
  font-weight:600;
}

/* Caminho do lead */

.sim{
  margin-top:32px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-card);
  backdrop-filter:blur(8px);
  overflow:hidden;
}

.sim-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--muted-dim);
}

.sim-head .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{ 50%{opacity:0.3;} }

@media (prefers-reduced-motion: reduce){
  .sim-head .dot{animation:none;}
}

.sim-body{
  padding:16px 18px 18px;
  font-size:13.5px;
  line-height:2.1;
  min-height:158px;
  color:var(--muted);
}

.sim-body .row{
  display:flex;
  align-items:baseline;
  gap:9px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}

.sim-body .row.show{
  opacity:1;
  transform:translateY(0);
}

.sim-body .mark{flex-shrink:0; font-weight:700;}
.sim-body .in .mark{color:var(--muted-dim);}
.sim-body .ok .mark{color:var(--green);}
.sim-body .flag .mark{color:var(--violet-soft);}
.sim-body .final{color:#fff; font-weight:600;}
.sim-body .final .mark{color:var(--green);}

/* Botão */

.whatsapp-button{
  margin-top:30px;
  width:100%;
  height:58px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--violet), #6B2FE0);
  box-shadow:0 8px 32px var(--glow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:transform .2s ease, box-shadow .2s ease;
}

.whatsapp-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px var(--glow);
}

.whatsapp-button:active{
  transform:scale(0.99);
}

.whatsapp-button svg{
  flex-shrink:0;
}

.cta-text{
  margin-top:12px;
  text-align:center;
  font-size:13px;
  color:var(--muted-dim);
  line-height:1.5;
}

/* O que eu monto pra você */

.build{
  margin-top:52px;
}

.section-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--muted-dim);
  text-align:center;
  margin-bottom:16px;
}

.build-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-card);
  backdrop-filter:blur(8px);
  padding:18px;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}

.build-card.in-view{
  opacity:1;
  transform:translateY(0);
}

.build-card .bc-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.bc-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(139,60,255,0.25), rgba(61,107,255,0.25));
  border:1px solid var(--line-strong);
  flex-shrink:0;
}

.bc-icon svg{
  width:15px;
  height:15px;
  stroke:var(--violet-soft);
}

.build-card strong{
  font-size:15px;
  font-weight:600;
}

.build-card p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.55;
}

/* Serviços secundários */

.extras{
  margin-top:44px;
  text-align:center;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.chip{
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  border:1px solid var(--line);
  background:var(--bg-card);
  border-radius:999px;
  padding:7px 14px;
}

/* Para quem é */

.fit{
  margin-top:48px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-card);
  backdrop-filter:blur(8px);
  padding:20px 18px;
}

.fit p{
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

.fit p strong{
  color:var(--ink);
  font-weight:600;
}

.fit .no{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line-strong);
}

/* Footer */

.footer{
  margin-top:44px;
  text-align:center;
}

.footer > p{
  font-size:14px;
  color:var(--muted);
  margin-bottom:16px;
}

.handle{
  margin-top:22px;
  font-size:12px;
  font-weight:500;
  color:var(--muted-dim);
}

@media(max-width:768px){

  .container{
    padding:40px 18px 56px;
  }

  .headline h2{
    font-size:24px;
  }

  .equation{
    font-size:12px;
  }

  .equation .side,
  .equation .result{
    padding:6px 11px;
  }

}