/* ==========================================================================
   Verkoopsite — stijl "Aurora" (dezelfde richting als de site van Abyco
   Solutions, V2): diep navy met een teal gloed, korrel en raster, glazen
   productkaarten, tellers, een tijdlijn die zich vult bij het scrollen.

   Binnen de CSP: geen externe lettertypen (Inter en Plus Jakarta Sans staan
   in /assets/fonts), geen inline stijl. Wat per element verschilt (de
   vertraging van een animatie, de plek van de lichtvlek) zet site.js via de
   CSSOM; dat staat de CSP wel toe. Zonder JavaScript is alles zichtbaar.
   prefers-reduced-motion zet de beweging uit.
   ========================================================================== */

@font-face{ font-family:"Inter"; src:url("/assets/fonts/inter.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight:600 800; font-style:normal; font-display:swap }

:root{
  --navy:#0B2545; --navy-2:#13315C; --navy-deep:#061530; --teal:#0E9F9A; --teal-d:#0A7F7B; --teal-t:#08736F; --teal-l:#5FD3C9;
  --mint:#E3F4F1; --amber:#F2A541; --koraal:#E26D5A; --koraal-t:#B4483A; --on-koraal:#0B2545; --koraal-gloed:rgba(226,109,90,.55); --ink:#16243A; --grey:#5B6B7B; --paper:#F6FAF9; --line:#D9E6E3;
  --bg:#FFFFFF; --surface:#FFFFFF; --heading:#0B2545; --link:#08736F; --band:#0B2545; --band-ink:#CFE3EA;
  --good:#1F9D62; --warn-t:#8A5300; --bad:#D2493C; --bad-zacht:#FBE7E7; --bad-t:#7A1F1F; --focus:#F2A541;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --text:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:20px; --radius-s:12px;
  --shadow:0 20px 60px -20px rgba(11,37,69,.25);
  --shadow-s:0 6px 20px -8px rgba(11,37,69,.18);
  --wrap:1200px; --hh:68px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
    --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9; --warn-t:#F0A93F; --koraal:#F08A78; --koraal-t:#F59A88;
    --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
    --good:#3DC486; --bad:#F06A5C; --bad-zacht:#3A1A22; --bad-t:#FFD5D0;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
  --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9; --warn-t:#F0A93F; --koraal:#F08A78; --koraal-t:#F59A88;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
  --good:#3DC486; --bad:#F06A5C; --bad-zacht:#3A1A22; --bad-t:#FFD5D0;
}

/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font:400 1.02rem/1.6 var(--text); color:var(--ink); background:var(--bg); overflow-x:clip }
h1,h2,h3,h4{ font-family:var(--display); color:var(--heading); line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800; text-wrap:balance }
h1{ font-size:clamp(2.3rem,4.6vw,3.9rem) }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem) }
h3{ font-size:1.22rem; letter-spacing:-.01em }
h4{ font-size:1.05rem }
p{ margin:0 0 1em }
a{ color:var(--link) }
img,svg{ max-width:100% }
[id]{ scroll-margin-top:96px }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:24px }
.narrow{ max-width:820px }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600 }
.skip:focus{ top:12px }
::selection{ background:var(--teal-l); color:var(--navy) }
.icoon{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none }

/* ---------- scroll-voortgang en lichtvlek bij de muis ---------- */
.progress{ position:fixed; inset:0 auto auto 0; height:3px; width:100%; z-index:70; pointer-events:none; transform-origin:0 50%; transform:scaleX(var(--scroll,0)); background:linear-gradient(90deg,var(--teal),var(--teal-l),var(--koraal)) }
.aura{ position:fixed; z-index:0; width:520px; height:520px; border-radius:50%; pointer-events:none; left:0; top:0; transform:translate(calc(var(--x,-1000px) - 50%),calc(var(--y,-1000px) - 50%)); background:radial-gradient(circle,rgba(95,211,201,.16),transparent 60%); transition:transform .18s var(--ease-out); mix-blend-mode:screen; opacity:0 }
html.js .aura{ opacity:1 }
@media (hover:none){ .aura{ display:none } }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--heading); --been:var(--navy); --strook:var(--koraal); --stip:var(--teal) }
.logo-merk{ width:38px; height:33px; flex:none }
.logo-been{ fill:var(--been) } .logo-strook{ fill:var(--strook) } .logo-stip{ fill:var(--stip) }
.logo-woord{ display:grid; justify-items:center; gap:3px; line-height:1 }
.logo-hoofd{ font:700 1.5rem/1 var(--display); letter-spacing:-.04em }
.logo-hoofd span{ color:var(--koraal) }
.logo-sub{ display:flex; align-items:center; gap:5px; font:600 .54rem/1 var(--display); letter-spacing:.38em; padding-left:.38em; text-transform:uppercase; color:var(--koraal-t) }
.logo-sub::before, .logo-sub::after{ content:""; width:9px; height:1px; background:currentColor }
:root[data-theme="dark"] .logo{ --been:#fff }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo{ --been:#fff } }
.site-footer .logo, .on-dark .site-header:not(.is-scrolled) .logo{ color:#fff; --been:#fff; --strook:#F08A78; --stip:#5FD3C9 }
.site-footer .logo-sub, .on-dark .site-header:not(.is-scrolled) .logo-sub{ color:#F59A88 }
.site-footer .logo-hoofd span, .on-dark .site-header:not(.is-scrolled) .logo-hoofd span{ color:#F08A78 }
.foot-afzender{ font-size:.85rem; color:#94AEBE }

/* ---------- kop ---------- */
.site-header{ position:sticky; top:0; z-index:60; padding:14px 0; transition:padding .35s var(--ease-out) }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px }
.site-header::before{ content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .35s, background .35s; z-index:-1 }
.site-header.is-scrolled{ padding:8px 0 }
.site-header.is-scrolled::before{ border-bottom-color:var(--line); box-shadow:0 10px 30px -20px rgba(11,37,69,.35) }
.on-dark .site-header:not(.is-scrolled)::before{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }
.on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > a, .on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > .sub-btn{ color:#DCE9EF }
.on-dark .site-header:not(.is-scrolled) .theme-btn{ color:#fff; border-color:rgba(255,255,255,.25) }
.on-dark .site-header:not(.is-scrolled) .nav-toggle{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25) }
.main-nav > ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0 }
.main-nav a, .main-nav .sub-btn{ color:var(--ink); text-decoration:none; font:500 .95rem var(--text); padding:10px 12px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; position:relative; white-space:nowrap; background:none; border:0; cursor:pointer }
.main-nav > ul > li > a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; background:var(--teal); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease-out) }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a[aria-current="page"]::after{ transform:scaleX(1) }
.main-nav .has-mega{ display:flex; align-items:center; position:relative }
.main-nav .has-mega > a{ padding-right:2px } .main-nav .has-mega > a::after{ right:2px }
.main-nav .sub-btn{ padding:10px 8px 10px 2px }
.main-nav .sub-btn svg{ width:13px; height:13px; flex:none; transition:transform .3s var(--ease-out) }
.main-nav .has-mega.open .sub-btn svg, .main-nav .has-mega.hold .sub-btn svg, .main-nav .has-mega:hover .sub-btn svg{ transform:rotate(180deg) }
.main-nav .mega{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,10px) scale(.98); width:min(92vw,860px); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 90px -30px rgba(11,37,69,.45); padding:22px; display:grid; grid-template-columns:1.35fr 1fr; gap:22px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out), transform .35s var(--ease-out); z-index:30; transform-origin:top center; color:var(--ink) }
.main-nav .has-mega.open > .mega, .main-nav .has-mega.hold > .mega, .main-nav .has-mega:hover > .mega, .main-nav .has-mega:focus-within > .mega{ opacity:1; pointer-events:auto; transform:translate(-50%,0) }
.mega h3{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 10px }
.mega .items{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.mega .items a{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; padding:10px; border-radius:14px; color:var(--ink); white-space:normal; font:500 .9rem/1.35 var(--text); transition:background .2s, transform .3s var(--ease-out) }
.mega .items a:hover{ background:var(--paper); transform:translateX(4px) }
.mega .items a .ico{ width:40px; height:40px; margin:0; border-radius:11px } .mega .items a .ico .icoon{ width:20px; height:20px }
.mega .items a b{ display:block; font-family:var(--display); color:var(--heading); font-weight:700 } .mega .items a small{ color:var(--grey); font-size:.8rem }
.mega .feat{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-radius:16px; padding:20px; color:#D7E6EC; display:grid; align-content:space-between; gap:14px; position:relative; overflow:hidden }
.mega .feat::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(95,211,201,.45),transparent 65%); filter:blur(10px) }
.mega .feat > *{ position:relative; z-index:1 }
.mega .feat .kicker{ color:var(--teal-l); margin-bottom:8px } .mega .feat .kicker::before{ display:none }
.mega .feat h4{ color:#fff; margin:0 0 .3em; font-size:1.05rem } .mega .feat p{ margin:0; font-size:.86rem }
.mega .feat a{ color:var(--teal-l); padding:0; font-weight:700; display:inline-flex }
.mega .feat .links{ display:grid; gap:6px }
.nav-cta a{ background:var(--koraal); color:var(--on-koraal) !important; font-weight:700; font-family:var(--display); padding:10px 18px; border-radius:999px; margin-left:8px; overflow:hidden }
.nav-cta a::after{ display:none !important }
.nav-cta a::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease-io) }
.nav-cta a:hover::before{ transform:translateX(120%) }
.theme-btn{ width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; margin-left:8px; transition:transform .4s var(--ease-out), background .3s }
.theme-btn:hover{ transform:rotate(30deg); background:var(--paper) }
.theme-btn svg{ width:18px; height:18px }
.theme-btn .moon{ display:none }
:root[data-theme="dark"] .theme-btn .sun{ display:none } :root[data-theme="dark"] .theme-btn .moon{ display:block }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .sun{ display:none } :root:not([data-theme="light"]) .theme-btn .moon{ display:block } }
/* Zonder JavaScript doet de knop niets; dan hoort hij er ook niet te staan. */
html.no-js .theme-btn{ display:none }
.nav-toggle{ display:none }
@media (max-width:980px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 14px; font:600 .92rem var(--text); cursor:pointer; position:relative; z-index:2 }
  .nav-toggle svg{ width:20px; height:20px }
  .main-nav{ position:fixed; inset:0; background:var(--navy-deep); z-index:1; overflow:auto; padding:90px 24px 40px; opacity:0; pointer-events:none; clip-path:circle(0 at calc(100% - 60px) 40px); transition:clip-path .6s var(--ease-io), opacity .3s }
  .main-nav.open{ opacity:1; pointer-events:auto; clip-path:circle(160% at calc(100% - 60px) 40px) }
  /* Zonder JavaScript gaat het menu niet open; dan staat het gewoon onder de kop. */
  html.no-js .nav-toggle{ display:none }
  html.no-js .main-nav{ position:static; opacity:1; pointer-events:auto; clip-path:none; background:none; padding:0; overflow:visible }
  html.no-js .main-nav > ul{ flex-wrap:wrap }
  html.no-js .site-header .wrap{ flex-wrap:wrap }
  html.js .main-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; max-width:560px; margin:0 auto }
  html.js .main-nav > ul > li{ transform:translateY(16px); opacity:0; transition:transform .5s var(--ease-out), opacity .5s; transition-delay:calc(var(--i,0)*50ms + .2s) }
  html.js .main-nav.open > ul > li{ transform:none; opacity:1 }
  html.js .main-nav > ul > li > a, html.js .main-nav > ul > li > .sub-btn{ color:#fff !important; font:700 1.35rem var(--display); letter-spacing:-.02em; padding:12px 8px }
  html.js .main-nav > ul > li > a::after{ display:none }
  .main-nav .has-mega{ flex-wrap:wrap; justify-content:space-between }
  .main-nav .has-mega > a{ flex:1 }
  html.js .main-nav .sub-btn{ width:48px; height:48px; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:0 }
  .main-nav .sub-btn svg{ width:18px; height:18px }
  .main-nav .mega{ position:static; transform:none; width:100%; display:none; grid-template-columns:1fr; gap:14px; padding:6px 0 14px; background:transparent; border:0; box-shadow:none; opacity:1; pointer-events:auto; color:#DCE9EF }
  .main-nav .has-mega.open > .mega{ display:grid; transform:none }
  .main-nav .has-mega:hover > .mega, .main-nav .has-mega:focus-within > .mega{ transform:none }
  .mega h3{ color:var(--teal-l) }
  .mega .items{ grid-template-columns:1fr; gap:2px }
  .mega .items a{ color:#fff; padding:8px 10px; grid-template-columns:1fr; gap:2px }
  .mega .items a .ico{ display:none } .mega .items a b{ color:#fff } .mega .items a small{ color:#9DB6C4 }
  .mega .items a:hover{ background:rgba(255,255,255,.08); transform:none }
  .mega .feat{ display:none }
  html.js .nav-cta a{ display:flex; background:#F08A78; color:var(--navy) !important; justify-content:center; padding:16px !important; margin:10px 0 0 }
  html.js .site-header .logo{ position:relative; z-index:2 }
  html.js .site-header:has(.main-nav.open) .logo{ color:#fff }
  html.js .theme-btn{ margin:14px auto 0; color:#fff !important; border-color:rgba(255,255,255,.3) !important }
}

/* ---------- knoppen ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 1rem var(--display); text-decoration:none; border-radius:999px; padding:15px 26px; border:2px solid transparent; cursor:pointer; line-height:1.2; position:relative; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .4s }
.btn .icoon{ width:18px; height:18px; stroke-width:2.2; transition:transform .3s var(--ease-out) }
.btn:hover .icoon{ transform:translateX(4px) }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); transform:translateX(-130%); transition:transform .7s var(--ease-io) }
.btn:hover::before{ transform:translateX(130%) }
.btn--primary{ background:var(--koraal); color:var(--on-koraal); box-shadow:0 10px 30px -10px var(--koraal-gloed) }
.btn--primary:hover{ background:#EE8371; color:var(--on-koraal); box-shadow:0 18px 40px -12px var(--koraal-gloed); transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn--ghost{ background:transparent; color:var(--heading); border-color:var(--line) }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal-t); transform:translateY(-2px) }
.on-navy .btn--primary{ background:#F08A78; color:var(--navy) }
.on-navy .btn--primary:hover{ background:#FFB3A6; color:var(--navy) }
.on-navy .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(6px) }
.on-navy .btn--ghost:hover{ border-color:#fff; color:#fff }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem }
.link-arrow{ font-weight:700; text-decoration:none; font-family:var(--display); display:inline-flex; align-items:center; gap:6px }
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease-out) }
.link-arrow:hover::after{ transform:translateX(5px) }
.link-arrow:hover{ text-decoration:underline }

/* ---------- secties ---------- */
.section{ padding:96px 0; position:relative }
.section--paper{ background:var(--paper) }
.section--mint{ background:linear-gradient(180deg,var(--mint),color-mix(in srgb,var(--mint) 60%,var(--bg))) }
.on-navy{ background:var(--band); color:var(--band-ink) }
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{ color:#fff }
.on-navy a{ color:var(--teal-l) }
.kicker{ font:700 .78rem/1.2 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-t); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px }
.kicker::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease-out) .1s }
html.no-js .kicker::before, .is-in .kicker::before, .kicker.is-in::before{ transform:scaleX(1) }
.on-navy .kicker{ color:var(--teal-l) }
.lead{ font-size:1.18rem; color:var(--grey); max-width:66ch }
.on-navy .lead{ color:var(--band-ink) }
.section-head{ max-width:800px; margin-bottom:48px }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head.center .lead{ margin-inline:auto }
.section-head.center .kicker::before{ display:none }
.note{ font-size:.86rem; color:var(--grey); margin-top:16px }
.on-navy .note{ color:#A9C3D0 }

/* ---------- verschijnen bij scrollen ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0)*80ms) }
html.js [data-reveal].is-in{ opacity:1; transform:none; filter:none }
html.js .split .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
html.js .split .w > span{ display:inline-block; transform:translateY(125%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i)*55ms) }
html.js .split.is-in .w > span{ transform:none }

/* ---------- held ---------- */
.hero{ position:relative; overflow:hidden; padding:96px 0 110px; background:radial-gradient(120% 90% at 80% 0%,#12386A 0%,var(--navy) 45%,var(--navy-deep) 100%); color:var(--band-ink); isolation:isolate }
.on-dark .hero{ margin-top:calc(-1 * var(--hh)); padding-top:calc(96px + var(--hh)) }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9 }
.aurora{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.75 }
.aurora i{ position:absolute; border-radius:50%; mix-blend-mode:screen }
.aurora i:nth-child(1){ width:55vw; height:55vw; left:-10%; top:-10%; background:radial-gradient(circle,rgba(14,159,154,.55),transparent 65%); animation:drift1 22s ease-in-out infinite alternate }
.aurora i:nth-child(2){ width:45vw; height:45vw; right:-5%; top:10%; background:radial-gradient(circle,rgba(95,211,201,.4),transparent 65%); animation:drift2 26s ease-in-out infinite alternate }
.aurora i:nth-child(3){ width:35vw; height:35vw; left:40%; bottom:-20%; background:radial-gradient(circle,rgba(240,138,120,.3),transparent 65%); animation:drift3 30s ease-in-out infinite alternate }
@keyframes drift1{ to{ transform:translate(12%,18%) scale(1.15) } }
@keyframes drift2{ to{ transform:translate(-15%,12%) scale(.9) } }
@keyframes drift3{ to{ transform:translate(-20%,-25%) scale(1.2) } }
.grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.gridlines{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%) }
.hero .wrap{ position:relative; z-index:2 }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center }
.hero h1{ color:#fff; margin-bottom:.4em; max-width:17ch }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,#F08A78,#FFC9BE 50%,#F08A78); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:shine 6s linear infinite }
@keyframes shine{ to{ background-position:200% 0 } }
.hero .lead{ font-size:1.2rem; max-width:56ch }
.hero--page{ padding:56px 0 72px }
.on-dark .hero--page{ padding-top:calc(56px + var(--hh)) }
.hero--page h1{ font-size:clamp(2rem,4vw,3.1rem); max-width:22ch }
.hero--page .lead{ max-width:62ch; font-size:1.16rem }
.live{ display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); font:600 .8rem var(--text); color:#DCE9EF; margin-bottom:22px; backdrop-filter:blur(8px) }
.live i{ width:9px; height:9px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 0 rgba(95,211,201,.7); animation:pulse 1.8s ease-out infinite }
@keyframes pulse{ to{ box-shadow:0 0 0 12px rgba(95,211,201,0) } }
.rotator{ display:inline-grid; vertical-align:bottom; text-align:left; overflow:hidden; height:1.3em; line-height:1.3; color:#fff; font-weight:600 }
.rotator span{ grid-area:1/1; white-space:nowrap; transform:translateY(110%); opacity:0; transition:transform .7s var(--ease-out), opacity .5s }
.rotator span.is-on{ transform:none; opacity:1 }
.rotator span.is-off{ transform:translateY(-110%); opacity:0 }
html.no-js .rotator span:first-child{ transform:none; opacity:1 }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding:0; list-style:none }
.pills li{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); border-radius:999px; padding:7px 14px; font-size:.86rem; color:#E3F4F1; backdrop-filter:blur(8px) }
.pills li::before{ content:""; width:16px; height:16px; border-radius:50%; flex:none; background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat }

/* Het product in de held: Mijn dag als glazen kaart, met chips eromheen. */
.hero-art{ position:relative; min-height:520px; perspective:1200px }
.orbit{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.orbit-ring{ width:min(80%,450px); aspect-ratio:1; border-radius:50%; border:1px dashed rgba(255,255,255,.15); animation:spin 60s linear infinite }
.orbit-ring.r2{ position:absolute; width:min(58%,330px); border-color:rgba(95,211,201,.25); animation-duration:40s; animation-direction:reverse }
@keyframes spin{ to{ transform:rotate(360deg) } }
.chip{ position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff; font:600 .82rem var(--text); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); z-index:4; max-width:250px }
.chip b{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--teal-l); color:var(--navy); font-size:.75rem; flex:none }
.chip.amber b{ background:var(--amber) }
/* De chips zweven naast de kaart, niet erop: ze mogen geen regel van Mijn dag afdekken. */
.chip--a{ left:0; top:10px; --d:1.4s; --t:7s }
.chip--b{ right:0; top:40px; --d:1.9s; --t:8s }
.chip--c{ left:0; bottom:-34px; --d:2.4s; --t:6.5s }
html.js .chip{ opacity:0; animation:chipin .9s var(--ease-out) forwards, floaty var(--t,7s) ease-in-out infinite; animation-delay:var(--d,0s), calc(var(--d,0s) + .9s) }
@keyframes chipin{ from{ opacity:0; transform:translateY(20px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes floaty{ 50%{ transform:translateY(-10px) } }
.mock{ position:absolute; inset:auto 0 30px auto; width:min(100%,440px); background:#fff; color:#16243A; border-radius:16px; box-shadow:0 50px 100px -30px rgba(0,0,0,.8); overflow:hidden; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg); font-size:.8rem; z-index:3 }
html.js .mock{ opacity:0; animation:mockin 1.2s var(--ease-out) .5s forwards }
@keyframes mockin{ from{ opacity:0; transform:translateY(40px) translateZ(40px) rotateY(-16deg) } to{ opacity:1; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg) } }
.mock-head{ background:#0B2545; color:#D7E6EC; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.mock-head b{ color:#fff; font-family:var(--display); font-size:.98rem; display:block } .mock-head small{ font-size:.7rem }
.mock-score{ display:flex; gap:5px; flex:none }
.mock-score span{ background:rgba(255,255,255,.12); border-radius:999px; padding:2px 8px; font-size:.66rem; color:#fff; font-weight:600; white-space:nowrap }
.mock-list{ list-style:none; margin:0; padding:0 }
.mock-list li{ display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid #D9E6E3 }
html.js .mock-list li{ opacity:0; transform:translateX(-8px); animation:rowin .6s var(--ease-out) forwards; animation-delay:calc(1.1s + var(--i,0)*120ms) }
@keyframes rowin{ to{ opacity:1; transform:none } }
.mock-tijd{ font:700 .8rem var(--display); color:#0B2545; font-variant-numeric:tabular-nums }
.mock-wat b{ font-family:var(--display) }
.mock-wat small{ display:block; color:#5B6B7B; font-size:.7rem; margin-top:1px }
.mock-foot{ padding:9px 16px; font-size:.68rem; color:#5B6B7B; background:#F6FAF9 }
.mock .dot{ font-size:.72rem; color:#16243A }
.stamp{ position:absolute; right:-6px; bottom:-6px; z-index:5; width:100px; height:100px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; align-content:center; text-align:center; font:800 .62rem/1.15 var(--display); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 20px 40px -14px rgba(95,211,201,.8); transform:rotate(-12deg) }
html.js .stamp{ transform:rotate(-12deg) scale(0); animation:stampin .6s cubic-bezier(.34,1.56,.64,1) 2.2s forwards }
@keyframes stampin{ to{ transform:rotate(-12deg) scale(1) } }
.stamp b{ display:block; font-size:1.6rem; letter-spacing:0 }

/* ---------- kerncijfers ---------- */
.stats{ margin-top:-50px; position:relative; z-index:3 }
.stats .wrap > div{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.stat{ padding:28px 26px; border-left:1px solid var(--line); position:relative }
.stat:first-child{ border-left:0 }
.stat b{ display:block; font:800 clamp(2rem,3.4vw,2.8rem)/1 var(--display); color:var(--heading); letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-bottom:8px }
.stat b small{ font-size:.5em; color:var(--teal-t); font-weight:700; margin-left:4px; letter-spacing:0 }
.stat > span{ font-size:.9rem; color:var(--grey) }

/* ---------- lopende band ---------- */
.marquee{ overflow:hidden; padding:26px 0; border-block:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); margin-top:64px }
.marquee ul{ display:flex; gap:56px; list-style:none; margin:0; padding:0; width:max-content; animation:marquee 44s linear infinite }
.marquee:hover ul{ animation-play-state:paused }
.marquee li{ font:700 .95rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:56px; white-space:nowrap }
.marquee li::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- vergelijking ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-s) }
table.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:720px }
table.cmp caption{ text-align:left; padding:14px 18px; color:var(--grey); font-size:.86rem; caption-side:bottom; border-top:1px solid var(--line) }
table.cmp th, table.cmp td{ padding:16px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle }
table.cmp thead th{ font-family:var(--display); font-size:.9rem; color:var(--heading); background:var(--paper) }
table.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink) }
table.cmp tr:last-child th, table.cmp tr:last-child td{ border-bottom:0 }
table.cmp thead th:first-child{ text-align:left }
table.cmp tbody th, table.cmp thead th:first-child{ position:sticky; left:0; z-index:1; background:var(--surface) }
table.cmp thead th:first-child{ background:var(--paper) }
table.cmp .us{ background:var(--mint); position:relative }
table.cmp thead .us{ background:var(--navy); color:#fff }
table.cmp thead .us::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--teal-l); border-radius:12px 12px 0 0; animation:glow 2.4s ease-in-out infinite; pointer-events:none }
@keyframes glow{ 50%{ box-shadow:inset 0 0 0 2px var(--teal-l), 0 0 30px rgba(95,211,201,.5) } }
html.js table.cmp tbody tr{ opacity:0; transform:translateX(-14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i,0)*90ms) }
html.js table.cmp.is-in tbody tr{ opacity:1; transform:none }
.yes,.no,.part{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; text-align:left }
.yes::before,.no::before,.part::before{ content:""; width:20px; height:20px; border-radius:50%; flex:none; background-position:center; background-repeat:no-repeat }
.yes{ color:var(--teal-t) } .yes::before{ background-color:var(--teal-d); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.no{ color:var(--grey) } .no::before{ background-color:var(--line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' stroke='%235B6B7B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") }
.part{ color:var(--warn-t) } .part::before{ background-color:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2.6' fill='%230B2545'/%3E%3C/svg%3E") }

/* ---------- rasters en kaarten ---------- */
.grid{ display:grid; gap:24px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.split-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center }
.card{ --mx:50%; --my:50%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; overflow:hidden }
.card--paper{ background:var(--paper) }
.card--navy{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-color:transparent; color:var(--band-ink) }
.card--navy h3{ color:#fff }
.card h3{ margin-bottom:.4em }
.card p{ color:var(--grey) }
.card--navy p{ color:var(--band-ink) }
.card p:last-child{ margin-bottom:0 }
.card .link-arrow{ display:inline-flex; margin-top:6px }
a.card{ text-decoration:none; color:inherit; display:block }
.card[data-tilt]::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px circle at var(--mx) var(--my),rgba(14,159,154,.14),transparent 45%); opacity:0; transition:opacity .4s }
.card[data-tilt]::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(300px circle at var(--mx) var(--my),var(--teal-l),transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s }
.card[data-tilt]:hover{ box-shadow:var(--shadow); transform:translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) }
.card[data-tilt]:hover::before, .card[data-tilt]:hover::after{ opacity:1 }
.ico{ width:52px; height:52px; border-radius:14px; background:var(--mint); color:var(--teal-t); display:grid; place-items:center; margin-bottom:18px; flex:none; transition:transform .5s var(--ease-out), background .3s, color .3s }
.card[data-tilt]:hover .ico{ transform:translateY(-4px) rotate(-6deg) scale(1.08); background:var(--teal-l); color:var(--navy) }
.ico .icoon{ width:26px; height:26px }
.card--navy .ico{ background:rgba(95,211,201,.14); color:var(--teal-l) }
.tag{ display:inline-block; background:var(--amber); color:var(--navy); font:700 .76rem var(--display); border-radius:999px; padding:3px 11px; margin-bottom:12px; letter-spacing:.02em }
.tag--mint{ background:var(--mint); color:var(--teal-t) }
ul.check{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
ul.check li{ position:relative; padding-left:30px; font-size:.97rem }
ul.check li::before{ content:""; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%; background:var(--teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; transition:transform .5s var(--ease-out); transition-delay:calc(var(--i,0)*70ms + .2s) }
html.js ul.check li::before{ transform:scale(0) }
html.js .is-in ul.check li::before, html.js ul.check.is-in li::before{ transform:scale(1) }
.on-navy ul.check li::before, .card--navy ul.check li::before, .pkg--hl ul.check li::before, .p1 ul.check li::before{ background-color:var(--teal-l); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
ul.check.cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px }

/* ---------- tijdlijn ---------- */
.steps{ --prog:0; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; position:relative }
.steps::before{ content:""; position:absolute; left:0; right:0; top:26px; height:3px; background:var(--line); border-radius:3px }
.steps::after{ content:""; position:absolute; left:0; top:26px; height:3px; width:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--teal-l) 60%,var(--koraal)); transform:scaleX(var(--prog)); transform-origin:0 50%; transition:transform .2s linear }
.steps li{ position:relative; padding-top:70px }
.steps .num{ position:absolute; top:0; left:0; width:54px; height:54px; border-radius:50%; background:var(--surface); border:3px solid var(--line); color:var(--grey); display:grid; place-items:center; transition:background .4s, border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s; z-index:1 }
.steps .num .icoon{ width:24px; height:24px }
html.no-js .steps .num, .steps li.is-active .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
.steps li.is-active .num{ transform:scale(1.1); box-shadow:0 0 0 8px rgba(14,159,154,.15) }
.steps .when{ display:inline-block; font-size:.76rem; font-weight:700; color:var(--teal-t); background:var(--mint); border-radius:999px; padding:3px 10px; margin-bottom:10px }
.steps h3{ font-size:1.04rem } .steps p{ margin:0; font-size:.92rem; color:var(--grey) }
.callout{ border-left:4px solid var(--teal); background:var(--mint); border-radius:0 16px 16px 0; padding:20px 24px; margin:2em 0 0 }
.callout p:last-child{ margin-bottom:0 }

/* ---------- drie vlakken ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.party{ border-radius:var(--radius); padding:32px 28px; position:relative; overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s }
.party:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.party .role{ font:700 .76rem var(--display); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px }
.party h3{ font-size:1.35rem }
.party p{ font-size:.96rem }
.p1{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:#D7E6EC } .p1 h3{ color:#fff } .p1 .role{ color:var(--teal-l) }
.p2{ background:var(--surface); border:1px solid var(--line) } .p2 .role{ color:var(--teal-t) }
.p3{ background:var(--surface); border:2px dashed var(--teal) } .p3 .role{ color:var(--teal-t) }

/* ---------- productfragment: rapport/logboek ---------- */
.report{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.report-head{ background:var(--navy); color:#D7E6EC; padding:18px 22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center }
.report-head b{ color:#fff; font-family:var(--display); font-size:1.02rem; display:block }
.report-head small{ font-size:.8rem }
.report-score{ display:flex; gap:8px; flex-wrap:wrap }
.report-score span{ background:rgba(255,255,255,.1); border-radius:999px; padding:4px 12px; font-size:.8rem; color:#fff }
.report table{ width:100%; border-collapse:collapse; font-size:.9rem }
.report th, .report td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top }
.report thead th{ white-space:nowrap; background:var(--paper); font-family:var(--display); color:var(--heading); font-size:.82rem }
html.js .report tbody tr{ opacity:0; transform:translateX(-10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i,0)*90ms) }
html.js .report.is-in tbody tr{ opacity:1; transform:none }
.report .src{ display:block; color:var(--grey); font-size:.78rem; margin-top:3px }
.report-foot{ padding:12px 18px; font-size:.8rem; color:var(--grey); background:var(--paper) }
.dot{ display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap }
.dot::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--grey) }
.dot--pass::before{ background:var(--good) } .dot--warn::before{ background:var(--amber) } .dot--fail::before{ background:var(--bad) }
.dot--nu::before{ background:var(--teal); box-shadow:0 0 0 0 rgba(14,159,154,.6); animation:pulse 1.8s ease-out infinite }

/* ---------- kioskbord ---------- */
.kiosk-mock{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.kiosk-head{ background:var(--navy); color:#D7E6EC; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px }
.kiosk-head b{ color:#fff; font-family:var(--display); font-size:1.02rem }
.kiosk-head span{ font:700 1.3rem var(--display); color:#fff; font-variant-numeric:tabular-nums }
.kiosk-body{ padding:18px 20px 20px; display:grid; gap:14px }
.kiosk-group p{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 8px }
.kiosk-tiles{ display:flex; flex-wrap:wrap; gap:8px }
.kiosk-tile{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--grey); border-radius:10px; padding:9px 14px; font:700 .95rem var(--display); color:var(--heading) }
.kiosk-tile small{ font:500 .76rem var(--text); color:var(--grey) }
.kiosk-tile--in{ border-left-color:var(--good) }
.kiosk-tile--weg{ border-left-color:var(--teal) }
.kiosk-tile--gast{ border-left-color:var(--amber) }
.kiosk-foot{ padding:12px 20px; font-size:.8rem; color:var(--grey); border-top:1px solid var(--line) }

/* ---------- pakketten ---------- */
.pkgs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.pkg{ border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; background:var(--surface); display:flex; flex-direction:column; position:relative; transition:transform .5s var(--ease-out), box-shadow .5s }
.pkg:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.pkg h3{ font-size:1.5rem; margin-bottom:.2em }
.pkg .for{ color:var(--grey); min-height:3.2em }
.pkg ul.check{ margin:10px 0 18px; font-size:.96rem }
.pkg .result{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.92rem; color:var(--grey) }
.pkg .btn{ margin-top:18px; align-self:flex-start }
.pkg--hl{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:var(--band-ink); border-color:transparent; box-shadow:0 30px 60px -30px rgba(11,37,69,.6); transform:translateY(-10px) }
.pkg--hl:hover{ transform:translateY(-16px) }
.pkg--hl::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,var(--teal-l),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }
.pkg--hl h3{ color:#fff } .pkg--hl .for, .pkg--hl .result{ color:var(--band-ink) } .pkg--hl .result{ border-color:rgba(255,255,255,.18) }
.pkg .tag{ align-self:flex-start }
.levels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.level{ padding:26px; border-left:1px solid var(--line); transition:background .3s }
.level:hover{ background:var(--paper) }
.level:first-child{ border-left:0 }
.level .lvl{ font:800 .8rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--teal-t) }
.level h3{ margin:.3em 0 .4em; font-size:1.12rem }
.level p{ color:var(--grey); font-size:.95rem; margin:0 }

/* ---------- vragen ---------- */
.faq{ display:grid; gap:12px }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 22px; transition:border-color .3s, box-shadow .3s }
.faq details[open]{ border-color:var(--teal); box-shadow:var(--shadow-s) }
.faq summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; font:700 1.04rem/1.35 var(--display); color:var(--heading); position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:2px; top:50%; width:28px; height:28px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2308736F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transform:translateY(-50%); transition:transform .4s var(--ease-out), background-color .3s }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); background-color:var(--teal-l) }
.faq .antwoord{ padding:0 0 18px; color:var(--ink) }
html.js .faq .antwoord{ animation:faqin .5s var(--ease-out) }
@keyframes faqin{ from{ opacity:0; transform:translateY(-6px) } }
.faq .antwoord p:last-child{ margin-bottom:0 }

/* ---------- slotband ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--navy-deep); color:var(--band-ink); border-radius:28px; padding:64px 56px; display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:32px; align-items:center; isolation:isolate }
.cta-band .aurora{ opacity:.9 }
.cta-band > *{ position:relative; z-index:2 }
.cta-band > .aurora, .cta-band > .grain{ position:absolute; z-index:0 }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.35em }
.cta-band p{ margin:0; max-width:52ch; color:var(--band-ink) }
.cta-band .btn-row{ margin-top:0 }

/* ---------- formulier ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:start }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow) }
.form{ display:grid; gap:20px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field{ display:grid; gap:6px; align-content:start; min-width:0 }
.field > label, .field-legend{ font-weight:600; font-size:.95rem; color:var(--heading) }
.optional{ font-weight:400; color:var(--grey); font-size:.85rem }
.hint{ font-size:.84rem; color:var(--grey); margin:0 }
.field input, .field select, .field textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid #9FB3B0; border-radius:12px; padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .3s }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--teal) }
.field textarea{ min-height:140px; resize:vertical }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--teal-d); box-shadow:0 0 0 4px rgba(14,159,154,.12) }
.field [aria-invalid="true"]{ border-color:var(--bad) }
.field-error{ color:var(--bad); font-size:.86rem; font-weight:600; margin:0 }
fieldset.field{ border:0; padding:0; margin:0 }
fieldset.field > legend{ padding:0; margin-bottom:8px }
.seg{ display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--mint); border-radius:999px; padding:4px; justify-self:start }
.seg label{ position:relative; cursor:pointer }
.seg input, .chips input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.seg span{ display:inline-block; padding:9px 18px; border-radius:999px; font:600 .9rem var(--text); color:var(--ink); transition:background .25s, color .25s }
.seg input:checked + span{ background:var(--teal-d); color:#fff }
.seg input:focus-visible + span, .chips input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px }
.chips-kop{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:10px 0 8px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips label{ position:relative; cursor:pointer }
.chips span{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.88rem; font-weight:600; color:var(--ink); background:var(--surface); transition:background .2s, color .2s, border-color .2s, transform .3s var(--ease-out) }
.chips span::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid #9FB3B0; flex:none; transition:background .2s, border-color .2s }
.chips label:hover span{ border-color:var(--teal); transform:translateY(-2px) }
.chips input:checked + span{ background:var(--mint); border-color:var(--teal); color:var(--teal-t) }
.chips input:checked + span::before{ background:var(--teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; border-color:var(--teal-d) }
.check-field{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem; font-weight:400 }
.check-field input{ width:20px; height:20px; margin-top:2px; accent-color:var(--teal-d); flex:none }
.honing{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.alert{ border-radius:12px; padding:16px 18px; margin:0 0 22px; border-left:4px solid var(--amber); background:var(--mint) }
.alert--error{ background:var(--bad-zacht); border-left-color:var(--bad); color:var(--bad-t) }
.alert--error a{ color:inherit }
.form .btn{ justify-self:start }
.aside-card{ position:sticky; top:96px; display:grid; gap:18px }
.aside-card .card{ padding:26px }
.aside-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:stap }
.aside-steps li{ display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; counter-increment:stap; font-size:.95rem }
.aside-steps li::before{ content:counter(stap); width:34px; height:34px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; font:800 .9rem var(--display) }
.aside-steps b{ display:block; font-family:var(--display); color:#fff }

/* ---------- lopende tekst ---------- */
.prose{ max-width:72ch; font-size:1.05rem }
.prose h2{ font-size:1.5rem; margin-top:1.8em }
.prose h2:first-child{ margin-top:0 }
.prose a{ font-weight:600 }

/* ---------- voet ---------- */
.site-footer{ background:var(--navy-deep); color:#B9CFDB; padding:80px 0 28px; font-size:.93rem; position:relative; overflow:hidden }
.site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--teal-l),transparent) }
.site-footer a{ color:#E3F4F1; text-decoration:none; transition:color .2s, padding-left .3s var(--ease-out) }
.site-footer a:hover{ color:var(--teal-l); padding-left:4px }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:36px }
.foot-grid h2{ color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot-brand p{ margin:16px 0 18px; max-width:36ch }
.site-footer .foot-brand .logo:hover{ padding-left:0 }
.foot-contact{ display:grid; gap:4px; font-style:normal }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:.82rem; color:#94AEBE }
.foot-bottom p{ margin:0 }
.big-mark{ font:800 clamp(4rem,17vw,14rem)/0.8 var(--display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); user-select:none; pointer-events:none; text-align:center; margin:56px 0 -36px; white-space:nowrap }

/* ---------- terug naar boven ---------- */
.totop{ position:fixed; right:22px; bottom:22px; z-index:65; width:50px; height:50px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity .4s, transform .4s var(--ease-out); box-shadow:var(--shadow); pointer-events:none }
.totop.is-on{ opacity:1; transform:none; pointer-events:auto }
html.no-js .totop{ display:none }
.totop .arrow{ width:20px; height:20px }
.totop .ringsvg{ position:absolute; inset:0; width:100%; height:100% }
.totop circle{ fill:none; stroke:var(--teal-l); stroke-width:2; stroke-dasharray:150; stroke-dashoffset:calc(150 - 150*var(--scroll,0)); transform:rotate(-90deg); transform-origin:center }

/* ---------- 404 ---------- */
.error-code{ font:800 clamp(4rem,14vw,8rem)/1 var(--display); color:var(--teal-l); margin:0 0 10px; letter-spacing:-.05em }

/* ---------- held: vloeiend licht (WebGL) ---------- */
.hero canvas.vloei{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1 }
.hero.heeft-vloei .aurora{ opacity:.2 }

/* ---------- echte schermen in een kader ---------- */
.browser{ position:relative; border-radius:14px; background:#0E2544; padding-top:28px; overflow:hidden; box-shadow:0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) }
.browser::before{ content:""; position:absolute; left:14px; top:10px; width:8px; height:8px; border-radius:50%; background:#F08A78; box-shadow:14px 0 0 #F2A541, 28px 0 0 #5FD3C9 }
.browser img{ display:block; width:100%; height:auto }
.phone{ position:relative; border-radius:34px; padding:7px; background:#061530; box-shadow:0 40px 80px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12) }
.phone img{ display:block; width:100%; height:auto; border-radius:27px }
.beeld-noot{ font-size:.8rem; color:#A9C3D0; margin:14px 0 0 }

/* ---------- held: podium met dashboard en telefoon ---------- */
.hero-stage{ position:relative; min-height:540px; perspective:1400px }
.hero-stage .browser{ position:absolute; top:24px; left:70px; width:min(740px,122%); transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-origin:left center }
.hero-stage .phone{ position:absolute; left:-56px; bottom:-8px; width:188px; transform:rotateY(-8deg) rotateX(4deg) translateZ(90px) }
.hero-stage .chip--a{ left:auto; right:-4px; top:-6px }
.hero-stage .chip--c{ left:150px; bottom:20px }
html.js .hero-stage .browser{ opacity:0; animation:podium-in 1.3s var(--ease-out) .35s forwards }
html.js .hero-stage .phone{ opacity:0; animation:telefoon-in 1.2s var(--ease-out) .8s forwards }
@keyframes podium-in{ from{ opacity:0; transform:translateY(60px) rotateY(-24deg) rotateX(10deg) } to{ opacity:1; transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg) } }
@keyframes telefoon-in{ from{ opacity:0; transform:translateY(80px) rotateY(-8deg) translateZ(90px) } to{ opacity:1; transform:rotateY(-8deg) rotateX(4deg) translateZ(90px) } }

/* ---------- rondleiding: de keten, scherm voor scherm ---------- */
.tour{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:64px; align-items:start }
.tour-stappen{ list-style:none; margin:0; padding:0 }
.tour-stap{ min-height:64vh; display:grid; align-content:center; gap:10px; padding:24px 0; opacity:.28; transition:opacity .5s var(--ease-out) }
.tour-stap.is-actief{ opacity:1 }
html.no-js .tour-stap{ opacity:1 }
.tour-stap h3{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 }
.tour-stap p{ color:var(--grey); font-size:1.06rem; margin:0; max-width:44ch }
.tour-stap .when{ justify-self:start }
.tour-beeld{ position:sticky; top:calc(var(--hh) + 8vh); aspect-ratio:1440/930 }
.tour-dia{ position:absolute; inset:0; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .6s var(--ease-out), transform .8s var(--ease-out) }
.tour-dia.is-aan{ opacity:1; transform:none }
html.no-js .tour-dia:first-child{ opacity:1; transform:none }
.tour-dia--telefoon{ display:grid; place-items:center; background:radial-gradient(60% 70% at 50% 50%,rgba(95,211,201,.18),transparent 70%); border-radius:20px }
.tour-dia--telefoon .phone{ width:34% }
.tour-mobiel{ display:none }
.tour-balk{ position:absolute; left:0; right:0; bottom:-28px; height:3px; border-radius:3px; background:var(--line); overflow:hidden }
.tour-balk i{ display:block; height:100%; width:calc(var(--stap,1) / 6 * 100%); background:linear-gradient(90deg,var(--teal),var(--koraal)); transition:width .5s var(--ease-out) }

/* Stappen als knoppen: de stap die bij het scrollen het laatst oplicht (of waarop is geklikt) toont zijn scherm. */
.stap-knop{ display:block; width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer }
.stap-knop:focus-visible{ outline:none }
.stap-knop:focus-visible .num{ outline:3px solid var(--focus); outline-offset:3px }
.stap-knop:hover .num{ border-color:var(--teal) }
.stap-titel{ display:block; font:800 1.04rem/1.25 var(--display); color:var(--heading); letter-spacing:-.01em; margin:0 0 .4em }
.steps li.is-huidig .num, html.js .steps li.is-huidig .num{ background:var(--koraal); border-color:#FFC9BE; color:var(--on-koraal); transform:scale(1.15); box-shadow:0 0 0 8px rgba(226,109,90,.18) }
.steps li.is-huidig .stap-titel{ color:var(--koraal-t) }
.steps[data-stappen]::after{ transition:transform .7s var(--ease-out) }
.stap-scherm{ position:relative; max-width:1000px; margin:64px auto 0; aspect-ratio:1440/930 }
html.no-js .stap-scherm .tour-dia:first-child{ opacity:1; transform:none }

/* ---------- uitspraak die oplicht bij het lezen ---------- */
.statement{ padding:120px 0 }
.statement p{ font:800 clamp(2rem,5vw,4rem)/1.08 var(--display); letter-spacing:-.03em; color:var(--heading); max-width:21ch; margin:0; text-wrap:balance }
.statement em{ font-style:normal; color:var(--koraal-t) }
@supports (animation-timeline: view()){
  html.js .statement .wl{ animation:oplichten linear both; animation-timeline:view(); animation-range:entry 0% cover 42% }
}
@keyframes oplichten{ from{ opacity:.13 } to{ opacity:1 } }

/* ---------- bento: meer dan een dossier ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px }
.bento-cel{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); padding:28px; display:flex; flex-direction:column; gap:8px; isolation:isolate; min-height:230px; transition:box-shadow .5s var(--ease-out), border-color .3s }
.bento-cel:hover{ box-shadow:var(--shadow) }
.bento-cel h3{ font-size:1.25rem; margin:0 }
.bento-cel p{ color:var(--grey); margin:0; max-width:42ch }
.b-breed{ grid-column:span 4 } .b-smal{ grid-column:span 2 } .b-half{ grid-column:span 3 }
.bento-beeld{ margin:auto -28px -28px; padding:22px 28px 0 }
.bento-beeld img{ display:block; width:100%; height:auto; border-radius:12px 12px 0 0; box-shadow:0 20px 50px -20px rgba(11,37,69,.45); transition:transform .7s var(--ease-out) }
.bento-cel:hover .bento-beeld img{ transform:translateY(-6px) }
.bento-telefoon{ width:74%; max-width:250px; margin:auto auto -110px }
.b-navy{ background:radial-gradient(120% 100% at 85% 0%,#13315C,var(--navy) 50%,var(--navy-deep)); border-color:transparent; color:var(--band-ink) }
.b-navy h3{ color:#fff } .b-navy p{ color:var(--band-ink) }
.b-koraal{ background:linear-gradient(150deg,#F49A89,#E26D5A); border-color:transparent; color:var(--navy); justify-content:space-between }
.b-koraal h3, .b-koraal p{ color:var(--navy) }
.bento-getal{ font:800 clamp(3.4rem,6vw,5rem)/.9 var(--display); letter-spacing:-.05em; font-variant-numeric:tabular-nums }

@media (max-width: 980px){
  .hero-stage{ min-height:0; padding:56px 0 40px }
  .hero-stage .browser{ position:relative; inset:auto; width:100%; transform:none }
  html.js .hero-stage .browser{ animation-name:plat-in }
  .hero-stage .phone{ position:absolute; left:auto; right:-6px; bottom:0; width:120px; transform:none }
  html.js .hero-stage .phone{ animation-name:plat-in }
  @keyframes plat-in{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .hero-stage .chip--a{ right:0; top:0 } .hero-stage .chip--c{ display:none }
  .tour{ grid-template-columns:minmax(0,1fr); gap:0 }
  .tour-beeld{ display:none }
  .tour-stap{ min-height:0; opacity:1; padding:28px 0; border-top:1px solid var(--line) }
  .tour-mobiel{ display:block; margin-top:14px }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .b-breed, .b-half{ grid-column:span 2 } .b-smal{ grid-column:span 1 }
}
@media (max-width: 680px){
  .bento{ grid-template-columns:minmax(0,1fr) }
  .b-breed, .b-half, .b-smal{ grid-column:span 1 }
  .statement{ padding:72px 0 }
}

/* ---------- responsief ---------- */
@media (max-width: 1100px){
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:36px }
  .steps::before, .steps::after{ display:none }
  html.js .steps .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
  .foot-grid{ grid-template-columns:1fr 1fr 1fr } .foot-brand{ grid-column:1 / -1 }
}
@media (max-width: 980px){
  .hero-grid, .split-2, .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .hero-art{ min-height:0; padding-top:64px }
  .orbit{ display:none }
  .mock{ position:relative; inset:auto; margin:0 0 0 auto; transform:none }
  html.js .mock{ animation-name:mockin-plat }
  @keyframes mockin-plat{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .chip--a{ top:0 } .chip--b{ display:none } .chip--c{ left:0; bottom:-30px }
  .hero-art{ padding-bottom:28px }
  .stats .wrap > div{ grid-template-columns:1fr 1fr } .stat:nth-child(3){ border-left:0 } .stat:nth-child(n+3){ border-top:1px solid var(--line) }
  .g3, .g4, .tri, .pkgs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .levels{ grid-template-columns:1fr 1fr } .level:nth-child(3){ border-left:0 } .level:nth-child(n+3){ border-top:1px solid var(--line) }
  .cta-band{ grid-template-columns:minmax(0,1fr); padding:44px 32px }
  .pkg--hl{ transform:none } .pkg--hl:hover{ transform:translateY(-6px) }
  .aside-card{ position:static }
}
@media (max-width: 680px){
  body{ font-size:15.5px } .wrap{ padding-inline:16px }
  .section{ padding:64px 0 }
  .hero{ padding:56px 0 80px } .on-dark .hero{ padding-top:calc(56px + var(--hh)) }
  .hero--page{ padding:36px 0 48px } .on-dark .hero--page{ padding-top:calc(36px + var(--hh)) }
  .g2, .g3, .g4, .steps, .tri, .pkgs, .levels, .two, ul.check.cols{ grid-template-columns:minmax(0,1fr) }
  .level{ border-left:0 !important; border-top:1px solid var(--line) } .level:first-child{ border-top:0 }
  .stats .wrap > div{ grid-template-columns:1fr 1fr }
  .stat{ padding:22px 18px }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .card, .form-card{ padding:22px }
  .btn-row .btn{ width:100% }
  .mock{ width:100%; font-size:.74rem } .mock-list li{ grid-template-columns:40px minmax(0,1fr) auto; padding:10px 12px }
  .stamp{ width:84px; height:84px; right:-4px } .stamp b{ font-size:1.3rem }
  .chip{ font-size:.76rem; max-width:220px }
  .report th:nth-child(3), .report td:nth-child(3){ display:none }
  .cta-band{ padding:36px 22px; border-radius:22px }
  .seg{ border-radius:16px }
  .aura{ display:none }
}

/* ---------- afdrukken ---------- */
@media print{
  .site-header, .site-footer, .skip, .btn-row, .nav-toggle, .progress, .aura, .totop, .marquee, canvas, .aurora, .grain, .gridlines, .hero-art{ display:none !important }
  body{ font-size:11pt; color:#000; background:#fff }
  .section, .hero{ padding:16px 0; margin:0 }
  .on-navy, .hero{ background:#fff !important; color:#000 }
  .on-navy h1, .on-navy h2, .on-navy h3, .hero h1{ color:#0B2545 }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr{ opacity:1 !important; transform:none !important; filter:none !important }
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr, html.js .chip, html.js .mock, html.js .mock-list li, html.js .stamp{ opacity:1; transform:none; filter:none }
  html.js .stamp{ transform:rotate(-12deg) }
  html.js ul.check li::before{ transform:scale(1) }
  .rotator span{ opacity:1; transform:none } .rotator span:not(.is-on){ display:none }
  .aurora i, .aura, .marquee ul, .orbit-ring{ animation:none }
  .kicker::before{ transform:scaleX(1) }
  html.js .statement .wl{ animation:none; opacity:1 }
  html.js .hero-stage .browser, html.js .hero-stage .phone{ opacity:1 }
  .tour-dia{ transition:none }
}