*{box-sizing:border-box}
:root{
  --bg:#050208;
  --violet:#9a31ff;
  --violet-2:#c85cff;
  --text:#fff;
  --muted:#c8c3cf;
  --border:rgba(180,84,255,.38);
}
html,body{margin:0;min-height:100%;background:#040207;color:var(--text);font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
.page-shell{
  min-height:100svh;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(3,1,7,.97) 0%,rgba(4,1,8,.98) 38%,rgba(6,2,10,.97) 100%),
    url("assets/aura-background.jpg") center top/cover fixed no-repeat;
}
.page-shell::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 50% 12%,rgba(164,52,255,.18),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28));
}
.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.35}
.ambient-1{width:280px;height:280px;background:#7117ff;left:-150px;top:23%}
.ambient-2{width:260px;height:260px;background:#a625ff;right:-160px;top:58%}

.hero{
  width:min(100%,760px);
  min-height:100svh;
  margin:0 auto;
  padding:clamp(28px,5vw,58px) 18px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.brand-logo{
  width:min(70vw,420px);
  max-height:none;
  object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(166,61,255,.22));
  margin:clamp(30px,7svh,70px) auto clamp(14px,3svh,30px);
}
.copy{max-width:650px}
.copy h1{
  margin:4px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,1vw,10px);
  white-space:nowrap;
  font-size:clamp(2rem,6vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:800;
}
.hand-cue{
  display:inline-block;
  flex:none;
  font-size:.82em;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(174,79,255,.28));
  animation:hand-point 2.4s ease-in-out infinite;
}
.copy p{
  margin:14px auto 0;
  max-width:620px;
  color:var(--muted);
  font-size:clamp(1rem,3.8vw,1.38rem);
  line-height:1.48;
}
.benefits{
  width:100%;
  margin:30px auto 28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.benefit{
  min-height:210px;
  padding:22px 13px 18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(24,9,40,.54),rgba(10,6,18,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 45px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}
.icon-wrap{
  width:60px;height:60px;border-radius:18px;margin:0 auto 17px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(86,31,132,.36),rgba(32,13,55,.42));
  border:1px solid rgba(191,88,255,.26);
  box-shadow:0 0 24px rgba(160,43,255,.16);
}
.icon-wrap svg{width:35px;height:35px;fill:none;stroke:#c966ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #9f32ff)}
.benefit h2{font-size:.9rem;line-height:1.35;text-transform:uppercase;margin:0 0 10px;font-weight:800}
.benefit p{font-size:.84rem;line-height:1.45;color:#c4becb;margin:0}
.cta{
  width:min(100%,650px);
  min-height:82px;
  border-radius:999px;
  padding:0 27px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  text-decoration:none;color:white;
  background:linear-gradient(90deg,#a21cff 0%,#7a18e5 46%,#b32cf0 100%);
  border:2px solid rgba(235,179,255,.92);
  box-shadow:0 0 18px rgba(175,45,255,.5),0 0 48px rgba(140,31,255,.22),inset 0 1px 16px rgba(255,255,255,.14);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(1rem,4vw,1.45rem);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
  animation:button-glow 3.6s ease-in-out infinite;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 24px rgba(190,57,255,.72),0 0 58px rgba(140,31,255,.31)}
.cta:active{transform:translateY(0) scale(.99)}
.whatsapp{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.arrow{font-size:1.7em;font-weight:300;margin-left:2px}
.footer-mark{margin-top:auto;padding-top:48px;text-transform:uppercase;letter-spacing:.32em;color:#d0c4d8;font-size:.78rem;line-height:1.7}
.footer-mark span{display:block;width:44px;height:1px;background:#ddd0e8;margin:0 auto 18px;opacity:.7}
.footer-mark strong{font-weight:500}

@media (max-width:620px){
  .page-shell{background-attachment:scroll;background-position:center top}
  .hero{padding:clamp(10px,2.5svh,26px) 15px clamp(10px,2.5svh,28px)}
  .brand-logo{width:min(78vw,320px);margin-top:clamp(22px,7svh,70px);margin-bottom:clamp(14px,3svh,28px)}
  .copy h1{font-size:clamp(1.45rem,min(8.5vw,5.6svh),3.15rem)}
  .copy p{margin-top:clamp(8px,1.8svh,14px)}
  .copy p{font-size:clamp(.78rem,3.5vw,1rem);line-height:1.35;max-width:92%}
  .benefits{gap:clamp(5px,1.5vw,9px);margin:clamp(9px,2svh,25px) auto clamp(10px,2svh,28px)}
  .benefit{min-height:clamp(98px,18svh,176px);padding:clamp(7px,1.3svh,16px) 5px;border-radius:18px}
  .icon-wrap{width:clamp(30px,6.5svh,50px);height:clamp(30px,6.5svh,50px);border-radius:15px;margin-bottom:clamp(6px,1.5svh,13px)}
  .icon-wrap svg{width:60%;height:60%}
  .benefit h2{font-size:clamp(.62rem,2.2vw,.72rem);line-height:1.2;margin-bottom:5px}
  .benefit p{font-size:clamp(.59rem,1.9vw,.68rem);line-height:1.25}
  .cta{min-height:clamp(48px,8svh,72px);padding:0 14px;gap:10px;font-size:clamp(.78rem,3.2vw,.98rem);margin-top:clamp(12px,2.5svh,24px)}
  .whatsapp{width:clamp(22px,5svh,29px);height:clamp(22px,5svh,29px)}
  .footer-mark{padding-top:clamp(8px,2svh,44px);font-size:.6rem}
  .footer-mark span{margin-bottom:8px}
}
@media (max-width:380px){
  .hero{padding-left:11px;padding-right:11px}
  .benefits{gap:5px}
  .benefit{padding-left:4px;padding-right:4px}
  .cta{letter-spacing:.04em}
}
@media (max-height:620px) and (max-width:620px){
  .brand-logo{width:min(78vw,250px);margin-top:clamp(12px,5svh,28px);margin-bottom:10px}
  .copy h1{font-size:clamp(1.3rem,7.5vw,2.4rem)}
  .copy p{margin-top:6px}
  .copy p{font-size:.74rem;line-height:1.28}
  .benefit{min-height:98px;padding-top:7px;padding-bottom:7px}
  .icon-wrap{width:32px;height:32px;margin-bottom:6px}
  .benefit h2{font-size:.61rem;margin-bottom:3px}
  .benefit p{font-size:.56rem}
  .cta{min-height:46px;margin-top:10px}
  .footer-mark{padding-top:8px;font-size:.52rem}
  .footer-mark span{margin-bottom:4px}
}
@media (max-width:340px){
  .benefits{grid-template-columns:1fr;gap:5px}
  .benefit{min-height:42px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:9px;align-content:center;padding:4px 9px;text-align:left}
  .icon-wrap{grid-row:1/3;width:30px;height:30px;margin:0}
  .benefit h2{grid-column:2;margin:0}
  .benefit p{grid-column:2;margin:0}
}
@media (min-width:900px){
  .hero{padding-top:38px}
}
@media (prefers-reduced-motion:reduce){
  .hand-cue,.cta{animation:none}
}
@keyframes hand-point{50%{transform:translateY(6px)}}
@keyframes button-glow{50%{box-shadow:0 0 24px rgba(190,57,255,.62),0 0 54px rgba(140,31,255,.3),inset 0 1px 16px rgba(255,255,255,.2)}}