:root {
  --primary: #0a1a2b;
  --accent: #718096;
  --light: #f7fafc;
  --highlight: #2b6cb0;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; color:#1a202c; background: var(--light); }
a { color: var(--highlight); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.navbar { background: var(--primary); color:white; position:sticky; top:0; z-index:10; }
.navbar .inner { display:flex; align-items:center; justify-content:space-between; padding: 0.75rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brand img { height:40px; width:auto; }
.brand .title { font-weight:700; letter-spacing:.5px; }
.navlinks a { color:white; margin-left:1rem; font-weight:600; }
.navlinks a.button { background: var(--highlight); padding:.5rem .9rem; border-radius: .5rem; }
.hero { background: linear-gradient(180deg, rgba(10,26,43,.95), rgba(10,26,43,.85)), url('assets/hero.webp') center/cover no-repeat; color:white; padding: 6rem 0; }
.hero h1 { font-size: clamp(1.8rem, 3vw + 1rem, 3rem); margin:0 0 .75rem; }
.hero p { max-width: 800px; font-size: 1.1rem; line-height:1.6; margin-bottom:1.25rem; color:#d6e0ea; }
.hero .cta { display:flex; gap:.75rem; flex-wrap:wrap; }
.button { display:inline-block; background: var(--highlight); color:white; padding:.8rem 1.1rem; border-radius:.65rem; font-weight:700; }
.button.alt { background: transparent; border:2px solid #fff; }
.section { padding:3.5rem 0; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1.25rem; }
.card { background:white; border-radius:1rem; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding:1.25rem; }
.card h3 { margin-top:0; }
.kpis { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.kpis .kpi { background:white; border-left:4px solid var(--highlight); padding:1rem; border-radius:.75rem; }
.badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.badge { background:#e2e8f0; color:#1a202c; border-radius:999px; padding:.35rem .7rem; font-size:.85rem; }
.footer { background:#0b1726; color:#cbd5e0; padding:2rem 0; margin-top:2rem; }
.footer a { color:#cbd5e0; }
.lead { font-size:1.15rem; }
ul.checks { list-style:none; padding:0; margin:0; }
ul.checks li::before { content:"✓ "; color: #2f855a; font-weight:700;}
.headerpad { padding-top: 1rem; }
@media (max-width: 780px){
  .navlinks { display:none; }
}