:root{
  /* Brand */
  --brand-primary: #DDDC0D;
  --brand-dark:    #222322;
  --brand-gray:    #616161;
  --brand-ivory:   #F8F7F1;

  /* Dark theme */
  --bg:    var(--brand-dark);
  --txt:   var(--brand-ivory);
  --muted: rgba(248,247,241,.78);
  --card:  rgba(248,247,241,.06);
  --stroke:rgba(248,247,241,.14);
  --glass: rgba(248,247,241,.08);
  --blur:  saturate(160%) blur(14px);
  --accent:var(--brand-primary);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:22px;
}
html[data-theme="light"]{
  --bg:    var(--brand-ivory);
  --txt:   var(--brand-dark);
  --muted: var(--brand-gray);
  --card:  rgba(34,35,34,.04);
  --stroke:rgba(34,35,34,.12);
  --glass: rgba(255,255,255,.70);
  --shadow:0 12px 36px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, Noto Sans, sans-serif;
  color:var(--txt);
  background: var(--bg);
  overflow-x:hidden;
}
.container{max-width:1180px;margin:0 auto;padding:0 22px}

/* Gradiente animado ao fundo */
.bg-gradient{position:fixed;inset:-10% -10% -10% -10%;z-index:-2;filter: blur(60px);opacity:.6;background: conic-gradient(from 180deg at 50% 50%, var(--g1), var(--g2), var(--g4), var(--g2));animation: spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Partículas */
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Topbar */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.08);backdrop-filter: saturate(160%) blur(14px);border-bottom:1px solid var(--stroke)}
.topbar__wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;min-height:74px}
.brand .logo { display: none; background: transparent; box-shadow: none; }

/* quando o site estiver em dark */
html[data-theme="dark"] .brand .logo--dark { display: inline-block; }
html[data-theme="dark"] .brand .logo--light { display: none; }

/* quando o site estiver em light */
html[data-theme="light"] .brand .logo--light { display: inline-block; }
html[data-theme="light"] .brand .logo--dark { display: none; }
/* Nav desktop */
.nav{display:flex;align-items:center;gap:18px;justify-content:flex-end}
.nav a[data-nav]{position:relative;padding:10px 6px;text-decoration:none;color:var(--txt);opacity:.9;font-weight:700}
.nav a[data-nav]::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--g2),var(--g4));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a[data-nav]:hover::after{transform:scaleX(1)}
.nav a[data-nav].is-active{opacity:1}
.nav a[data-nav].is-active::after{transform:scaleX(1)}

/* Divisor e ações à direita */
.divider{width:1px;height:26px;background:var(--stroke);margin:0 6px}
.actions{display:flex;align-items:center;gap:10px}
.theme{border:1px solid var(--stroke);background:var(--card);color:var(--txt);padding:10px 12px;border-radius:999px;cursor:pointer}

/* Burger / mobile */
.menu-toggle{justify-self:end;display:none;position:relative;width:42px;height:42px;border:1px solid var(--stroke);border-radius:10px;background:var(--card);cursor:pointer}
.menu-toggle .bar{position:absolute;left:10px;right:10px;height:2px;background:var(--txt);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
.menu-toggle .bar:nth-child(1){top:12px}
.menu-toggle .bar:nth-child(2){top:20px}
.menu-toggle .bar:nth-child(3){top:28px}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile menu */
@media (max-width: 920px){
  .menu-toggle{display:inline-block}
  .nav{position:absolute;top:74px;right:22px;left:22px;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:12px;background:var(--glass);backdrop-filter: var(--blur);border:1px solid var(--stroke);border-radius:16px;box-shadow: var(--shadow)}
  .nav.open{display:flex}
  .nav a[data-nav]{padding:12px;border-radius:10px}
  .nav a[data-nav]::after{display:none}
  .divider{display:none}
  .actions{justify-content:space-between;padding-top:8px}
}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;padding:12px 18px;font-weight:800;text-decoration:none;border:1px solid var(--stroke);transition:.2s transform ease, .2s box-shadow ease, .2s background ease}
.btn--pill{border-radius:999px}
.btn--xl{padding:16px 22px;font-size:1.05rem}
.btn--accent{background: linear-gradient(135deg, var(--g1), var(--g2)); color:#fff; box-shadow: 0 10px 24px rgba(76, 29, 149, .35)}
.btn--primary{background: radial-gradient(120% 120% at 10% 10%, var(--g1), transparent 40%), linear-gradient(135deg, var(--g2), var(--g4)); color:#fff; box-shadow: 0 12px 28px rgba(37,99,235,.35)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--glass{background: var(--glass); color:var(--txt); cursor: pointer;}
.btn--ghost{background: transparent; color: var(--txt)}
.btn--neon{background: linear-gradient(135deg, var(--g3), var(--g4)); color:#fff; box-shadow:0 0 24px rgba(6,182,212,.45)}

/* Hero */
.hero{position:relative;padding:120px 0 80px}
.hero__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:center}
.chip{display:inline-block;background:var(--glass);border:1px solid var(--stroke);padding:8px 12px;border-radius:999px;font-weight:800;color:var(--muted);margin-bottom:12px}
.hero h1{font-family:Orbitron, system-ui, sans-serif; font-size:clamp(32px,6vw,56px);line-height:1.04;margin:0 0 10px}
.glow{text-shadow:0 0 22px rgba(71,177,255,.55)}
.grad{background: linear-gradient(135deg, var(--g4), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent}
.underline{border-bottom: 8px solid rgba(71,177,255,.28); border-radius:8px}
.neon{text-shadow: 0 0 24px rgba(158,119,255,.8)}
.hero p{font-size:1.1rem;color:var(--muted);max-width:56ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero__badges{display:flex;gap:12px;list-style:none;padding:0;margin:18px 0 0;flex-wrap:wrap}
.hero__badges li{background:var(--glass);border:1px solid var(--stroke);border-radius:999px;padding:8px 12px;color:var(--txt)}

/* Tilt devices */
.tilt{perspective:1000px;transform-style:preserve-3d}
.device{position:relative;background:var(--card);border:1px solid var(--stroke);border-radius:20px;box-shadow:var(--shadow);transition: transform .2s ease}
.device--laptop{width:100%;height:260px;transform:rotateY(-10deg) rotateX(6deg) translateZ(0)}
.device--phone{position:absolute;right:-18px;bottom:-26px;width:160px;height:280px;border-radius:26px;transform:rotateY(14deg) rotateX(10deg) translateZ(40px)}
.device .screen{position:absolute;inset:12px;border-radius:16px;background:linear-gradient(135deg, rgba(37,99,235,.35), rgba(244,114,182,.35)), #0c0c14;overflow:hidden}
.bars{display:grid;gap:8px;padding:16px}
.bars span{height:10px;background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04));border-radius:8px}
.dots{display:flex;gap:6px;justify-content:center;align-items:center;height:100%}
.dots span{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg, var(--g1), var(--g4));box-shadow:0 0 20px rgba(244,114,182,.6)}

/* Sections */
.section{padding:84px 0}
.section__header{max-width:680px;margin:0 auto 28px;text-align:center}
.section__header h2{margin:0 0 8px;font-size:clamp(24px,4vw,34px)}
.section__header p{margin:0;color:var(--muted)}
.section--glass{background:transparent}
/* .section--glass .container{background:var(--glass);backdrop-filter: var(--blur);border:1px solid var(--stroke);border-radius:28px;padding:28px;box-shadow: var(--shadow)} */

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.feature{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:18px;list-style: none;}
.feature .ico{font-size:26px}
.feature h3{margin:8px 0 6px}
.feature p{margin:0;color:var(--muted)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;transition: transform .25s ease, box-shadow .25s ease}
.card--hover:hover{transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.25)}
.card__media{
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  background: none;
}

.card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card h3{margin:6px 0 0;font-size:1rem}
.card p{margin:0 0 8px;color:var(--muted)}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{position:relative;background:var(--card);border:1px solid var(--stroke);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.price .value{margin:4px 0 12px}
.price .value strong{font-size:1.6rem}
.price .value span{opacity:.7;margin-left:6px}
.price ul{list-style:none;padding:0;margin:0 0 14px;color:var(--muted)}
.price--featured{transform:translateY(-6px);border-color:rgba(158,119,255,.6);box-shadow:0 18px 48px rgba(158,119,255,.22)}
.ribbon{position:absolute;top:14px;right:9px;background:linear-gradient(135deg, var(--g1), var(--g2));color:#fff;padding:6px 10px;border-radius:999px;font-size:.8rem;box-shadow:var(--shadow)}

/* Marquee testimonials */
.marquee{overflow:hidden;border:1px solid var(--stroke);border-radius:20px;background:var(--card);backdrop-filter: var(--blur)}
.marquee .track{display:flex;gap:40px;padding:16px;animation: scroll 24s linear infinite;width:fit-content}
.marquee blockquote{white-space:nowrap;opacity:.9}
.marquee:hover .track {
  animation-play-state: paused;
}
@keyframes scroll {0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* CTA */
.section--cta .cta{display:grid;gap:10px;justify-items:center;text-align:center;background:linear-gradient(135deg, rgba(124,58,237,.2), rgba(37,99,235,.2)); border:1px solid var(--stroke); border-radius:28px; padding:26px; box-shadow: var(--shadow)}
.section--cta h2{margin:0}
.section--cta p{margin:0 0 6px;color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--stroke);padding:36px 0;background: transparent}
.footer .container{display:grid;gap:14px;justify-items:center;text-align:center}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__links{display:flex;gap:14px;list-style:none;padding:0;margin:6px 0}
.footer__links a{text-decoration:none;color:var(--txt);opacity:.8}
.footer__links a:hover{opacity:1}
.footer__social{display:flex;gap:10px}
.footer__copy{color:var(--muted)}

.footer__social .social i {
    color: var(--brand-primary);
    font-size: 1.5rem;
    transition: color 0.2s ease;
}
.footer__social .social:hover i {
    color: var(--txt); 
}


/* Modal */
.modal{border:0;border-radius:22px;max-width:760px;width:96%;box-shadow: var(--shadow);padding:0;background:var(--glass);backdrop-filter: var(--blur);color:var(--txt)}
.modal__box{padding:18px}
.modal__preview{margin:10px 0;height:280px;border-radius:18px;border:1px dashed var(--stroke);display:grid;place-items:center;color:var(--muted)}
.modal__actions{display:flex;justify-content:flex-end;gap:10px}

/* Responsivo */
@media (max-width: 1100px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 920px){
  .hero__wrap{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .nav{display:none;position:absolute;top:70px;right:22px;background:var(--glass);border:1px solid var(--stroke);border-radius:16px;flex-direction:column;padding:12px;box-shadow:var(--shadow)}
  .menu-toggle{display:block}
  .nav.open{display:flex}
}
@media (max-width: 460px){ .cards{grid-template-columns:1fr} }

/* Logo */
.logo{
  background: conic-gradient(from 210deg, var(--brand-primary) 0 60%, var(--brand-gray) 60% 100%);
  box-shadow: 0 0 18px rgba(221,220,13,.35);
}

/* Links do menu – sublinhado em brand */
.nav a[data-nav]::after{
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-gray));
}

/* Botões principais em brand (texto escuro pra contraste) */
.btn--accent,
.btn--primary{
  background: var(--brand-primary);
  color: var(--brand-dark);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(221,220,13,.25);
}
.btn--primary:hover{ box-shadow: 0 10px 26px rgba(221,220,13,.35); transform: translateY(-1px); }

/* Destaques do título no Hero */
.grad{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-gray));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.underline{ border-bottom: 8px solid rgba(221,220,13,.35); border-radius:8px; }
.neon{ text-shadow: 0 0 18px rgba(221,220,13,.45); }

/* Pontos pulsando no mock do telefone */
.dots span{
  background: var(--brand-primary);
  box-shadow: 0 0 14px rgba(221,220,13,.6);
}

/* Thumb dos cards */
.card__media{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-gray));
  color: var(--brand-dark);
}

/* Plano em destaque + fita */
.price--featured{
  border-color: rgba(221,220,13,.6);
  box-shadow: 0 18px 48px rgba(221,220,13,.18);
}
.ribbon{
  background: var(--brand-primary);
  color: var(--brand-dark);
}

/* CTA final com véu suave na cor da marca */
.section--cta .cta{
  background: linear-gradient(135deg, rgba(221,220,13,.12), rgba(97,97,97,.16));
}


/* LISTA DOS PLANOS */
.price ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.price ul li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  line-height: 1.5;
  opacity: 1;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}

/* “v” do check (feito com bordas) */
.price ul li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 6px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg) scale(.85);
  transition: transform .45s ease .05s, opacity .45s ease .05s;
  opacity: .95;
}

/* estado revelado (quando entrar na tela via JS) */
.price ul li.in {
  opacity: 1;
  transform: none;
}
.price ul li.in::before { transform: scale(1); }
.price ul li.in::after  { transform: rotate(45deg) scale(1); }

/* acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .price ul li,
  .price ul li::before,
  .price ul li::after { transition: none; }
  .price ul li { opacity: 1; transform: none; }
}

.features-value {
  color: #DDDC0D;
  font-size: 12px;
  margin: 1.5rem 0;
}

/* Testimonials (texto completo, sem corte) */
.testimonials{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}


@media (max-width:1100px){ .testimonials{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:920px){  .testimonials{ grid-template-columns: 1fr; } }

.testimonial{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.testimonial figure{ margin:0; display:grid; gap:12px; }
.testimonial__quote{
  font-size:1rem;
  line-height:1.7;
  color:var(--txt);
  opacity:.95;
  text-wrap:pretty;
  hyphens:auto;
  max-width: 68ch;
}
.testimonial__quote p{ margin:0 0 10px; }
.testimonial__quote p:last-child{ margin-bottom:0; }
.testimonial__quote::before{
  content:"“";
  font-size:2rem;
  line-height:0;
  vertical-align:-0.55em;
  margin-right:6px;
  opacity:.35;
}
.testimonial__quote::after{ content:"”"; opacity:.35; }

.testimonial__meta{
  display:flex; align-items:center; gap:10px; color:var(--muted);margin-left: 2rem;
}
.testimonial__meta strong{ color:var(--txt); font-weight:800; display:block; }

.avatar{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:800;font-size:.9rem;
  color:var(--brand-dark);
  background: var(--brand-primary);
  box-shadow: 0 0 10px rgba(221,220,13,.25);
}