:root{
  --primary:#0A3D62;
  --accent:#1B9CFC;
  --ink:#0F172A;
  --muted:#6B7280;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,8,23,.08);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.8); border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem;
}
.logo{display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--ink)}
.logo-text{letter-spacing:.3px}
.nav a{margin:.25rem .5rem; font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary); color:white; box-shadow:var(--shadow)}
.btn-outline{border-color:var(--primary)}
.btn-ghost{background:transparent; border-color:#e5e7eb}
.hero{
  padding:4rem 1rem 2rem; text-align:center; background:linear-gradient(180deg, #fff 0, #f3f7fb 100%);
}
.hero h1{font-size:clamp(2rem,4vw,3rem); margin:.5rem 0}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:2rem auto; max-width:1100px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}
.grid{display:grid; gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.section{padding:2rem 1rem; max-width:1150px; margin:0 auto}
.section h2{font-size:clamp(1.4rem,2.8vw,2.1rem)}
.muted{color:var(--muted)}
.features .card:hover{transform:translateY(-2px)}
.site-footer{padding:2rem 1rem; background:#0b1220; color:#cbd5e1}
.site-footer a{color:#e2e8f0}
.site-footer .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer .brandline{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem}
.tiny{margin-top:1rem; font-size:.875rem; opacity:.8; text-align:center}
.badge{display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; background:#eaf2ff; color:var(--primary); border:1px solid #d3e3ff}
.banner{
  position:relative; margin:1rem auto; max-width:1100px; padding:1rem; border-radius:var(--radius);
  background:linear-gradient(90deg, rgba(27,156,252,.08), rgba(10,61,98,.08));
  border:1px dashed rgba(10,61,98,.25)
}
.hero-cta{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem;
}
.list-check li{margin:.4rem 0; list-style:none; position:relative; padding-left:1.4rem}
.list-check li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table th,.table td{padding:.65rem .5rem; border-bottom:1px solid #e5e7eb; text-align:left}
.breadcrumbs{font-size:.9rem; margin:0 0 1rem 0}
.breadcrumbs a{color:var(--muted)}
.hero .sub{max-width:780px; margin:0 auto}
blockquote.q{
  border-left:4px solid var(--accent); margin:1rem 0; padding: .5rem 1rem; background:#f0f7ff; border-radius:8px;
}
#cookie-banner{
  position:fixed; bottom:1rem; left:1rem; right:1rem; background:#fff; box-shadow:var(--shadow);
  border-radius:var(--radius); padding:1rem; display:none; z-index:60;
}
.cookie-inner{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.cookie-actions{margin-left:auto; display:flex; gap:.5rem}
.form{display:grid; gap:.8rem; max-width:720px}
.input, textarea{width:100%; border:1px solid #d1d5db; padding:.65rem .8rem; border-radius:12px; background:white}
.input:focus, textarea:focus{outline:3px solid #dbeafe; border-color:#93c5fd}
.alert{padding:.8rem 1rem; border-radius:12px; background:#ecfeff; border:1px solid #bae6fd; display:none}
.cta-bar{
  position:sticky; bottom:0; background:#ffffffcc; backdrop-filter:blur(8px); padding:.75rem; display:flex; justify-content:center; gap:.75rem; border-top:1px solid #e5e7eb
}
/* Responsive */
@media (max-width: 900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 600px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}

/* Simple animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
a.btn, .card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{box-shadow:0 20px 44px rgba(2,8,23,.12)}