.sc-placeholder { background: color-mix(in srgb, currentcolor 8%, transparent); border: 1px solid color-mix(in srgb, currentcolor, transparent); border-radius: 2px; box-sizing: border-box; overflow: hidden; }
@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html.sc-dc-streaming .sc-placeholder, html.sc-dc-streaming .sc-interp.sc-missing { position: relative; background: color-mix(in srgb, currentcolor 5%, transparent); border-color: transparent; }
html.sc-dc-streaming .sc-placeholder::before, html.sc-dc-streaming .sc-interp.sc-missing::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(90deg, rgba(217, 119, 87, 0) 25%, rgba(247, 225, 211, 0.95) 37%, rgba(217, 119, 87, 0) 63%) 0% 0% / 400% 100%; animation: 1.4s ease 0s infinite normal none running sc-shine; }
html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before { animation: auto ease 0s 1 normal none running none; background: color-mix(in srgb, currentcolor 8%, transparent); }
.sc-placeholder-error { padding: 4px 8px; font: 11px / 1.4 ui-monospace, monospace; color: color-mix(in srgb, currentcolor 70%, transparent); word-break: break-word; }
.sc-interp.sc-missing { display: inline-block; width: 2em; height: 1em; overflow: hidden; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; box-sizing: border-box; color: transparent; user-select: none; }
.sc-interp.sc-unresolved { font-family: ui-monospace, monospace; font-size: 0.85em; color: color-mix(in srgb, currentcolor, transparent); background: color-mix(in srgb, currentcolor 10%, transparent); border-radius: 3px; padding: 0px 3px; }
.sc-host.sc-has-error { position: relative; }
.sc-logic-error { position: absolute; top: 8px; left: 8px; z-index: 2147483647; max-width: 60ch; padding: 6px 10px; background: rgb(176, 0, 32); color: rgb(255, 255, 255); font: 12px / 1.4 ui-monospace, monospace; border-radius: 4px; white-space: pre-wrap; pointer-events: none; }
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { -webkit-print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
x-dc { display: none !important; }
.scp0:hover { color: rgb(255, 255, 255) !important; }
.scp1:hover { transform: translateY(-2px) !important; box-shadow: rgba(99, 102, 241, 0.45) 0px 8px 24px !important; color: rgb(255, 255, 255) !important; }
.scp2:hover { transform: translateY(-2px) !important; box-shadow: rgba(255, 255, 255, 0.45) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 12px 28px !important; }
.scp3:hover { transform: translateY(-6px) !important; box-shadow: rgba(23, 22, 29, 0.1) 0px 24px 48px !important; }
.scp4:hover { transform: translateY(-8px) !important; }
.scp5:hover { background: rgb(23, 22, 29) !important; color: rgb(255, 255, 255) !important; }
.scp6:hover { transform: translateY(-2px) !important; box-shadow: rgba(99, 102, 241, 0.5) 0px 12px 28px !important; color: rgb(255, 255, 255) !important; }
.scp7:hover { transform: rotate(0deg) translateY(-6px) !important; }
html, body { height: 100%; margin: 0px; }
#dc-root, #dc-root > .sc-host { height: 100%; }
body { margin: 0px; background: rgb(12, 11, 20); font-family: "Hanken Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: rgb(99, 102, 241); text-decoration: none; }
a:hover { color: rgb(75, 78, 224); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(45deg); }
@keyframes floaty { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes floaty2 { 
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes glowdrift { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.15); }
}
@keyframes marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes stripes { 
  0% { background-position: 0px 0px; }
  100% { background-position: 56px 0px; }
}
@media (max-width: 1100px) {
  [data-float] { display: none; }
}
@keyframes shimmer { 
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes pulsering { 
  0% { box-shadow: rgba(99, 102, 241, 0.35) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(99, 102, 241, 0) 0px 0px 0px 14px; }
  100% { box-shadow: rgba(99, 102, 241, 0) 0px 0px 0px 0px; }
}
@keyframes bob { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
#om-progress { position: fixed; top: 0px; left: 0px; height: 3px; width: 0px; z-index: 99; background: linear-gradient(90deg, rgb(99, 102, 241), rgb(74, 222, 222)); box-shadow: rgba(99, 102, 241, 0.7) 0px 0px 12px; transition: width 0.1s linear 0s; }
[data-shine] { position: relative; overflow: hidden; }
[data-shine]::after { content: ""; position: absolute; top: 0px; bottom: 0px; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-120%) skewX(-18deg); }
[data-shine]:hover::after { animation: 0.85s ease 0s 1 normal none running shimmer; }
[data-card] { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0s, box-shadow 0.35s ease 0s, border-color 0.35s ease 0s; }
[data-card][data-active="1"] { transform: translateY(-8px); box-shadow: rgba(99, 102, 241, 0.18) 0px 28px 56px; border-color: rgb(201, 202, 248); }
[data-card][data-active="1"] [data-icon] { animation: 1.6s ease-in-out 0s infinite normal none running bob; }
[data-tilt] { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0s; will-change: transform; }
@media (max-width: 860px) {
  [data-videogrid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  [data-reveal] > figure[style*="float"] { float: none !important; width: 200px !important; margin: 0px auto 22px !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: auto ease 0s 1 normal none running none !important; }
}
/* Taalwisselaar -- toevoeging op het ontwerp, want de site spreekt vijf talen. */
.lang-switcher { position: relative; }
.lang-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #b9b8c6; font-family: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: color .2s, border-color .2s; }
.lang-btn:hover { color: #ffffff; border-color: rgba(255,255,255,0.28); }
.lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; background: #17161d; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 6px; z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.lang-dropdown.open { display: block; }
.lang-dropdown a { display: block; padding: 9px 12px; border-radius: 10px; color: #b9b8c6; font-size: 14px; }
.lang-dropdown a:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
.lang-dropdown a[aria-current="true"] { color: #ffffff; font-weight: 700; }


/* Mobiele balk -- toevoeging op het ontwerp, dat op één breedte getekend is.
   Onder 860px gaan de vijf paginalinks en de knop naar een uitklapmenu; de
   taalknop blijft in de balk staan. Kleur, afronding, blur en tijdcurve zijn
   die van de site: indigo 99,102,241, ondergrond 12,11,20, afronding 32 en
   de curve van de reveal-animatie. */
.nav-open-btn { display: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.nav-open-btn:hover { border-color: rgba(255,255,255,0.28); }
.nav-open-btn span { display: block; width: 17px; height: 2px; border-radius: 2px; background: #b9b8c6; transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease, background .2s ease; }
.nav-open-btn[aria-expanded="true"] span { background: #ffffff; }
.nav-open-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-open-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobiel-menu { position: fixed; left: 0; right: 0; top: 88px; z-index: 49; display: none; overflow-y: auto; background: rgba(12,11,20,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 0 0 32px 32px; padding: 10px 16px 20px; box-shadow: rgba(0,0,0,0.5) 0px 24px 48px; opacity: 0; transform: translateY(-14px); transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
.mobiel-menu nav { display: grid; gap: 4px; }
.mobiel-menu.open { opacity: 1; transform: translateY(0); }
.mobiel-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 14px; color: #b9b8c6; font-size: 16px; font-weight: 600; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mobiel-menu a:hover, .mobiel-menu a:focus-visible { background: rgba(255,255,255,0.07); color: #ffffff; }
.mobiel-menu a span[aria-hidden] { color: #6366F1; font-weight: 700; }
.mobiel-menu .mobiel-cta { justify-content: center; margin-top: 10px; padding: 14px; border-radius: 999px; background: #6366F1; color: #ffffff; font-weight: 700; }
.mobiel-menu .mobiel-cta:hover { background: #6366F1; color: #ffffff; transform: translateY(-2px); box-shadow: rgba(99,102,241,0.45) 0px 8px 24px; }
@media (max-width: 860px) {
  nav > div > a { display: none !important; }
  .nav-open-btn { display: flex; }
  .mobiel-menu { display: block; }
}
/* De promovideo groter dan in het ontwerp -- op verzoek, en berekend op de
   hoogte, want een 9:16-video wordt door de hoogte begrensd en niet door de
   breedte. De kolom is 240px in het ontwerp; hieronder 300 op groot scherm
   en 280 als de kolommen onder elkaar staan. De inline breedte van het
   ontwerp wint zonder !important, vandaar. */
[data-videogrid] { grid-template-columns: 300px 1fr !important; }
[data-videogrid] > [data-tilt] { width: 300px !important; }
@media (max-width: 860px) {
  [data-videogrid] { grid-template-columns: 1fr !important; }
  [data-videogrid] > [data-tilt] { width: 280px !important; }
}