:root {
  --bg: #F2F2F2;
  --primary: #01a5b4;
  --ink: #1c1e3d;
  --accent: #e24243;
  --tint: #91cfdc;
  --cta: #f3a536;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Cairo', Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.header {
  background: linear-gradient(135deg, #0d3b66 0%, #2e6f9b 100%);
  color: #fff; position: sticky; top:0; z-index:10;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height:40px; width:auto; }
.nav { display:flex; gap:18px; align-items:center; flex-wrap: wrap; justify-content:center; }
.nav a { color:#fff; text-decoration:none; opacity:.9 }
.nav a:hover, .nav a.active { opacity:1; text-decoration:underline; }

.ctas { display:flex; gap:10px; align-items:center; }
.btn { border:none; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600; }
.btn-cta { background: var(--cta); color:#222; }
.btn-lang { background: var(--accent); color:#fff; }

.hero { padding: 64px 0 48px; text-align:center; }
.hero h1 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 8px; color:#fff; }
.hero p { color:#e8f1ff; margin:0 auto 24px; max-width:800px; }
.hero .cardbar { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:24px; }
.card { background:#fff; border-radius:16px; padding:18px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }

.section { padding: 40px 0; }
.section h2 { font-size: 28px; margin: 0 0 12px; }
.section p.lead { color:#333; opacity:.8; }

.footer { background:#0f1a2b; color:#b5c4d6; padding: 30px 0; margin-top: 40px; }
.footer a { color:#b5c4d6; text-decoration:none; }
.footer .cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; }

.badge { display:inline-block; background:var(--tint); color:#083a4a; padding:6px 10px; border-radius:999px; font-size:12px; }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.stat { background:#fff; border-radius:16px; padding:16px; text-align:center; box-shadow: 0 3px 14px rgba(0,0,0,.05); }

.main { background: linear-gradient(135deg, #0d3b66 0%, #2e6f9b 100%); }
.page { background:#fff; border-radius:20px; margin-top:-30px; padding:24px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
h1.page-title { margin-top:0; }
.responsive-img { width:100%; height:auto; display:block; }