/* ============================================================================================================
   hero-v1.css — V1 FOTOMUUR, de vaste bron (hero-set, Sean 24-09-2026: "V1 · V3 · V4 · V5 allemaal af").
   Herkomst: letterlijke kopie van de stijl.css van de eerste V1-demo (26-09-2026), blok
   "HERO V1 FOTOMUUR" t/m de laatste @media (max-width:1179px) van de hero, inclusief de drie hoogtestappen
   (max-height 820/760/660). Daaronder, apart gemarkeerd: de .seg-schakelaar die de kaart nodig heeft en de
   telefoonregels (max-width 560/380) die in het voorbeeld in het algemene TELEFOON-blok staan.
   Grond (lichtbanen, sfeerkleur per demo): gronden.css hiernaast — laad die NA dit bestand, met class "ho-1"
   op de section en optioneel data-sfeer="rood|groen|paars" (standaard blauw).

   LEESMIJ — WAT JE PER DEMO VERVANGT
   1. Kleuren: --a (hoofd), --l (licht), --d (donker) op .hero (regel 1 hieronder) óf via gronden.css
      (.ho-1{--a;--l;--d}). De vaste rgba's in dit blok (46,91,255 / 168,192,255 = het voorbeeldblauw) in
      .h-vlak::before, .h-kicker, .h-kaart en .h-bewijs vervang je door dezelfde kleur als --a/--l, of je
      laat gronden.css ze overschrijven (die zet ze op color-mix met --a/--l).
      Sitevariabelen die het blok verwacht: --lint (hoogte lint), --kop (hoogte navigatie), --inkt, --grijs,
      --lucht, --blauw, --blauw-hover, --blauw-zacht, --blauw-tekst, --font-kop (Figtree 900). Zie het
      voorbeeldblok "AFHANKELIJKHEDEN" onderaan; vervang de blauwe waarden door de merkkleur van de lead.
   2. Teksten: .h-kicker (plaats + eerste letter in de u), h1 met <em> op het gekleurde zinsdeel (2–3 regels,
      meet met hero-kop-render-check.mjs), .h-zin (één zin met de belofte), de drie .h-bewijs-tegels
      (Google-score + aantal reviews, ophalen/regio, leeftijd/extra) — alleen feiten uit research/CONTENT.md.
   3. Foto's: 24 <img> in drie kolommen (.h-kol-1/2/3, elk 8 stuks = 4 unieke foto's die twee keer
      achter elkaar staan, zodat de lus naadloos doorloopt: translateY(-50%)). Natuurlijke verhouding: width/
      height op de echte maat zetten (480x480, 480x640, 600x600 …), height:auto in CSS; NIET uitsnijden
      naar één vast formaat. Geslaagdenfoto's van hun Instagram/Facebook (ig-oogst.mjs / fb-oogst.mjs),
      480 + 800 breed als webp met jpg-terugval, loading="eager" (staat in de hero). Gezichten mogen
      (demo-gezichten-toegestaan), maar geen gezicht onder de kop of de kaart (de muur staat rechts).
      Kolom 2 loopt de andere kant op (muur-neer) met een verschoven start (margin-top:-90px / -36px).
   4. Kaart (.h-kaart, id="proefles", data-kaart): kop + badge, voornaam + telefoon, plaats-schakelaar
      (.seg, 3 waarden uit hun regio), honeypot .web, foutregel, knop, WhatsApp-regel (hun nummer), en het
      succesblok .pf-klaar (nepformulier: interactie.mjs toetst fout + succes).

   CHECKS DIE ER BIJ HOREN (demo.json van de eerste V1-demo = het voorbeeld)
   - node _tools/hero-check.mjs <url> --kaart "[data-kaart]"        (hero + kaart passen op elke laptophoogte)
   - node _tools/demo-checks/h1-lijnen.mjs <index.html> "h1" "…"    (h1 op 390 px: 2–3 regels)
   - node _tools/hero-kop-render-check.mjs …                        (kop echt gerenderd geteld, geen <br>-telling)
   - node _tools/demo-checks/hoogtes.mjs <url>                      (sectiehoogtes 390 + 1440; telefoon ≤ 11.000)
   - botsing-check via keuring op botsingHoogtes [880,780,700,640]  (de drie hoogtestappen hieronder)
   - naad-check = NVT, met reden in demo.json "nvt.naad": de schuine snede tussen tekstvlak en fotomuur is
     het ontwerp zelf (clip-path op .h-muur), geen maskerhelling of sluier over een foto; op de telefoon ligt
     de muur als achtergrond onder een egale sluier (.h-sluier).
   - hero-beeld-check en de V4-bandcontrole (band.json) zijn V4-gereedschap; voor V1 niet van toepassing
     (audit 26-09: geijkt op het studiobeeld, niet op een fotomuur).
   ============================================================================================================ */
/* ── HERO V1 FOTOMUUR (vaste set, Sean 24-09): lichtbanen links, muur van eigen foto's rechts ─────────── */
.hero{--a:#2E5BFF;--l:#A8C0FF;--d:#042FC8;position:relative;height:calc(100svh - var(--lint) - var(--kop));min-height:480px;background:#02040A;color:#fff;overflow:hidden}
.h-vlak{position:relative;height:100%;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#05080F 0%,#02040A 100%)}
.h-vlak::before,.h-vlak::after{content:"";position:absolute;z-index:0;top:-24%;height:160%;transform:skewX(-22deg);pointer-events:none}
.h-vlak::before{left:36%;width:12%;background:linear-gradient(180deg,var(--l) 0%,var(--a) 40%,var(--d) 100%);box-shadow:0 0 90px 12px rgba(46,91,255,.4)}
.h-vlak::after{left:51.5%;width:3.6%;background:linear-gradient(180deg,var(--a),var(--d))}
.h-licht{position:absolute;z-index:0;top:-24%;height:160%;left:calc(48% - 2px);width:2px;transform:skewX(-22deg);background:rgba(255,255,255,.95);box-shadow:0 0 16px 3px var(--l);pointer-events:none}
.h-gloed{position:absolute;z-index:1;inset:0;background:radial-gradient(52% 58% at 20% 42%,rgba(2,4,11,.7),rgba(2,4,11,.3) 55%,transparent 80%);pointer-events:none}
.h-korrel{position:absolute;z-index:0;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E")}
.ho-1 .h-muur{position:absolute;z-index:1;top:0;right:0;bottom:0;width:50%;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:0 13px;background:#03050C;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}
.h-kol{overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.h-kol ul{display:flex;flex-direction:column;gap:13px;list-style:none;margin:0;padding:0;animation:muur-op 70s linear infinite}
.h-kol-2 ul{animation-name:muur-neer;margin-top:-90px}
.h-kol-3 ul{margin-top:-36px}
@keyframes muur-op{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes muur-neer{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.h-kol ul{animation:none}}
.h-kol img{width:100%;height:auto;border-radius:15px;display:block}
.h-sluier{display:none}
.h-inhoud{position:relative;z-index:3;width:100%;padding-left:5vw;padding-right:0;font-size:min(16px,1.1111vw,calc((100svh - 104px) / 42))}
.h-inhoud > *{max-width:clamp(300px,calc(50vw - 130px),600px)}
.h-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 1em;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(46,91,255,.16);border:1px solid rgba(168,192,255,.4);font-family:var(--font-kop);font-weight:900;font-size:.76em;letter-spacing:.13em;text-transform:uppercase;color:var(--l)}
.h-kicker u{text-decoration:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(160deg,var(--l),var(--d));color:#fff;font-size:11px;font-weight:900;flex:none;transform:rotate(-7deg)}
.hero h1{margin:0 0 .3em;font-family:var(--font-kop);font-weight:900;line-height:.98;letter-spacing:-.04em;color:#fff;font-size:3.7em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--l)}
.h-zin{margin:0 0 1.3em;font-size:1.15em;line-height:1.5;color:rgba(235,240,255,.82)}
.h-kaart{background:linear-gradient(180deg,#fff,#FAFBFC);border-radius:20px;padding:22px 26px 20px;color:var(--inkt);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 6px rgba(0,0,0,.05),0 28px 64px -18px rgba(0,0,0,.5),0 0 0 1px rgba(168,192,255,.25)}
.h-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.h-kaart-kop b{display:block;font-family:var(--font-kop);font-size:1.2em;font-weight:900;letter-spacing:-.015em}
.h-kaart-kop small{display:block;font-size:.82em;color:var(--grijs);margin-top:2px}
.h-badge{font-family:var(--font-kop);font-weight:900;font-size:.8em;padding:8px 14px;border-radius:999px;background:var(--blauw-zacht);color:var(--blauw-tekst);white-space:nowrap;flex:none}
.h-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h-veld{display:block;border:1px solid #DFE4EA;border-radius:11px;padding:8px 13px 7px;background:#fff}
.h-veld span{display:block;font-size:.74em;color:var(--grijs);margin-bottom:1px}
.h-veld input{display:block;width:100%;border:0;padding:0;font:inherit;font-size:.95em;color:var(--inkt);background:transparent;outline:none}
.h-veld:focus-within{border-color:var(--blauw);box-shadow:0 0 0 3px rgba(4,47,200,.15)}
.h-plaats{border:0;padding:0;margin:10px 0 0}
.h-plaats legend{font-size:.76em;color:var(--grijs);padding:0;margin-bottom:5px}
.h-plaats .seg span{padding:7px 4px;font-size:.78em}
.h-cta{display:block;width:100%;margin-top:12px;text-align:center;font-family:var(--font-kop);font-weight:900;font-size:1.02em;background:var(--blauw);color:#fff;border:0;border-radius:13px;padding:14px;box-shadow:0 10px 26px -8px rgba(4,47,200,.7);cursor:pointer}
.h-cta:hover{background:var(--blauw-hover)}
.h-onder{margin:9px 0 0;text-align:center;font-size:.8em;color:var(--grijs)}
.h-onder a{color:var(--blauw-tekst);font-weight:700;white-space:nowrap}
.pf-fout{margin:8px 0 0;padding:8px 12px;border-radius:9px;background:#FCE8E8;color:#8F1E1E;font-size:.85em;font-weight:600}
.pf-klaar{text-align:center;padding:8px 0 4px}
.pf-vink{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blauw);color:#fff;margin-bottom:10px}
.pf-klaar h2{font-size:1.4em;margin:0 0 6px;color:var(--inkt)}
.pf-klaar p{margin:0;color:var(--grijs);font-size:.95em}
.h-bewijs{display:flex;gap:10px;margin:1.4em 0 0;padding:0;list-style:none}
.h-bewijs li:first-child{flex:1.15 1 0}
.h-bewijs li{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:14px;background:rgba(10,14,30,.5);border:1px solid rgba(168,192,255,.22);backdrop-filter:blur(14px)}
.h-bewijs .tekst{min-width:0}
.h-bewijs b{display:block;font-family:var(--font-kop);font-size:.98em;font-weight:900;letter-spacing:-.015em;color:#fff;line-height:1.2}
.h-bewijs em{display:block;font-style:normal;font-size:.8em;line-height:1.35;color:rgba(235,240,255,.72);margin-top:3px}
.h-ster{color:#F5B301;letter-spacing:1px;font-size:.72em;margin-top:4px;flex:none}
.h-stip{flex:none;width:9px;height:9px;border-radius:2px;background:var(--l);box-shadow:0 0 10px var(--a);transform:rotate(45deg);margin-top:6px}
@media (min-width:1180px) and (max-height:820px){.h-inhoud{font-size:min(15px,1.05vw)}.hero h1{font-size:3.4em}.h-kaart{padding:16px 20px 14px}.h-bewijs{margin-top:1em}}
@media (min-width:1180px) and (max-height:760px){.h-bewijs{display:none}.h-zin{margin-bottom:1em}}
@media (min-width:1180px) and (max-height:660px){.h-zin{display:none}.hero h1{font-size:3.1em;margin-bottom:.55em}.h-kicker{margin-bottom:.7em}}
@media (max-width:1179px){
  .hero{height:auto;min-height:0}
  .h-vlak{padding:44px 0 40px}
  .h-vlak::before,.h-vlak::after,.h-licht{display:none}
  .ho-1 .h-muur{inset:0;width:100%;clip-path:none;gap:9px;padding:9px;opacity:.85}
  .h-kol img{border-radius:11px}
  .h-sluier{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,10,.72) 0%,rgba(2,4,10,.9) 42%,rgba(2,4,10,.92) 100%)}
  .h-gloed{display:none}
  .h-inhoud{padding-inline:clamp(16px,4vw,40px);font-size:16px;text-align:center}
  .h-inhoud > *{max-width:min(100%,560px);margin-inline:auto}
  .h-kicker{font-size:.68em;padding:5px 11px 5px 5px}
  .hero h1{font-size:clamp(34px,11vw,52px);line-height:1.02}
  .h-zin{font-size:1.05em}
  .h-kaart{text-align:left;padding:18px 18px 16px}
  .h-velden{grid-template-columns:1fr}
  .h-bewijs{flex-wrap:wrap;gap:8px;margin-top:16px;text-align:left}
  .h-bewijs li{flex:1 1 100%;align-items:center;padding:9px 12px;border-radius:11px}
  .h-bewijs li:nth-child(3){display:none}
}

/* 26-09 keuring run 3: hero past ook op 600-640 px hoge laptops (min-height op de hero ≤ 480; de laptopreeks van hero-check gaat tot 600 px hoog) */
@media (min-width:1180px) and (max-height:640px){.h-kicker{display:none}.h-kaart{padding:12px 18px 12px}.hero h1{font-size:2.9em;margin-bottom:.45em}}

/* ── AFHANKELIJKHEDEN (uit het algemene deel van de stijl.css van het voorbeeld; in een demo staan deze in de site zelf) ── */
/* de .seg-schakelaar die de kaart gebruikt voor "Waar woon je?" */
.seg{display:flex;gap:6px;padding:4px;background:var(--lucht);border-radius:12px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:9px 6px;border-radius:9px;font-family:var(--font-kop);font-weight:900;font-size:.86rem;color:var(--grijs);line-height:1.2}
.seg input:checked + span{background:var(--blauw);color:#fff;box-shadow:0 6px 14px -6px rgba(4,47,200,.6)}
.seg input:focus-visible + span{outline:3px solid var(--blauw);outline-offset:2px}

/* sitevariabelen die het hero-blok verwacht — VOORBEELDWAARDEN (logo-blauw), per demo vervangen.
   Lettertype: Figtree 900 als kop (hero-studio-ontwerpen 24-09), lopende tekst per demo. */
:root{
  --blauw:#042FC8;--blauw-hover:#0A3BE0;--blauw-zacht:#DCE6FF;--blauw-tekst:#0428A8;
  --inkt:#12161F;--grijs:#4D5668;--lucht:#EDF2FF;
  --font-kop:"Figtree",system-ui,sans-serif;
  --lint:34px;--kop:70px;   /* hoogte van het lint boven en de navigatie: de hero = 100svh min deze twee */
}
.web{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* honeypot-veld */

/* ── TELEFOON (voorbeeld, blok "TELEFOON" max-width 560/380): titel gecentreerd, kaart links uitgelijnd, bewijs weg ── */
@media (max-width:560px){
  .h-kaart-kop b,.pf-klaar h2{text-align:left}
  .pf-klaar h2{text-align:center;font-size:1.3rem}
  .h-vlak{padding:34px 0 30px}
  .h-kaart{padding:16px 14px 14px}
  .h-plaats .seg span{font-size:.72em;padding:7px 2px}
  .h-bewijs{display:none}
}
@media (max-width:380px){.h-plaats .seg{flex-direction:column}}

/* Sean 28-09-2026: V1-titel 72 px vanaf 1400 breed op een volle hoogte; anders twee regels naast de kaart (hero-check) */
@media (min-width:1180px) and (max-width:1399px){.hero h1{font-size:max(3.7em,62px)}}
@media (min-width:1180px) and (max-width:1399px) and (max-height:799px){.hero h1{font-size:max(3.3em,56px)}}
@media (min-width:1400px) and (max-height:799px){.hero h1{font-size:max(3.7em,64px)}}
@media (min-width:1400px) and (max-height:700px){.hero h1{font-size:max(3.4em,58px)}}
@media (min-width:1180px) and (max-width:1399px) and (min-height:800px){.hero h1{font-size:max(3.3em,56px)}}
@media (min-width:1400px) and (min-height:800px){.hero h1{font-size:max(4.4em,72px)}}
/* ONTWERP 1 - GROND B3 LICHTBANEN (24-09, gekozen door Sean). Bijna-zwarte grond, twee felle schuine
   banen die onder de muur doorlopen, geen losse lichtstreep. Alleen het limoen is overal vervangen
   door de sfeerkleur (--a hoofd, --l licht, --d donker); de opbouw is ongewijzigd. */
.ho-1{--a:#2E8BFF;--l:#A8D2FF;--d:#1B4FD6}
.ho-1[data-sfeer="rood"]{--a:#FF3B4E;--l:#FFB8BF;--d:#C4102D}
.ho-1[data-sfeer="groen"]{--a:#10D48E;--l:#9BF5D3;--d:#078A5A}
.ho-1[data-sfeer="paars"]{--a:#8B5CFF;--l:#D4C3FF;--d:#5A2BE0}
.ho-1 .h-raster,.ho-1 .h-gloed-2,.ho-1 .h-licht{display:none}
.ho-1 .h-nav{background:rgba(4,7,16,.92)}
.ho-1 .h-lint{background:#02040A}
.ho-1 .h-vlak{background:linear-gradient(180deg,#05080F 0%,#02040A 100%)}
.ho-1 .h-vlak::before,.ho-1 .h-vlak::after{content:"";position:absolute;z-index:0;top:-24%;height:160%;transform:skewX(-22deg);pointer-events:none}
.ho-1 .h-vlak::before{left:36%;width:12%;background:linear-gradient(180deg,var(--l) 0%,var(--a) 40%,var(--d) 100%);box-shadow:0 0 90px 12px color-mix(in srgb,var(--a) 40%,transparent)}
.ho-1 .h-vlak::after{left:51.5%;width:3.6%;background:linear-gradient(180deg,var(--a),var(--d))}
.ho-1 .h-gloed{display:block;left:0;top:0;width:100%;height:100%;border-radius:0;background:radial-gradient(52% 58% at 20% 42%,rgba(2,4,11,.7),rgba(2,4,11,.3) 55%,transparent 80%);filter:none;z-index:1}
.ho-1 .h-vignet{background:none}
.ho-1 .h-korrel{opacity:.07}
.ho-1 .h-muur{background:#03050C}
.ho-1 .h-merk i{background:linear-gradient(160deg,var(--l),var(--d));color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--a) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.ho-1 .h-kicker{background:color-mix(in srgb,var(--a) 16%,transparent);border-color:color-mix(in srgb,var(--l) 40%,transparent);color:var(--l)}
.ho-1 .h-kicker u{background:linear-gradient(160deg,var(--l),var(--d));color:#fff}
.ho-1 .h-vlak h1 em{background:linear-gradient(90deg,var(--l) 0%,var(--a) 60%,var(--l) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.ho-1 .h-kaart{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 44px 90px -30px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--l) 25%,transparent)}
.ho-1 .h-bewijs li{background:rgba(10,14,30,.5);border-color:color-mix(in srgb,var(--l) 22%,transparent);backdrop-filter:blur(14px)}
.ho-1 .h-bewijs em{color:rgba(235,240,255,.72)}
.ho-1 .h-stip{background:var(--l);box-shadow:0 0 10px var(--a)}
/* De lichtstreep hoort er wel in: dun en helder, strak tegen de rechterrand van de brede baan (Sean 24-09), niet los in de spleet naast de smalle
   baan (zelfde plek als in het goedgekeurde ontwerp: left 48,7%, zelfde schuinte en hoogte). */
.ho-1 .h-licht{display:block;position:absolute;z-index:0;inset:auto;top:-24%;height:160%;left:calc(48% - 2px);width:2px;transform:skewX(-22deg);background:rgba(255,255,255,.95);box-shadow:0 0 16px 3px var(--l);pointer-events:none}