:root { --maxw: 1100px; }
*{box-sizing:border-box}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; line-height:1.6; color:#111;}
a{color:inherit}
header{position:sticky; top:0; background:#0f172a; color:#fff; z-index:10; box-shadow:0 2px 10px rgba(0,0,0,.1)}
nav{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 18px}
nav .brand{display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:.2px}
nav .brand img{width:40px; height:40px; border-radius:8px}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{color:#fff; text-decoration:none; opacity:.92}
nav a:hover{opacity:1}
.cta{background:#16a34a; color:#fff; padding:10px 14px; border-radius:12px; font-weight:700}
.hero{background:linear-gradient(135deg,#f1f5f9 0,#ffffff 60%);}
.container{max-width:var(--maxw); margin:0 auto; padding:32px 18px}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero h1{font-size:clamp(28px,5vw,46px); margin:0 0 10px}
.hero p{font-size:clamp(16px,2.6vw,20px); color:#374151}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.badge{background:#e2e8f0; border-radius:999px; padding:6px 10px; font-weight:600; font-size:14px}
.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.03)}
.card h3{margin:0 0 6px}
footer{background:#0f172a; color:#cbd5e1; margin-top:40px}
footer .container{display:grid; gap:12px}
small, .muted{color:#6b7280}
section h2{font-size:clamp(22px,3.4vw,32px); margin:0 0 10px}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.kpis .card{text-align:center}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
input, textarea{width:100%; padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
button{border:0; padding:12px 16px; border-radius:12px; background:#0ea5e9; color:#fff; font-weight:700; cursor:pointer}
table{border-collapse:collapse; width:100%} th,td{border:1px solid #e5e7eb; padding:10px; text-align:left}
.banner{display:flex; align-items:center; justify-content:center; padding:10px; background:#f1f5f9; border-bottom:1px solid #e5e7eb}
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:1fr}
}