
:root{
  --brand:#0ea5e9; /* sky-500 */
  --brand-dark:#0369a1;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --ring:rgba(14,165,233,.35);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(6px); border-bottom:1px solid #e5e7eb; z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px;letter-spacing:.3px}
.logo-badge{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#22d3ee); display:grid;place-items:center;color:white;font-weight:900}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.nav a.active, .nav a:hover{color:var(--brand)}
.hero{padding:64px 0;background:linear-gradient(180deg,var(--bg),var(--bg-alt));border-bottom:1px solid #e5e7eb}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 10px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.kpis .card{background:white;border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px}
.btn{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:12px;border:1px solid #0284c7;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 20px var(--ring)}
.btn:hover{background:var(--brand-dark)}
.btn.secondary{background:#fff;color:var(--brand);border-color:#bae6fd}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.section{padding:48px 0}
.card{background:white;border:1px solid #e5e7eb;border-radius:var(--radius);padding:22px}
h2{font-size:28px;margin:0 0 10px}
.list{padding:0;margin:16px 0;list-style:none}
.list li{display:flex;gap:10px;margin:10px 0}
.list li::before{content:"✓"; color:#059669; font-weight:900}
.footer{padding:28px 0;border-top:1px solid #e5e7eb;color:#64748b;background:var(--bg-alt)}
input,textarea{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:12px;outline:none}
input:focus,textarea:focus{border-color:#0284c7; box-shadow:0 0 0 6px var(--ring)}
label{font-weight:600;font-size:14px;color:#1f2937}
.form-row{display:grid;gap:14px}
.form-row.two{grid-template-columns:repeat(2,1fr)}
.small{font-size:12px;color:#6b7280}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
@media (max-width: 820px){
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .kpis{grid-template-columns:1fr}
  .hero h1{font-size:32px}
}
