/* Lettertype Inter, lokaal gehost (SIL Open Font License, zie fonts/OFL-LICENSE.txt) */
@font-face { font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root { --navy:#14213D; --teal:#1FB5A8; --ink:#1d2433; --muted:#535c6c; --bg:#ffffff; --soft:#f4f6f9; --line:#e3e7ee; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }
a { color:var(--navy); }
a:focus-visible, .btn:focus-visible { outline:3px solid var(--teal); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; z-index:10; }
.skip:focus { left:16px; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

header { padding:22px 0; border-bottom:1px solid #e8ebf0; }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); }
.logo svg { width:40px; height:40px; flex:none; }
.logo span { font-size:26px; letter-spacing:-0.5px; }
.logo b { font-weight:800; }
.logo i { font-style:normal; font-weight:300; }
.logo em { font-style:normal; color:var(--teal); font-weight:800; }
nav a { margin-left:22px; text-decoration:none; color:var(--muted); font-size:15px; }
nav a:hover { color:var(--navy); }

.hero { background:var(--navy); color:#fff; padding:88px 0 96px; }
.hero h1 { font-size:clamp(32px, 5vw, 52px); line-height:1.12; font-weight:800; letter-spacing:-1px; max-width:760px; }
.hero h1 em { font-style:normal; color:var(--teal); }
.hero p { margin-top:22px; font-size:19px; max-width:620px; color:#d5dbe7; }
.btn { display:inline-block; margin-top:34px; background:var(--teal); color:var(--navy); font-weight:600; padding:14px 26px; border-radius:10px; text-decoration:none; }
.btn:hover { filter:brightness(1.07); }

section { padding:80px 0; }
h2 { font-size:30px; color:var(--navy); letter-spacing:-0.5px; font-weight:800; }
h2::after { content:""; display:block; width:56px; height:4px; background:var(--teal); border-radius:2px; margin-top:12px; }
.lead { margin-top:18px; color:var(--muted); max-width:680px; font-size:17px; }
.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:40px; }
.card { background:var(--soft); border-radius:14px; padding:28px; }
.card h3 { color:var(--navy); font-size:18px; margin-bottom:8px; }
.card p { color:var(--muted); font-size:15px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--teal); margin-bottom:14px; }

.about { background:var(--soft); }
.about .cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:40px; margin-top:32px; }
.about p { color:var(--muted); margin-bottom:14px; }
ul.check { list-style:none; }
ul.check li { padding-left:28px; position:relative; margin-bottom:12px; }
ul.check li::before { content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:50%; background:var(--teal); }

.contact .box { margin-top:32px; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:22px; }
.contact .item { border:1px solid var(--line); border-radius:14px; padding:24px; }
.contact .label { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.contact .val { margin-top:6px; font-size:17px; font-weight:600; color:var(--navy); overflow-wrap:anywhere; }

footer { background:var(--navy); color:#c3cad8; padding:40px 0; font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; }
footer a { color:#fff; }
footer address { font-style:normal; line-height:1.7; }
footer .links a { margin-right:16px; }

/* Juridische pagina's */
.doc { padding:56px 0 80px; }
.doc .wrap { max-width:760px; }
.doc h1 { font-size:clamp(28px, 4vw, 40px); color:var(--navy); font-weight:800; letter-spacing:-0.5px; }
.doc .meta { color:var(--muted); margin-top:8px; }
.doc h2 { font-size:22px; margin-top:44px; }
.doc h2::after { width:40px; height:3px; margin-top:8px; }
.doc p, .doc li { margin-top:12px; }
.doc ul { padding-left:22px; }
.doc table { width:100%; border-collapse:collapse; margin-top:16px; font-size:15px; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); }
.doc th { background:var(--soft); color:var(--navy); }
.tablewrap { overflow-x:auto; }

@media (max-width:640px) {
  nav { display:none; }
  .grid { grid-template-columns:1fr; }
  .hero { padding:64px 0 72px; }
  section { padding:60px 0; }
}
footer .copy { margin-top:10px; }
.lead.small { font-size:15px; }