:root{
/* Merkkleuren. Blauw en paars bestaan alleen als gradient (The Gradient-Only Rule). */
--bic-ink:#101223;
--bic-blue:#3a86f5;
--bic-purple:#8e44e0;
--bic-ease:cubic-bezier(.22,1,.36,1);
/* Tekstlinkkleur: dezelfde tint als --bic-blue, donkerder. 5.9:1 op mist, waar
   #3a86f5 op 3.30:1 bleef steken en dus onder WCAG 1.4.3 zakte. Terugdraaien
   naar het oude gedrag is één regel: zet deze waarde op #3a86f5. */
--bic-link:#1c63d0;
/* Decoratieve gradient: blobs, scheidingspunten, gradient-tekst en de
   onderstreping. Hier komt geen tekst overheen, dus die blijft op #3a86f5. */
--bic-gradient:linear-gradient(120deg,var(--bic-blue),var(--bic-purple));
/* Interactieve gradient: alles waar witte tekst overheen loopt. Start op
   --bic-link zodat wit tijdens de hele veeg boven 4.5:1 blijft (5.6:1 aan de
   blauwe kant, 5.2:1 aan de paarse). Wit op #3a86f5 haalt maar 3.55:1 en dat
   is een AA-fout op labels van 16px/600. */
--bic-gradient-interactive:linear-gradient(120deg,var(--bic-link),var(--bic-purple));
}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f6fa;color:#101223;font-family:'IBM Plex Sans',sans-serif}
a{color:#101223;text-decoration:none}
a:hover,a:focus-visible{color:var(--bic-link)}
::selection{background:rgba(142,68,224,.25)}
input,textarea,button{font-family:'IBM Plex Sans',sans-serif}

/* --- Klassecontract a11y-sprint ------------------------------------------
   Deze klassen vervangen het `style-hover`-attribuut, dat geen enkele browser
   kent en dus altijd genegeerd werd. Elke hover-regel heeft hier een
   `:focus-visible`-tegenhanger, zodat toetsenbordgebruikers dezelfde
   statusverandering zien als muisgebruikers.

   Let op bij het toepassen: haal de betreffende eigenschappen uit het inline
   `style`-attribuut. Een inline declaratie wint van elke klasseselector, dus
   een achtergebleven `background-size:0% 100%` blokkeert de veeg volledig.
   Eigenschappen die per plek verschillen (grid, lettergrootte, marge) mogen
   gerust inline blijven staan. */

/* Buiten beeld met position:fixed, niet met display:none, want dan is hij niet
   focusbaar. Fixed in plaats van absolute zodat de -9999px geen horizontale
   scrollruimte aanmaakt. */
[data-bic="skip"]{position:fixed;top:0;left:-9999px;z-index:1000;background:var(--bic-ink);color:#fff;padding:12px 20px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.06em}
[data-bic="skip"]:focus{top:8px;left:8px;color:#fff;outline:2px solid var(--bic-ink);outline-offset:2px}

/* Ink-vlak met gradient-veeg. inline-block is nodig, want transform pakt niet
   op een inline element. */
[data-bic="wipe"]{display:inline-block;background-color:var(--bic-ink);color:#fff;padding:16px 32px;font-weight:600;background-image:var(--bic-gradient-interactive);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .45s var(--bic-ease),transform .2s var(--bic-ease)}
[data-bic="wipe"]:hover,[data-bic="wipe"]:focus-visible{background-size:100% 100%;color:#fff;transform:translateY(-2px)}

/* Rijvariant: tragere veeg en de inhoud stapt naar de lezer toe. */
[data-bic="wipe-row"]{color:var(--bic-ink);padding:30px 18px;background-image:var(--bic-gradient-interactive);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s var(--bic-ease),color .25s var(--bic-ease),padding-left .35s var(--bic-ease)}
[data-bic="wipe-row"]:hover,[data-bic="wipe-row"]:focus-visible{background-size:100% 100%;color:#fff;padding-left:30px}

/* Gradient-onderstreping van 0 naar volle breedte. De tekst blijft ink: de
   onderstreping is hier de statusverandering, niet de kleur. */
[data-bic="underline"]{background-image:var(--bic-gradient);background-repeat:no-repeat;background-size:0% 3px;background-position:0 100%;padding-bottom:5px;transition:background-size .4s var(--bic-ease)}
[data-bic="underline"]:hover,[data-bic="underline"]:focus-visible{background-size:100% 3px;color:var(--bic-ink)}

/* Gestreept cijfer dat zich met de gradient vult. */
[data-bic="numeral"]{-webkit-text-stroke:1.5px var(--bic-ink);color:transparent;transition:-webkit-text-stroke-color .3s var(--bic-ease)}
[data-bic="numeral"]:hover,[data-bic="numeral"]:focus-visible{-webkit-text-stroke-color:transparent;background-image:var(--bic-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Tekstlink. border-color volgt de tekstkleur, zodat een onderstreepte variant
   meekleurt; die rand moet dan wel uit CSS komen en niet inline staan. */
[data-bic="link"]{color:var(--bic-ink);transition:color .2s var(--bic-ease),border-color .2s var(--bic-ease)}
[data-bic="link"]:hover,[data-bic="link"]:focus-visible{color:var(--bic-link);border-color:currentColor}

/* Zichtbare focusring op alle interactieve klassen. De veeg alleen is niet
   genoeg: die is niet te onderscheiden van hover. */
[data-bic="wipe"]:focus-visible,[data-bic="wipe-row"]:focus-visible,[data-bic="underline"]:focus-visible,[data-bic="numeral"]:focus-visible,[data-bic="link"]:focus-visible{outline:2px solid var(--bic-ink);outline-offset:3px}

@keyframes morph{0%,100%{border-radius:58% 42% 35% 65% / 55% 38% 62% 45%;transform:rotate(0deg) scale(1)}33%{border-radius:40% 60% 62% 38% / 42% 60% 40% 58%;transform:rotate(8deg) scale(1.06)}66%{border-radius:62% 38% 48% 52% / 38% 55% 45% 62%;transform:rotate(-6deg) scale(.96)}}
@keyframes gradShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spinCW{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinCCW{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes floatY{0%,100%{transform:translateY(-10px)}50%{transform:translateY(12px)}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(26px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
@media (pointer:coarse){[data-cursor]{display:none!important}}

/* Beweging uit, feedback aan. De oude regel zette ook transition:none, waardoor
   kleur- en focusfeedback verdween en bewegingsgevoelige gebruikers juist
   statusinformatie kwijtraakten. transition-property laat de duur en easing van
   het element intact en haalt er alleen de verplaatsende eigenschappen uit. */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition-property:color,background-color,background-size,border-color,opacity!important}
html{scroll-behavior:auto}
[data-bic="wipe"]:hover,[data-bic="wipe"]:focus-visible{transform:none}
[data-bic="wipe-row"]:hover,[data-bic="wipe-row"]:focus-visible{padding-left:18px}
}
@media (max-width:720px){
[data-companion]{z-index:0!important; width:clamp(84px,22vw,130px)!important; opacity:.9; top:26vh!important}
[data-cursor]{display:none!important}
[data-hz]{flex-wrap:wrap}
#diensten a[data-drow]{grid-template-columns:36px 1fr 28px!important;row-gap:2px!important;padding:22px 8px!important}
#diensten a[data-drow] span:nth-child(1){grid-row:1}
#diensten a[data-drow] span:nth-child(2){grid-column:2;grid-row:1}
#diensten a[data-drow] span:nth-child(3){grid-column:2;grid-row:2}
#diensten a[data-drow] span:nth-child(4){grid-column:3;grid-row:1}
[data-blob]{opacity:.35}
}