/* Basis-stijlen */
:root{
  --bg: #0b2239;
  --bg-2: #0e2b47;
  --text: #0f172a;
  --muted: #475569;
  --brand: #1e90ff;
  --card: #ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:#f6f8fb}
img{max-width:100%;display:block;border-radius:10px}
.container{width:min(1100px,92%);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 rgba(2,6,23,.06);z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;color:var(--bg);text-decoration:none;font-size:1.15rem}
.nav a{margin-left:18px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--bg)}

/* Hero */
.hero{background:linear-gradient(90deg,var(--bg),var(--bg-2));color:#fff;padding:56px 0}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 10px}
.lead{opacity:.9;line-height:1.6}
.btn{display:inline-block;margin-top:16px;background:#fff;color:var(--bg);padding:10px 16px;border-radius:9px;font-weight:700;text-decoration:none}
.hero__image img{box-shadow:0 24px 80px rgba(0,0,0,.35)}

/* Sections */
.section{padding:56px 0}
.section--alt{background:#fff}
.section h2{margin-top:0;font-size:clamp(22px,3.6vw,32px)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.feature{background:var(--card);border:1px solid rgba(2,6,23,.06);box-shadow:0 6px 24px rgba(2,6,23,.05);padding:18px;border-radius:12px}

/* Grid gallery */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.grid figure{margin:0}
.grid figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}

/* Contact */
.contact-card{background:var(--card);border:1px solid rgba(2,6,23,.06);padding:16px;border-radius:12px;box-shadow:0 6px 24px rgba(2,6,23,.05)}

/* Footer */
.site-footer{background:#0a1633;color:#cbd5e1}
.site-footer .container{padding:24px 0;text-align:center}

/* Responsive */
@media (max-width: 900px){
  .hero .container{grid-template-columns:1fr}
}
@media (max-width: 800px){
  .features{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
}