:root{
--navy:#0A2D57;
--green:#00A651;
--light:#F5F7FA;
}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--light);color:#1f2937}
header{background:white;padding:40px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.hero-title{font-size:42px;color:var(--navy);font-weight:700}
.hero-sub{color:var(--green);font-size:20px}
.container{max-width:1200px;margin:auto;padding:30px}
.kpis,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:white;border-radius:14px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.card h3{color:var(--navy)}
.btn{display:inline-block;background:var(--green);color:white;padding:12px 22px;border-radius:8px;text-decoration:none}
.nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
footer{background:var(--navy);color:white;text-align:center;padding:25px;margin-top:40px}