/* PartyЯ — dezelfde vormtaal als StagePlanЯ: donker, filmisch, groot. Concertlicht als palet:
   magenta, violet, elektrisch blauw en amber op bijna-zwart. */

/* Lettertypes: WOFF2 met alleen Latijnse tekens plus de Я (zie _bron/maakfonts.py).
   Unbounded ExtraBold is alleen voor het woordmerk en bevat daarom alleen gewone letters. */
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --zwart: #0b0b10;
  --diep: #12121a;
  --vlak: #1a1a24;
  --lijn: rgba(255,255,255,0.10);
  --tekst: #f5f2ee;
  --dof: #a9a4b8;
  --magenta: #ff2d95;
  --violet: #7a3cff;
  --blauw: #2d7bff;
  --amber: #ffb020;
  --rand: clamp(16px, 5vw, 72px);
  --radius: 24px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--zwart); color: var(--tekst); font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
main { display: block; }
.disp { font-family: "Unbounded", "Space Grotesk", sans-serif; letter-spacing: -0.03em; font-weight: 700; }
.eyebrow { font-family: "Manrope", sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--dof); }
.eyebrow.amber-t { color: var(--amber); }
.gradient-t { background: linear-gradient(92deg, var(--magenta), var(--violet) 45%, var(--blauw)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.amber-t { color: var(--amber); }
.dof { color: var(--dof); }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Toetsenbord: altijd zichtbare focus */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.naar-inhoud { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--tekst); color: var(--zwart); font-weight: 800; transition: top 0.2s ease; }
.naar-inhoud:focus { top: 12px; }

/* Woordmerk: één kleurverloop over het hele woord, de laatste R gespiegeld */
.woordmerk { font-family: "Unbounded", sans-serif; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; background: linear-gradient(92deg, var(--magenta), var(--violet) 55%, var(--blauw)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.woordmerk .r { display: inline-block; transform: scaleX(-1); background: linear-gradient(272deg, #5a5cff, var(--blauw)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Cursorgloed */
.gloed { position: fixed; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0.35; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(122,60,255,0.45), rgba(255,45,149,0.18) 40%, transparent 70%); filter: blur(30px); }
@media (hover: none) { .gloed { display: none; } }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-weight: 800; font-size: 16px; white-space: nowrap; border: 1px solid transparent; position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; }
a.knop:hover { transform: translateY(-2px); }
.knop-primair { background: linear-gradient(92deg, #e0177c, var(--violet)); color: #fff; box-shadow: 0 10px 40px rgba(255,45,149,0.25); }
a.knop-primair:hover { box-shadow: 0 16px 60px rgba(122,60,255,0.45); }
.knop-glas { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--tekst); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
a.knop-glas:hover { background: rgba(255,255,255,0.14); }
.knop-lijn { border-color: rgba(255,255,255,0.25); color: var(--tekst); }
a.knop-lijn:hover { background: var(--tekst); color: var(--zwart); }
.knop.klein { padding: 9px 16px; font-size: 13px; }
.knop .appel { width: 18px; height: 18px; flex: 0 0 18px; }
/* Statuslabel (geen knop): zegt waar PartyЯ staat, zonder iets te beloven of klikbaar te lijken */
.status { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; font-weight: 800; font-size: 15px; color: var(--tekst); background: rgba(11,11,16,0.55); border: 1px dashed rgba(255,255,255,0.32); }
.status b { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: knip 1.6s ease-in-out infinite; }
/* Klein label bij functies die bij Pro horen */
.pro-tag { display: inline-block; vertical-align: 0.15em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1200; background: var(--amber); white-space: nowrap; }
.pro-tag.zacht { color: var(--amber); background: transparent; border: 1px solid rgba(255,176,32,0.55); }
.cijfer .pro-tag { margin-left: 4px; }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kop */
.kop { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--rand); transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease; border-bottom: 1px solid transparent; }
/* Beginstand (doorzichtig, boven de heldvideo): een donkere waas en lichtere links, zodat het menu
   ook boven de lichtbundels genoeg contrast heeft */
.kop:not(.vast) { background: linear-gradient(180deg, rgba(11,11,16,0.82) 0%, rgba(11,11,16,0.55) 60%, rgba(11,11,16,0) 100%) border-box no-repeat; }
.kop:not(.vast) .navlinks a { color: #ece8e3; }
.kop.vast { background: rgba(11,11,16,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: var(--lijn); padding-top: 10px; padding-bottom: 10px; }
.merk { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; }
.merk-bol { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: conic-gradient(from 180deg, var(--magenta), var(--violet), var(--blauw), var(--amber), var(--magenta)); box-shadow: 0 0 24px rgba(255,45,149,0.5); animation: draai 14s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.navlinks { display: flex; gap: 4px; }
.navlinks a { padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--dof); transition: color 0.2s ease, background 0.2s ease; }
.navlinks a:hover { color: var(--tekst); background: rgba(255,255,255,0.08); }
/* Acht menu-items: tussen 1101 en 1199 px breed iets minder ruimte per item, zodat lange labels (So funktioniert's) niet over twee regels lopen */
.navlinks a { white-space: nowrap; }
@media (max-width: 1199px) { .navlinks a { padding: 8px 9px; } }
.kop-rechts { display: flex; align-items: center; gap: 10px; }

/* Held */
.held { position: relative; min-height: min(100svh, 960px); display: grid; align-items: end; overflow: hidden; padding: 160px var(--rand) 96px; isolation: isolate; }
.held-media { position: absolute; inset: 0; z-index: -2; background: var(--zwart) url("img/publiek-poster.jpg") center / cover no-repeat; }
.held-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.held-sluier { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 50% at 70% 30%, rgba(122,60,255,0.35), transparent 70%),
  linear-gradient(180deg, rgba(11,11,16,0.35) 0%, rgba(11,11,16,0.45) 40%, rgba(11,11,16,0.95) 100%); }
.held-tekst { max-width: 1300px; display: flex; flex-direction: column; gap: 28px; }
.held h1 { margin: 0; font-size: clamp(44px, 8.4vw, 132px); line-height: 0.95; letter-spacing: -0.045em; filter: drop-shadow(0 2px 22px rgba(11,11,16,0.6)); }
.held h1 .regel { display: block; }
.held h1 .woord { display: inline-block; opacity: 0; transform: translateY(40px) rotate(2deg); animation: val 0.9s cubic-bezier(.2,.9,.2,1) forwards; animation-delay: calc(var(--n) * 90ms + 200ms); }
@keyframes val { to { opacity: 1; transform: none; } }
.held .slogan { filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); margin: 4px 0 18px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(92deg, var(--magenta), var(--violet) 45%, var(--blauw)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: val 0.9s 0.8s cubic-bezier(.2,.9,.2,1) forwards; }
@media (prefers-reduced-motion: reduce) { .held .slogan { opacity: 1; animation: none; } }
.held .lead { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; max-width: 700px; color: #e6e1dc; opacity: 0; animation: val 0.9s 0.9s cubic-bezier(.2,.9,.2,1) forwards; }
.held .knoppen { opacity: 0; animation: val 0.9s 1.1s cubic-bezier(.2,.9,.2,1) forwards; }
.held-onder { position: absolute; left: var(--rand); right: var(--rand); bottom: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dof); }
.scrollhint { display: inline-flex; align-items: center; gap: 10px; }
.scrollhint span { width: 1px; height: 36px; background: linear-gradient(var(--tekst), transparent); animation: dip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes dip { 0%, 100% { transform: scaleY(0.4); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } }
.platformen { display: inline-flex; align-items: center; gap: 8px; }
.platformen b { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: knip 1.6s ease-in-out infinite; }

/* Equalizer-staafjes */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(var(--magenta), var(--violet)); transform-origin: bottom; animation: dip 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.9s; }
.eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.3s; }
.eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 1s; }

/* Lopende band */
.band-houder { position: relative; z-index: 2; overflow: hidden; padding: 28px 0; margin: -28px 0; }
.band { position: relative; z-index: 2; margin-top: -1px; padding: 18px 0; overflow: hidden; background: linear-gradient(92deg, var(--magenta), var(--violet) 50%, var(--blauw)); transform: rotate(-1.5deg) scale(1.03); }
.band-loop { font-feature-settings: "locl" 0; display: flex; gap: 40px; white-space: nowrap; width: max-content; font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; animation: loop 40s linear infinite; }
.band-loop span { display: inline-flex; align-items: center; gap: 40px; }
.band-loop i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.8; }
@keyframes loop { to { transform: translateX(-50%); } }

/* Secties */
.sectie { position: relative; padding: clamp(80px, 10vw, 140px) var(--rand); }
.mobiele-uitleg { display: none; padding: 0 var(--rand) clamp(64px, 14vw, 96px); }
.mobiele-uitleg figure { width: min(100%, 430px); margin: 0 auto; overflow: hidden; border: 1px solid var(--lijn); border-radius: 28px; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 70px rgba(122,60,255,0.16); }
.mobiele-uitleg video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.sectie-kop { max-width: 900px; margin-bottom: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; gap: 16px; }
.sectie-kop h2 { margin: 0; font-size: clamp(32px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.04em; }
.sectie-kop p { font-size: 19px; color: var(--dof); max-width: 720px; }
.sectie-kop.midden { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

/* Cijfers */
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.cijfer { background: var(--diep); padding: 32px 28px; display: flex; flex-direction: column; gap: 8px; }
.cijfer .groot { font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.cijfer p { font-size: 15px; color: var(--dof); }

/* Zo werkt het: vastgepinde tekst + tv links, stappen rechts vullen zich op het scrollen */
.avond { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.avond-vast { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.avond-vast h2 { margin: 0; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.04em; }
.avond-vast > p { color: var(--dof); font-size: 18px; max-width: 520px; }
.tijdlijn { position: relative; display: flex; flex-direction: column; gap: 28px; padding-left: 40px; margin: 0; list-style: none; }
.tijdlijn::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--lijn); }
.tijdlijn .vul { position: absolute; left: 11px; top: 8px; width: 2px; height: 0; background: linear-gradient(var(--magenta), var(--violet), var(--blauw)); box-shadow: 0 0 16px rgba(122,60,255,0.6); transition: height 0.2s linear; }
.stap { position: relative; padding: 26px 28px; border-radius: 20px; background: var(--diep); border: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, background 0.4s ease; }
.stap::before { content: ""; position: absolute; left: -40px; top: 30px; width: 24px; height: 24px; border-radius: 50%; background: var(--zwart); border: 2px solid rgba(255,255,255,0.25); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.stap.aan { transform: translateX(6px); border-color: rgba(255,255,255,0.22); background: var(--vlak); }
.stap.aan::before { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 18px var(--magenta); }
.stap .nr { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dof); font-weight: 800; }
.stap h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.stap p { color: var(--dof); font-size: 16px; }

/* Verhalen: beeld + tekst, om en om, met schuine kleurvlakken erachter */
.verhalen { position: relative; }
.verhaal { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(60px, 8vw, 120px) var(--rand); }
.verhaal.om .verhaal-beeld { order: 2; }
.verhaal::before { content: ""; position: absolute; left: -10vw; right: -10vw; top: 12%; bottom: 12%; z-index: -1; transform: skewY(-4deg); background: linear-gradient(120deg, rgba(122,60,255,0.12), rgba(255,45,149,0.06) 60%, transparent); }
.verhaal.om::before { transform: skewY(4deg); background: linear-gradient(-120deg, rgba(45,123,255,0.12), rgba(255,176,32,0.06) 60%, transparent); }
.verhalen { overflow: hidden; }
.verhaal-beeld { position: relative; margin: 0; }
.verhaal-beeld.foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--vlak); box-shadow: 0 40px 100px rgba(0,0,0,0.5); }
.verhaal-beeld.foto img { width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--py, 0)); }
.tag { position: absolute; left: 18px; bottom: 18px; padding: 10px 14px; border-radius: 14px; background: rgba(11,11,16,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--lijn); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.tag b { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: knip 1.6s ease-in-out infinite; }
@keyframes knip { 50% { opacity: 0.3; } }
.verhaal-tekst { display: flex; flex-direction: column; gap: 18px; }
.verhaal-tekst h2, .verhaal-tekst h3 { margin: 0; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; }
.verhaal-tekst p { font-size: 18px; color: var(--dof); max-width: 560px; }
.stippen { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.stippen li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.stippen li::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--violet)); }
.bijschrift { font-size: 13px; color: var(--dof); margin-top: 14px; text-align: center; }

/* Toestellen: tv, telefoon en horloge in een eenvoudig kader (geen merktekens) */
.tv { position: relative; border-radius: 18px; padding: clamp(6px, 0.9vw, 12px); background: linear-gradient(160deg, #2a2a33, #0c0c11 60%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 80px rgba(122,60,255,0.15); }
.tv img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.tv::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 26%; height: 8px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(#1d1d25, #0c0c11); }
.toestel-rij { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 36px); }
.telefoon { position: relative; width: min(100%, 300px); aspect-ratio: 1320 / 2868; border-radius: 15% / 7%; padding: 3.2%; background: linear-gradient(150deg, #34343f, #111117 45%, #26262f); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(255,45,149,0.12); flex: 0 0 auto; }
.telefoon::before, .telefoon::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c35; }
.telefoon::before { left: -3px; top: 18%; height: 7%; }
.telefoon::after { right: -3px; top: 24%; height: 11%; }
.telefoon .scherm { position: relative; width: 100%; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: var(--zwart); }
.telefoon .scherm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telefoon.web .scherm { padding-top: 12%; }
.telefoon.web .scherm::before { content: ""; position: absolute; left: 50%; top: 2.4%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 2; }
.telefoon.web .scherm img { height: auto; }
.telefoon.klein { width: min(100%, 240px); }
.telefoon.schuin { transform: rotate(-4deg) translateY(16px); }

/* Horloge: weergave van het Nu-scherm, opgebouwd zoals in de watch-app */
.horloge { position: relative; flex: 0 0 auto; width: min(100%, 270px); height: auto; min-height: 0; aspect-ratio: 39 / 46; border-radius: 27% / 23%; background: linear-gradient(150deg, #3a3a45, #121218 50%, #2a2a33); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 60px rgba(122,60,255,0.18); }
.horloge::before, .horloge::after { content: ""; position: absolute; right: -2.6%; width: 2.6%; border-radius: 0 6px 6px 0; background: linear-gradient(#3a3a45, #1a1a22); }
.horloge::before { top: 24%; height: 15%; }
.horloge::after { top: 50%; height: 22%; width: 1.6%; right: -1.6%; }
.horloge .wscherm { position: absolute; inset: 4.7% 5.1%; border-radius: 23% / 19%; overflow: hidden; background: linear-gradient(180deg, #301865 0%, #281753 20%, #1a1434 50%, #0f0d1c 80%, #0c0b11 100%); padding: 9% 9% 0; display: flex; flex-direction: column; font-family: -apple-system, "SF Pro Text", "Manrope", sans-serif; container-type: inline-size; }
.wkop { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.wtijd { font-size: 9.5cqw; font-weight: 700; color: #fff; }
.wtitel { font-size: 8.5cqw; font-weight: 700; color: #a29db4; }
.wnummer { margin-top: 6%; font-size: 9cqw; font-weight: 700; color: var(--tekst); line-height: 1.15; }
.wartiest { font-size: 7.4cqw; color: var(--dof); }
.wbalk { margin-top: 5%; height: 3.2cqw; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.wbalk i { display: block; width: 23%; height: 100%; border-radius: 99px; background: var(--magenta); }
.wrest { margin-top: 2%; font-size: 6.4cqw; color: var(--dof); font-variant-numeric: tabular-nums; }
.wknoppen { margin-top: 6%; display: flex; justify-content: center; align-items: center; gap: 4cqw; }
.wknoppen span { display: grid; place-items: center; border-radius: 50%; color: #fff; }
.wknoppen span svg { width: 42%; height: 42%; }
.wknoppen .w1 { width: 19cqw; height: 19cqw; background: #5a1830; }
.wknoppen .w2 { width: 25cqw; height: 25cqw; background: linear-gradient(135deg, #ff2d95, #7a3cff); }
.wknoppen .w3 { width: 19cqw; height: 19cqw; background: var(--vlak); }

/* Horizontale rijen (.schermen en .rij) schuiven alleen opzij. overflow-y staat daarom expliciet op
   hidden: met alleen overflow-x: auto rekent de browser overflow-y ook als auto, en dan wordt de rij
   een verticale scroller zodra iets erin een paar pixels onder de rand uitsteekt (zoals een kaart die
   nog op zijn onthul-animatie wacht). Een muiswiel- of trackpadgebaar boven de rij bleef dan aan die
   rij hangen en de pagina stond even stil. Met hidden gaat verticaal scrollen altijd naar de pagina;
   opzij gaat met horizontale gebaren, swipen, slepen (main.js) en de pijlknoppen.
   overscroll-behavior-x: contain voorkomt dat een veeg voorbij het eind de browser terug laat gaan. */
.schermen, .rij { overflow-y: hidden; overscroll-behavior-x: contain; }

/* Rij met schermen (horizontaal schuiven op de telefoon) */
.schermen { display: flex; gap: clamp(18px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); padding: 12px var(--rand) 32px; margin: 0 calc(-1 * var(--rand)); scrollbar-width: none; }
.schermen::-webkit-scrollbar { display: none; }
.schermen figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(240px, 66vw); }
.schermen figure .telefoon { width: 100%; }
.schermen figcaption { font-size: 14px; color: var(--dof); text-align: center; max-width: 240px; }
.schermen figcaption b { display: block; color: var(--tekst); font-size: 15px; margin-bottom: 2px; }
@media (min-width: 1100px) { .schermen { justify-content: center; overflow: visible; } }

/* Pro: horizontale rij kaarten */
.rij { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); padding: 8px var(--rand) 24px; margin: 0 calc(-1 * var(--rand)); scrollbar-width: none; list-style: none; }
.rij::-webkit-scrollbar { display: none; }
.mkaart { flex: 0 0 min(320px, 80vw); scroll-snap-align: start; border-radius: 22px; border: 1px solid var(--lijn); background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); padding: 26px 24px; min-height: 280px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease; }
.mkaart::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--kleur, var(--violet)), transparent 65%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.mkaart:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.25); }
.mkaart:hover::after { opacity: 0.55; }
.mkaart .nr { font-family: "Unbounded", sans-serif; font-size: 13px; color: var(--dof); display: flex; justify-content: space-between; }
.mkaart .nr span:last-child { color: var(--amber); font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }
.mkaart h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.mkaart p { color: var(--dof); font-size: 15px; flex: 1; }
.mkaart .icoon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid var(--lijn); color: var(--tekst); }
.mkaart .icoon svg { width: 22px; height: 22px; }
.rij-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.rij-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lijn); background: transparent; color: var(--tekst); cursor: pointer; display: grid; place-items: center; transition: background 0.2s ease; }
.rij-nav button:hover { background: rgba(255,255,255,0.1); }
/* Met de muis kun je een kaartenrij opzij slepen (main.js). Tijdens het slepen staat de snap uit;
   bij loslaten schuift de rij naar de dichtstbijzijnde kaart. */
@media (hover: hover) and (pointer: fine) { .js .rij { cursor: grab; } }
@media (hover: hover) and (pointer: fine) and (max-width: 1099px) { .js .schermen { cursor: grab; } }
.rij.sleept, .schermen.sleept { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }

/* Home Assistant */
.vier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vlak-kaart { border-radius: 20px; border: 1px solid var(--lijn); background: var(--diep); padding: 26px; }
.vlak-kaart h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.vlak-kaart p { color: var(--dof); font-size: 15px; }
.ha-noot { margin-top: 20px; font-size: 15px; color: var(--dof); max-width: 760px; }
.melding { margin-top: 24px; padding: 18px 22px; border-radius: 16px; border: 1px solid rgba(255,176,32,0.4); background: rgba(255,176,32,0.08); font-size: 15px; display: flex; gap: 12px; align-items: flex-start; }
.melding b { color: var(--amber); }

/* Ondersteunde apps */
.apps-sectie { background: linear-gradient(180deg, transparent, rgba(122,60,255,0.07) 45%, transparent); }
.app-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.app-kaart { min-height: 170px; padding: 24px; border: 1px solid var(--lijn); border-radius: 20px; background: linear-gradient(155deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)); }
.app-kaart h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.025em; }
.app-kaart p { color: var(--dof); font-size: 15px; }
.app-tabel-wrap { overflow: hidden; border: 1px solid var(--lijn); border-radius: 24px; background: var(--diep); }
.app-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.app-tabel th, .app-tabel td { padding: 17px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn); }
.app-tabel thead th { color: var(--dof); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; background: rgba(255,255,255,0.035); }
.app-tabel tbody th { font-size: 16px; }
.app-tabel tbody tr:last-child > * { border-bottom: 0; }
.app-tabel tbody tr:hover { background: rgba(255,255,255,0.025); }
.route-status { --statuskleur: var(--dof); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--statuskleur); font-weight: 800; }
.route-status::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--statuskleur); box-shadow: 0 0 12px color-mix(in srgb, var(--statuskleur) 65%, transparent); }
.route-status.beschikbaar { --statuskleur: #65e7a1; }
.route-status.niet { --statuskleur: #6e697b; }
.route-status small { flex-basis: 100%; margin-left: 15px; color: var(--dof); font-size: 12px; font-weight: 600; }

/* Prijzen */
.prijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.prijzen.prijzen-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.prijs { position: relative; border-radius: 26px; border: 1px solid var(--lijn); background: var(--diep); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.prijs.uitgelicht { background: linear-gradient(var(--diep), var(--diep)) padding-box, linear-gradient(135deg, var(--magenta), var(--violet), var(--blauw)) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 100px rgba(122,60,255,0.22); }
.prijs h3 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.prijs .bedrag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; }
.prijs .bedrag > span { white-space: nowrap; }
.prijs .bedrag .groot { font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
.prijs .bedrag span:last-child { color: var(--dof); font-size: 15px; }
.prijs > p { color: var(--dof); font-size: 15px; }
.prijs .stippen li { font-size: 15px; }
.label { align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--lijn); color: var(--dof); }
.label.amber { color: #1a1200; background: var(--amber); border-color: var(--amber); }
.prijs-noot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--dof); }

/* Veelgestelde vragen */
.vragen { max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.vraag { border-radius: 18px; border: 1px solid var(--lijn); background: var(--diep); transition: border-color 0.2s ease, background 0.2s ease; }
.vraag[open] { background: var(--vlak); border-color: rgba(255,255,255,0.2); }
.vraag summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 800; font-size: 17px; position: relative; border-radius: 18px; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--dof); border-bottom: 2px solid var(--dof); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease; }
.vraag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vraag p { padding: 0 22px 20px; color: var(--dof); font-size: 16px; }

/* Download (CTA) */
.cta { position: relative; margin: 0 var(--rand) clamp(60px, 8vw, 120px); border-radius: 32px; overflow: hidden; padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 96px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; isolation: isolate; }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,16,0.55), rgba(11,11,16,0.88)), radial-gradient(50% 60% at 50% 100%, rgba(255,45,149,0.4), transparent); }
.cta h2 { margin: 0; font-size: clamp(34px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.045em; max-width: 900px; }
.cta p { font-size: 19px; color: #e6e1dc; max-width: 640px; }
.cta .knoppen { justify-content: center; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); padding: 40px var(--rand) 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; font-size: 14px; color: var(--dof); }
.voet .merk { font-size: 17px; justify-self: start; }
.voet nav { display: flex; gap: 6px 22px; flex-wrap: wrap; justify-content: flex-end; }
.voet nav a { color: var(--tekst); font-weight: 700; }
.voet nav a:hover { color: var(--magenta); }
.voet .merken { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; max-width: 900px; }

/* Losse pagina's (privacy, support) */
.pagina { padding: 140px var(--rand) clamp(60px, 8vw, 120px); max-width: 900px; }
.pagina h1 { margin: 0 0 18px; font-size: clamp(36px, 6vw, 76px); line-height: 1; letter-spacing: -0.045em; }
.pagina .lead { font-size: 20px; color: #e6e1dc; margin-bottom: 40px; }
.pagina h2 { margin: 44px 0 12px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; }
.pagina p, .pagina li { color: var(--dof); font-size: 17px; }
.pagina p + p { margin-top: 12px; }
.pagina ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pagina a.lees { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.concept { display: inline-flex; margin-bottom: 18px; }

/* Onthullen: alleen verborgen zolang main.js draait (klasse .js). Zonder script, of als main.js niet
   laadt, staat alles gewoon in beeld (zie de terugval in de kop van index.html). */
/* Alleen de verborgen stand (nog niet .in) zet een transform; daarna geldt weer de eigen transform
   van het element, zodat bijvoorbeeld het optillen van een kaart bij hover en het opschuiven van
   een tijdlijnstap blijven werken. main.js geeft elk blok dat tegelijk binnenkomt een eigen --i
   (gestaffeld) en zet na afloop .klaar, waarna de eigen overgangen van het element weer gelden. */
.js .reveal:not(.klaar) { transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
/* In een horizontale rij komt een kaart op zijn plek op in plaats van van onderen: een kaart die
   omlaag verschoven staat, steekt onder de rij uit (zie de uitleg bij .schermen, .rij). */
.js .rij > .reveal:not(.in), .js .schermen > .reveal:not(.in) { transform: scale(0.94); }
/* Wat de toetsenbordfocus heeft, is altijd meteen zichtbaar (ook onderin het scherm) */
.js .reveal:focus-within, .js .reveal:focus, .js .rij > .reveal:focus-within, .js .schermen > .reveal:focus-within { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal:not(.in), .js .rij > .reveal:not(.in), .js .schermen > .reveal:not(.in), .held h1 .woord, .held .lead, .held .knoppen { opacity: 1; transform: none; transition: none; animation: none; }
  .band-loop, .merk-bol, .scrollhint span, .eq i, .tag b, .platformen b, .status b { animation: none; }
  .mkaart, .stap { transition: none; }
  .mkaart:hover, .stap.aan { transform: none; }
  .gloed, .noten { display: none; }
  .held-media video { display: none; }
}

/* Zwevende muzieknootjes in de held en de downloadbalk (main.js maakt ze aan; alleen symbolen, geen
   tekst). Ze liggen boven het beeld maar onder de tekst, zijn klein en doorzichtig, bewegen alleen met
   transform en opacity en staan stil zodra ze uit beeld zijn (.buiten-beeld). */
/* Lichtere tinten van het verloop, zodat de nootjes zichtbaar blijven boven het roze/paarse beeld */
.noten { --noot-magenta: #ff6fb5; --noot-violet: #a47fff; --noot-blauw: #6ea4ff; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.noten i { position: absolute; left: var(--x); top: 100%; width: var(--s); height: var(--s); opacity: var(--o); filter: drop-shadow(0 0 8px var(--k1)); will-change: transform; animation: noot-stijg var(--d) linear var(--v) infinite; }
.noten b { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--k1), var(--k2));
  -webkit-mask: var(--vorm) center / contain no-repeat; mask: var(--vorm) center / contain no-repeat; will-change: transform, opacity;
  animation: noot-zwaai calc(var(--d) / 3) ease-in-out var(--v) infinite alternate, noot-fade var(--d) linear var(--v) infinite; }
.noten .n1 { --vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='8.5' cy='18' rx='4.6' ry='3.4' transform='rotate(-22 8.5 18)'/%3E%3Cpath d='M11.6 3h1.9v15h-1.9z'/%3E%3Cpath d='M13.5 3c.3 2.6 2.2 3.9 3.7 5.1 1.6 1.3 2.5 3.1 1.8 5.6-.4-2.1-1.7-3.3-3.4-3.9-.8-.3-1.5-.6-2.1-1z'/%3E%3C/svg%3E"); }
.noten .n2 { --vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='19' rx='3.8' ry='2.8' transform='rotate(-22 5.6 19)'/%3E%3Cellipse cx='17.6' cy='16.5' rx='3.8' ry='2.8' transform='rotate(-22 17.6 16.5)'/%3E%3Cpath d='M8 5.6 21.6 2.6V16.6h-1.7V6.5L9.7 8.7V19H8z'/%3E%3C/svg%3E"); }
.noten .n3 { --vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='9' cy='18' rx='4.6' ry='3.4' transform='rotate(-22 9 18)'/%3E%3Cpath d='M12.1 3H14v15h-1.9z'/%3E%3C/svg%3E"); }
@keyframes noot-stijg { to { transform: translate3d(0, calc(-1 * var(--hoogte, 900px)), 0); } }
@keyframes noot-zwaai { from { transform: translateX(calc(-1 * var(--w))) rotate(calc(-1 * var(--r))); } to { transform: translateX(var(--w)) rotate(var(--r)); } }
@keyframes noot-fade { 0% { opacity: 0; } 14% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }

/* Kleine equalizer voor de bovenkopjes van de secties (main.js zet hem erin). De ruimte ervoor ligt
   vast in de CSS, zodat de tekst niet verspringt als het script hem toevoegt. */
.js .sectie .eyebrow.reveal { position: relative; padding-left: 22px; }
.eyebrow .eq-klein { position: absolute; left: 0; top: 50%; height: 11px; margin-top: -6px; gap: 2px; }
.eq-klein i { width: 3px; }

/* Wat uit beeld is, beweegt niet (main.js zet .buiten-beeld met een IntersectionObserver) */
.buiten-beeld, .buiten-beeld * { animation-play-state: paused !important; }

/* Kleine schermen */
@media (max-width: 1100px) {
  .navlinks { display: none; }
  .prijzen { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .prijzen.prijzen-twee { grid-template-columns: 1fr; }
  .app-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mobiele-uitleg { display: block; }
  .held { padding-top: 120px; padding-bottom: 80px; min-height: 92svh; }
  .held-sluier { background: radial-gradient(70% 40% at 70% 20%, rgba(122,60,255,0.28), transparent 70%), linear-gradient(180deg, rgba(11,11,16,0.4) 0%, rgba(11,11,16,0.62) 38%, rgba(11,11,16,0.96) 100%); }
  .held-onder { display: none; }
  .verhaal, .avond, .cijfers, .vier { grid-template-columns: 1fr; }
  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verhaal.om .verhaal-beeld { order: 0; }
  .avond-vast { position: static; }
  .cta { margin-left: 12px; margin-right: 12px; border-radius: 24px; }
  .voet { grid-template-columns: 1fr; }
  .voet nav { justify-content: flex-start; }
  .telefoon.schuin { transform: none; }
}
@media (max-width: 520px) {
  .kop .knop.klein { display: none; }
  .cijfer { padding: 24px 18px; }
  .held .knoppen .knop { flex: 1 1 auto; }
  .toestel-rij .telefoon { width: 46%; }
  .toestel-rij .horloge { width: 40%; }
  .app-lijst { grid-template-columns: 1fr; }
  .app-kaart { min-height: 0; }
  /* Eenheid ('eenmalig', 'per maand') op elke prijskaart onder het bedrag: in sommige talen past
     die er op een smal scherm niet naast, en zo ogen alle kaarten in alle talen gelijk. */
  .prijs .bedrag { flex-direction: column; align-items: flex-start; gap: 6px; }
  .app-tabel-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .app-tabel, .app-tabel tbody, .app-tabel tr, .app-tabel th, .app-tabel td { display: block; width: 100%; }
  .app-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-tabel tbody { display: grid; gap: 12px; }
  .app-tabel tbody tr { padding: 18px; border: 1px solid var(--lijn); border-radius: 18px; background: var(--diep); }
  .app-tabel tbody th { padding: 0 0 13px; border-bottom: 1px solid var(--lijn); font-size: 18px; }
  .app-tabel tbody td { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 10px; padding: 11px 0 0; border: 0; }
  .app-tabel tbody td::before { content: attr(data-label); color: var(--dof); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
}

/* Bronnen in de held: alle bronnen naast elkaar, gelijkwaardig */
.bronnen { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bronnen li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--lijn); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); font-weight: 600; font-size: 15px; color: #f3eee9; }
.bronnen .stip { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #ff3d8b, #7c5cff); }
.bron-noot { margin: 10px 0 0; font-size: 13px; color: var(--dof); max-width: 46ch; }
@media (max-width: 560px) { .bronnen li { font-size: 14px; padding: 9px 14px; } }

/* Taalkeuze in de kopbalk en taalhint. De inhoud maakt _vertalen/bouw.py, het gedrag staat in
   assets/taal.js. Werkt ook zonder script: <details> klapt vanzelf open en dicht. */
.taal { position: relative; }
.taal-knop { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--tekst); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background 0.2s ease; }
.taal-knop::-webkit-details-marker { display: none; }
.taal-knop::marker { content: ""; }
.taal-knop:hover, .taal[open] > .taal-knop { background: rgba(255,255,255,0.14); }
.taal-knop:focus-visible { border-radius: 999px; }
.taal-pijl { width: 12px; height: 12px; flex: none; transition: transform 0.2s ease; }
.taal[open] .taal-pijl { transform: rotate(180deg); }
.taal-lijst { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 200px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; list-style: none; border-radius: 18px; border: 1px solid var(--lijn); background: rgba(18,18,26,0.97); box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.taal-lijst a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--dof); transition: color 0.2s ease, background 0.2s ease; }
.taal-lijst a:hover, .taal-lijst a:focus-visible { color: var(--tekst); background: rgba(255,255,255,0.08); }
.taal-lijst a:focus-visible { outline-offset: -3px; border-radius: 12px; }
.taal-naam { display: inline-flex; align-items: center; gap: 10px; }
.taal-naam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: transparent; }
.taal-lijst a[aria-current] { color: var(--tekst); }
.taal-lijst a[aria-current] .taal-naam::before { background: var(--amber); box-shadow: 0 0 10px rgba(255,176,32,0.7); }
.taal-lijst .taal-code { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--dof); }
.taalhint { position: fixed; left: 50%; bottom: 16px; z-index: 50; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); background: rgba(18,18,26,0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,0.5); font-size: 14px; font-weight: 600; animation: taalhint-in 0.4s ease both; }
.taalhint p { flex: 1 1 200px; }
.taalhint-naar { padding: 8px 14px; border-radius: 999px; background: var(--tekst); color: var(--zwart); font-size: 13px; font-weight: 800; white-space: nowrap; }
.taalhint-sluit { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--tekst); font: inherit; cursor: pointer; }
.taalhint-sluit:hover { background: rgba(255,255,255,0.16); }
.taalhint-sluit:focus-visible { border-radius: 50%; }
@keyframes taalhint-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .taalhint { animation: none; } .taal-pijl { transition: none; } }

/* Balk "Binnenkort beschikbaar" bovenaan elke pagina, tot de lancering (data-lancering="voor").
   Hij staat gewoon in de pagina en scrolt weg; de vaste kopbalk schuift mee omlaag zolang de balk
   in beeld is (--balk-zicht, gezet door taal.js), zodat hij nooit over de navigatie heen valt. */
:root { --balk: 32px; }
.binnenkort { position: relative; z-index: 41; display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--balk); padding: 0 var(--rand); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(92deg, rgba(255,45,149,0.28), rgba(122,60,255,0.24) 50%, rgba(45,123,255,0.22)), var(--zwart); border-bottom: 1px solid var(--lijn); font-family: "Manrope", sans-serif; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst); }
/* Het teken voor de tekst: een knipperend stipje, of (op de pagina's met main.js) een kleine
   equalizer. Het vak is in beide gevallen even breed, zodat de tekst niet verspringt. */
.binnenkort b { width: 13px; height: 11px; flex: 0 0 13px; display: inline-flex; align-items: center; justify-content: center; }
.binnenkort b:empty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); animation: knip 1.6s ease-in-out infinite; }
.binnenkort b.eq { align-items: flex-end; justify-content: space-between; gap: 0; }
.binnenkort b.eq i { width: 3px; }
body:has(> .binnenkort) .kop { top: var(--balk-zicht, var(--balk)); }
@media (prefers-reduced-motion: reduce) { .binnenkort b:empty::before { animation: none; } }

/* Forumkaart op de supportpagina */
.forum-kaart { max-width: 860px; margin-top: 28px; padding: 24px 22px; border-radius: 18px; border: 1px solid rgba(255,45,149,0.35); background: linear-gradient(135deg, rgba(255,45,149,0.10), rgba(122,60,255,0.08)), var(--diep); }
.forum-kaart .forum-titel { font-weight: 800; font-size: 19px; color: var(--tekst); margin: 0 0 6px; }
.forum-kaart p { color: var(--dof); font-size: 16px; margin: 0 0 16px; }