:root{
  --bg:#141414; --card:#1f1f1f; --line:#2c2c2c; --field:#161616;
  --text:#f5f5f5; --muted:#9a9a9a; --ok:#4ade80; --danger:#f87171;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.65; font-size:16px;
}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
a{color:#fff; text-decoration:none; border-bottom:1px solid #4a4a4a}
a:hover{border-color:#fff}
h1,h2,h3{line-height:1.25}
h1{font-size:2rem; margin:.4em 0}
h2{font-size:1.35rem; margin-top:2em; padding-top:.6em; border-top:1px solid var(--line)}
h3{font-size:1.05rem}
code{background:var(--field); border:1px solid var(--line); padding:2px 6px; border-radius:6px; font-size:.9em}
hr{border:none; border-top:1px solid var(--line)}

/* header */
.site-header{
  position:sticky; top:0; z-index:10; background:#0d0d0d;
  border-bottom:1px solid var(--line);
}
.site-header{position:sticky}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:8px; border:none}
.brand b{font-weight:900; font-size:20px; letter-spacing:2px}
.brand .thin{font-weight:300; color:var(--muted); font-size:14px; letter-spacing:4px}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{
  border:none; color:var(--muted); font-weight:600; font-size:14px;
  padding:8px 12px; border-radius:999px;
}
nav a:hover{color:#fff}
nav a.on{background:#fff; color:#111}

/* menu hamburguer (mobile) */
.burger{display:none; background:none; border:none; cursor:pointer; padding:10px}
.burger span{display:block; width:22px; height:2px; background:#fff; margin:5px 0; border-radius:2px; transition:transform .2s, opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:720px){
  .burger{display:block}
  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#0d0d0d; border-bottom:1px solid var(--line);
    flex-direction:column; gap:2px; padding:10px 20px 18px;
    box-shadow:0 12px 24px rgba(0,0,0,.5);
  }
  nav.open{display:flex}
  nav a{padding:13px 14px; border-radius:10px; font-size:16px}
  nav a.on{background:transparent; color:#fff; border-left:3px solid #fff; border-radius:0}
  .site-header .wrap{justify-content:space-between}
  .hero{padding:40px 0 16px}
  .hero h1{font-size:1.7rem}
}

/* hero */
.hero{padding:64px 0 24px; text-align:center}
.hero h1{font-size:2.4rem; font-weight:900; letter-spacing:1px}
.hero .tag{color:var(--muted); font-size:1.15rem; max-width:640px; margin:0 auto}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.btn{
  display:inline-block; background:#fff; color:#111; font-weight:800;
  padding:14px 28px; border-radius:12px; border:none; font-size:1rem;
}
.btn.ghost{background:transparent; color:var(--text); border:1px solid #4a4a4a}
.btn:hover{opacity:.9}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:24px 0}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
}
.card h3{margin-top:0}
.card .ico{font-size:26px}
.badge{
  display:inline-block; font-size:12px; font-weight:700; padding:3px 10px;
  border-radius:999px; background:rgba(74,222,128,.12); color:var(--ok);
  border:1px solid rgba(74,222,128,.3);
}
.badge.red{background:rgba(248,113,113,.12); color:var(--danger); border-color:rgba(248,113,113,.3)}

/* listas */
ul.checks{list-style:none; padding:0}
ul.checks li{padding:8px 0 8px 30px; position:relative; border-bottom:1px solid var(--line)}
ul.checks li:last-child{border-bottom:none}
ul.checks li::before{content:"✓"; position:absolute; left:4px; color:var(--ok); font-weight:800}

/* preço */
.price{font-size:2rem; font-weight:900}
.price small{font-size:.9rem; color:var(--muted); font-weight:400}
.destaque{border-color:#fff; box-shadow:0 0 0 1px #fff}
.center{text-align:center}

/* tabela */
table{width:100%; border-collapse:collapse; margin:16px 0}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:15px}
th{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:1px}

/* botao flutuante WhatsApp */
.wa-float{
  position:fixed; bottom:20px; right:20px; z-index:60;
  display:flex; align-items:center; gap:10px;
  background:#fff; color:#111; font-weight:800; font-size:15px;
  padding:12px 18px; border-radius:999px; border:none;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.wa-float svg{width:22px; height:22px}
.wa-float:hover{opacity:.9}
@media (max-width:720px){
  .wa-float{bottom:16px; right:16px; padding:12px 16px}
}

/* depoimentos */
.depo{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.depo .aspas{font-size:34px; line-height:1; color:#4a4a4a; font-family:Georgia,serif}
.depo p{font-style:italic; margin:8px 0 12px}
.depo .quem{font-weight:700; font-size:14px; font-style:normal}
.depo .loja{color:var(--muted); font-size:13px; font-style:normal}

/* faixa */
.strip{
  background:radial-gradient(120% 160% at 50% 0%, #2e2e2e 0%, #141414 70%);
  border:1px solid #3a3a3a; border-radius:14px;
  padding:28px 22px; margin:40px 0; text-align:center;
}

footer{margin-top:64px; border-top:1px solid var(--line); padding:28px 0 48px; background:#0d0d0d}
footer p{margin:4px 0}
.muted{color:var(--muted); font-size:14px}