/* Hero "De loep" op de homepage (16-10-2026; opzet goedgekeurd, MOCKUPS/solutions-loep-hero).
   Een groot productscherm in het donker; een glazen loep (WebGL in loep-hero.js) maakt helder en groot wat eronder ligt en volgt de
   managementreview door het klantportaal. Overgang = portaal: de loep zet uit tot de hele hero en knijpt weer samen in het volgende scherm.
   Zonder JavaScript of WebGL: het scherm als gewone afbeelding. Ook bij 'minder beweging' de volledige beleving (keuze opdrachtgever);
   stilzetten kan met de pauzeknop. Klassen beginnen met lp-. */
@property --lp-tint{ syntax:"<color>"; inherits:true; initial-value:#0E9F9A }
.hero.lp{ --lp-tint:#0E9F9A; min-height:max(100svh, 820px); display:flex; flex-direction:column; justify-content:center; padding:56px 0 72px; background:#061530;
  transition:--lp-tint 1.6s var(--ease-out) }
.on-dark .hero.lp{ padding-top:calc(48px + var(--hh)) }
.hero canvas.lp-licht{ z-index:0; opacity:1; pointer-events:none; display:block }
.hero canvas.lp-canvas{ z-index:2; opacity:1; pointer-events:none; display:block }
.hero.lp .wrap{ position:relative; z-index:3; width:100% }
.lp-tekst{ width:min(100%, calc((min(100vw, var(--wrap)) - 48px) * .4)) }
/* 'alle normen.' is ~5,9em breed: met deze grootte past het altijd in de tekstkolom (max. 460 px) */
.hero.lp .lp-titel{ margin:0; font-size:clamp(2.6rem, 5vw, 4.6rem); line-height:.94; letter-spacing:-.05em; max-width:none; color:#fff }
.lp-regel{ display:block }
.lp-glans{ display:inline-block; padding-bottom:.24em; margin-bottom:-.24em; background:linear-gradient(100deg, #fff 0%, #5FD3C9 32%, #E6FFFB 50%, #F2A541 76%, #fff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:lpGlans 9s linear infinite }
@keyframes lpGlans{ to{ background-position:-220% 0 } }
.hero.lp .lp-lead{ margin:18px 0 0; font-size:1.04rem; line-height:1.6; max-width:42ch }

.lp-hoofdstukken{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.14) }
.lp-hoofdstukken li{ border-bottom:1px solid rgba(255,255,255,.14) }
.lp-hoofdstukken button{ position:relative; width:100%; display:grid; grid-template-columns:34px 1fr; align-items:baseline; column-gap:8px; padding:10px 0 11px; border:0; background:none;
  color:#A9BCCA; font:inherit; text-align:left; cursor:pointer; transition:color .4s }
.lp-nr{ font:700 .76rem var(--display); letter-spacing:.08em }
.lp-naam{ font:700 1rem var(--display); letter-spacing:-.01em; transition:font-size .4s var(--ease-out) }
.lp-zin{ grid-column:2; max-height:0; overflow:hidden; opacity:0; font-size:.9rem; line-height:1.4; color:#CFE3EA; transition:max-height .6s var(--ease-out), opacity .5s, margin .6s var(--ease-out) }
.lp-balk{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden }
.lp-balk b{ display:block; height:100%; width:calc(var(--p, 0) * 100%); background:linear-gradient(90deg, #5FD3C9, #F2A541); box-shadow:0 0 12px rgba(95,211,201,.8) }
.lp-hoofdstukken button:hover, .lp-hoofdstukken button[aria-pressed="true"]{ color:#fff }
.lp-hoofdstukken button[aria-pressed="true"] .lp-nr{ color:#5FD3C9 }
.lp-hoofdstukken button[aria-pressed="true"] .lp-naam{ font-size:1.18rem }
.lp-hoofdstukken button[aria-pressed="true"] .lp-zin{ max-height:3em; opacity:1; margin-top:4px }
.hero.lp .lp-knoppen{ align-items:center; margin-top:24px }
.lp-pauze{ flex:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.05); color:#fff; display:grid; place-items:center; cursor:pointer }
.lp-pauze svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.lp-pauze .i-speel{ display:none; fill:currentColor; stroke:none }
.lp-pauze[aria-pressed="true"] .i-pauze{ display:none } .lp-pauze[aria-pressed="true"] .i-speel{ display:block }
.lp-hoofdstukken button:focus-visible, .lp-pauze:focus-visible{ outline:3px solid var(--focus); outline-offset:3px }

/* plek voor het scherm: op een smal scherm tussen de tekst; zonder WebGL staat hier de gewone afbeelding */
.lp-podium{ display:none }
.lp-reserve{ display:none; width:100%; height:auto; border-radius:14px; box-shadow:0 50px 100px -40px rgba(0,0,0,.8) }
html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ display:block; position:absolute; left:44%; right:0; top:50%; transform:translateY(-50%) }
html.no-js .lp-reserve, html.lp-geen-gl .lp-reserve{ display:block }

.lp-label{ position:absolute; left:0; top:0; z-index:4; display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:999px; white-space:nowrap; pointer-events:none;
  background:rgba(8,26,52,.86); border:1px solid color-mix(in srgb, var(--lp-tint) 60%, #fff 20%); color:#fff; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.8), 0 0 30px color-mix(in srgb, var(--lp-tint) 40%, transparent); opacity:0; scale:.9; transition:opacity .45s var(--ease-out), scale .6s var(--ease-out) }
.lp-label.lp-aan{ opacity:1; scale:1 }
html.lp-geen-gl .lp-label, html.no-js .lp-label{ display:none }
.lp-av{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #5FD3C9, #F2A541); color:var(--navy); font:800 12.5px var(--display); letter-spacing:-.02em }
.lp-label b{ display:block; font:800 15px/1.15 var(--display); color:#fff }
.lp-label small{ display:block; font-size:12.5px; color:#D5E3EC; margin-top:1px }
.lp-noot{ margin:14px 0 0; text-align:right; font-size:.8rem; color:#9FB4C3 }
.lp-tip{ color:#B9C9D4 }
@media (hover:none){ .lp-tip{ display:none } }
html.lp-geen-gl .lp-tip, html.no-js .lp-tip{ display:none }
/* lage schermen (laptop 1280 × 720): alles boven de vouw, ook de knop */
@media (min-width:1000px) and (max-height:860px){
  .hero.lp{ min-height:max(100svh, 640px); padding-bottom:58px }
  .on-dark .hero.lp{ padding-top:calc(20px + var(--hh)) }
  .hero.lp .live{ margin-bottom:12px }
  .hero.lp .lp-titel{ font-size:clamp(2.4rem, min(4.4vw, 8.4vh), 4.2rem) }
  .hero.lp .lp-lead{ margin-top:12px; font-size:.95rem; line-height:1.5 }
  .lp-hoofdstukken{ margin-top:16px }
  .lp-hoofdstukken button{ padding:6px 0 7px }
  .hero.lp .lp-knoppen{ margin-top:16px }
  .lp-noot{ margin-top:8px }
}
@media (max-width:999px){
  .hero.lp{ min-height:0; justify-content:flex-start }
  .lp-tekst{ width:100% }
  .lp-podium, html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ display:block; position:relative; left:auto; right:auto; top:auto; transform:none; height:calc((100vw - 48px) / 1.6 + 30px); margin-top:22px }
  html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ height:auto }
}
@media (max-width:640px){
  .lp-label{ white-space:normal; max-width:calc(100% - 32px) }
}