/* VOI website-v3 — basis: reset, canvas + gloed, header/footer, gedeelde componenten */

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;
  transition:background-color var(--dur),color var(--dur);
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}

:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--surface);color:var(--ink);padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:600;font-size:.85rem}
.skip:focus{left:0}

/* ---- gloed-canvas (Fastlane, neon-blauw) ---- */
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;will-change:transform}
.glow.a{width:52vw;height:52vw;min-width:420px;min-height:420px;left:-14vw;top:-18vh;background:radial-gradient(circle,var(--neon-soft),transparent 65%);animation:glow-drift-a 26s ease-in-out infinite alternate}
.glow.b{width:44vw;height:44vw;min-width:360px;min-height:360px;right:-12vw;bottom:-16vh;background:radial-gradient(circle,rgba(107,193,255,.14),transparent 65%);animation:glow-drift-b 32s ease-in-out infinite alternate}
.glow.c{width:30vw;height:30vw;min-width:260px;min-height:260px;right:14vw;top:-10vh;background:radial-gradient(circle,var(--neon-faint),transparent 70%);animation:glow-drift-a 38s ease-in-out infinite alternate-reverse}
@keyframes glow-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,3vh) scale(1.08)}}
@keyframes glow-drift-b{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-3vw,-3vh) scale(1)}}

/* ---- header ---- */
header.top{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:1.4rem clamp(1.2rem,4vw,2rem);display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--neon)}
.top-controls{margin-left:auto;display:flex;align-items:center;gap:.6rem}

.lang{display:flex;border:1px solid var(--line-strong);border-radius:100px;overflow:hidden}
.lang button{font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.34rem .6rem;color:var(--ink-3);text-transform:uppercase;transition:color var(--dur-fast),background var(--dur-fast)}
.lang button.on{background:var(--neon-soft);color:var(--neon-ink)}
.lang button:hover{color:var(--ink)}

.theme-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;color:var(--ink-2);transition:color var(--dur-fast),border-color var(--dur-fast)}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}

.navcta{background:var(--cta-bg);color:var(--cta-fg);border:0;border-radius:100px;padding:.55rem 1.15rem;font-weight:600;font-size:.85rem;transition:transform .25s var(--ease)}
.navcta:hover{transform:translateY(-2px)}
@media (max-width:480px){.navcta{display:none}}
.navlogin{color:var(--ink-2);font-size:.85rem;font-weight:500;text-decoration:none;padding:.45rem .5rem;border-radius:8px}
.navlogin:hover,.navlogin:focus-visible{color:var(--ink);text-decoration:underline}
@media (max-width:640px){.navlogin{display:none}}

/* ---- lay-out & tekstcomponenten ---- */
main{position:relative;z-index:1}
.sec{max-width:1180px;margin:0 auto;padding:calc(var(--sec-gap)/2) clamp(1.2rem,4vw,2rem)}
.sec-head{max-width:56ch}
.kicker{font-weight:600;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--neon-ink)}
.kicker.tealk{color:var(--teal-ink)}
h2{font-family:var(--serif);font-weight:700;font-size:var(--text-h2);line-height:1.1;letter-spacing:-.02em;margin:.5rem 0 .8rem}
.lead{color:var(--ink-2);max-width:46ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--card-shadow);position:relative;transition:background-color var(--dur)}
.tag{position:absolute;top:1rem;right:1.1rem;font-weight:600;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#4F6F9C;background:rgba(79,111,156,.12);border-radius:100px;padding:.22rem .6rem;z-index:3}
[data-theme="dark"] .tag{color:#9CC8FF;background:rgba(107,193,255,.14)}

.cta{display:inline-block;background:var(--cta-bg);color:var(--cta-fg);border:0;border-radius:100px;padding:.85rem 1.6rem;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:var(--cta-shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cta:hover{transform:translateY(-2px)}

.btn-yes{background:var(--neon-ink);color:#fff;border:0;border-radius:100px;font-weight:600;box-shadow:var(--btn-shadow);transition:transform .25s var(--ease)}
.btn-yes:hover{transform:translateY(-2px)}
[data-theme="dark"] .btn-yes{color:#06101F}
.btn-alt{background:transparent;border:1px solid var(--line-strong);border-radius:100px;font-weight:500;color:var(--ink-2);transition:border-color var(--dur-fast),color var(--dur-fast)}
.btn-alt:hover{color:var(--ink);border-color:var(--ink-3)}

/* scroll fade-up (#8) — één IntersectionObserver in js/reveal.js */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}

/* ---- footer ---- */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:1.6rem clamp(1.2rem,4vw,2rem);max-width:1180px;margin:0 auto;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--ink-3)}
footer a{color:var(--ink-3)}
footer a:hover{color:var(--ink)}
footer .wordmark{font-size:.95rem}
footer .foot-links{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:560px){footer .foot-links{margin-left:0}}

/* ---- reduced motion: betekenis blijft, beweging niet ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glow.a,.glow.b,.glow.c{animation:none}
  .rv{transition:none;opacity:1;transform:none}
  .cta,.navcta,.btn-yes,.btn-alt{transition:none}
  .cta:hover,.navcta:hover,.btn-yes:hover{transform:none}
}