*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --zwart: #111111; --wit: #F2F0EB; --grijs: #888888;
  --lichtgrijs: #CCCCCC; --geel: #E8D44D;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Serif', serif;
}
html { scroll-behavior: smooth; }
body { background: var(--zwart); color: var(--wit); font-family: var(--font-body); font-size: clamp(16px, 2vw, 18px); line-height: 1.7; -webkit-font-smoothing: antialiased; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 2.5rem; background: rgba(17,17,17,0.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-naam { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wit); text-decoration: none; }
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grijs); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.actief { color: var(--geel); }
.lijn { border: none; border-top: 1px solid rgba(255,255,255,0.08); }
.sectie { max-width: 860px; margin: 0 auto; padding: 5rem 2.5rem; }
.sectie-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--geel); margin-bottom: 2.5rem; }
.knop-primair { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--geel); color: var(--zwart); border: none; padding: 0.9rem 1.8rem; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.15s; }
.knop-primair:hover { background: #f0dc5a; transform: translateY(-2px); }
.knop-secundair { font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; color: var(--grijs); border: 1px solid rgba(255,255,255,0.15); padding: 0.9rem 1.8rem; cursor: pointer; text-decoration: none; display: inline-block; transition: color 0.2s, border-color 0.2s; }
.knop-secundair:hover { color: var(--wit); border-color: var(--wit); }
.social-rij { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.social-knop { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); border: 1px solid rgba(255,255,255,0.1); padding: 0.45rem 0.8rem; text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.social-knop:hover { color: var(--geel); border-color: var(--geel); }
.social-knop svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.footer-outer { border-top: 1px solid rgba(255,255,255,0.06); }
footer { display: flex; justify-content: space-between; align-items: center; padding: 2rem 2.5rem; max-width: 860px; margin: 0 auto; }
.footer-naam { font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); }
.footer-links { display: flex; gap: 1.25rem; list-style: none; }
.footer-links a { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.2); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--grijs); }
@media (max-width: 650px) {
  nav { padding: 1rem 1.25rem; }
  .nav-links li:nth-child(n+4) { display: none; }
  .sectie { padding: 3.5rem 1.25rem; }
  footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2rem 1.25rem; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
}