/* A4 · laag bovenop de echte /ace-ai/ (29-09-2026). Alleen transform/opacity animeren;
   blur alleen op kleine elementen (liquid glass = prestaties matig, ui-ux-pro-max). */
:root{--b-ease:cubic-bezier(.23,1,.32,1)}

/* ── 1 · glas op alle kaarten (pins 1 en 7): verloop + lichte rand + zachte schaduw ── */
html[data-bord] :is(.hh-kaart,.ad,.hv,.ml-l,.vb,.bv-r,.hx-mag li,.hg-d,.acs){
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -34px rgba(0,0,0,.75)!important;
  border-radius:20px}
html[data-bord] :is(.vb,.bv-r,.ml-l){transition:transform .3s var(--b-ease),box-shadow .3s}
@media(hover:hover) and (pointer:fine){
  html[data-bord] :is(.vb,.bv-r,.ml-l):hover{transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 36px 60px -30px rgba(255,122,89,.28)!important}}

/* ── 2 · hoofdknop = glazen capsule met oranje gloed eronder (pin 5) ── */
html[data-bord] .hh-cta{position:relative;isolation:isolate;padding:16px 16px 16px 24px!important;border-radius:999px!important;
  background:linear-gradient(180deg,#ffffff,#eef0f3)!important;color:#0b0d11!important;
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -12px rgba(0,0,0,.6)!important}
html[data-bord] .hh-cta::after{content:"";position:absolute;left:10%;right:10%;bottom:-16px;height:34px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,138,76,.9),rgba(255,138,76,0) 70%);animation:bPuls 3s ease-in-out infinite}
@keyframes bPuls{0%,100%{opacity:.45;transform:scaleX(.85)}50%{opacity:1;transform:scaleX(1.05)}}
html[data-bord] .hh-cta i{display:grid!important;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b0d11!important;color:#fff!important}
html[data-bord] .hh-cta:active{transform:scale(.97)}

/* ── 3 · Automate · Check · Execute als glazen schakelaars (pin 1) ── */
html[data-bord] .hh-stap{gap:10px!important;letter-spacing:.08em!important;font-size:11px!important}
html[data-bord] .hh-stap i{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75)!important}
html[data-bord] .hh-stap i::before{content:"";flex:none;width:30px;height:18px;border-radius:999px;background:rgba(255,255,255,.18);
  background-image:radial-gradient(circle at 9px 50%,#fff 6px,transparent 6.5px);transition:background-position .45s var(--b-ease),background-color .4s}
html[data-bord] .hh-stap i.aan::before{background-position:12px 0}
html[data-bord] .hh-stap i.aan:nth-child(1)::before{background-color:#6b7cff}
html[data-bord] .hh-stap i.aan:nth-child(2)::before{background-color:#ffb547}
html[data-bord] .hh-stap i.aan:nth-child(3)::before{background-color:#3ed598}
html[data-bord] .hh-stap i.aan{color:#fff!important}

/* ── 4 · glazen lint achter het embleem (pin 3) ── */
.b-lint{position:absolute;left:50%;top:44%;width:180%;max-width:900px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:.9}
html[data-bord] .hh-bol{z-index:1}

/* ── 5 · privacy op een warme foto met witte glazen tegels (pin 4) ── */
html[data-bord] .b-priv{position:relative;isolation:isolate;border-radius:26px;margin:0 14px;overflow:hidden}
html[data-bord] .b-priv::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/beeld/ace/zuilen.webp) center/cover}
html[data-bord] .b-priv::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,13,8,.78),rgba(18,13,8,.55) 50%,rgba(18,13,8,.8))}
html[data-bord] .b-priv .bv-r{background:rgba(255,255,255,.92)!important;color:#1d1a17;border-color:rgba(255,255,255,.6)!important}
html[data-bord] .b-priv .bv-r *{color:#1d1a17!important}
html[data-bord] .b-priv .bv-r :is(p,span){color:#5e554c!important}

/* ── de schakelaar donker / licht ── */
.b-knop{position:fixed;right:16px;top:84px;z-index:90;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(15,17,22,.9);box-shadow:0 10px 24px -12px rgba(0,0,0,.6);font:500 12px/1 system-ui}
.b-knop button{border:0;background:none;color:#cfd5dd;padding:8px 12px;border-radius:999px;cursor:pointer;font:inherit}
.b-knop button[aria-pressed="true"]{background:#fff;color:#111}
.b-knop a{color:#cfd5dd;padding:8px 10px;text-decoration:none}

/* ══ LICHT (zoals het bord): de donkere A.C.E-regels vallen weg omdat bord.js data-pag omzet;
   hieronder de laag die het bord toevoegt: warme lichte grond + wit glas ══ */
html[data-bord="licht"]{--paper:#f4f2ee;--paper2:#ecebe7;--paper3:#e4e1dc;--ink:#15141a;--ink2:#2c2b33;--ink3:#5d5b66;--mut:#5d5b66;
  --line:rgba(21,20,26,.1);--ac:#bd3a42}
html[data-bord="licht"] body{background:linear-gradient(180deg,#ecebf1,#f4f2ee 30%,#f6f3ef)}
html[data-bord="licht"] :is(.hh-kaart,.ad,.hv,.ml-l,.vb,.bv-r,.hx-mag li,.hg-d,.acs){
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55))!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:inset 0 1px 0 #fff,0 24px 44px -28px rgba(40,34,70,.35),0 2px 6px rgba(40,34,70,.05)!important}
html[data-bord="licht"] .hh-stap i{background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));border-color:rgba(21,20,26,.08);color:#5d5b66!important}
html[data-bord="licht"] .hh-stap i::before{background-color:rgba(21,20,26,.14)}
html[data-bord="licht"] .hh-stap i.aan{color:#15141a!important}
html[data-bord="licht"] .hh-cta{background:linear-gradient(180deg,#fff,#f3f2f6)!important}

/* reparaties ronde 1 (29-09): lint binnen het embleemvak · privacykop leesbaar op de foto · lichte aura */
.b-lint{width:130%;max-width:620px}
html[data-bord] .hh-m{overflow:hidden}
html[data-bord] .b-priv :is(h2,.h2,.lbl,.lead,p.lead,.mut){color:#f4efe8!important}
html[data-bord] .b-priv :is(h2,.h2) .ac{color:#ffb39f!important}
html[data-bord] .b-priv .lbl b{color:#f4efe8!important}
html[data-bord="licht"] .hh-aura{background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(226,220,240,.7) 42%,rgba(226,220,240,0) 70%)!important;box-shadow:none!important}
.b-lint{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}

/* ══ HERO-VARIANTEN (29-09, ronde 2): "de hero pakt mij nog niet" → één middelpunt per variant ══ */
html[data-held]:not([data-held="0"]) .hg-hero > .wrap{display:none}
.b-held{display:none;position:relative;z-index:1}
html[data-held="1"] .b-h1,html[data-held="2"] .b-h2,html[data-held="3"] .b-h3{display:block}
.b-held .wrap2{max-width:1240px;margin:0 auto;padding:0 28px}
.b-kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.04)}
.b-kick i{width:6px;height:6px;border-radius:50%;background:#3ed598;box-shadow:0 0 8px #3ed598}
.b-h{font-family:var(--disp,inherit);font-weight:500;letter-spacing:-.035em;line-height:.98;margin:22px 0 0;color:var(--ink);text-wrap:balance}
.b-h .ac{color:var(--ac)}
html[data-bord="donker"] .b-h .ac{color:#ff9a7e}
.b-lead{font-size:18px;line-height:1.55;color:var(--ink3);max-width:34em;margin:22px 0 0}
.b-knopn{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.b-knopn .hh-cta{font-size:16px}
.b-knopn a.tw{color:var(--ink);font-size:15px}
/* gedeeld: glazen schakelaars (kloon van .hh-stap) los van hun absolute plek */
.b-held .hh-stap{position:static!important;transform:none!important;justify-content:flex-start;margin-top:26px}

/* 1 · HET EMBLEEM GROOT */
.b-h1 .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;min-height:calc(100svh - 160px)}
.b-h1 .b-h{font-size:clamp(50px,6.6vw,98px)}
.b-h1 .stage{position:relative;display:grid;place-items:center;min-height:520px}
.b-h1 .stage .b-lint{width:150%;max-width:none;top:50%}
.b-h1 .stage .hl-bot{position:relative;z-index:1}
.b-h1 .gloed{position:absolute;width:420px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(170,180,255,.28),rgba(170,180,255,0) 65%)}
html[data-bord="licht"] .b-h1 .gloed{background:radial-gradient(circle,rgba(255,255,255,.95),rgba(226,220,240,0) 65%)}
.b-h1 .zegt{position:absolute;right:4%;top:14%;z-index:2;border-radius:16px;padding:12px 16px;font-size:13.5px;max-width:230px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);
  color:var(--ink);box-shadow:0 20px 40px -24px rgba(0,0,0,.6);transition:opacity .3s,transform .4s var(--b-ease)}
html[data-bord="licht"] .b-h1 .zegt{background:rgba(255,255,255,.85);border-color:#fff}
.b-h1 .zegt b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.b-h1 .zegt.wissel{opacity:0;transform:translateY(6px)}

/* 2 · HET WERK GEBEURT LIVE */
.b-h2 .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:calc(100svh - 160px)}
.b-h2 .b-h{font-size:clamp(44px,5.4vw,80px)}
.b-venster{border-radius:24px;padding:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 80px -40px rgba(0,0,0,.8)}
html[data-bord="licht"] .b-venster{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,0 40px 70px -40px rgba(40,34,70,.45)}
.b-vkop{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.b-vkop .ic{width:40px;height:48px;display:grid;place-items:center;border-radius:12px;background:#0b0d11}
.b-vkop b{display:block;font-size:14px;color:var(--ink)} .b-vkop span{font-size:12.5px;color:var(--ink3)}
.b-vkop em{margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.b-vbody{padding:18px 20px 8px;display:grid;gap:10px;min-height:250px}
.b-mail{border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14px;color:var(--ink);
  transform:translateY(10px);opacity:0;transition:transform .5s var(--b-ease),opacity .4s}
html[data-bord="licht"] .b-mail{background:#fff}
.b-mail small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.b-stap{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink3);opacity:0;transform:translateX(-8px);
  transition:opacity .35s,transform .45s var(--b-ease)}
.b-stap i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink3);display:grid;place-items:center;font-style:normal;font-size:11px}
.b-stap.gedaan i{background:#3ed598;border-color:#3ed598;color:#0b0d11}
.b-stap.gedaan{color:var(--ink)}
.b-venster.s1 .b-mail,.b-venster.s2 .b-mail,.b-venster.s3 .b-mail{opacity:1;transform:none}
.b-stap.zie{opacity:1;transform:none}
.b-vvoet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 18px;border-top:1px solid var(--line);min-height:74px}
.b-vvoet span{font-size:13.5px;color:var(--ink3)}
.b-akk{position:relative;isolation:isolate;border:0;border-radius:999px;padding:12px 18px;font:500 14px/1 inherit;cursor:pointer;
  background:#ffb547;color:#1b1204;opacity:.35;pointer-events:none;transition:opacity .3s,transform .16s var(--b-ease)}
.b-akk:active{transform:scale(.97)}
.b-venster.s2 .b-akk{opacity:1;pointer-events:auto}
.b-venster.s2 .b-akk::after{content:"";position:absolute;inset:-8px;border-radius:999px;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,181,71,.7),rgba(255,181,71,0) 70%);animation:bPuls 1.6s ease-in-out infinite}
.b-venster.s3 .b-akk{background:#3ed598;opacity:1}
.b-akk:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 3 · DE CAPSULE CENTRAAL */
.b-h3 .midden{min-height:calc(100svh - 160px);display:grid;align-content:center;justify-items:center;text-align:center}
.b-h3 .b-h{font-size:clamp(50px,7.2vw,108px);max-width:14ch}
.b-h3 .b-lead{margin:22px auto 0;text-align:center}
.b-caps{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;width:min(680px,92vw);margin-top:38px;
  border-radius:999px;padding:12px 12px 12px 30px;text-decoration:none;
  background:linear-gradient(180deg,#fff,#eef0f3);box-shadow:inset 0 1px 0 #fff,0 18px 40px -18px rgba(0,0,0,.6)}
.b-caps::after{content:"";position:absolute;left:8%;right:8%;bottom:-24px;height:50px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,138,76,.95),rgba(255,138,76,0) 70%);animation:bPuls 3s ease-in-out infinite}
.b-caps .typ{flex:1;text-align:left;font-size:20px;color:#1b1c22;white-space:nowrap;overflow:hidden}
.b-caps .typ::after{content:"";display:inline-block;width:2px;height:1.1em;background:#ff7a59;vertical-align:-3px;margin-left:2px;animation:bCur 1s steps(1) infinite}
@keyframes bCur{50%{opacity:0}}
.b-caps .vr{font-size:13px;color:#6b6f78;margin-right:6px}
.b-caps b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0b0d11;color:#fff;flex:none}
.b-caps b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.b-h3 .klein{margin-bottom:6px}
.b-h3 .hh-stap{justify-content:center!important}
@media(max-width:900px){.b-h1 .grid,.b-h2 .grid{grid-template-columns:1fr}.b-h1 .stage{min-height:360px}.b-h1 .zegt{right:0;top:0}}
@media(prefers-reduced-motion:reduce){.b-caps::after,.b-venster.s2 .b-akk::after{animation:none}}
/* reparaties hero-varianten (29-09): wolkje naast het embleem, mobiel kleiner */
.b-h1 .zegt{right:auto;left:0;top:auto;bottom:22%}
@media(max-width:900px){
  .b-held .b-h{font-size:clamp(36px,10.5vw,52px)!important}
  .b-h1 .grid,.b-h2 .grid,.b-h3 .midden{min-height:0;padding-top:20px}
  .b-h1 .stage{min-height:300px}
  .b-h1 .stage .hl-bot{transform:scale(.55)}
  .b-h1 .zegt{left:0;bottom:6%}
  .b-caps .vr{display:none}.b-caps .typ{font-size:16px}.b-caps{padding-left:20px}}
@media(max-width:900px){
  .b-h1 .grid>*,.b-h2 .grid>*{min-width:0}
  .b-h1 .stage .hl-bot{transform:none;--s:170px!important}
  .b-h1 .stage{overflow:hidden}}
@media(max-width:900px){
  .b-h1 .stage{overflow:visible;min-height:340px;padding-top:40px}
  .b-h1 .stage .hl-bot{margin-inline:auto}
  .b-h1 .stage .b-lint{width:110%}
  .b-held .hh-stap{flex-wrap:wrap;justify-content:center!important}
  .b-h1 .zegt{position:relative;left:auto;bottom:auto;margin:10px auto 0}}
/* 29-09: de hero-knop = de knop onder "Zo starten we" (btn btn-p) — iets groter in de hero, verder de eigen opmaak */
.b-heroknop{font-size:17px!important;padding:18px 30px!important}
@media(max-width:900px){.b-heroknop{font-size:15px!important;padding:15px 20px!important;text-align:center}}
@media(min-width:901px){.b-heroknop{white-space:nowrap}
  .hh-knoppen .b-heroknop{font-size:15px!important;padding:15px 22px!important}}

/* ══ HERO 3 · NIEUWE ACHTERGROND (29-09): "capsule is het beste, maar de achtergrond is niet mooi" ══
   Recept (Higgsfield-bieb + bord + toolkit): donker en rustig, één held-element (het glazen lint), lege
   ruimte in het midden voor de tekst, één warme lichtbron vanuit de capsule, trage beweging, geen tekst. */
html[data-held="3"] .hg-scene{display:none}
html[data-held="3"] .hg-hero{background:#07080b}
html[data-held="3"][data-bord="licht"] .hg-hero{background:#f1eff4}
.b-bg3{display:none;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
html[data-held="3"] .b-bg3{display:block}
.b-bg3 .laag{position:absolute;inset:0}
.b-bg3 .kleur{background:
  radial-gradient(55% 40% at 50% 80%,rgba(255,122,89,.30),rgba(255,122,89,0) 70%),
  radial-gradient(38% 34% at 14% 18%,rgba(124,111,184,.20),rgba(124,111,184,0) 70%),
  radial-gradient(32% 30% at 88% 22%,rgba(107,124,255,.14),rgba(107,124,255,0) 70%),
  linear-gradient(180deg,#0b0c12 0%,#07080b 100%)}
.b-bg3 .vloer{top:auto;height:44%;background:radial-gradient(60% 55% at 50% 0%,rgba(255,150,110,.18),rgba(255,150,110,0) 70%);
  transform:perspective(600px) rotateX(58deg);transform-origin:50% 0}
.b-bg3 .lint{width:140%;left:-20%;top:-6%;height:112%;animation:bDrift 26s ease-in-out infinite alternate}
@keyframes bDrift{from{transform:translate3d(-2%,0,0) rotate(-2deg)}to{transform:translate3d(2%,-2%,0) rotate(1.5deg)}}
.b-bg3 .vignet{background:radial-gradient(90% 75% at 50% 45%,rgba(7,8,11,0) 55%,rgba(7,8,11,.85) 100%)}
.b-bg3 .korrel{opacity:.07;mix-blend-mode:normal;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* tekst moet leesbaar blijven: een zachte donkere kern achter kop en capsule */
.b-bg3 .kern{background:radial-gradient(42% 34% at 50% 52%,rgba(7,8,11,.55),rgba(7,8,11,0) 70%)}
html[data-held="3"] .b-h3{position:relative;z-index:1}
/* licht (zoals het bord): wit glas op lila-grijs, warme gloed blijft */
html[data-bord="licht"] .b-bg3 .kleur{background:
  radial-gradient(55% 40% at 50% 80%,rgba(255,138,90,.22),rgba(255,138,90,0) 70%),
  radial-gradient(40% 36% at 14% 18%,rgba(170,160,215,.35),rgba(170,160,215,0) 70%),
  linear-gradient(180deg,#ebe9f1,#f6f3ef)}
html[data-bord="licht"] .b-bg3 .vignet{background:radial-gradient(90% 75% at 50% 45%,rgba(246,243,239,0) 60%,rgba(235,233,241,.7) 100%)}
html[data-bord="licht"] .b-bg3 .kern{background:none}
html[data-bord="licht"] .b-bg3 .korrel{opacity:.05}
@media(prefers-reduced-motion:reduce){.b-bg3 .lint{animation:none}}
.b-bg3 .vloer{display:none}
/* 29-09: hero-knop in de LICHTE stand in de stijl van de hero — licht glas, donkere tekst,
   zalmrand en verschoven zalmschaduw blijven (die vond Lenny mooi). */
html[data-bord="licht"] .b-heroknop,html[data-bord="licht"] .b-heroknop:hover{
  background:linear-gradient(180deg,#ffffff,#f3f1f6)!important;color:#15141a!important;border-color:#ff7a59!important}
html[data-bord="licht"] .b-heroknop{box-shadow:-5px 5px 0 0 #ff7a59,0 18px 34px -18px rgba(40,34,70,.35)!important}
@media(hover:hover) and (pointer:fine){html[data-bord="licht"] .b-heroknop:hover{box-shadow:-9px 9px 0 0 #ff7a59,0 22px 40px -18px rgba(40,34,70,.4)!important}}

/* ══ DE HELE PAGINA IN DE STIJL VAN DE CAPSULE-HERO (29-09): licht glas, lila-grijs → warm wit,
   gerenderde glasbeelden (Higgsfield) als dragers, koraal alleen als gloed en accent ══ */
/* hero: de gerenderde achtergrond B (open midden, glas aan de randen, gloed onder de capsule) */
.b-bg3 .foto,.b-bg3 .film{display:none}
html[data-bord="licht"] .b-bg3 .foto{display:block;background:url(/beeld/ace/h3b.webp) center/cover;animation:bAdem 18s ease-in-out infinite alternate}
@keyframes bAdem{from{transform:scale(1.02) translate3d(-.6%,0,0)}to{transform:scale(1.07) translate3d(.6%,-.8%,0)}}
html[data-bord="licht"] .b-bg3 .film{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
html[data-bord="licht"] .b-bg3 .film.aan{opacity:1}
html[data-bord="licht"] .b-bg3 :is(.kleur,.lint){display:none}
html[data-bord="licht"] .b-bg3 .vignet{background:linear-gradient(180deg,rgba(246,243,239,0) 70%,#f4f2ee 100%)}
html[data-bord="licht"][data-held="3"] .hg-hero::after{display:none}

/* pagina-grond: één doorlopend zacht verloop, blokken transparant zodat het glas erop ligt */
html[data-bord="licht"] body{background:linear-gradient(180deg,#eeecf3 0%,#f5f2ef 35%,#f6f3ef 70%,#efedf4 100%) fixed}
html[data-bord="licht"] :is(.hg-blok,.hg-vlak,.block){background:transparent!important}
html[data-bord="licht"] .hg-blok+.hg-blok{border-top:1px solid rgba(21,20,26,.06)}
html[data-bord="licht"] :is(.h2,h2){color:#15141a}
html[data-bord="licht"] :is(.h2,h2) .ac{color:#bd3a42}
html[data-bord="licht"] .lbl{color:#5d5b66}

/* de ene donkere kaart (A.C.E naast "een chatbot") wordt wit glas met een koraalrand */
html[data-bord="licht"] .ra-k.ra-agent{background:linear-gradient(180deg,#fff,rgba(255,255,255,.75))!important;
  border:1px solid rgba(255,122,89,.45)!important;box-shadow:inset 0 1px 0 #fff,0 24px 44px -26px rgba(255,122,89,.45)!important}
html[data-bord="licht"] .ra-k.ra-agent :is(h3,li){color:#15141a!important}
html[data-bord="licht"] .ra-k.ra-agent li::before{color:#bd3a42!important}
html[data-bord="licht"] .ra-k.ra-regel{background:rgba(255,255,255,.45)!important}

/* de schermen bij "In de praktijk" blijven donker (het is software), maar in een glazen omlijsting */
html[data-bord="licht"] .pv{box-shadow:0 0 0 8px rgba(255,255,255,.7),0 0 0 9px rgba(21,20,26,.06),0 40px 70px -40px rgba(40,34,70,.5)!important}

/* privacy: niet meer op de donkere foto, maar op het gerenderde glaslint A met witte glazen tegels */
html[data-bord="licht"] .b-priv::before{background:url(/beeld/ace/h3a.webp) center/cover}
html[data-bord="licht"] .b-priv::after{background:linear-gradient(180deg,rgba(246,243,239,.35),rgba(246,243,239,.15) 50%,rgba(246,243,239,.45))}
html[data-bord="licht"] .b-priv :is(h2,.h2,.lbl,.lead,p.lead,.mut){color:#15141a!important}
html[data-bord="licht"] .b-priv :is(h2,.h2) .ac{color:#bd3a42!important}
html[data-bord="licht"] .b-priv .lbl b{color:#15141a!important}
html[data-bord="licht"] .b-priv .bv-r{background:rgba(255,255,255,.86)!important}

/* de afsluitband: licht glas op beeld B, met de hero-knop */
html[data-bord="licht"] .ctaband{position:relative;isolation:isolate;margin:0 14px 60px;border-radius:28px;overflow:hidden;
  background:transparent!important;color:#15141a}
html[data-bord="licht"] .ctaband::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/beeld/ace/h3b.webp) center 60%/cover}
html[data-bord="licht"] .ctaband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(246,243,239,.85),rgba(246,243,239,.35))}
html[data-bord="licht"] .ctaband :is(h2,.h2,.lbl,.cta-micro,p){color:#15141a!important}
html[data-bord="licht"] .ctaband .ac{color:#bd3a42!important}
html[data-bord="licht"] .ctaband .btn-p{background:linear-gradient(180deg,#fff,#f3f1f6);color:#15141a;border-color:#ff7a59}
html[data-bord="licht"] .ctaband .btn-s{color:#15141a;border-color:rgba(21,20,26,.2);background:rgba(255,255,255,.5)}
/* alle hoofdknoppen op de pagina in dezelfde lichte capsule-stijl als de hero-knop */
html[data-bord="licht"] .btn-p{background:linear-gradient(180deg,#fff,#f3f1f6)!important;color:#15141a!important;border-color:#ff7a59!important}
html[data-bord="licht"] .btn-p:hover{color:#15141a!important}
/* A4 is een proefpagina voor Lenny: het labgereedschap van de site hoort hier niet */
html[data-bord] :is(#lab,.bgbalk,.grondbalk,.reisbalk,.hg-kies){display:none!important}

/* ══ 30-09 · DE GLANS VAN DE HUIDIGE HERO OOK BIJ DE CAPSULE (Lenny) ══
   In "Hero nu" gloeit het embleem omdat het op een donkere aura staat: witte rand, blauwe gloed,
   een lichtval eronder. Hier hetzelfde recept, klein en rond, op de lichte grond. Alleen opacity/transform. */
.b-h3 .klein{position:relative;display:grid;place-items:center;width:260px;height:250px;margin:-10px 0 4px}
.b-h3 .klein .hl-bot{position:relative;z-index:1;margin-inline:0;--hl-rand:rgba(255,255,255,.34);--hl-gl:200,215,240;--hl-lo:#b9c6d6;--hl-ringgl:215,232,255}
.b-glans{position:absolute;inset:0;pointer-events:none}
.b-glans i{position:absolute;display:block}
/* a · de aura waartegen de bol gloeit: in "Hero nu" donker, hier een zachte schemerschijf
   (een harde zwarte cirkel las op licht als een biljartbal) */
.b-glans .a{left:50%;top:44%;width:230px;height:230px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(38,40,62,.62) 0%,rgba(52,52,84,.42) 34%,rgba(90,86,130,.16) 55%,rgba(120,114,160,0) 70%)}
/* s · de blauwwitte gloed om de bol, ademt traag */
.b-glans .s{left:50%;top:40%;width:240px;height:240px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(200,215,240,.30) 0%,rgba(200,215,240,.08) 38%,rgba(200,215,240,0) 62%);
  animation:bGlans 4.6s ease-in-out infinite}
@keyframes bGlans{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
/* v · de lichtval eronder, zoals de lichtstraal in de huidige hero */
.b-glans .v{left:50%;top:58%;width:70px;height:120px;transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 0%,rgba(200,215,240,.38),rgba(200,215,240,0));border-radius:40px}
@media(max-width:900px){.b-h3 .klein{width:200px;height:196px}.b-glans .a{width:170px;height:170px}.b-glans .s{width:190px;height:190px}
  .b-h3 .klein .hl-bot{--s:92px!important}}
@media(prefers-reduced-motion:reduce){.b-glans .s{animation:none}}
.b-h3 .klein .hl-bot-in{animation:none!important}
.b-glans .s{background:radial-gradient(circle,rgba(220,230,255,.55) 0%,rgba(200,215,240,.18) 36%,rgba(200,215,240,0) 60%)!important}

/* ══ 30-09 · HET EMBLEEM VAKER (Lenny) ══ */
.b-lblbot{display:block;margin:0 0 10px -2px;line-height:0}
.b-lblbot .hl-bot,.b-agbot .hl-bot{margin-inline:0}
.b-lblbot .hl-bot-in,.b-agbot .hl-bot-in,.b-bandbot .hl-bot-in{animation:none!important}
.b-agbot{display:inline-block;vertical-align:middle;margin-right:10px;line-height:0}
.b-bandbot{position:absolute;right:clamp(40px,12vw,220px);top:50%;transform:translateY(-50%);z-index:0;
  display:grid;place-items:center;width:260px;height:250px;pointer-events:none}
.b-bandbot .hl-bot{position:relative;z-index:1;margin-inline:0;--hl-rand:rgba(255,255,255,.34);--hl-gl:200,215,240;--hl-lo:#b9c6d6;--hl-ringgl:215,232,255}
@media(max-width:900px){.b-bandbot{display:none}}
.b-lblbot,.b-agbot{position:relative}
.b-lblbot::before,.b-agbot::before{content:"";position:absolute;left:50%;top:48%;width:74px;height:74px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(70,66,110,.28) 0%,rgba(90,86,130,.10) 45%,rgba(90,86,130,0) 68%);pointer-events:none}
.b-lblbot .hl-bot,.b-agbot .hl-bot{--hl-rand:rgba(255,255,255,.4);--hl-gl:200,215,240;--hl-lo:#b9c6d6}
.b-agbot{margin-top:-14px;margin-bottom:-14px}
.b-lblbot{display:inline-block}
.b-lblbot::before,.b-agbot::before{top:52%}
.b-lbl-na{display:block}

/* ══ PROEF 30-09: hero-achtergrond over de hele pagina (?achter=film|vast, alleen lab) ══ */
.b-achter{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.b-achter .foto{position:absolute;inset:-4%;background:url(/beeld/ace/h3b.webp) center/cover;animation:bAdem 18s ease-in-out infinite alternate}
.b-achter video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.b-achter video.aan{opacity:1}
/* sluier: midden (waar de tekst staat) lichter, randen laten het glas zien */
.b-achter .sluier{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(246,243,239,.25) 0%,rgba(246,243,239,.72) 22%,rgba(246,243,239,.78) 50%,rgba(246,243,239,.72) 78%,rgba(246,243,239,.25) 100%)}
html[data-achter] body{background:transparent!important}
html[data-achter] .hg-hero .b-bg3{display:none!important}
html[data-achter][data-held="3"] .hg-hero{background:transparent!important}
html[data-achter] .ctaband::before,html[data-achter] .b-priv::before{opacity:.0}
html[data-achter] .ctaband::after,html[data-achter] .b-priv::after{background:rgba(255,255,255,.35)!important}
@media(prefers-reduced-motion:reduce){.b-achter .foto{animation:none}}

/* ══ 30-09 (2) · GLANS ZOALS "HERO NU" — Lenny: "de brightness die hij in de hero heeft, heeft hij niet bij de capsule".
   Gemeten verschil (uitsnede naast elkaar): in de oude hero is het veld om de bol ~#4a4a50 en is de bol #f6f8fa;
   bij de capsule was het veld #c8c4d5 → te weinig contrast, de bol oogt grijs. Nu: een groot, zacht donker veld,
   de lichte schaduwkant van de oude hero (--hl-lo #b9c6d6), een lichtbundel eronder en een lichtplas. */
.b-glans .a{width:330px!important;height:330px!important;top:47%!important;
  background:radial-gradient(circle,rgba(44,44,54,.92) 0%,rgba(52,52,64,.80) 30%,rgba(70,68,88,.45) 50%,rgba(110,104,140,.12) 64%,rgba(120,114,160,0) 72%)!important}
.b-glans .s{top:41%!important;width:230px!important;height:230px!important;
  background:radial-gradient(circle,rgba(235,242,255,.55) 0%,rgba(210,222,245,.20) 40%,rgba(200,215,240,0) 62%)!important}
.b-glans .v{top:57%!important;width:74px!important;height:150px!important;border-radius:6px!important;
  background:linear-gradient(180deg,rgba(220,228,245,.30),rgba(220,228,245,.10) 60%,rgba(220,228,245,0))!important}
.b-glans .v::after{content:"";position:absolute;left:50%;bottom:-6px;width:120px;height:14px;margin-left:-60px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(235,242,255,.55),rgba(235,242,255,0) 70%)}
.b-h3 .klein .hl-bot,.b-bandbot .hl-bot{--hl-mid:#f4f7fa;--hl-lo:#b9c6d6;--hl-oog:#1f2733;--hl-rand:rgba(255,255,255,.34);--hl-gl:200,215,240;--hl-ringgl:255,190,110}
.b-h3 .klein{width:340px;height:330px}
.b-bandbot{width:340px;height:330px}
@media(max-width:900px){.b-h3 .klein{width:240px;height:236px}.b-glans .a{width:240px!important;height:240px!important}}
.b-glans .v{width:90px!important;height:130px!important;border-radius:50%!important;
  background:radial-gradient(50% 100% at 50% 0%,rgba(225,232,248,.34) 0%,rgba(225,232,248,.12) 55%,rgba(225,232,248,0) 100%)!important}
.b-glans .v::after{bottom:10px}
.b-h3 .klein{height:300px;margin:-34px 0 -6px}
@media(max-width:900px){.b-h3 .klein{height:226px;margin:-10px 0 0}}

/* ══ 30-09 · LAADSCHERM LICHT — Lenny: "het laadscherm kan niet zwart zijn, het moet aansluiten bij de pagina".
   Zelfde opbouw als de pagina: de gerenderde glasachtergrond (h3b), en het embleem met dezelfde glans als in de hero. */
html[data-bord="licht"] .lz-halo{background:#f1eff4 url(/beeld/ace/h3b.webp) center/cover}
html[data-bord="licht"] .lz-halo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 45%,rgba(246,243,239,.35),rgba(246,243,239,.75))}
html[data-bord="licht"] .lz-gloed{width:330px;height:330px;margin:-165px 0 0 -165px;top:40%;
  background:radial-gradient(circle,rgba(44,44,54,.92) 0%,rgba(52,52,64,.80) 30%,rgba(70,68,88,.45) 50%,rgba(110,104,140,.12) 64%,rgba(120,114,160,0) 72%)}
html[data-bord="licht"] .lz-halo .hl-bot{--hl-mid:#f4f7fa;--hl-lo:#b9c6d6;--hl-oog:#1f2733;--hl-rand:rgba(255,255,255,.34);--hl-gl:200,215,240;--hl-ringgl:255,190,110}
html[data-bord="licht"] .lz-halo .lz-t{color:#15141a;margin-top:26px}
html[data-bord="licht"] .lz-onder path{fill:#15141a}
html[data-bord="licht"] .lz-gloed{margin-top:-228px}

/* ══ 30-09 · EMBLEEM-VARIANTEN (lab ?emb=a|b|c) — alleen transform/opacity ══ */
/* knipperen i.p.v. controleren: rustig, af en toe */
.b-knipper .hl-bot-o{animation:bKnip 5.2s ease-in-out infinite;transform-origin:50% 50%}
.b-knipper .hl-bot-o.r{animation-delay:.03s}
@keyframes bKnip{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.b-knipper .hl-rg .pt{opacity:0!important}
/* A · meeloper */
.b-mee{position:fixed;top:52%;z-index:40;pointer-events:none;transition:transform .55s cubic-bezier(.2,.9,.25,1.1),opacity .35s ease}
.b-mee[data-kant="r"]{right:clamp(10px,2.2vw,34px)}
.b-mee[data-kant="l"]{left:clamp(10px,2.2vw,34px)}
.b-mee.uit[data-kant="r"]{transform:translateX(180px) rotate(40deg);opacity:0}
.b-mee.uit[data-kant="l"]{transform:translateX(-180px) rotate(-40deg);opacity:0}
.b-mee .hl-bot{margin-inline:0;--hl-lo:#b9c6d6}
.b-mee::before{content:"";position:absolute;left:50%;top:55%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;
  background:radial-gradient(circle,rgba(44,44,54,.55),rgba(70,68,88,.18) 50%,rgba(120,114,160,0) 70%)}
/* B · kiekeboe */
section.block{position:relative}
html[data-emb="b"] section.block{overflow-x:clip}
.b-gluur{position:absolute;top:70px;z-index:2;pointer-events:none;transition:transform .9s cubic-bezier(.2,.9,.25,1.05)}
.b-gluur[data-kant="r"]{right:0;transform:translateX(120%) rotate(30deg)}
.b-gluur[data-kant="l"]{left:0;transform:translateX(-120%) rotate(-30deg)}
.b-gluur.zicht[data-kant="r"]{transform:translateX(38%) rotate(-14deg)}
.b-gluur.zicht[data-kant="l"]{transform:translateX(-38%) rotate(14deg)}
.b-gluur .hl-bot{margin-inline:0;--hl-lo:#b9c6d6}
.b-gluur[data-kant="r"] .hl-bot-o{translate:calc(var(--s) * -.1) 0}
.b-gluur[data-kant="l"] .hl-bot-o{translate:calc(var(--s) * .1) 0}
/* C · rolbal */
.b-rol{position:fixed;left:0;top:0;z-index:40;pointer-events:none;transition:opacity .35s ease}
.b-rol .hl-bot{margin-inline:0;--hl-lo:#b9c6d6;transition:transform .12s linear}
.b-rol .hl-bot-in{animation:none!important}
.b-rol.uit{opacity:0}
@media(max-width:900px){
  .b-mee .hl-bot{--s:40px!important}.b-mee{top:auto;bottom:112px}
  .b-gluur .hl-bot{--s:64px!important}.b-gluur{top:24px}
  .b-rol{display:none}
  html[data-emb="c"] .b-lblbot{display:inline-block}}
@media(prefers-reduced-motion:reduce){.b-knipper .hl-bot-o{animation:none}.b-mee,.b-gluur{transition:none}}

/* ══ 30-09 (3) · GEEN DONKER VELD, GEEN OMTREKLIJN — Lenny: "die donkere achtergrond is super lelijk",
   "die zwarte cirkel om het embleem kan toch weg". De glans komt nu van het LICHT zelf: een wit stralende bol
   met een koele blauwe gloed en een zachte gekleurde schaduw — niets donkers. Alleen op de lichte A.C.E-pagina. */
html[data-bord="licht"] .hl-bot{--hl-rand:transparent;--hl-mid:#fbfcfe;--hl-lo:#c9d3e6;--hl-gl:190,208,255;--hl-ringgl:255,190,110}
html[data-bord="licht"] .hl-bot-bol{box-shadow:
  inset 0 calc(var(--s) * -.06) calc(var(--s) * .16) rgba(120,140,195,.20),
  0 calc(var(--s) * .10) calc(var(--s) * .26) rgba(104,116,180,.20),
  0 0 calc(var(--s) * .22) rgba(255,255,255,.95),
  0 0 calc(var(--s) * .60) rgba(196,210,255,.60)}
html[data-bord="licht"] .hl-bot-gl{background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(205,218,255,.45) 30%,rgba(190,208,255,0) 62%)}
html[data-bord="licht"] .hl-bot-sch{background:radial-gradient(ellipse,rgba(120,130,190,.28) 0%,rgba(120,130,190,0) 72%)}
/* de donkere velden weg */
.b-glans .a{display:none!important}
.b-glans .s{background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(214,224,255,.40) 34%,rgba(200,215,255,0) 62%)!important}
.b-glans .v{background:radial-gradient(50% 100% at 50% 0%,rgba(200,212,255,.40) 0%,rgba(200,212,255,.14) 55%,rgba(200,212,255,0) 100%)!important}
.b-glans .v::after{background:radial-gradient(ellipse,rgba(170,184,240,.45),rgba(170,184,240,0) 70%)}
.b-lblbot::before,.b-agbot::before{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(205,218,255,.35) 40%,rgba(200,215,255,0) 68%)}
.b-mee::before{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(205,218,255,.40) 40%,rgba(200,215,255,0) 70%)}
html[data-bord="licht"] .lz-gloed{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(205,218,255,.45) 35%,rgba(200,215,255,0) 66%)}
html[data-bord="licht"] .lz-halo .hl-bot{--hl-rand:transparent}

/* ── ogen volgen ALTIJD — Lenny: "dat ogen-volg-ding wil ik ongeacht de animatie zien".
   Voorheen via `transform`, en die werd overschreven door de statusstanden en het knipperen.
   Nu via de losse eigenschap `translate`: die telt op bij elke transform-animatie. */
html[data-bord="licht"] .hl-bot-o{transform:none;translate:var(--oog-x,0) var(--oog-y,0);
  transition:translate .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}