:root{
  --bg:#0b1220;
  --card:#0f1a2f;
  --muted:#9fb0d0;
  --text:#e9eefc;
  --accent:#37d67a;
  --accent2:#4aa3ff;
  --warn:#ffd166;
  --danger:#ff4d6d;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
  --border: 1px solid rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 0%, #14254b 0%, var(--bg) 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,209,102,.14) 0%, rgba(0,0,0,0) 60%);
}

.wrap{max-width:1100px; margin:0 auto; padding:22px;}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.62);
  border-bottom: var(--border);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:18px;}

.brand{display:flex; align-items:center; gap:12px;}
.brand__logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--warn),var(--accent2));
  display:grid;place-items:center;
  color:#071019;font-weight:1000;
}
.brand__name{font-weight:1000}
.brand__tag{font-size:12px;color:var(--muted)}

.pill{
  padding:10px 14px;border-radius:999px;
  border:var(--border);
  text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.04);
}

.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  margin-top:18px;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }

.kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(74,163,255,.25);
  background: rgba(74,163,255,.10);
  font-weight:900;
  color: rgba(233,238,252,.95);
}

h1{font-size:46px; line-height:1.02; margin:12px 0 10px;}
.lead{color:var(--muted); font-size:16px; line-height:1.55; max-width:70ch;}

.bullets{margin-top:16px; display:grid; gap:10px;}
.b{
  padding:10px 12px;
  border-radius:14px;
  border:var(--border);
  background:rgba(255,255,255,.03);
}

.note{
  margin-top:14px;
  color:rgba(159,176,208,.92);
  font-size:12px;
  line-height:1.45;
}

.card{
  background: rgba(15,26,47,.78);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

.card--soft{
  margin-top:12px;
  background: rgba(255,255,255,.03);
  box-shadow: none;
}

.badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(55,214,122,.12);
  border: 1px solid rgba(55,214,122,.26);
  font-weight:1000;
  margin-bottom:10px;
}

.priceBlock{margin-top:6px;}
.free{font-size:44px; font-weight:1000;}
.sub{color:rgba(159,176,208,.95); margin-top:4px}

.mini{margin-top:12px; color:rgba(159,176,208,.92); font-size:12px; display:grid; gap:7px;}
.mini__line{padding-left:10px; position:relative;}
.mini__line:before{
  content:"";
  position:absolute; left:0; top:7px;
  width:6px;height:6px;border-radius:50%;
  background: linear-gradient(135deg, var(--warn), var(--danger));
  opacity:.9;
}

/* ---------------------------
   BOTÕES (base + variações)
---------------------------- */

.btn{
  border:none;
  cursor:pointer;

  padding:12px 16px;
  border-radius:14px;

  font-weight:1000;
  font-size:16px;
  line-height:1;

  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

.btn--primary{
  background: linear-gradient(135deg, #ffd166, #ff4d6d);
  color:#071019;
  box-shadow: 0 10px 30px rgba(255,77,109,.18);
}

.btn--ghost{
  background: rgba(255,255,255,.02);
  color:var(--text);
  border: var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* Hover / Active (primary e ghost) */
.btn--primary:hover{
  filter: brightness(1.03);
  box-shadow: 0 14px 38px rgba(255,77,109,.24);
  transform: translateY(-1px);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.btn--primary:active,
.btn--ghost:active{
  transform: translateY(0px) scale(.99);
  filter: brightness(.98);
}

/* Acessibilidade: foco visível */
.btn:focus-visible{
  outline: 2px solid rgba(74,163,255,.55);
  outline-offset: 3px;
}

/* Botão primary dentro de .card continua 100% com margin-top */
.card .btn--primary{
  width:100%;
  margin-top:14px;
}

/* CTA Row */
.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  align-items:stretch;
}
.ctaRow .btn{width:auto; margin-top:0;}
@media (max-width:520px){ .ctaRow .btn{width:100%;} }

.fineprint{margin-top:12px; color:rgba(159,176,208,.85); font-size:12px; line-height:1.35;}

.section{
  margin-top:22px;
  padding:18px;
  border-radius:var(--radius);
  border:var(--border);
  background:rgba(255,255,255,.03);
}
.section h2{margin:0 0 12px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr;} }
.box{padding:14px; border-radius:16px; border:var(--border); background:rgba(0,0,0,.20);}
.box__t{font-weight:1000}
.box__m{color:var(--muted); margin-top:6px; line-height:1.45; font-size:13px}

.footer{margin:26px 0 10px; font-size:12px; color:rgba(159,176,208,.84);}
.muted{color:var(--muted)}
.soft__t{font-weight:1000}
.soft__m{color:var(--muted); margin-top:6px; line-height:1.45; font-size:13px}

.stats{
  margin-top:12px;
  display:inline-block;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(233,238,252,.92);
  font-weight:900;
  font-size:12px;
}

.hidden{display:none !important;}