html, body {
  font-family: 'Montserrat', sans-serif;
}


:root{
  --base:#0A0E19;
  --brand:#26194E;
  --glow:#43D9E8;
}

/* Camadas de fundo */
.fx-layers{ position:fixed; inset:0; z-index:-1; overflow:hidden }
.fx-grid{
  position:absolute; inset:0; opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
#fxParticles{ position:absolute; inset:0 }
.fx-corner{ position:absolute; width:38vw; height:38vw; filter: blur(70px); opacity:.25; pointer-events:none }
.fx-corner.tl{ left:-10vw; top:-8vh; background: radial-gradient(closest-side, var(--brand), transparent 70%) }
.fx-corner.br{ right:-12vw; bottom:-12vh; background: radial-gradient(closest-side, var(--glow), transparent 70%) }

/* Auroras */
.fx-aurora{
  position:absolute; width:40vw; height:40vw; border-radius:999px;
  background: conic-gradient(from 90deg at 50% 50%, var(--brand), rgba(67,217,232,.55), var(--brand));
  mix-blend: screen; filter: blur(60px); opacity:.40;
  animation: aurora 22s ease-in-out infinite;
}
.fx-aurora.a1{ left:-8vw; top:-6vh }
.fx-aurora.a2{ right:-6vw; top:12vh; animation-direction: reverse; animation-duration: 18s }
.fx-aurora.a3{ left:22vw; bottom:-10vh; animation-duration: 26s }
@keyframes aurora{ 0%,100%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(0,-4vh,0) rotate(18deg)} }

/* Links, botões e badges */
.link{ color:rgba(230,238,247,.85); transition:color .2s }
.link:hover{ color:var(--glow) }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:14px; font-weight:700; transition:.2s; will-change: filter, transform; }
.btn-brand {
  color: #071317;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) padding-box,
    linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), white 24%)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(67,217,232,.16), 0 18px 50px rgba(38,25,78,.45);
  color: #fff;
  padding: 12px 20px; /* só pra dar um pouco de área de clique */
  border-radius: 8px;
}

/* Mobile: botão ocupa toda a largura */
@media (max-width: 768px) {
  .btn-brand {
    display: block;
    width: 100%;
  }
}

.btn-brand:hover{ filter:brightness(1.07) }
.btn-ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff }
.btn-ghost:hover{ background:rgba(255,255,255,.1) }
.btn-solid{ background:#0f1524; border:1px solid rgba(255,255,255,.08); color:#fff }
.btn-solid:hover{ background:#131a2b }

.badge-glow{ padding:.35rem .6rem; border-radius:999px; color:#0a1613; background:var(--glow); font-weight:800; font-size:.78rem; box-shadow:0 0 32px rgba(67,217,232,.28) }
.badge-line{ padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:rgba(230,238,247,.85); font-size:.78rem }

/* Glass card */
.glass{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow, 0 12px 60px rgba(0,0,0,.45)), inset 0 1px rgba(255,255,255,.06);
  padding:14px;
  position:relative;
}
.neon-frame{
  position:relative; border-radius:22px; padding:1px;
  background:
    radial-gradient(120px 60px at top left, rgba(67,217,232,.35), transparent 60%),
    radial-gradient(120px 60px at bottom right, rgba(67,217,232,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(67,217,232,.15), 0 18px 60px rgba(67,217,232,.10);
}

/* Feature cards (tilt) */
.card-tilt{ perspective:900px }
.card{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:18px; padding:20px;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card:hover{ border-color:rgba(67,217,232,.28); box-shadow:0 20px 60px rgba(67,217,232,.12) }
.card .ic{ font-size:22px; margin-bottom:8px }
.card .t{ font-weight:700; font-size:1.05rem }
.card .d{ color:rgba(230,238,247,.75) }

/* Steps */
.step{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:16px; padding:18px }
.step .num{
  width:28px; height:28px; border-radius:999px; display:grid; place-content:center;
  background:linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), white 25%));
  font-weight:800; color:#fff; box-shadow:0 0 22px rgba(67,217,232,.22); margin-bottom:.5rem
}

/* Pricing */
.price-card{
  position:relative; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  border-radius:18px; padding:22px; backdrop-filter: blur(6px);
}
.price-card.featured{ border:1px solid rgba(67,217,232,.45); box-shadow:0 0 0 1px rgba(67,217,232,.18), 0 18px 60px rgba(67,217,232,.12) }
.ribbon{ position:absolute; right:16px; top:-10px; font-size:.7rem; padding:.35rem .55rem; border-radius:999px; background:var(--glow); color:#071317; font-weight:900; letter-spacing:.2px }
.pt{ font-weight:800; font-size:1.05rem }
.pv{ margin-top:.25rem; font-weight:900; font-size:2rem }
.suf{ font-size:.9rem; color:rgba(230,238,247,.6); margin-left:.3rem }
.pl{ margin:14px 0 18px; color:rgba(230,238,247,.78); display:grid; gap:.45rem; font-size:.95rem }

/* Inputs */
.inp{ width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; padding:.85rem 1rem; outline:none }
.inp:focus{ border-color:var(--glow); box-shadow:0 0 0 3px color-mix(in oklab, var(--glow), transparent 80%) }

/* Toggle preços */
.toggle{ position:relative; width:56px; height:28px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12) }
.toggle .dot{ position:absolute; top:3px; left:4px; width:22px; height:22px; border-radius:999px; background:#fff; transition:transform .2s }
.translate-x-7{ transform:translateX(28px) }
.translate-x-1{ transform:translateX(4px) }

/* Marquee */
.marquee{ position:relative; overflow:hidden }
.marquee-track{ display:flex; gap:18px; width:max-content; animation: marquee 26s linear infinite }
.pill{
  min-width:160px; height:40px; border-radius:999px; padding:0 14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; letter-spacing:.3px
}
.logo-img{ max-height:18px; width:auto; opacity:.9; filter:brightness(.95) }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* FAQ */
.faq{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:14px; padding:14px }
summary{ cursor:pointer; font-weight:700 }
.faq p{ margin-top:.5rem; color:rgba(230,238,247,.78) }

/* Scroll-reveal */
.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: all .5s ease }
.reveal.in{ opacity:1; transform: none }

/* Acessibilidade */
:focus-visible{ outline: 2px solid var(--glow); outline-offset: 3px }