/* BUILDR studio: pagina-opmaak, gemaakt op basis van concept 52 (versies/52-werkplaats-11.html). Laadt als laatste. */
/* Werkplaats 11: 51 met STUDIO strakker onder het logo en Bo in de huisstijl. Daarvoor, Werkplaats 10: 50 met een schattige Bo, vinkjes, een liggende AI-chatkaart en een nette film-telefoon. Daarvoor, Werkplaats 9: 49 met gerepareerd logo en Bo, telefoon in echte verhouding, agenda-stap in de agentfilm en rustigere hover. Daarvoor, Werkplaats 8: 48 met BUILDR studio voluit, een nieuwe Hoofdzaken-opname, uitlegfilms in de showroom en assistent Bo. Daarvoor, Werkplaats 7: 47 met websites en automatiseringen samen voorop, de AI-agent in je mailbox in plaats van de telefoniste, Hoofdzaken klikbaar en eerlijke regio en KVK. Daarvoor: 46 met de feedback erin. Websites krijgen een eigen blok, Herken je dit als kaarten, uitgelijnde telefoons, menu dat meeloopt, vragen, contact en footer opnieuw. De kop zegt concreet wat BUILDR aanbiedt, de diensten schuiven omhoog in een blauwe wereld (de beweging van 32),
   de voorbeelden krijgen een eigen donker hoofdstuk, er staan veelgestelde vragen bij en contact is één uitnodiging met een optioneel kort bericht. */
:root { --bg: #F3F3F1; --vel: #FFFFFF; --inkt: #111113; --zacht: #5F5F66; --rand: #DEDED9; --blauw: #2B3BFF; --diep: #1F2BD0; --streep: #C9CEFF;
  --t-accent: var(--blauw); --t-zacht: var(--zacht); --t-rand: var(--rand); --t-vel: var(--vel);
  --uit: cubic-bezier(.16, 1, .3, 1); }
body { background: var(--bg); color: var(--inkt); font-family: "Archivo", sans-serif; font-size: 18px; line-height: 1.6; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 40px; } }
u, .l.u { text-decoration: none; background: linear-gradient(transparent 62%, var(--streep) 62%, var(--streep) 92%, transparent 92%); }
/* De streep uit het logo achter elke kop */
h2 .cur { color: var(--blauw); }

header { position: sticky; top: 0; z-index: 50; background: rgba(243,243,241,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 3px solid var(--blauw); }
header .wrap { display: flex; justify-content: space-between; align-items: center; height: 70px; }
.logo { font-weight: 900; font-stretch: 125%; font-size: 20px; text-decoration: none; white-space: nowrap; }
.logo .cur { color: var(--blauw); }
nav { display: none; gap: 28px; font-size: 16px; }
nav a { text-decoration: none; color: var(--zacht); position: relative; padding: 4px 0; }
nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--blauw); transition: width .3s var(--uit); }
nav a:hover { color: var(--inkt); } nav a:hover::after { width: 100%; }
@media (min-width: 960px) { nav { display: flex; } }
.knop { display: inline-flex; align-items: center; gap: 10px; background: var(--inkt); color: #fff; padding: 15px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; transition: background .25s, transform .5s var(--uit); }
.knop:hover { background: var(--blauw); }
.knop--klein { padding: 11px 18px; font-size: 15px; }
.knop--licht { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px var(--rand); }
.knop--licht:hover { background: var(--vel); }

/* Hero: eerst het merk, dan de belofte, rechts de assistent */
.hero { display: grid; gap: 48px; padding-top: clamp(24px, 3.4vw, 48px); padding-bottom: clamp(72px, 9vw, 120px); align-items: center; }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.hero .merk { color: var(--inkt); margin: 0; max-width: none; font-weight: 900; font-stretch: 125%; font-size: min(15vw, 132px); letter-spacing: -.045em; line-height: .85; white-space: nowrap; }
@media (min-width: 1000px) { .hero .merk { font-size: min(8.6vw, 136px); } }
.merk span { display: inline-block; animation: op .9s calc(var(--n) * 60ms) var(--uit) backwards; }
.merk .cur { color: var(--blauw); animation: op .9s .4s var(--uit) backwards, knipper 1.1s 1.4s steps(1) infinite; }
@keyframes op { from { opacity: 0; transform: translateY(40%); } }
h1 { margin-top: clamp(18px, 2.4vw, 32px); font-size: clamp(26px, 7vw, 76px); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
@media (min-width: 1000px) { h1 { font-size: min(4vw, 70px); } }
h1 .regel { display: block; white-space: nowrap; }
.l { display: inline-block; font-weight: var(--g, 700); transform: scaleY(var(--s, 1)); transform-origin: 50% 85%; transition: transform .3s var(--uit), font-weight .3s var(--uit), color .3s; animation: komop .9s calc(.35s + var(--i) * 25ms) var(--uit) backwards; }
.l.dicht { color: var(--blauw); }
@keyframes komop { from { opacity: 0; transform: translateY(30%); } }
.hero p { color: var(--zacht); font-size: clamp(18px, 1.6vw, 21px); max-width: 44ch; margin-top: 22px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.toestel { display: grid; justify-items: center; gap: 14px; animation: kom 1.2s .3s var(--uit) backwards; }
@keyframes kom { from { opacity: 0; transform: translateY(40px); } }
.toestel figcaption { font-size: 15px; color: var(--zacht); text-align: center; max-width: 32ch; }

section { padding: clamp(80px, 10vw, 140px) 0; }
h2 { font-size: clamp(36px, 5vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .98; max-width: 17ch; }
.sub { color: var(--zacht); max-width: 56ch; margin-top: 16px; font-size: clamp(18px, 1.4vw, 20px); }

/* Voorbeelden in rijen die even hoog zijn */
.reeks { display: grid; gap: 16px; margin-top: 16px; }
.reeks:first-of-type { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1000px) { .reeks--twee { grid-template-columns: 1fr 1fr; } }
.vak { background: var(--vel); border: 1px solid var(--rand); border-radius: 22px; padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 14px; align-content: start; scroll-margin-top: 96px; transition: box-shadow .4s, border-color .4s; }
.vak.licht-op { border-color: var(--blauw); box-shadow: 0 0 0 4px rgba(43,59,255,.15); }
.vak h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.vak > p { color: var(--zacht); font-size: 16px; max-width: 52ch; }
.vak .soort { font-size: 13px; font-weight: 700; color: var(--blauw); }
.vak--toestel { background: #E9EBF7; border-color: #E9EBF7; text-align: center; justify-items: center; }
.vak--toestel > p { margin: 0 auto; }
.vak--breed { align-items: center; }
@media (min-width: 1000px) { .vak--breed { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: 40px; } .vak--breed > :not([data-toestel]) { grid-column: 1; } .vak--breed [data-toestel] { grid-column: 2; grid-row: 1 / span 3; } }

/* Echt werk */
.werk { display: grid; gap: 28px; margin-top: clamp(32px, 4vw, 48px); background: var(--inkt); color: #fff; border-radius: 26px; padding: clamp(20px, 4vw, 48px); align-items: center; text-decoration: none; }
@media (min-width: 960px) { .werk { grid-template-columns: 1.4fr 1fr; gap: 56px; } }
.werk img { border-radius: 14px; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; transition: transform .7s var(--uit); }
.werk:hover img { transform: translateY(-6px); }
.werk .soort { font-size: 13px; font-weight: 700; color: #9AA3FF; }
.werk h3 { font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 8px; }
.werk p { color: #B9B9C2; margin-top: 14px; max-width: 44ch; }
.werk .lees { display: inline-block; margin-top: 18px; font-weight: 600; border-bottom: 3px solid var(--blauw); }

.stappen { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 48px); counter-reset: s; }
@media (min-width: 760px) { .stappen { grid-template-columns: repeat(4, 1fr); } }
.stappen li { counter-increment: s; background: var(--vel); border: 1px solid var(--rand); border-radius: 18px; padding: 22px; display: grid; gap: 8px; align-content: start; position: relative; overflow: hidden; }
.stappen li::before { content: counter(s); font-weight: 900; font-stretch: 125%; font-size: 44px; line-height: 1; color: var(--blauw); }
.stappen li::after { content: ""; position: absolute; left: 22px; bottom: 0; width: 0; height: 4px; background: var(--blauw); transition: width .5s var(--uit); }
.stappen li:hover::after { width: 48px; }
.stappen b { font-size: 20px; }
.stappen span { color: var(--zacht); font-size: 16px; }

.over { display: grid; gap: 24px 48px; align-items: center; }
@media (min-width: 860px) { .over { grid-template-columns: auto 1fr; } }
.over img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); }
.over p { color: var(--zacht); margin-top: 16px; max-width: 58ch; }

.direct { display: flex; margin-top: 4px; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); font-size: 17px; color: #D5D9FF; }
.direct a { color: #fff; font-weight: 700; text-underline-offset: 4px; }
.direct button { font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.direct button:hover { background: rgba(255,255,255,.12); }


@keyframes in { from { opacity: 0; transform: translateY(10px); } }
/* Showroom: een eigen donker hoofdstuk, zodat de voorbeelden opvallen */
.showroom { background: var(--inkt); color: #fff; padding: clamp(80px, 10vw, 140px) 0; margin-bottom: clamp(80px, 10vw, 140px); }
.showroom h2 { color: #fff; }
.showroom .sub { color: #B9B9C2; }
.showroom h2 u { background: linear-gradient(transparent 62%, rgba(43,59,255,.85) 62%, rgba(43,59,255,.85) 92%, transparent 92%); }
.hoofdstuk { display: inline-block; font-size: 14px; font-weight: 700; color: #9AA3FF; margin-bottom: 14px; }
.sprong { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sprong a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); transition: background .2s, border-color .2s; }
.sprong a:hover { background: var(--blauw); border-color: var(--blauw); }
.showroom .vak { border-color: #2A2A2E; color: var(--inkt); }
.showroom .vak--toestel { background: #1E1F2A; border-color: #1E1F2A; color: #fff; }
.showroom .vak--toestel > p { color: #B9B9C2; }
.showroom .vak--toestel .soort { color: #9AA3FF; }
.showroom .vak--toestel figcaption, .showroom .vak--toestel .of-knop { color: #fff; }

/* Veelgestelde vragen */
.vragen { display: grid; gap: 10px; margin-top: clamp(32px, 4vw, 48px); max-width: 900px; }
.vragen details { background: var(--vel); border: 1px solid var(--rand); border-radius: 18px; padding: 0 22px; }
.vragen summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 19px; display: flex; justify-content: space-between; gap: 16px; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; color: var(--blauw); font-size: 26px; line-height: 1; transition: transform .3s var(--uit); }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { color: var(--zacht); padding-bottom: 20px; max-width: 64ch; }

/* Opening van 32: BUILDR_, dan door het blokje de blauwe wereld in */
body.in-wereld:not(.voorbij) header { background: var(--blauw); color: #fff; border-bottom-color: rgba(255,255,255,.35); }
body.in-wereld:not(.voorbij) header nav a { color: #D5D9FF; }
body.in-wereld:not(.voorbij) header .logo .cur { color: #fff; }
body.in-wereld:not(.voorbij) header .knop { background: #fff; color: var(--inkt); }
.zoom { height: 400vh; }
.zoom .podium { background: var(--bg); }
.zoom .merk { font-weight: 900; font-stretch: 125%; font-size: clamp(64px, 17vw, 300px); letter-spacing: -.04em; line-height: .9; white-space: nowrap; color: var(--inkt); margin: 0; }
.zoom .plek { --cursor: var(--blauw); }
.zoom .start h1 { font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em; line-height: 1.3; margin: clamp(20px, 3vw, 36px) auto 0; max-width: 26ch; }
.zoom .start .knop { justify-self: center; margin-top: 26px; }
.zoom .start > * { animation: in 1.1s var(--uit) both; } .zoom .start > :nth-child(2) { animation-delay: .15s; } .zoom .start > :nth-child(3) { animation-delay: .25s; }
.zoom .wereld { background: var(--blauw); color: #fff; }
.zoom .na { padding-top: 72px; }
.zoom .na h2, .zoom .na h2 .cur { color: #fff; }
.zoom .na h2 .cur { animation: knipper 1.1s steps(1) infinite; }
.kaarten { display: grid; gap: 10px; margin-top: clamp(20px, 4vh, 44px); }
@media (min-width: 960px) { .kaarten { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.kaart { background: var(--diep); border: 1px solid rgba(255,255,255,.2); border-radius: 22px; padding: clamp(14px, 2vw, 26px); display: grid; gap: 6px; align-content: start;
  transform: translateY(calc((1 - var(--na, 0)) * var(--n) * 90px)); opacity: calc(var(--na, 0) * 4 - var(--n) + 1); }
.kaart:nth-child(1) { --n: 1; } .kaart:nth-child(2) { --n: 2; } .kaart:nth-child(3) { --n: 3; } .kaart:nth-child(4) { --n: 4; }
.kaart:first-child { background: #fff; color: var(--inkt); }
.kaart:first-child p, .kaart:first-child li { color: #4A4C66; }
.kaart small { font-weight: 900; font-stretch: 125%; font-size: 13px; opacity: .7; }
.kaart h3 { font-weight: 800; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.05; }
.kaart p { color: #D5D9FF; font-size: clamp(14px, 1.1vw, 16px); }
.kaart ul { display: none; gap: 3px; font-size: 14px; color: #D5D9FF; margin-top: 6px; }
@media (min-width: 960px) and (min-height: 700px) { .kaart ul { display: grid; } .kaart { min-height: 30vh; } }
.kaart li { display: flex; gap: 8px; align-items: center; }
.kaart li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.kaart:first-child li::before { background: #E6E9FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232B3BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (prefers-reduced-motion: reduce) { .kaart { transform: none; opacity: 1; } }

/* Herken je dit: van probleem naar oplossing */
.c-lijst { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 12px; }
.c-rij { display: grid; gap: 14px; background: var(--vel); border: 1px solid var(--rand); border-radius: 22px; padding: clamp(20px, 2.6vw, 32px); align-items: center; text-decoration: none; color: inherit; transition: border-color .3s, transform .5s var(--uit); }
.c-rij:hover { border-color: var(--blauw); transform: translateY(-3px); }
@media (min-width: 960px) { .c-rij { grid-template-columns: 1.1fr 40px 1fr 1fr; gap: 28px; } }
.c-probleem { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.c-probleem::before { content: "\201C"; color: var(--blauw); font-weight: 900; margin-right: 2px; }
.c-probleem::after { content: "\201D"; color: var(--blauw); font-weight: 900; }
.c-pijl { font-size: 28px; color: var(--blauw); font-weight: 900; transition: transform .4s var(--uit); }
.c-rij:hover .c-pijl { transform: translateX(6px); }
@media (max-width: 959px) { .c-pijl { display: none; } }
.c-wat small, .c-res small { display: block; font-size: 13px; font-weight: 700; color: var(--zacht); }
.c-wat b { font-size: 21px; letter-spacing: -.02em; }
.c-wat p { color: var(--zacht); font-size: 15px; margin-top: 4px; }
.c-res { background: #EEF0FF; border-radius: 16px; padding: 14px 16px; }
.c-res strong { font-size: 18px; color: var(--diep); }
@media (min-width: 1200px) { .reeks--drie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) and (max-width: 1199px) { .reeks--drie { grid-template-columns: 1fr 1fr; } }

/* Contact: het grote mailadres van 08, met een kort formulier eronder */
.contact { background: var(--inkt); color: #fff; text-align: center; padding: clamp(88px, 12vw, 160px) 0; }
.contact .c-label { font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); color: #fff; letter-spacing: -.01em; line-height: 1.2; max-width: none; }
.c-label .cur { color: var(--blauw); animation: knipper 1.1s steps(1) infinite; }
.c-adres { display: block; margin: 14px auto 0; font-weight: 900; font-stretch: 112%; font-size: clamp(30px, 7.4vw, 124px); letter-spacing: -.045em; line-height: 1; color: #fff; text-decoration: none; overflow-wrap: anywhere; transition: color .25s; }
.c-adres:hover { color: #9AA3FF; }
.c-adres::after { content: ""; display: block; height: 6px; width: 64px; margin: 18px auto 0; background: var(--blauw); border-radius: 3px; transition: width .6s var(--uit); }
.c-adres:hover::after { width: 160px; }
.c-uitleg { color: #D0D0D6; max-width: 46ch; margin: 22px auto 0; font-size: clamp(18px, 1.6vw, 22px); }
.c-acties { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 26px; color: #B9B9C2; font-size: 16px; }
.c-knop { font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 8px 16px; cursor: pointer; }
.c-knop:hover { background: rgba(255,255,255,.1); }
.c-form { display: grid; gap: 12px; max-width: 760px; margin: 40px auto 0; text-align: left; background: #1A1B20; border: 1px solid #2A2A2E; border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
@media (min-width: 700px) { .c-form { grid-template-columns: 1fr 1fr; } .c-form .breed, .c-form .melding-fout { grid-column: 1 / -1; } }
.c-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: #D0D0D6; }
.c-form input, .c-form textarea { font: inherit; font-size: 17px; color: #fff; background: #0F1013; border: 1px solid #34343A; border-radius: 12px; padding: 12px 14px; }
.c-form textarea { resize: vertical; min-height: 96px; }
.c-form input:focus, .c-form textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(43,59,255,.35); }
.c-verstuur { justify-self: start; font: inherit; font-weight: 700; font-size: 17px; color: #fff; background: var(--blauw); border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer; transition: background .2s; }
.c-verstuur:hover { background: var(--diep); }
.melding-fout { color: #FFB4A8; font-size: 15px; font-weight: 600; min-height: 1.2em; }
.c-klaar { margin: 40px auto 0; font-weight: 800; font-size: 24px; }
.c-klaar .cur { color: var(--blauw); animation: knipper 1.1s steps(1) infinite; margin-right: 8px; }
footer { padding: 28px 0 88px; color: var(--zacht); font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 3px solid var(--blauw); padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { .verstuur.weg .pijl { transform: none; } }
/* ===== 47: aanpassingen na de feedback op 46 ===== */
/* Opening past altijd in beeld: de sectie schuift onder de vaste kop door en BUILDR_ schaalt mee met de hoogte */
.zoom { margin-top: -73px; padding: 0; }
.zoom .start { padding-top: 73px; }
.zoom .merk { font-size: clamp(56px, min(17vw, 25vh), 300px); }
.zoom .start h1 { font-size: clamp(24px, min(3vw, 4.4vh), 44px); font-weight: 700; max-width: 30ch; }
.zoom .start p.onder { color: var(--zacht); font-size: clamp(16px, 1.4vw, 20px); margin: 10px auto 0; max-width: 40ch; }
@media (prefers-reduced-motion: reduce) { .zoom { margin-top: 0; } }

/* Navigatie: de blauwe streep staat onder het onderdeel waar je bent */
nav a.actief { color: var(--inkt); }
nav a.actief::after { width: 100%; }
body.in-wereld:not(.voorbij) header nav a.actief { color: #fff; }
body.in-wereld:not(.voorbij) header nav a::after { background: #fff; }

/* Websites: het belangrijkste vak krijgt een eigen, groot blok */
.web { padding: clamp(88px, 11vw, 150px) 0; }
.web-raster { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .web-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } }
.web .hoofdstuk { color: var(--blauw); }
.web-lijst { display: grid; gap: 10px; margin: 28px 0 32px; }
@media (min-width: 600px) { .web-lijst { grid-template-columns: 1fr 1fr; } }
.web-lijst li { background: var(--vel); border: 1px solid var(--rand); border-radius: 16px; padding: 14px 16px 14px 44px; position: relative; display: grid; gap: 2px; }
.web-lijst li::before { content: ""; position: absolute; left: 16px; top: 22px; width: 16px; height: 5px; border-radius: 3px; background: var(--blauw); }
.web-lijst b { font-size: 17px; }
.web-lijst span { color: var(--zacht); font-size: 15px; line-height: 1.4; }
.web .knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.web-beeld { position: relative; padding: 0 0 48px 0; }
.web-scherm { background: var(--vel); border: 1px solid var(--rand); border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -60px rgba(17,17,19,.55); transform: rotate(-1.2deg); transition: transform .8s var(--uit); }
.web-beeld:hover .web-scherm { transform: rotate(0); }
.web-balk { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rand); font-size: 13px; color: var(--zacht); }
.web-balk i { width: 10px; height: 10px; border-radius: 50%; background: var(--rand); }
.web-balk span { margin-left: 8px; }
.web-scherm img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.web-link { display: block; color: inherit; text-decoration: none; }
@media (max-width: 700px) { .web-beeld .web-tel { right: 4px; } }
.web-tel { position: absolute; right: -16px; bottom: -8px; width: 32%; min-width: 120px; border-radius: 30px; border: 8px solid #1C1C1E; outline: 4px solid var(--bg); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(17,17,19,.6); transform: rotate(3deg); transition: transform .8s var(--uit); }
.web-beeld:hover .web-tel { transform: rotate(0) translateY(-8px); }
.web-tel img { width: 100%; aspect-ratio: 390/844; object-fit: cover; object-position: top; }
.web-beeld figcaption { margin-top: 28px; font-size: 15px; color: var(--zacht); max-width: 62%; }
.web-beeld figcaption a { color: var(--inkt); font-weight: 700; text-underline-offset: 4px; }
.web-beeld { padding-bottom: 0; }

/* Herken je dit: vier kaarten, bovenin het probleem, onderin de blauwe oplossing */
.h-raster { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 860px) { .h-raster { grid-template-columns: 1fr 1fr; } }
.h-kaart { position: relative; display: grid; grid-template-rows: auto 1fr auto; background: var(--vel); border: 1px solid var(--rand); border-radius: 26px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .5s var(--uit), box-shadow .5s var(--uit); }
.h-kaart:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 40px 70px -45px rgba(43,59,255,.6); z-index: 2; }
.h-nr { padding: 24px 28px 0; font-weight: 900; font-stretch: 125%; font-size: 15px; color: var(--blauw); }
.h-quote { padding: 10px 28px 28px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.h-quote::before { content: "\201C"; color: var(--blauw); }
.h-quote::after { content: "\201D"; color: var(--blauw); }
.h-band { position: relative; display: grid; gap: 2px; background: var(--blauw); color: #fff; padding: 20px 64px 22px 28px; transition: padding .5s var(--uit), background .3s; }
.h-kaart:hover .h-band { background: var(--diep); }
.h-band small { font-size: 13px; font-weight: 700; color: #C9CEFF; }
.h-band b { font-size: 22px; letter-spacing: -.02em; }
.h-band span { color: #D5D9FF; font-size: 16px; }
.h-band i { position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 28px; font-weight: 900; transition: transform .5s var(--uit); }
.h-kaart:hover .h-band i { transform: translateX(6px); }

/* Showroom: telefoons en hun knoppen op één lijn, via rijen die alle kaarten delen */
@media (min-width: 760px) {
  .reeks--drie > .vak--toestel { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: stretch; }
  .reeks--drie { row-gap: 0; }
  .reeks--drie > .vak--toestel [data-toestel] { align-self: start; }
}
.showroom .wissel { background: #2A2B36; border-color: #2A2B36; }
.showroom .wissel button { color: #B9B9C2; }
.showroom .wissel button[aria-pressed="true"] { background: #fff; color: var(--inkt); }

/* Over: grotere foto, persoonlijke kop en drie feiten */
.over2 { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .over2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }
.over-foto { position: relative; max-width: 440px; min-width: 0; width: 100%; }
.over2 > * { min-width: 0; }
.over-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 26px; filter: grayscale(1); }
.over-foto figcaption::before { content: ""; display: block; width: 48px; height: 5px; border-radius: 3px; background: var(--blauw); margin-bottom: 12px; }
.over-foto figcaption { margin-top: 20px; font-size: 15px; color: var(--zacht); }
.over2 p { color: var(--zacht); margin-top: 18px; max-width: 54ch; font-size: clamp(17px, 1.3vw, 19px); }
.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; max-width: 560px; }
.feiten li { background: var(--vel); border: 1px solid var(--rand); border-radius: 18px; padding: 12px; overflow-wrap: anywhere; font-size: 15px; color: var(--zacht); display: grid; }
.feiten b { color: var(--blauw); font-size: clamp(17px, 2vw, 22px); font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; }

/* Veelgestelde vragen: links de kop, rechts genummerde kaarten */
.v-raster { display: grid; gap: 32px; }
@media (min-width: 960px) { .v-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } .v-kop { position: sticky; top: 110px; align-self: start; } }
.v-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.v-lijst { display: grid; gap: 10px; }
.v-lijst details { background: var(--vel); border: 1px solid var(--rand); border-radius: 20px; transition: border-color .3s, background .3s, box-shadow .4s; }
.v-lijst details[open] { border-color: var(--blauw); background: #F7F8FF; box-shadow: 0 20px 40px -32px rgba(43,59,255,.6); }
.v-lijst summary { cursor: pointer; list-style: none; padding: 22px 24px; font-weight: 700; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -.01em; display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; gap: 8px; }
.v-lijst summary::-webkit-details-marker { display: none; }
.v-nr { font-weight: 900; font-stretch: 125%; font-size: 14px; color: var(--blauw); }
.v-lijst summary i { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); position: relative; transition: background .3s, transform .4s var(--uit); }
.v-lijst summary i::before, .v-lijst summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--inkt); translate: -50% -50%; border-radius: 1px; }
.v-lijst summary i::after { rotate: 90deg; transition: rotate .3s var(--uit); }
.v-lijst details[open] summary i { background: var(--blauw); }
.v-lijst details[open] summary i::before, .v-lijst details[open] summary i::after { background: #fff; }
.v-lijst details[open] summary i::after { rotate: 0deg; }
.v-lijst details p { padding: 0 24px 22px 72px; color: var(--zacht); max-width: 62ch; animation: in .4s var(--uit); }
@media (max-width: 600px) { .v-lijst details p { padding-left: 24px; } }

/* Contact: drie manieren om te mailen, daarna het formulier */
.c-knop--vol { background: #fff; color: var(--inkt); border-color: #fff; }
.c-knop--vol:hover { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.c-acties a.c-knop { text-decoration: none; }
.c-of { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 40px auto 0; color: #9A9CA6; font-size: 15px; }
.c-of::before, .c-of::after { content: ""; flex: 1; height: 1px; background: #2A2A2E; }
.contact .c-form { margin-top: 18px; }
.contact { padding-bottom: clamp(64px, 8vw, 110px); }

/* Footer: loopt door in het donker van contact, met het merk groot onderaan */
.voet { background: var(--inkt); color: #B9B9C2; padding: 0 0 32px; font-size: 15px; }
.voet .wrap { border-top: 1px solid #2A2A2E; padding-top: 56px; }
.voet-raster { display: grid; gap: 36px; }
@media (min-width: 860px) { .voet-raster { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }
.voet .logo { color: #fff; font-size: 24px; }
.voet .logo .cur { color: var(--blauw); }
.voet-intro p { margin: 14px 0 22px; max-width: 34ch; }
.voet-intro .knop { background: #fff; color: var(--inkt); }
.voet-intro .knop:hover { background: var(--blauw); color: #fff; }
.voet-raster nav, .voet-raster > div:last-child { display: grid; gap: 8px; align-content: start; }
.voet-raster b { color: #fff; font-size: 15px; margin-bottom: 4px; }
.voet-raster a { color: #B9B9C2; text-decoration: none; width: fit-content; background: linear-gradient(var(--blauw), var(--blauw)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .3s var(--uit); }
.voet-raster a:hover { color: #fff; background-size: 100% 2px; }
.voet-merk { margin: clamp(48px, 8vw, 96px) 0 0; font-weight: 900; font-stretch: 125%; font-size: clamp(64px, 19vw, 300px); letter-spacing: -.045em; line-height: .78; color: #24252C; white-space: nowrap; overflow: hidden; }
.voet-merk .cur { color: var(--blauw); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #2A2A2E; color: #8A8C96; font-size: 14px; }
.voet-onder span:last-child { display: flex; gap: 18px; }
.voet-onder a { color: #8A8C96; text-decoration: none; }
.voet-onder a:hover { color: #fff; }
.voet .wrap { display: block; }
/* ===== 49: BUILDR studio voluit, uitlegfilms en de assistent ===== */
/* Logo met STUDIO eronder, zoals in de huisstijl */
.logo--studio { display: inline-flex; flex-direction: column; align-items: center; gap: .1em; line-height: 1; text-decoration: none; }
.logo--studio .woord { font-weight: 900; font-stretch: 125%; white-space: nowrap; }
.logo--studio .logo-sub { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 9px; letter-spacing: .42em; margin-right: -.42em; }
header .logo--studio { font-size: 21px; }
.voet .logo--studio { font-size: 26px; color: #fff; }
.voet .logo--studio .logo-sub { font-size: 10px; color: #B9B9C2; }
.zoom .merk-sub { display: block; justify-self: center; font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: clamp(12px, min(3.2vw, 4.6vh), 54px); letter-spacing: .42em; margin: .04em -.42em 0 0; color: var(--inkt); }

/* Hoofdzaken op de telefoon: nieuwe opname op echt iPhone-formaat */
.web-beeld .web-tel { width: 25%; min-width: 108px; border-radius: 16% / 7.4%; border-width: 7px; bottom: -24px; }
.web-tel::after { content: ""; position: absolute; top: 2.2%; left: 50%; translate: -50% 0; width: 30%; height: 2.6%; border-radius: 99px; background: #000; }
.web-tel img { aspect-ratio: 390/844; border-radius: 12% / 5.6%; }

/* Uitlegfilms: grote donkere kaarten, telefoon en ondertiteling naast elkaar */
.film-kaart { margin-top: clamp(32px, 4vw, 48px); background: #1A1B22; border: 1px solid #2A2B36; border-radius: 28px; padding: clamp(22px, 4vw, 56px); display: grid; gap: 28px; scroll-margin-top: 96px; }
.film-kaart + .film-kaart { margin-top: 16px; }
.film-kop .soort { font-size: 13px; font-weight: 700; color: #9AA3FF; }
.film-kop h3 { font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; margin-top: 6px; }
@container (min-width: 760px) { .film-kaart--om .fm { grid-template-columns: 1fr auto; } .film-kaart--om .fm-beeld { order: 2; } }
.speel-kop { margin-top: clamp(56px, 7vw, 96px); font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.04em; color: #fff; }
.speel-kop .cur { color: var(--blauw); }
.speel { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 1100px) { .speel { grid-template-columns: 1fr 1fr; } .speel #v-chat { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .speel #v-chat { grid-template-columns: 320px minmax(0, 1fr); column-gap: 64px; justify-items: start; text-align: left; align-content: center; padding: clamp(28px, 4vw, 56px); }
  .speel #v-chat [data-toestel] { grid-column: 1; grid-row: 1 / span 5; width: auto; }
  .speel #v-chat > :not([data-toestel]) { grid-column: 2; }
  .speel #v-chat > p { margin: 0; max-width: 46ch; }
  .speel #v-chat h3 { font-size: clamp(28px, 3vw, 44px); }
}
.chat-kan { display: grid; gap: 10px; color: #D0D0D6; text-align: left; }
.chat-kan li { display: flex; gap: 10px; align-items: center; }
.chat-kan li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.speel .vak--breed { grid-template-columns: 1fr; }
.speel .vak--breed > * { grid-column: auto !important; grid-row: auto !important; }

/* Contactformulier: aanklikbare keuzes, meerdere mogelijk */
.c-keuzes { grid-column: 1 / -1; border: 0; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-keuzes legend { width: 100%; font-size: 15px; font-weight: 600; color: #D0D0D6; margin-bottom: 10px; padding: 0; }
.c-keuzes label { cursor: pointer; }
.c-keuzes input { position: absolute; opacity: 0; pointer-events: none; }
.c-keuzes span { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; padding: 10px 16px; border-radius: 99px; border: 1.5px solid #3A3B44; background: #0F1013; transition: background .2s, border-color .2s, color .2s; }
.c-keuzes span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #6A6C78; transition: background .2s, border-color .2s; }
.c-keuzes label:hover span { border-color: #8A8C96; }
.c-keuzes input:checked + span { background: var(--blauw); border-color: var(--blauw); }
.c-keuzes input:checked + span::before { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232B3BFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.c-keuzes input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

/* ===== Overige pagina's ===== */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--inkt); color: #fff; padding: 10px 16px; border-radius: 99px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.paginakop { padding: clamp(56px, 8vw, 112px) 0 clamp(24px, 3vw, 40px); }
.paginakop .hoofdstuk { color: var(--blauw); }
.paginakop h1 { font-weight: 800; font-size: clamp(40px, 6vw, 88px); letter-spacing: -.045em; line-height: .98; max-width: 18ch; }
.paginakop h1 .cur { color: var(--blauw); }
.paginakop .sub { margin-top: 20px; }
.tekst { max-width: 72ch; }
.tekst h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 40px 0 12px; max-width: none; }
.tekst p, .tekst li { color: #3F3F46; font-size: 18px; line-height: 1.7; }
.tekst p + p { margin-top: 14px; }
.tekst ul { display: grid; gap: 8px; margin: 12px 0; }
.tekst li { position: relative; padding-left: 26px; }
.tekst li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 4px; border-radius: 2px; background: var(--blauw); }
.tekst a { color: var(--blauw); font-weight: 600; text-underline-offset: 3px; }
.juridisch { padding: 0 0 clamp(80px, 10vw, 140px); }
.eind { padding: 0 0 clamp(80px, 10vw, 140px); }
.case { padding: 0 0 clamp(80px, 10vw, 140px); }
.case-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 860px) { .case-feiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-feiten li { background: var(--vel); border: 1px solid var(--rand); border-radius: 18px; padding: 16px 18px; display: grid; gap: 2px; font-size: 16px; }
.case-feiten b { font-size: 13px; color: var(--zacht); }
.case-feiten a { color: var(--blauw); font-weight: 700; }
.case-beeld { max-width: 980px; margin: 0 auto clamp(56px, 8vw, 96px); }
.case-tarieven { max-width: 980px; margin: clamp(48px, 6vw, 80px) 0 0; }
.case-tarieven img { width: 100%; border-radius: 16px; border: 1px solid var(--rand); }
.case-tarieven figcaption { color: var(--zacht); font-size: 15px; margin-top: 10px; }
body.pagina-sub .contact { margin-top: 0; }

/* Dienstpagina's */
a.kaart { color: inherit; text-decoration: none; transition: border-color .3s, transform .4s var(--uit); }
a.kaart:hover { border-color: rgba(255,255,255,.7); }
a.kaart:first-child:hover { border-color: var(--blauw); }
a.kaart:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.paginakop .knoppen { margin-top: 28px; }
.dienst { padding: clamp(48px, 6vw, 88px) 0; }
.dienst-raster { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .dienst-raster { grid-template-columns: 1fr 1fr; } }
.dienst-raster .tekst h2 { margin-top: 0; }
.dienst-raster .web-lijst { margin: 0; }
.dienst-case { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 960px) { .dienst-case { grid-template-columns: 1.3fr 1fr; } }
.showroom .dienst-case .tekst h3 { color: #fff; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.showroom .dienst-case .tekst p { color: #B9B9C2; }
.showroom .dienst-case .tekst a { color: #9AA3FF; }
.showroom .dienst-case figcaption { color: #B9B9C2; }
.showroom .dienst-case figcaption a { color: #9AA3FF; }
.speel-kop + .vak { margin-top: 24px; }

/* Menu op de telefoon */
.kop-acties { display: flex; align-items: center; gap: 8px; }
.menu-knop { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--inkt); cursor: pointer; display: grid; place-content: center; gap: 6px; }
.menu-knop span { display: block; width: 18px; height: 2px; border-radius: 1px; background: #fff; transition: transform .3s var(--uit); }
.menu-knop[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-knop[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-mobiel { display: none; }
.menu-mobiel.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 3px solid var(--blauw); max-height: calc(100dvh - 73px); overflow-y: auto; box-shadow: 0 30px 40px -30px rgba(17,17,19,.35); animation: in .3s var(--uit); }
header .menu-mobiel .wrap { height: auto; display: grid; justify-content: stretch; align-items: stretch; gap: 10px; padding-top: 20px; padding-bottom: 24px; }
.menu-mobiel small { font-size: 13px; font-weight: 700; color: var(--zacht); margin-top: 6px; }
.menu-mobiel a::after { display: none; }
.menu-dienst { display: grid; gap: 2px; padding: 14px 16px; background: var(--vel); border: 1px solid var(--rand); border-radius: 16px; text-decoration: none; color: var(--inkt); }
.menu-dienst b { font-size: 19px; letter-spacing: -.01em; }
.menu-dienst span { font-size: 15px; color: var(--zacht); }
.menu-dienst[aria-current="page"] { border-color: var(--blauw); }
.menu-meer { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.menu-meer a { color: var(--inkt); font-weight: 600; font-size: 17px; padding: 6px 0; text-decoration: none; }
.menu-mobiel .knop { justify-self: start; margin-top: 8px; }
body.menu-open { overflow: hidden; }
@media (max-width: 400px) { .kop-acties .knop--klein { padding: 10px 14px; font-size: 14px; } }
@media (min-width: 960px) { .menu-knop, .menu-mobiel.open { display: none; } }
/* In de blauwe wereld wordt het menu licht; het telefoonmenu heeft een eigen lichte achtergrond en blijft donker */
body.in-wereld:not(.voorbij) header .menu-mobiel a { color: var(--inkt); }
body.in-wereld:not(.voorbij) header .menu-mobiel a.knop { color: #fff; }
body.in-wereld:not(.voorbij) header .menu-mobiel .menu-dienst span { color: var(--zacht); }
body.menu-open .bo-knop, body.menu-open .bo-wolk { visibility: hidden; }
/* Kaarten in de blauwe wereld, scroll-gestuurd (zie cursorzoom.css). Ze schuiven samen omhoog en verschijnen één voor één. */
@supports (animation-timeline: view()) {
  .zoom.sd .kaart { animation: kaartOmhoog 1ms linear both, kaartZicht 1ms linear both; animation-timeline: --zoom, --zoom; will-change: transform, opacity; }
  .zoom.sd .kaart:nth-child(1) { animation-range: contain 45% contain 65%, contain 45% contain 50%; }
  .zoom.sd .kaart:nth-child(2) { animation-range: contain 45% contain 65%, contain 50% contain 55%; }
  .zoom.sd .kaart:nth-child(3) { animation-range: contain 45% contain 65%, contain 55% contain 60%; }
  .zoom.sd .kaart:nth-child(4) { animation-range: contain 45% contain 65%, contain 60% contain 65%; }
}
@keyframes kaartOmhoog { from { transform: translateY(calc(var(--n) * 90px)); } to { transform: none; } }
@keyframes kaartZicht { from { opacity: 0; } to { opacity: 1; } }

/* Footer-merk: past altijd precies in de breedte (site.js rekent de lettergrootte uit), letters bouwen zich op als je onderaan komt, op desktop volgt een blauw lichtje de muis */
.voet-merk { overflow: visible; font-size: clamp(56px, 17vw, 300px); }
.voet-merk-tekst { display: inline-block; white-space: nowrap; }
.voet-merk .l { display: inline-block; }
.voet-merk.js .voet-merk-tekst { clip-path: inset(-10% -10% 0 -10%); }
.voet-merk.js .l { transform: translateY(105%); transition: transform .9s var(--uit); transition-delay: calc(var(--i) * 70ms); }
.voet-merk.js .cur { opacity: 0; }
.voet-merk.js.in .l { transform: none; }
.voet-merk.js.in .cur { opacity: 1; animation: knipper 1.1s .9s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) {
  .voet-merk.js.klaar .voet-merk-tekst { color: transparent; background: radial-gradient(circle 22vw at var(--mx, -50%) var(--my, -50%), #4A55FF, #2E3350 45%, #24252C 70%); -webkit-background-clip: text; background-clip: text; }
  .voet-merk.js.klaar .l { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) { .voet-merk.js .l { transform: none; transition: none; } .voet-merk.js .cur { opacity: 1; } }

/* Stippenachtergrond: een raster van stipjes dat langzaam meeschuift, met een blauwe gloed die over het vlak dwaalt.
   Op desktop volgt de gloed de muis (site.js). Alleen CSS, dus licht voor de telefoon. */
@property --sx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --sy { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
[data-stippen] { position: relative; isolation: isolate; overflow: hidden; --stip: rgba(17, 17, 19, .16); }
.showroom[data-stippen] { --stip: rgba(255, 255, 255, .13); }
[data-stippen]::before, [data-stippen]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 26px 26px; animation: stipSchuif 5s linear infinite; }
[data-stippen]::before { background-image: radial-gradient(circle, var(--stip) 1.3px, transparent 1.8px); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
[data-stippen]::after { background-image: radial-gradient(circle, var(--blauw) 2px, transparent 2.6px); --m: radial-gradient(circle min(34vw, 380px) at var(--sx) var(--sy), #000, transparent 72%); -webkit-mask-image: var(--m); mask-image: var(--m); animation: stipSchuif 5s linear infinite, stipDwaal 16s ease-in-out infinite alternate; opacity: .75; }
[data-stippen].volg::after { animation: stipSchuif 5s linear infinite; --sx: inherit; --sy: inherit; }
@keyframes stipSchuif { to { background-position: 26px 26px; } }
@keyframes stipDwaal { 0% { --sx: 12%; --sy: 25%; } 35% { --sx: 72%; --sy: 78%; } 70% { --sx: 88%; --sy: 18%; } 100% { --sx: 30%; --sy: 62%; } }
@media (prefers-reduced-motion: reduce) { [data-stippen]::before, [data-stippen]::after { animation: none; } }

/* AI-agents: de bonnetjeslezer staat alleen in zijn rij, dus net als de chat over de hele breedte, tekst links en het voorbeeld rechts */
@media (min-width: 1100px) {
  .speel #v-chat + #v-bon:last-child { grid-column: 1 / -1; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 64px; align-content: center; padding: clamp(28px, 4vw, 56px); }
  .speel #v-chat + #v-bon:last-child > :not([data-toestel]) { grid-column: 1 !important; }
  .speel #v-chat + #v-bon:last-child > [data-toestel] { grid-column: 2 !important; grid-row: 1 / span 4 !important; align-self: center; }
  .speel #v-chat + #v-bon:last-child h3 { font-size: clamp(28px, 3vw, 44px); }
  .speel #v-chat + #v-bon:last-child > p { margin: 0; }
}

/* Vragenkop: het langste woord met de cursor erachter past altijd in de kolom */
.v-kop { container-type: inline-size; }
.v-kop h2 { font-size: min(clamp(36px, 5vw, 76px), 12cqi); }
/* Op de telefoon staat de tekst over de hele breedte: stipjes zachter en zonder gloed, zodat alles goed leesbaar blijft */
@media (max-width: 760px) { [data-stippen] { --stip: rgba(17, 17, 19, .08); } .showroom[data-stippen] { --stip: rgba(255, 255, 255, .08); } [data-stippen]::after { display: none; } }