/* style.css */

:root{
  --bg:#05010d;
  --bg2:#12061f;
  --purple:#a855f7;
  --blue:#38bdf8;
  --gold:#facc15;
  --white:#ffffff;
  --glass:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.12);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(circle at top,var(--bg2),var(--bg));
  color:var(--white);
  overflow-x:hidden;
  position:relative;
}

/* FUNDO */

.stars,
.stars2{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
}

.stars{
  background:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 70% 20%,#fff,transparent),
    radial-gradient(1px 1px at 40% 70%,#fff,transparent),
    radial-gradient(2px 2px at 90% 60%,#fff,transparent),
    radial-gradient(1px 1px at 10% 90%,#fff,transparent);
  animation:moveStars 18s linear infinite;
}

.stars2{
  background:
    radial-gradient(2px 2px at 15% 40%,#a855f7,transparent),
    radial-gradient(2px 2px at 80% 80%,#38bdf8,transparent),
    radial-gradient(2px 2px at 50% 10%,#facc15,transparent);
  animation:moveStars 28s linear infinite reverse;
}

.nebula{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(168,85,247,.15),transparent 30%),
    radial-gradient(circle at 80% 40%,rgba(56,189,248,.12),transparent 25%),
    radial-gradient(circle at 50% 80%,rgba(250,204,21,.08),transparent 25%);
  z-index:-2;
}

/* BASE */

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

.section{
  padding:90px 0;
}

.center{
  text-align:center;
  margin-bottom:45px;
  font-family:'Cinzel',serif;
  font-size:2rem;
}

/* HEADER */

.topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:linear-gradient(90deg,#7e22ce,#2563eb);
  color:#fff;
  text-align:center;
  font-size:.85rem;
  padding:7px 10px;
  z-index:1000;
  letter-spacing:.5px;
  transition:transform .35s ease;
}

.header{
  position:fixed;
  top:34px;
  left:0;
  width:100%;
  z-index:999;
  backdrop-filter:blur(10px);
  background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
}

.nav{
  height:75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  color:var(--gold);
  text-decoration:none;
  font-weight:700;
  font-size:1.2rem;
}

.menu{
  display:flex;
  gap:28px;
}

.menu a{
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.menu a:hover{
  color:var(--gold);
}

.mobile-btn{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}

/* HERO */

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:160px;
  position:relative;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:40px;
  align-items:center;
}

.badge{
  display:inline-block;
  padding:10px 18px;
  border:1px solid rgba(250,204,21,.35);
  border-radius:40px;
  color:var(--gold);
  margin-bottom:20px;
  box-shadow:0 0 18px rgba(250,204,21,.18);
}

.hero h1{
  font-size:3.4rem;
  line-height:1.1;
  margin-bottom:20px;
  font-family:'Cinzel',serif;
  max-width:780px;
}

.hero h1 span{
  color:var(--purple);
  text-shadow:0 0 18px rgba(168,85,247,.7);
}

.hero p{
  color:#ddd;
  max-width:620px;
  margin-bottom:28px;
}

.hero-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

/* BOTÕES */

.btn{
  padding:15px 28px;
  border-radius:50px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.primary{
  background:linear-gradient(90deg,var(--purple),var(--blue));
  color:#fff;
  box-shadow:0 0 22px rgba(168,85,247,.45);
}

.primary:hover{
  transform:translateY(-3px) scale(1.02);
}

.secondary{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.secondary:hover{
  background:rgba(255,255,255,.08);
}

/* GLASS */

.glass{
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  border-radius:22px;
}

.hero-card{
  padding:35px;
  text-align:center;
  position:relative;
}

.orb{
  width:130px;
  height:130px;
  border-radius:50%;
  margin:auto auto 20px;
  background:radial-gradient(circle,var(--purple),transparent 70%);
  box-shadow:
    0 0 30px rgba(168,85,247,.8),
    0 0 60px rgba(56,189,248,.4);
  animation:float 4s ease-in-out infinite;
}

/* SECTIONS */

.section-box{
  padding:40px;
  text-align:center;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.card{
  padding:30px;
  transition:.35s;
}

.card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 25px rgba(168,85,247,.18);
}

.card p{
  font-size:1rem;
  line-height:1.7;
}

.cta{
  text-align:center;
  padding:55px 25px;
}

.cta h2{
  margin-bottom:25px;
  font-family:'Cinzel',serif;
}

.cta .btn{
  min-width:220px;
}

/* FOOTER */

.footer{
  text-align:center;
  padding:30px;
  color:#bbb;
  text-decoration: none;
}
footer a {
  text-decoration: none;
}

footer .dev {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

footer .dev a {
  color: var(--primary);
  text-decoration: none;
}

footer .dev a:hover {
  text-decoration: underline;
}

/* HERO V4 */

.social-proof{
  margin:20px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#fff;
}

.social-proof small{
  color:#d6d6d6;
  font-size:.95rem;
}

.urgency-box{
  margin:18px 0 28px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(250,204,21,.08);
  border:1px solid rgba(250,204,21,.25);
  color:#fff;
  box-shadow:0 0 18px rgba(250,204,21,.12);
}

.hero-list{
  list-style:none;
  text-align:left;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hero-list li{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

/* brilho no hero */

.hero::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  right:8%;
  top:20%;
  background:radial-gradient(circle,rgba(168,85,247,.18),transparent 60%);
  filter:blur(25px);
  z-index:-1;
}

/* animação leve urgência */

.urgency-box strong{
  color:#facc15;
  animation:blinkSlot 1.6s infinite;
}

/* FLOATS */

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:60px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  box-shadow:
    0 0 18px rgba(34,197,94,.45),
    0 0 35px rgba(34,197,94,.25);
  animation:pulseWa 2s infinite;
  transition:.3s;
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.03);
}

.wa-icon{
  font-size:1.2rem;
}

.wa-text{
  font-size:.95rem;
  font-weight:600;
}

.calendar-float{
  position:fixed;
  right:20px;
  bottom:92px;
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:1.3rem;
  color:#fff;
  z-index:998;
  background:linear-gradient(135deg,#a855f7,#3b82f6);
  box-shadow:0 0 20px rgba(168,85,247,.35);
  transition:.3s;
}

.calendar-float:hover{
  transform:scale(1.08);
}

/* LOADER */

.loader{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center,#12061f,#05010d);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  z-index:99999;
  transition:opacity .7s ease, visibility .7s ease;
}

.loader.hide{
  opacity:0;
  visibility:hidden;
}

.loader-symbol{
  width:88px;
  height:88px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.08);
  border-top:3px solid #a855f7;
  border-right:3px solid #38bdf8;
  box-shadow:
    0 0 20px rgba(168,85,247,.45),
    0 0 35px rgba(56,189,248,.25);
  animation:spinMystic 1.2s linear infinite;
}

.loader p{
  color:#fff;
  letter-spacing:.8px;
  font-size:1rem;
}

/* CONTADOR ONLINE */

.live-users{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:998;
  padding:12px 16px;
  border-radius:40px;
  font-size:.92rem;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  box-shadow:0 0 18px rgba(168,85,247,.18);
}

/* POPUP PREMIUM */

.exit-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:.35s;
}

.exit-popup.show{
  opacity:1;
  visibility:visible;
}

.popup-box{
  width:100%;
  max-width:470px;
  padding:38px 30px;
  border-radius:26px;
  text-align:center;
  position:relative;
  background:rgba(18,6,31,.82);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  box-shadow:
    0 0 40px rgba(168,85,247,.18),
    0 0 90px rgba(56,189,248,.08);
}

.popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:1rem;
}

.popup-badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:30px;
  font-size:.85rem;
  margin-bottom:18px;
  color:#facc15;
  background:rgba(250,204,21,.08);
  border:1px solid rgba(250,204,21,.18);
}

.popup-box h3{
  font-size:2rem;
  line-height:1.15;
  margin-bottom:16px;
  font-family:'Cinzel',serif;
}

.popup-box p{
  color:#ddd;
  font-size:1rem;
  line-height:1.6;
  margin-bottom:26px;
}

.popup-btn{
  display:block;
  width:100%;
  text-align:center;
  padding:18px;
  font-size:1.05rem;
  margin-bottom:18px;
}

.popup-box small{
  color:#aaa;
  font-size:.82rem;
  letter-spacing:.4px;
}

/* FAQ */

.faq-wrap{
  max-width:850px;
  margin:auto;
  display:grid;
  gap:14px;
}

.faq-item{
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  color:#fff;
  padding:20px;
  text-align:left;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  color:#d7d7d7;
  padding:0 20px;
}

.faq-item.active .faq-answer{
  max-height:220px;
  padding:0 20px 20px;
}

/* LUA */

.moon-shadow{
  position:fixed;
  top:90px;
  right:-70px;
  width:420px;
  height:420px;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
  display:block;
  background:
    radial-gradient(
      circle at 35% 35%,
      rgba(255,255,255,.20),
      rgba(255,255,255,.08) 34%,
      rgba(255,255,255,.02) 56%,
      transparent 72%
    );
  box-shadow:
    0 0 40px rgba(255,255,255,.06),
    0 0 90px rgba(168,85,247,.07);
  filter:none;
  opacity:.78;
}

.moon-shadow::before{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  top:110px;
  left:120px;
  border-radius:50%;
  background:rgba(0,0,0,.08);
}

.moon-shadow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:0;
  transition:opacity .9s ease, filter .9s ease;
  background:radial-gradient(
    circle at 40% 40%,
    rgba(255,255,255,.10),
    rgba(168,85,247,.10) 35%,
    rgba(56,189,248,.06) 55%,
    transparent 72%
  );
  filter:blur(18px);
  pointer-events:none;
}

.moon-shadow.active::after{
  opacity:1;
}

.moon-message{
  position:absolute;
  top:50%;
  left:38%;
  transform:translate(-50%, -50%);
  width:220px;
  text-align:center;
  font-size:.95rem;
  line-height:1.45;
  font-weight:500;
  letter-spacing:.3px;
  color:#eef6ff;
  opacity:0;
  visibility:hidden;
  text-shadow:
    0 0 6px rgba(255,255,255,.35),
    0 0 14px rgba(255,255,255,.18),
    0 0 20px rgba(168,85,247,.35),
    0 0 34px rgba(56,189,248,.22);
  filter:blur(10px);
  transition:
    opacity .9s ease,
    filter .9s ease,
    transform .9s ease;
  z-index:3;
  pointer-events:none;
}

.moon-message.show{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:translate(-50%, -50%) scale(1.03);
}

.moon-message.typing::after{
  content:"|";
  margin-left:3px;
  animation:blinkCursor .8s infinite;
}

/* METEORO */

.meteor{
  position:fixed;
  top:0;
  left:-120px;
  width:14px;
  height:14px;
  border-radius:50%;
  z-index:6;
  pointer-events:none;
  background:#fff;
  box-shadow:
    0 0 10px #fff,
    0 0 25px rgba(168,85,247,.8),
    0 0 45px rgba(56,189,248,.35);
  animation:
    meteorFly 1.15s linear forwards,
    meteorFade 1.8s ease forwards;
}

.meteor::before{
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:220px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.05),
    rgba(168,85,247,.18),
    rgba(255,255,255,.75)
  );
  filter:blur(3px);
}

.meteor::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  filter:blur(8px);
}

/* ANIMAÇÕES */

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

@keyframes moveStars{
  from{transform:translateY(0);}
  to{transform:translateY(-120px);}
}

@keyframes blinkSlot{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}

@keyframes pulseWa{
  0%,100%{
    box-shadow:
      0 0 18px rgba(34,197,94,.45),
      0 0 35px rgba(34,197,94,.25);
  }

  50%{
    box-shadow:
      0 0 25px rgba(34,197,94,.7),
      0 0 50px rgba(34,197,94,.45);
  }
}

@keyframes spinMystic{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes blinkCursor{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

@keyframes meteorFly{
  from{
    transform:translate(0,0) rotate(var(--ang));
  }
  to{
    transform:translate(var(--mx), var(--my)) rotate(var(--ang));
  }
}

@keyframes meteorFade{
  0%{opacity:1;}
  65%{opacity:1;}
  100%{opacity:0;}
}

/* =========================
   BREAKPOINTS
========================= */

/* NOTEBOOKS MENORES / TABLETS GRANDES */

@media (max-width:1100px){
  .container{
    width:94%;
  }

  .cards{
    grid-template-columns:1fr;
    gap:24px;
  }

  .card{
    padding:26px;
  }

  .cta{
    padding:55px 24px 130px;
  }

  .cta h2{
    font-size:2rem;
  }

  .footer{
    padding:24px 16px 110px;
  }

  .live-users{
    left:18px;
    bottom:18px;
  }

  .whatsapp-float{
    bottom:18px;
    right:18px;
  }

  .calendar-float{
    bottom:92px;
    right:22px;
  }

  .moon-shadow{
    width:300px;
    height:300px;
    top:auto;
    bottom:170px;
    right:-70px;
    opacity:.26;
  }

  .moon-message{
    width:150px;
    left:39%;
    font-size:.76rem;
    line-height:1.25;
  }
}

/* TABLETS E LARGURAS INTERMEDIÁRIAS */

@media (max-width:950px){
  .hero-grid,
  .cards{
    grid-template-columns:1fr;
  }

  .hero{
    padding-top:150px;
    min-height:auto;
  }

  .hero h1{
    font-size:2.4rem;
  }

  .menu{
    position:absolute;
    top:75px;
    right:-100%;
    width:240px;
    background:#10061d;
    flex-direction:column;
    padding:25px;
    border-left:1px solid var(--line);
    transition:.4s;
  }

  .menu.active{
    right:0;
  }

  .mobile-btn{
    display:block;
  }

  .social-proof{
    text-align:left;
  }

  .hero-list li{
    font-size:.95rem;
  }

  .moon-shadow{
    width:240px;
    height:240px;
    top:auto;
    bottom:170px;
    right:-60px;
    opacity:.18;
  }

  .moon-message{
    width:125px;
    left:40%;
    font-size:.68rem;
    line-height:1.22;
  }

  .cta{
    padding-bottom:150px;
  }

  .footer{
    padding-bottom:120px;
  }
}

/* FOLD, DUO, TABLETS MENORES */

@media (max-width:860px){
  .hero{
    padding-top:150px;
    min-height:auto;
  }

  .hero-grid,
  .cards{
    grid-template-columns:1fr;
    gap:28px;
  }

  .hero h1{
    font-size:2.5rem;
    line-height:1.08;
    max-width:100%;
  }

  .hero p{
    max-width:100%;
    font-size:1rem;
    line-height:1.6;
  }

  .hero-buttons{
    flex-wrap:wrap;
    gap:12px;
  }

  .hero-buttons .btn{
    min-width:190px;
    text-align:center;
  }

  .hero-card{
    padding:28px;
  }

  .section{
    padding:70px 0;
  }

  .section-box{
    padding:30px 24px;
  }

  .card{
    padding:24px;
  }

  .cta{
    padding:42px 20px 120px;
  }

  .footer{
    padding:24px 16px 110px;
  }

  .moon-shadow{
    width:220px;
    height:220px;
    top:auto;
    bottom:170px;
    right:-55px;
    opacity:.16;
  }

  .moon-message{
    width:115px;
    left:39%;
    font-size:.62rem;
    line-height:1.15;
  }

  .live-users{
    left:14px;
    right:14px;
    bottom:14px;
    padding:10px 14px;
    font-size:.83rem;
    text-align:center;
    border-radius:14px;
    z-index:996;
  }

  .whatsapp-float{
    right:14px;
    bottom:74px;
    z-index:999;
  }

  .calendar-float{
    right:18px;
    bottom:142px;
    z-index:998;
  }
}

/* MOBILE / SMALL TABLET */

@media (max-width:768px){
  .hero h1{
    font-size:2.1rem;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-buttons .btn{
    width:100%;
    min-width:0;
  }

  .whatsapp-float{
    width:auto;
    padding:16px 18px;
    border-radius:50px;
  }

  .calendar-float{
    width:52px;
    height:52px;
  }

  .live-users{
    left:10px;
    right:10px;
    text-align:center;
  }

  .moon-shadow{
    width:190px;
    height:190px;
    top:auto;
    bottom:165px;
    right:-48px;
    opacity:.14;
  }

  .moon-message{
    width:100px;
    left:39%;
    font-size:.56rem;
    line-height:1.1;
  }
}

/* MOBILE PEQUENO */

@media (max-width:600px){
  .hero{
    padding-top:140px;
  }

  .hero h1{
    font-size:2rem;
    line-height:1.08;
  }

  .hero p{
    font-size:1rem;
    line-height:1.55;
  }

  .badge{
    font-size:.9rem;
    padding:9px 14px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-buttons .btn{
    width:100%;
    min-width:0;
    text-align:center;
  }

  .wa-text{
    display:none;
  }

  .whatsapp-float{
    width:58px;
    height:58px;
    right:14px;
    bottom:72px;
    justify-content:center;
    padding:0;
    border-radius:50%;
    z-index:999;
  }

  .calendar-float{
    width:48px;
    height:48px;
    right:19px;
    bottom:138px;
    z-index:998;
  }

  .header{
    top:38px;
  }

  .live-users{
    bottom:10px;
    left:10px;
    right:10px;
    font-size:.82rem;
  }

  .moon-shadow{
    width:160px;
    height:160px;
    top:auto;
    bottom:160px;
    right:-42px;
    opacity:.12;
  }

  .moon-message{
    width:88px;
    left:39%;
    font-size:.52rem;
    line-height:1.08;
  }

  .popup-box{
    padding:30px 20px;
  }

  .popup-box h3{
    font-size:1.5rem;
  }

  .cta{
    padding:40px 16px 120px;
  }

  .footer{
    padding:20px 14px 110px;
    font-size:.92rem;
  }
}

/* TELAS BAIXAS / HUBS / LANDSCAPE PROBLEMÁTICO */

@media (max-height:700px){
  .topbar{
    display:none;
  }

  .header{
    top:0;
  }

  .hero{
    padding-top:95px;
  }

  .cta{
    padding:30px 18px 110px;
  }

  .cta h2{
    font-size:1.6rem;
  }

  .live-users{
    font-size:.8rem;
    padding:10px 14px;
  }

  .whatsapp-float{
    bottom:14px;
  }

  .calendar-float{
    bottom:78px;
  }

  .moon-shadow{
    width:150px;
    height:150px;
    top:auto;
    bottom:110px;
    right:-35px;
    opacity:.10;
  }

  .moon-message{
    width:82px;
    left:39%;
    font-size:.48rem;
    line-height:1.05;
  }
}