:root {
  --bg: #121017;
  --tile: #1B1823;
  --tile-hi: #221E2C;
  --edge: #2E2939;
  --hover-edge: #3D374B;
  --track: #2A2534;
  --text: #F2EDE3;
  --dim: #A79FB3;
  --faint: #6F6880;
  --amber: #F0A63C;
  --amber-text: #F0A63C;
  --amber-ink: #201500;
  --violet: #8B7BD8;
  --good: #6FBF8E;
  --mark-from: #FFFFFF;
  --overlay: rgba(18,16,23,.97);
  --live-edge: rgba(240,166,60,.35);
  --glow-a: rgba(240,166,60,.14);
  --glow-b: rgba(139,123,216,.12);
  --face-v-bg: #3A3145; --face-v-fg: #8B7BD8;
  --face-a-bg: #40332A; --face-a-fg: #F0A63C;
  --face-g-bg: #2C3A33; --face-g-fg: #6FBF8E;
  --sk-grad: #332D40;
  color-scheme: dark;
}
/* Dark-only: het light-thema is op verzoek uitgezet (2026-07-14).
   De light-tokens staan in de git-historie mocht je ze terug willen. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ambient stage lights */
.glow { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.glow.a { width: 60vmax; height: 60vmax; top: -28vmax; left: -18vmax; background: radial-gradient(circle, var(--glow-a), transparent 65%); animation: drift-a 46s ease-in-out infinite alternate; }
.glow.b { width: 55vmax; height: 55vmax; bottom: -30vmax; right: -20vmax; background: radial-gradient(circle, var(--glow-b), transparent 65%); animation: drift-b 58s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(9vmax, 6vmax); } }
@keyframes drift-b { to { transform: translate(-8vmax, -7vmax); } }

.page { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 26px 22px 72px; }

.mono { font-family: "IBM Plex Mono", monospace; }

/* header */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 40;
  margin: -26px calc(50% - 50vw) 0;
  padding: 12px max(22px, calc(50vw - 538px));
  background: rgba(16,14,20,.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.mark {
  font-size: 26px; line-height: 1; font-weight: 700; user-select: none;
  background: linear-gradient(135deg, var(--mark-from) 40%, var(--amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wordmark { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .dot { color: var(--amber-text); }
.topnav { display: flex; align-items: center; gap: 26px; }
.topnav a.navlink {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  transition: color .15s ease;
}
.topnav a.navlink:hover { color: var(--text); }
.chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--edge);
  color: var(--dim);
  padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}
.chip .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 7px; vertical-align: 1px; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(240,166,60,.5);} 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(240,166,60,0);} }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--edge); border-radius: 12px;
  color: var(--text); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--hover-edge); background: var(--tile); }
.menu-toggle { display: none; }

/* fullscreen menu (mobiel) */
.fsmenu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  padding: 26px 22px;
  opacity: 0;
  transition: opacity .22s ease;
}
.fsmenu.show { opacity: 1; }
.fsmenu[hidden] { display: none; }
.fsmenu-top { display: flex; align-items: center; justify-content: space-between; }
.fsmenu-links { display: grid; gap: 8px; margin: auto 0; }
.fsmenu-links a {
  font-family: "Anton", "Archivo", sans-serif;
  font-size: clamp(38px, 10vw, 56px);
  text-transform: uppercase;
  color: var(--text); text-decoration: none;
  line-height: 1.15;
  padding: 6px 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, color .15s ease;
}
.fsmenu.show .fsmenu-links a { opacity: 1; transform: none; }
.fsmenu.show .fsmenu-links a:nth-child(1) { transition-delay: .05s; }
.fsmenu.show .fsmenu-links a:nth-child(2) { transition-delay: .11s; }
.fsmenu.show .fsmenu-links a:nth-child(3) { transition-delay: .17s; }
.fsmenu.show .fsmenu-links a:nth-child(4) { transition-delay: .23s; }
.fsmenu-links a:hover { color: var(--amber-text); }
.fsmenu-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.fsmenu-foot .lang-foot .lf-opt { background: rgba(16,14,21,.5); }
.fsmenu-foot .lang-foot .lf-opt.is-actief { background: rgba(240,166,60,.16); }

/* hero: het donkere podium met de spotlight */
.hero { padding: 22px 0 56px; }
.hero-stage {
  position: relative;
  border-radius: 22px;
  border: 1px solid #2E2939;
  overflow: hidden;
  background: #0E0C12;
  min-height: 76vh;
  display: grid;
  align-content: center;
  padding: clamp(40px, 6vw, 88px);
}
.hero-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.85) contrast(1.06) brightness(.85);
}
.stage-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(240,166,60,.26), rgba(18,16,23,.10) 45%, rgba(139,123,216,.24));
  mix-blend-mode: overlay;
}
.stage-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(10,9,14,.88);
  -webkit-mask-image: radial-gradient(circle 340px at var(--sx, 72%) var(--sy, 42%), transparent 0 36%, #000 78%);
  mask-image: radial-gradient(circle 340px at var(--sx, 72%) var(--sy, 42%), transparent 0 36%, #000 78%);
}
.stage-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 340px at var(--sx, 72%) var(--sy, 42%), rgba(240,166,60,.16), transparent 62%);
  mix-blend-mode: screen;
}
.hero-copy { position: relative; z-index: 2; max-width: 680px; min-width: 0; }

/* fullscreen podium op desktop (alleen homepage) */
@media (min-width: 861px) {
  .home { padding-top: 0; }
  .home .top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    width: auto; margin: 0;
    padding: 14px max(22px, calc(50vw - 538px));
    background: rgba(14,12,18,.62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(46,41,57,.5);
  }
  .home .top .wordmark { color: #F2EDE3; }
  .home .top .wordmark .dot { color: #F0A63C; }
  .home .top .mark { background: linear-gradient(135deg, #FFFFFF 40%, #F0A63C); -webkit-background-clip: text; background-clip: text; }
  .home .topnav a.navlink { color: rgba(242,237,227,.72); }
  .home .topnav a.navlink:hover { color: #FFFFFF; }
  .home .chip { border-color: rgba(242,237,227,.28); color: rgba(242,237,227,.78); }
  .home .hero { padding: 0 0 64px; }
  .home .hero-stage {
    width: 100vw; margin-left: calc(50% - 50vw);
    border: none; border-radius: 0;
    min-height: 100svh;
    padding: 0 max(22px, calc(50vw - 560px));
  }
}

/* basistypografie (sitebreed) */
.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber-text); margin: 0 0 18px;
}
h1 {
  font-family: "Anton", "Archivo", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(52px, 8.5vw, 100px);
  line-height: .94;
  letter-spacing: .004em;
  margin: 0 0 24px;
  text-wrap: balance;
}
h1 .accent { color: var(--amber); }
.hero-stage .eyebrow { color: #F0A63C; }
.hero-stage h1 { color: #F2EDE3; }
.hero-stage h1 .accent { color: #F0A63C; }
.hero-stage .sub { color: rgba(242,237,227,.9); }
.hero-stage .sub strong { color: #FFFFFF; }
.hero-stage .cta-note { color: rgba(242,237,227,.6); }
.sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--dim); max-width: 56ch; margin: 0 0 30px; }
.sub strong { color: var(--text); font-weight: 500; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta {
  display: inline-block;
  background: var(--amber); color: var(--amber-ink);
  font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(240,166,60,.45); }
.cta.ghost { background: transparent; color: var(--text); border: 1px solid var(--edge); }
.cta.ghost:hover { border-color: var(--amber); color: var(--amber-text); box-shadow: none; }
.cta-note { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* bento */
.preview-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.preview-head .eyebrow { margin: 0; color: var(--dim); }
.preview-head .note { font-size: 13px; color: var(--faint); }
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "run run run budget budget budget"
    "run run run tickets tickets tickets"
    "crew crew crew site site site"
    "fase fase fase fase fase fase";
  gap: 14px;
}
.tile {
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 20px;
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--hover-edge); }
.tile-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.tile-label .live-clock { color: var(--amber-text); letter-spacing: .08em; }

/* run-sheet tile (signatuur) */
.t-run { grid-area: run; display: flex; flex-direction: column; }
.runlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; }
.runlist li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 11px 12px;
  border-radius: 10px;
  transition: background .3s ease, opacity .3s ease;
}
.runlist .rt { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.runlist .rw { font-size: 14.5px; }
.runlist .rw small { display: block; font-size: 12px; color: var(--faint); }
.runlist .rs { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.runlist li.done { opacity: .38; }
.runlist li.done .rs { color: var(--good); }
.runlist li.live { background: var(--tile-hi); border: 1px solid var(--live-edge); }
.runlist li.live .rt, .runlist li.live .rs { color: var(--amber-text); }
.runlist li.live .rs::before { content: "●"; margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; display: inline-block; }
.runlist li.enter { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* begroting */
.t-budget { grid-area: budget; }
.bars { display: grid; gap: 13px; }
.bar-row { display: grid; gap: 5px; }
.bar-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); }
.bar-top b { color: var(--text); font-weight: 500; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--amber); width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

/* tickets */
.t-tickets { grid-area: tickets; display: flex; flex-direction: column; }
.tick-num { font-family: "Anton", sans-serif; font-size: clamp(40px, 5vw, 54px); line-height: 1; letter-spacing: .01em; }
.tick-num .of { font-family: "IBM Plex Mono", monospace; font-size: 15px; color: var(--faint); letter-spacing: 0; }
.spark { margin-top: 14px; width: 100%; height: 46px; }
.spark .s-fill { fill: rgba(240,166,60,.14); }
.spark .s-line { stroke: var(--amber); }
.spark .s-dot { fill: var(--amber); }
.tick-sub { font-size: 13px; color: var(--faint); margin-top: 10px; }

/* crew */
.t-crew { grid-area: crew; }
.faces { display: flex; margin: 2px 0 14px; }
.face {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 500;
  border: 2px solid var(--tile);
  margin-left: -8px;
}
.face:first-child { margin-left: 0; }
.f1 { background: var(--face-v-bg); color: var(--face-v-fg); }
.f2 { background: var(--face-a-bg); color: var(--face-a-fg); }
.f3 { background: var(--face-g-bg); color: var(--face-g-fg); }
.f4 { background: var(--face-v-bg); color: var(--face-v-fg); }
.f5 { background: var(--face-a-bg); color: var(--face-a-fg); }
.face.more { background: transparent; border: 1.5px dashed var(--faint); color: var(--dim); }
.crew-sub { font-size: 14px; color: var(--dim); }
.crew-sub b { color: var(--text); font-weight: 500; }
.crew-bar { margin-top: 12px; }

/* site */
.t-site { grid-area: site; }
.browser { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--bg); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--edge); }
.b-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.b-url { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--dim); background: var(--tile); border-radius: 6px; padding: 3px 10px; }
.b-url .sub-accent { color: var(--amber-text); }
.browser-body { padding: 16px; display: grid; gap: 8px; }
.sk { border-radius: 5px; background: var(--tile-hi); }
.sk.title { width: 55%; height: 14px; background: linear-gradient(90deg, var(--tile-hi), var(--sk-grad)); }
.sk.line1 { width: 85%; height: 8px; }
.sk.line2 { width: 70%; height: 8px; }
.sk.btn { width: 96px; height: 22px; background: rgba(240,166,60,.8); margin-top: 4px; }
.site-sub { font-size: 13px; color: var(--faint); margin-top: 12px; }

/* faselijn */
.t-fase { grid-area: fase; }
.fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fase { display: grid; gap: 8px; }
.fase .track { height: 3px; border-radius: 999px; background: var(--track); position: relative; }
.fase.nu .track { background: var(--amber); }
.fase.nu .track::after {
  content: ""; position: absolute; right: -2px; top: 50%; translate: 0 -50%;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px rgba(240,166,60,.22);
}
.fase .fl { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fase.nu .fl { color: var(--amber-text); }

/* footer */
footer { margin-top: 56px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); }
footer .f-dot { color: var(--amber-text); }
footer a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--edge); padding-bottom: 1px; }
footer a:hover { color: var(--text); border-color: var(--dim); }

@media (max-width: 860px) {
  .topnav a.navlink { display: none; }
  .topnav .chip { display: none; }
  .topnav { gap: 12px; }
  .wordmark { font-size: 16px; }
  .mark { font-size: 22px; }
  .menu-toggle { display: grid; }
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "run" "tickets" "budget" "crew" "site" "fase";
  }
  .hero { padding: 0 0 48px; }
  .hero-stage {
    border: none; border-radius: 0; background: transparent;
    min-height: 66vh; padding: 64px 0 0;
    align-content: end; position: static; overflow: visible;
  }
  .hero-stage video, .stage-tint, .stage-veil {
    position: absolute; inset: auto; top: 0; left: 50%;
    height: calc(66vh + 160px);
    width: 100vw; transform: translateX(-50%);
    z-index: -1;
  }
  .stage-glow { display: none; }
  .stage-veil {
    -webkit-mask-image: none; mask-image: none;
    background:
      linear-gradient(180deg, rgba(18,16,23,.52), rgba(18,16,23,.10) 20%, transparent 34%, transparent 64%, var(--bg) 97%),
      linear-gradient(0deg, rgba(18,16,23,.36), rgba(18,16,23,.36));
  }
  /* bovenbalk blijft sticky (uit de basis), nachtkleuren op mobiel */
  .top { z-index: 40; }
  .top .wordmark { color: #F2EDE3; }
  .top .wordmark .dot { color: #F0A63C; }
  .top .mark { background: linear-gradient(135deg, #FFFFFF 40%, #F0A63C); -webkit-background-clip: text; background-clip: text; }
  .top .icon-btn { color: #F2EDE3; border-color: rgba(242,237,227,.28); background: rgba(18,16,23,.22); }
  /* op mobiel is de hero altijd een nachtvenster: lichte tekst, ongeacht thema */
  .hero-copy .eyebrow { color: #F0A63C; }
  .hero-copy h1 { color: #F2EDE3; }
  .hero-copy h1 .accent { color: #F0A63C; }
  .hero-copy .sub { color: rgba(242,237,227,.92); }
  .hero-copy .sub strong { color: #FFFFFF; }
  .hero-copy .cta-note { color: rgba(242,237,227,.6); }
  .fases { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .fase .fl { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow.a, .glow.b, .chip .pulse, .runlist li.live .rs::before, .runlist li.enter { animation: none; }
  .fsmenu, .fsmenu-links a { transition: none; }
  .tile, .cta, .topnav a.navlink { transition: none; }
  .bar i { transition: none; }
}

/* ── modulepagina's & module-overzicht ── */
.module-hero { padding: 64px 0 40px; display: block; max-width: 780px; }
.module-hero h1 { font-size: clamp(38px, 6.5vw, 72px); }
.crumb { color: inherit; text-decoration: none; border-bottom: 1px solid var(--edge); }
.crumb:hover { color: var(--text); }
.mock-tile { max-width: 620px; }
.mock-alert { margin: 14px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--amber-text); }
.feats, .related { margin-top: 56px; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.feat { border-top: 1px solid var(--edge); padding-top: 16px; }
.feat h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.feat p { margin: 0; font-size: 15px; color: var(--dim); }
.module-hero .mod-ic { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(240,166,60,.11); border: 1px solid var(--edge); color: var(--amber-text); margin: 4px 0 22px; }
.module-hero .mod-ic svg { width: 30px; height: 30px; }

/* ── cinematische modulepagina-hero ── */
.mod-cine { position: relative; overflow: hidden; border-radius: 26px; margin: 20px 0 10px; min-height: min(74vh, 620px); display: flex; align-items: flex-end; isolation: isolate; }
.mod-cine .mc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.82) brightness(.5) contrast(1.06); }
.mod-cine .mc-veil { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(120% 85% at 80% 4%, rgba(240,166,60,.24), transparent 52%),
    linear-gradient(180deg, rgba(18,16,23,.66) 0%, rgba(18,16,23,.32) 32%, rgba(18,16,23,.94) 100%); }
.mod-cine .mc-inner { position: relative; padding: clamp(24px, 4vw, 54px); max-width: 940px; }
.mod-cine .eyebrow { color: rgba(242,237,227,.82); margin-bottom: 20px; }
.mod-cine .crumb { color: inherit; border-bottom-color: rgba(242,237,227,.3); }
.mod-cine .crumb:hover { color: #fff; }
.mod-cine .mod-ic { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 20px; background: rgba(240,166,60,.16); border: 1px solid rgba(240,166,60,.42); color: var(--amber-text); margin: 0 0 24px; box-shadow: 0 0 0 1px rgba(240,166,60,.12), 0 18px 46px -14px rgba(240,166,60,.55); }
.mod-cine .mod-ic svg { width: 38px; height: 38px; }
.mod-cine h1 { font-size: clamp(38px, 6.4vw, 76px); line-height: .98; margin: 0 0 20px; letter-spacing: -.01em; }
.mod-cine .sub { color: rgba(242,237,227,.92); max-width: 60ch; font-size: clamp(17px, 2.1vw, 21px); margin: 0 0 28px; }
.mod-cine .cta-note { color: rgba(242,237,227,.66); }
@media (max-width: 640px) { .mod-cine { min-height: 80vh; border-radius: 20px; } }

/* genummerde features + stagger-reveal */
.feats { margin-top: 60px; }
.feat { position: relative; }
.feat .feat-nr { display: block; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--amber-text); opacity: .85; margin-bottom: 10px; }
.feat-grid > .feat.reveal { transition-delay: calc(var(--fi, 0) * .05s); }

/* SEO/AI-tekstsectie */
.seo-content { margin-top: 60px; max-width: 720px; }
.seo-content h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; line-height: 1.16; margin: 0 0 20px; letter-spacing: -.01em; text-wrap: balance; }
.seo-content p { color: var(--dim); font-size: 17px; line-height: 1.72; margin: 0 0 16px; }
.seo-content p:last-child { margin-bottom: 0; }

/* FAQ (accordeon, geen JS nodig) */
.faq { margin-top: 60px; }
.faq-list { border-top: 1px solid var(--edge); margin-top: 16px; }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 2px; font-size: 18px; font-weight: 600; color: var(--text); transition: color .15s ease; }
.faq summary:hover { color: var(--amber-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F0A63C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E"); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--dim); font-size: 16px; line-height: 1.72; max-width: 68ch; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rel-chip { text-decoration: none; }
.mono-tag {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 8px 16px;
  transition: color .15s ease, border-color .15s ease;
}
.rel-chip:hover .mono-tag { color: var(--amber-text); border-color: var(--hover-edge); }
.pager { margin-top: 64px; display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--edge); padding-top: 22px; }
.pager-link { display: grid; gap: 3px; text-decoration: none; min-width: 0; }
.pager-link.next { text-align: right; }
.pager-link .p-dir { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.pager-link .p-name { color: var(--text); font-weight: 700; font-size: 16px; }
.pager-link:hover .p-name { color: var(--amber-text); }

/* module-overzicht op de homepage */
.mod-section { margin-top: 56px; }
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mod-card {
  background: var(--tile); border: 1px solid var(--edge); border-radius: 18px;
  padding: 24px 22px; text-decoration: none; display: grid; gap: 12px; align-content: start;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mod-card:hover { transform: translateY(-4px); border-color: var(--hover-edge); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.mod-card .mc-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(240,166,60,.11); border: 1px solid var(--edge); color: var(--amber-text); }
.mod-card .mc-ic svg { width: 23px; height: 23px; }
.mod-card .mc-tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-text); }
.mod-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.mod-card p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.5; }
.mod-card .mc-go { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.mod-card:hover .mc-go { color: var(--amber-text); }
@media (max-width: 860px) {
  .feat-grid { grid-template-columns: 1fr; }
  .mod-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mod-card, .mono-tag { transition: none; }
}

/* timetable-raster (module-mock) */
.tt { display: grid; grid-template-columns: 52px 1fr 1fr; gap: 6px; }
.tt-h { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-bottom: 4px; }
.tt-t { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--dim); padding-top: 10px; font-variant-numeric: tabular-nums; }
.tt-b { background: var(--tile-hi); border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.tt-b small { display: block; font-size: 11px; color: var(--faint); }
.tt-b.live { border-color: var(--live-edge); }
.tt-b.live small { color: var(--amber-text); }

/* ── uitgebreide landing ── */
.s-kop { font-family: "Anton", "Archivo", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: .004em; margin: 0 0 20px; text-wrap: balance; }
.s-kop .accent { color: var(--amber); }
.s-lede { font-size: clamp(16px, 2vw, 19px); color: var(--dim); max-width: 62ch; margin: 0; }
.verhaal, .cc, .echt { margin: 110px 0; }
.pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pijler { border-top: 2px solid var(--amber); padding-top: 16px; }
.pijler h3 { margin: 0 0 8px; font-size: 18px; }
.pijler p { margin: 0; color: var(--dim); font-size: 15px; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: none; }

/* horizontale module-rail */
.rail-sectie { margin: 60px 0; }
.rail-hoog { position: relative; }
.rail-plak { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 36px; }
.rail-kop { display: grid; gap: 4px; }
.rail-hint { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.rail-track { display: flex; gap: 22px; align-items: center; will-change: transform; }
.rail-kaart {
  position: relative;
  flex-shrink: 0;
  --f: 1;
  aspect-ratio: 9 / 16;
  height: clamp(360px, 56vh, 540px);
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 28px 26px;
  text-decoration: none;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(calc(.93 + .07 * var(--f)));
  opacity: calc(.62 + .38 * var(--f));
  box-shadow:
    0 20px 48px rgba(0,0,0, calc(.16 + .3 * var(--f))),
    inset 0 0 0 1px rgba(240,166,60, calc(.5 * var(--f)));
  transition: box-shadow .25s ease, border-color .25s ease;
}
.rail-kaart .rk-nr {
  position: absolute; top: 26px; right: 26px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--amber-text); opacity: calc(.25 + .55 * var(--f));
}
.rail-kaart .rk-ic-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  background: rgba(240,166,60,.11); border: 1px solid var(--edge);
  color: var(--amber-text);
  box-shadow: 0 0 calc(22px * var(--f)) rgba(240,166,60, calc(.3 * var(--f)));
}
.rail-kaart .rk-ic { width: 26px; height: 26px; }
.rail-kaart .rk-body { margin-top: auto; display: grid; gap: 10px; }
.rail-kaart .rk-tag { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-text); }
.rail-kaart h3 { margin: 0; font-size: 24px; color: var(--text); letter-spacing: -0.02em; line-height: 1.12; }
.rail-kaart p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.rail-kaart .rk-pijl { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 18px; }
.rail-kaart:hover .rk-pijl { color: var(--amber-text); }

/* commandocentrum */
.cc-note { color: var(--amber-text); }
.cc-bento { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-top: 36px; }
.cc-zij { display: grid; gap: 14px; align-content: start; }
.cc-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.accent-label { color: var(--amber-text); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; max-width: 760px; }
.stat b { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(48px, 7vw, 84px); line-height: 1; display: block; }
.stat span { color: var(--faint); font-size: 14px; }

@media (max-width: 860px) {
  .verhaal, .cc, .echt { margin: 72px 0; }
  .pijlers { grid-template-columns: 1fr; }
  .cc-bento { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .rail-plak { position: static; min-height: 0; }
  .rail-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
  .rail-kaart { scroll-snap-align: start; }
  .rail-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rail-plak { position: static; min-height: 0; }
  .rail-track { overflow-x: auto; }
  .rail-kaart { transition: none; }
}

/* ai-chat (module-mock) */
.ai-chat { display: grid; gap: 10px; }
.ai-chat p { margin: 0; font-size: 14px; line-height: 1.5; }
.ai-chat .vraag { justify-self: end; background: var(--amber); color: var(--amber-ink); padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 85%; font-weight: 500; }
.ai-chat .antwoord { background: var(--tile-hi); border: 1px solid var(--edge); color: var(--dim); padding: 12px 14px; border-radius: 14px 14px 14px 4px; max-width: 92%; }

/* ── menu met video-achtergrond ── */
.menu-toggle { display: grid; }
.fsmenu { background: #121017; }
.fsmenu video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(.85) brightness(.62); }
.fsmenu-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,14,21,.88), rgba(16,14,21,.5) 42%, rgba(16,14,21,.88)); }
.fsmenu-top, .fsmenu-links, .fsmenu-sub, .fsmenu-foot { position: relative; z-index: 2; }
.fsmenu .wordmark, .fsmenu-links a { color: #F2EDE3; }
.fsmenu .wordmark .dot, .fsmenu-links a:hover { color: #F0A63C; }
.fsmenu .mark { background: linear-gradient(135deg, #FFFFFF 40%, #F0A63C); -webkit-background-clip: text; background-clip: text; }
.fsmenu .icon-btn { color: #F2EDE3; border-color: rgba(242,237,227,.28); background: rgba(18,16,23,.3); }
.fsmenu-links { gap: 4px; }
.fsmenu-links a { font-size: clamp(30px, 6.5vw, 48px); padding: 4px 0; }
.fsmenu-sub { display: grid; gap: 10px; margin-bottom: 20px; }
.fsmenu-sub .fs-label { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,237,227,.55); }
.fsmenu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fsmenu .mono-tag { color: rgba(242,237,227,.8); border-color: rgba(242,237,227,.22); background: rgba(18,16,23,.35); }
.fsmenu .mono-tag:hover { color: #F0A63C; border-color: #F0A63C; }
.fsmenu-foot { color: rgba(242,237,227,.5); }

/* ── Platform-pagina's: agenda & koppelingen ─────────────────── */
.tp { margin: 12px 0 0; font-size: 14px; color: var(--dim); line-height: 1.55; }
.feed-url {
  display: block; margin-top: 4px;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  color: var(--amber-text); background: var(--tile-hi);
  border: 1px solid var(--edge); border-radius: 10px;
  padding: 9px 11px; overflow-x: auto; white-space: nowrap;
}
.kop-status { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.kop-status.live { color: var(--amber-text); }
.kop-status.live::before { content: "●"; margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; display: inline-block; }
.kop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kop-grid .tile { display: flex; flex-direction: column; }
@media (max-width: 640px) { .kop-grid { grid-template-columns: 1fr; } }

/* ── Modules-rail: fullscreen cinematic sectie met parallax-video ──────
   Achtergrond = Pexels "digitale datastroom/matrix" (id 34128971, vrije
   licentie), amber getint zodat de data-cijfers in het merk vallen.
   Waarom hier: dit is dé sectie "Van eerste idee tot eindafrekening" die
   het hele systeem samenvat; een fullscreen bewegende datastroom maakt er
   een filmisch ankerpunt van dat past bij het woord "besturingssysteem".
   Desktop = landscape + parallax-scrub; mobiel = 9:16 fullscreen. */
.rail-binnen { display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; box-sizing: border-box; }
.rail-vid {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: sepia(.62) saturate(1.7) brightness(.7) contrast(1.05);
}
.rail-veil {
  display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(135% 108% at 50% 46%, rgba(12,10,17,.26), rgba(12,10,17,.86) 84%),
    linear-gradient(180deg, rgba(12,10,17,.94), rgba(12,10,17,.4) 26%, rgba(12,10,17,.4) 70%, rgba(12,10,17,.96));
}
.rail-veil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(72% 56% at 50% 56%, rgba(240,166,60,.24), transparent 72%);
  opacity: var(--alive, 0); mix-blend-mode: screen;
}
@media (min-width: 861px) {
  .rail-sectie { position: relative; left: 50%; width: 100vw; margin-left: -50vw; }
  .rail-plak { height: 100vh; }
  .rail-vid { display: block; transform: scale(1.16); will-change: transform; }
  .rail-veil { display: block; }
  .rail-binnen { position: relative; z-index: 2; }
  .rail-plak .rail-kop .eyebrow { color: rgba(242,237,227,.74); }
  .rail-plak .s-kop { color: #F5F1E8; }
  .rail-plak .rail-hint { color: rgba(242,237,227,.55); }
  .rail-plak .rail-kaart { box-shadow: 0 22px 60px rgba(0,0,0,.5); }
}
@media (max-width: 860px) {
  .rail-sectie { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: 46px; margin-bottom: 46px; }
  .rail-plak { position: relative; min-height: 100vh; min-height: 100svh; justify-content: center; overflow: hidden; padding: 0; gap: 26px; }
  .rail-vid, .rail-veil { display: block; }
  .rail-binnen { position: relative; z-index: 2; }
  .rail-plak .rail-kop .eyebrow { color: rgba(242,237,227,.74); }
  .rail-plak .s-kop { color: #F5F1E8; }
  .rail-plak .rail-kaart { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
}

/* ── AI-sectie: pinned scrollytelling met eigen bewegingssignatuur ─────
   Achtergrond = Pexels robot-op-podium (8084624 landscape / 8087076 9:16,
   vrije licentie), gedempt + amber-gloed. Waarom hier: de AI-producent is
   een meedenkende co-piloot; een robot die als performer op een podium
   staat koppelt AI aan festival. Bewust ANDER scroll-gedrag dan de rail:
   geen horizontale filmstrip maar een verticale reel van drie "beats" die
   tijdens het scrollen door het midden schuiven en cross-faden. */
.ai-sectie { margin: 60px 0; }
.ai-hoog { position: relative; }
.ai-plak { position: relative; min-height: 100vh; display: flex; align-items: stretch; overflow: hidden; perspective: 1500px; background: #0b0910; }
.ai-vid { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; z-index: 0;
  filter: saturate(1.03) contrast(1.05);
  clip-path: inset(0 0 0 0);
  transform: scale(var(--sc, 1)) translate3d(var(--ptx, 0), var(--pty, 0), 0) rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
  transform-origin: 66% 50%; }
/* additieve violette bloom die de cursor volgt (geen donkere veil over het beeld) */
.ai-glow { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(34% 44% at var(--gx, 66%) var(--gy, 42%), rgba(139,123,216,.34), rgba(139,123,216,.05) 56%, transparent 74%);
  mix-blend-mode: screen; }
.ai-binnen { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 10vh 22px 8vh; box-sizing: border-box; display: flex; align-items: center; }
.ai-panel { width: 100%; max-width: 468px; padding: 30px 30px 26px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(18,16,23,.86), rgba(18,16,23,.72));
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(139,123,216,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column; gap: 22px; }
.ai-kop { max-width: 620px; }
.ai-prog { height: 2px; width: 100%; background: rgba(242,237,227,.16); border-radius: 2px; overflow: hidden; }
.ai-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6f5fd0, #b9adec); transition: width .12s linear; }
.ai-beats { position: relative; }
.ai-beat { display: flex; flex-direction: column; gap: 9px; padding: 2px 0; }
.ai-beat .ai-num { font-size: 11px; letter-spacing: .22em; color: #b9adec; }
.ai-beat h3 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); color: #F5F1E8; letter-spacing: -.01em; }
.ai-beat p { margin: 0; font-size: clamp(14.5px, 1.4vw, 16px); color: rgba(242,237,227,.82); line-height: 1.54; }
.ai-plak .ai-kop .eyebrow { color: #b9adec; }
.ai-plak .s-kop { color: #F5F1E8; }
.ai-plak .s-kop .accent { color: #b9adec; }
/* scrollytelling actief (JS): beats absoluut gestapeld, cross-fade via JS — desktop én mobiel */
.ai-plak.sc .ai-beats { height: 168px; }
.ai-plak.sc .ai-beat { position: absolute; left: 0; right: 0; top: 0; opacity: 0; will-change: transform, opacity; }
@media (min-width: 861px) {
  .ai-sectie { position: relative; left: 50%; width: 100vw; margin-left: -50vw; }
  .ai-hoog { height: 260vh; }
  .ai-plak { position: sticky; top: 0; height: 100vh; }
  .ai-vid { display: block; will-change: transform, clip-path, filter; }
  .ai-glow { display: block; }
}
@media (max-width: 860px) {
  .ai-sectie { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: 46px; margin-bottom: 46px; }
  .ai-hoog { height: 230vh; }
  .ai-plak { position: sticky; top: 0; height: 100svh; min-height: 100svh; padding: 0; }
  .ai-vid { display: block; object-position: center top; will-change: clip-path; }
  .ai-binnen { padding: 4vh 15px; align-items: flex-start; }
  .ai-panel { max-width: none; padding: 17px 17px 15px; gap: 11px; }
  .ai-plak .s-kop { font-size: clamp(21px, 5.4vw, 26px); }
  .ai-beat h3 { font-size: 17px; }
  .ai-beat p { font-size: 13.5px; line-height: 1.45; }
  .ai-plak.sc .ai-beats { height: 148px; }
}

/* ── vergelijk-pagina ── */
.vgl-scroll { overflow-x: auto; margin: 26px 0 6px; border: 1px solid var(--edge); border-radius: 16px; -webkit-overflow-scrolling: touch; }
.vgl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 780px; }
.vgl-table th, .vgl-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--edge); vertical-align: top; color: var(--dim); line-height: 1.45; }
.vgl-table thead th { background: var(--tile); color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.vgl-table tbody tr:last-child td, .vgl-table tbody tr:last-child th { border-bottom: 0; }
.vgl-table th[scope="row"] { color: var(--text); font-weight: 650; font-size: 15px; min-width: 160px; }
.vgl-table th[scope="row"] small { display: block; font-weight: 400; color: var(--faint); font-size: 12.5px; margin-top: 3px; }
.vgl-table .vgl-ons td, .vgl-table .vgl-ons th { background: rgba(240,166,60,.07); }
.vgl-table .vgl-ons th[scope="row"] { color: var(--amber-text); }
.vgl-note { font-size: 13px; color: var(--faint); margin: 6px 0 0; }
.vgl-kies { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; max-width: 720px; }
.vgl-kies li { border: 1px solid var(--edge); border-radius: 14px; padding: 16px 18px; background: var(--tile); }
.vgl-kies b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 4px; }
.vgl-kies span { color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.vgl-kies .amber { color: var(--amber-text); }


/* ── taalvlaggen + taalschakelaars ─────────────────────────────── */
.flag { display: inline-block; width: 19px; height: 13px; border-radius: 2.5px; background: center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); flex: none; }
.flag-nl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2012'%3E%3Crect%20width='16'%20height='4'%20fill='%23AE1C28'/%3E%3Crect%20y='4'%20width='16'%20height='4'%20fill='%23F4F4F4'/%3E%3Crect%20y='8'%20width='16'%20height='4'%20fill='%2321468B'/%3E%3C/svg%3E"); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2012'%3E%3Crect%20width='16'%20height='12'%20fill='%23012169'/%3E%3Cpath%20d='M0%200%2016%2012%20M16%200%200%2012'%20stroke='%23fff'%20stroke-width='2.6'/%3E%3Cpath%20d='M0%200%2016%2012%20M16%200%200%2012'%20stroke='%23C8102E'%20stroke-width='1.2'/%3E%3Cpath%20d='M8%200V12%20M0%206H16'%20stroke='%23fff'%20stroke-width='4'/%3E%3Cpath%20d='M8%200V12%20M0%206H16'%20stroke='%23C8102E'%20stroke-width='2.2'/%3E%3C/svg%3E"); }
.topnav a.navlink.lang-switch { display: inline-flex; align-items: center; gap: 7px; }
.fsmenu-links a.menu-lang { display: inline-flex; align-items: center; gap: .42em; }
.fsmenu-links a.menu-lang .flag { width: 1.05em; height: .78em; border-radius: 3px; }
.lang-foot { display: inline-flex; align-items: center; gap: 5px; }
.lang-foot .lf-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--edge); color: var(--faint); text-decoration: none; letter-spacing: .04em; }
.lang-foot .lf-opt .flag { opacity: .5; transition: opacity .15s ease; }
.lang-foot .lf-opt:hover { color: var(--text); border-color: var(--dim); }
.lang-foot .lf-opt:hover .flag { opacity: 1; }
.lang-foot .lf-opt.is-actief { color: var(--text); background: rgba(240,166,60,.13); border-color: rgba(240,166,60,.42); cursor: default; }
.lang-foot .lf-opt.is-actief .flag { opacity: 1; }