:root{
  --bg:#0B0B0D;          /* preto */
  --surface:#111216;     /* preto suave */
  --surface2:#15171D;    /* variação para blocos */
  --text:#EAF2FF;        /* texto claro */
  --muted:rgba(234,242,255,.75);

  --brand:#15ADF4;       /* azul principal */
  --brand2:#1580C0;      /* azul mais escuro */
  --accent:#F58B0B;      /* laranja destaque */

  --stroke:rgba(21,173,244,.22);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(21,173,244,.18), transparent 55%),
    radial-gradient(900px 700px at 90% 20%, rgba(245,139,11,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  scroll-behavior:smooth
}
a{color:inherit}
.container{width:min(1120px, 92vw); margin:0 auto}
.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(11,11,13,.92), rgba(11,11,13,.35));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none}
.logo{
  width:38px;height:38px;border-radius:12px;
  background: radial-gradient(circle at 30% 30%, var(--brand), var(--brand2));
  box-shadow: 0 10px 30px rgba(21,173,244,.22);
}
.brand b{letter-spacing:.2px}
.nav-links{display:flex; gap:14px; align-items:center}
.nav-links a{opacity:.88; text-decoration:none; font-weight:700; font-size:14px}
.nav-links a:hover{opacity:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px; font-weight:900; letter-spacing:.2px;
  text-decoration:none; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(21,173,244,.35)}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--brand));
  color:#0B0B0D; border-color: transparent;
  box-shadow: 0 14px 40px rgba(21,173,244,.18);
}
.btn-primary:hover{box-shadow: 0 18px 55px rgba(245,139,11,.22)}
.hero{padding:64px 0 28px}
.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(21,173,244,.22);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight:800; font-size:13px;
}
.hgrid{
  display:grid; grid-template-columns: 1.18fr .82fr; gap:28px; align-items:stretch;
  margin-top:18px;
}
.h1{font-size: clamp(30px, 4.2vw, 52px); line-height:1.05; margin:14px 0 10px; letter-spacing:-.9px}
.sub{font-size: clamp(15px, 1.6vw, 18px); color: var(--muted); line-height:1.6; margin:0 0 18px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
.note{font-size:13px; color: rgba(234,242,255,.68); margin-top:8px}
.card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card{padding:18px}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px}
.kpi{padding:14px; border-radius:16px; border:1px solid rgba(21,173,244,.18); background: rgba(17,18,22,.55)}
.kpi b{display:block; font-size:18px}
.kpi span{color:rgba(234,242,255,.72); font-size:13px}
.section{padding:42px 0}
.section h2{font-size:28px; margin:0 0 10px; letter-spacing:-.4px}
.section p.lead{color:var(--muted); line-height:1.7; margin:0 0 18px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
.tile{padding:16px}
.tile h3{margin:0 0 8px; font-size:17px}
.tile p{margin:0; color:var(--muted); line-height:1.55; font-size:14px}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.hr{height:1px; background: rgba(255,255,255,.10); margin:22px 0}
.faq details{border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:14px 16px; background: rgba(255,255,255,.03)}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:900}
.footer{padding:34px 0 54px; color:rgba(234,242,255,.65); font-size:13px}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid rgba(21,173,244,.18); background: rgba(255,255,255,.03); font-weight:900; font-size:13px}
.floatbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background: linear-gradient(to top, rgba(11,11,13,.92), rgba(11,11,13,.35));
  border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.floatbar .inner{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 0}
.floatbar small{color:rgba(234,242,255,.68)}
@media (max-width: 900px){
  .hgrid{grid-template-columns:1fr; gap:14px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav-links .hide-sm{display:none}
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width: 420px){
  .kpis{grid-template-columns:1fr}
}


/* --- Fix: footer hidden behind fixed bottom bar --- */
:root{ --floatbar-h: 86px; }
body{ padding-bottom: calc(var(--floatbar-h) + env(safe-area-inset-bottom, 0px)); }
.footer{ padding-bottom: calc(54px + var(--floatbar-h) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 420px){ :root{ --floatbar-h: 104px; } }


/* --- Offer box (Cakto checkout block) --- */
.offer-wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:stretch; }
.offer-box{ padding:18px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: var(--radius); box-shadow: var(--shadow); }
.offer-badge{ display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; font-weight:900; font-size:13px; color:#0B0B0D; background: linear-gradient(135deg, var(--accent), var(--brand)); }
.offer-title{ font-size:22px; margin:12px 0 6px; letter-spacing:-.2px }
.offer-sub{ margin:0 0 14px; color:var(--muted); line-height:1.65 }
.offer-list{ margin:0; padding-left:18px; color:var(--muted); line-height:1.75 }
.price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 10px }
.price .from{ text-decoration:line-through; opacity:.7; font-weight:800 }
.price .now{ font-size:32px; font-weight:1000; letter-spacing:-.6px }
.price .inst{ color:var(--muted); font-weight:800 }
.urgency{ margin-top:10px; padding:12px 14px; border-radius:14px; border:1px solid rgba(245,139,11,.28); background: rgba(245,139,11,.08); color:rgba(234,242,255,.9); font-weight:800; }
@media (max-width: 900px){ .offer-wrap{ grid-template-columns: 1fr; } }


/* --- Modules grid --- */
.modules-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:18px }
.module{ padding:18px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease; }
.module:hover{ transform: translateY(-2px); border-color: rgba(21,173,244,.3); }
.module-header{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px }
.module-number{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border-radius:8px; background: linear-gradient(135deg, var(--accent), var(--brand)); color:#0B0B0D; font-weight:1000; font-size:14px; letter-spacing:-.3px; flex-shrink:0 }
.module-header h3{ margin:0; font-size:15px; line-height:1.3; letter-spacing:-.2px }
.module-list{ margin:0; padding-left:16px; color:var(--muted); line-height:1.6; font-size:13px }
.module-list li{ margin-bottom:6px }
.module-list li:last-child{ margin-bottom:0 }
@media (max-width: 1200px){ .modules-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .modules-grid{ grid-template-columns: 1fr; } }