:root{
  color-scheme: dark;
  --bg:#07111f; --surface:#0f1d2f; --surface-2:#14243a;
  --text:#f5f8fc; --text-soft:#c2cede; --muted:#8798ad; --line:#263951;
  --primary:#63e6be; --primary-strong:#3dd4a5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  display:grid; place-items:center; padding:1.5rem; text-align:center;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(99,230,190,.12), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(98,176,255,.10), transparent 45%);
}
main{max-width:44rem; width:100%}
.mark{height:3.4rem; width:auto; margin-bottom:1.6rem}
.eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .9rem; margin-bottom:1.2rem;
}
h1{font-size:clamp(1.9rem,5.5vw,3rem); line-height:1.12; margin:0 0 .9rem}
.lead{color:var(--text-soft); font-size:clamp(1rem,2.4vw,1.12rem); line-height:1.6; margin:0 auto 2.2rem; max-width:34rem}
.klok{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem}
.vak{
  background:var(--surface); border:1px solid var(--line); border-radius:.9rem;
  padding:.9rem 1.1rem; min-width:5rem;
}
.vak b{display:block; font-size:clamp(1.6rem,5vw,2.3rem); font-variant-numeric:tabular-nums; line-height:1}
.vak span{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.4rem}
.klaar{font-size:1.15rem; color:var(--primary); font-weight:600; margin-bottom:1rem}
.kaders{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:0 0 2rem; padding:0; list-style:none}
.kaders li{
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:.35rem .8rem; font-size:.8rem; color:var(--text-soft);
}
.voet{border-top:1px solid var(--line); padding-top:1.4rem; color:var(--muted); font-size:.82rem; line-height:1.6; margin-bottom:1rem}
.identificatie{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; justify-content:center;
  font-style:normal; color:var(--muted); font-size:.76rem; line-height:1.6;
}
.identificatie .handelsnaam{color:var(--text-soft); font-weight:600}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid #a7ccff; outline-offset:3px; border-radius:.3rem}
@media (prefers-reduced-motion:no-preference){
  main{animation:op .5s ease-out both}
  @keyframes op{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
}