:root{
  --bg:#0b0f17;
  --bg-2:#0e1525;
  --primary:#1e3a8a; /* dark blue */
  --accent:#0ea5e9;  /* light blue */
  --green:#22c55e;
  --orange:#f59e0b;
  --red:#ef4444;
  --yellow:#eab308;
  --text:#ffffff;
  --muted:#9aa4b2;
  --card:#121827;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1200px, 92%);margin:0 auto}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(11,15,23,.9) 0%, rgba(11,15,23,.6) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand .name{font-weight:800;letter-spacing:.3px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.15);color:#7dd3fc;border:1px solid rgba(125,211,252,.3)}

.hero{
  position:relative;isolation:isolate;
  padding: clamp(80px, 11vw, 140px) 0 64px;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(800px 400px at 100% 0, rgba(30,58,138,.25), transparent 50%),
    radial-gradient(800px 400px at 0 0, rgba(30,58,138,.25), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero h1{font-size: clamp(28px, 4.2vw, 56px);line-height:1.1;margin:0 0 18px;font-weight:900}
.hero p{font-size: clamp(16px, 2vw, 20px);color:var(--muted);max-width:780px}
.hero .points{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.point{background: rgba(30,58,138,.35);border:1px solid rgba(125,211,252,.25);padding:10px 12px;border-radius:12px;font-size:14px}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(14,165,233,.15), rgba(14,165,233,.05));
  box-shadow: var(--shadow);
  transition:.2s transform ease;
  font-weight:700;
}
.btn:hover{transform:translateY(-2px)}
.btn.whatsapp{background:linear-gradient(180deg, rgba(34,197,94,.25), rgba(34,197,94,.15));border-color:rgba(34,197,94,.45)}
.btn.alt{background:linear-gradient(180deg, rgba(245,158,11,.25), rgba(245,158,11,.12));border-color:rgba(245,158,11,.45)}

.section{padding:72px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.section h2{font-size: clamp(22px, 3.2vw, 36px);margin:0 0 14px}
.section p.lead{color:var(--muted);max-width:900px}

.grid{display:grid;gap:18px}
.grid.features{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));margin-top:26px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin-top:6px;margin-bottom:8px}
.card p{color:var(--muted)}

.highlight{color:var(--yellow);font-weight:800}
.highlight-red{color:var(--red);font-weight:800}
.highlight-green{color:var(--green);font-weight:800}

.kpis{display:grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap:18px;margin-top:22px}
.kpi{background:linear-gradient(180deg, rgba(30,58,138,.35), rgba(30,58,138,.15));border:1px solid rgba(125,211,252,.25);padding:18px;border-radius:16px;text-align:center}
.kpi .num{font-size:32px;font-weight:900}
.kpi .lbl{color:var(--muted)}

.services{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));margin-top:22px}
.service .tag{font-size:12px;margin-top:6px;display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.15);border:1px solid rgba(125,211,252,.3);color:#93c5fd}

.prices{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));margin-top:22px}
.price .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.price .value{font-size:28px;font-weight:900}
.price ul{margin:0;padding-left:18px;color:var(--muted)}
.price li{margin:8px 0}

.form-wrap{margin-top:26px}
form{display:grid;gap:12px}
.input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--text);padding:14px;border-radius:12px;width:100%}
.input::placeholder{color:#94a3b8}
button.submit{background:linear-gradient(180deg, rgba(14,165,233,.3), rgba(14,165,233,.18));border:1px solid rgba(125,211,252,.5);padding:14px;border-radius:12px;font-weight:800}

.footer{padding:28px 0;color:var(--muted);font-size:14px}

.floating-wa{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center
}
.floating-wa .btn{padding:16px 22px;font-size:16px}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badges .b{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}

.note{font-size:13px;color:var(--muted);margin-top:8px}
.small{font-size:12px;color:var(--muted)}

.hero .contact{
  margin-top:18px;display:flex;align-items:center;gap:10px;color:var(--muted)
}
.hero .contact .dot{width:6px;height:6px;background:var(--green);border-radius:999px;box-shadow:0 0 10px rgba(34,197,94,.9)}

blockquote{
  margin:0;padding:14px;border-left:4px solid var(--accent);
  background:rgba(14,165,233,.08);border-radius:8px 12px 12px 8px;color:#c7d2fe
}