:root{
  --bg:#0a0e17; --panel:#121826; --line:#232d40; --text:#eaeef7;
  --muted:#96a2ba; --subtle:#6a7488; --primary:#2563eb;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter Tight","Inter",system-ui,sans-serif;
  --ui:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  color:var(--text); letter-spacing:-0.01em;
  background:var(--bg);
  background-image:radial-gradient(1100px 620px at 78% -12%, #16203a 0%, rgba(10,14,23,0) 58%);
  min-height:100vh; min-height:100dvh;
}

/* Tijdzone-balk */
.clockbar{
  display:flex; align-items:center; justify-content:safe center;
  gap:12px; flex-wrap:nowrap; overflow-x:auto;
  padding:5px 12px; background:#080b13; border-bottom:1px solid var(--line); scrollbar-width:none;
  position:sticky; top:0; z-index:10;
}
.clockbar::-webkit-scrollbar{display:none}
.clock{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap}
.clock-city{color:var(--subtle); font-family:var(--ui); font-weight:600; font-size:10px; letter-spacing:.4px}
.clock-time{color:var(--muted); font-family:var(--ui); font-weight:500; font-size:10px; font-variant-numeric:tabular-nums}
.clock-sep{flex:0 0 auto; width:1px; height:10px; background:var(--line)}
.c-full{display:none}.c-short{display:inline}

.topbar{ display:flex; justify-content:center; padding:30px 22px 4px; }
.topbar img{ height:34px; opacity:.95; }

.wrap{ max-width:720px; margin:0 auto; padding:34px 26px 70px; }
.doc-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,5vw,2.5rem); letter-spacing:-0.015em; color:#f4f6fb; text-align:center; }
.doc-updated{ text-align:center; color:var(--subtle); font-family:var(--ui); font-size:12px; margin-top:12px; margin-bottom:34px; }
.doc-lead{ color:#c4ccda; font-size:1rem; line-height:1.7; margin-bottom:8px; }

.doc h2{ font-family:var(--sans); font-size:1.02rem; font-weight:600; color:#eef1f6; margin:30px 0 8px; letter-spacing:-0.01em; }
.doc p{ color:var(--muted); font-size:0.94rem; line-height:1.72; margin-bottom:10px; }

.legal-box{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:34px; }
.legal-box p{ margin:0; font-size:0.85rem; color:var(--subtle); line-height:1.65; }

.contact-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:16px; }
.contact-card h2{ margin-top:0; }
.contact-card p{ margin-bottom:4px; }
.contact-card a{ color:#7ea6ff; text-decoration:none; }
.contact-card a:hover{ text-decoration:underline; }

/* Footer-nav */
.foot{ text-align:center; padding:6px 16px 8px; }
.foot a{ color:var(--muted); font-family:var(--ui); font-size:0.84rem; text-decoration:none; transition:color .16s ease; }
.foot a:hover{ color:#eef1f6; }
.foot .sep{ color:#2a3446; margin:0 6px; }
.foot-meta{ text-align:center; color:var(--subtle); font-family:var(--ui); font-size:11px; padding:8px 16px 0; }

/* Metallic vlaggen */
.langbar{ display:flex; align-items:center; justify-content:center; gap:13px; padding:16px 16px 30px; }
.flag{
  width:28px; height:20px; border-radius:5px; cursor:pointer; padding:0; overflow:hidden;
  position:relative; background:none; border:1px solid rgba(255,255,255,0.30);
  box-shadow:0 1px 2px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.4);
  opacity:0.5; transition:opacity .18s ease, transform .12s ease, box-shadow .18s ease;
}
.flag::after{ content:""; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.22) 100%); }
.flag svg{ display:block; width:100%; height:100% }
.flag:hover{ opacity:0.85 }
.flag.active{ opacity:1; transform:translateY(-1px);
  box-shadow:0 0 0 2px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.45); }