/* ===================================================================
   vindbaarheidsscan.nl

   Herbouwd 11-10-2026 naar het voorbeeld dat Marc aanwees
   (efficusai.co.uk): zwart, goud, Geist, enorme gecentreerde kop,
   waaier van kaarten op een gekanteld vlak, trechter, rijen met grote
   getallen, scroll-sectie met reuzencijfers, accordeon, centrale footer.

   Structuur en uiterlijk zijn gemeten aan het voorbeeld. Alle teksten,
   cijfers en beelden zijn van deze site. Er is niets uit het voorbeeld
   overgenomen aan inhoud, logo of beeldmateriaal.

   Gemeten aan het voorbeeld:
     achtergrond #000, accent #FFCC4F, tekst op goud #1A1308
     kaart #0D0D0D, rand #262626, radius .75rem
     h1 96px / gewicht 600 / regelhoogte 1 / spatiering -0,052em
     knop 17px 32px, pil, gouden gloed
     sectie 96px boven, 104px onder, inhoud 1200px breed
   =================================================================== */

@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
 src:url("/lettertype/geist-latin.woff2") format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
 src:url("/lettertype/geist-latin-ext.woff2") format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;
 src:url("/lettertype/geist-mono-latin.woff2") format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;
 src:url("/lettertype/geist-mono-latin-ext.woff2") format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

 --bg:#000;
 --fg:#fff;
 --gold:#ffcc4f;
 --gold-hi:#ffe28f;
 --gold-lo:#f3b535;
 --on-gold:#1a1308;
 --gold-lijn:rgba(255,204,79,.30);
 --gold-vlak:rgba(255,204,79,.07);

 --kaart:#0d0d0d;
 --kaart2:#121212;
 --lijn:#262626;
 --lijn2:#1a1a1a;

 /* Drie grijzen, elk gemeten op zwart en op de kaartkleur. */
 --t1:#d4d4d4;
 --t2:#a3a3a3;
 --t3:#8c8c8c;

 --r:12px;
 --rk:20px;
 --curve:cubic-bezier(.16,1,.3,1);
 --breed:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
button,input,textarea,select{font-family:inherit;font-size:100%;line-height:inherit}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--on-gold)}
.verstopt{position:absolute;left:-9999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:calc(var(--breed) + 48px);margin:0 auto;padding:0 24px}
/* De gouden gloeden zijn 900 tot 1100px breed en steken op een telefoon
   buiten het scherm uit (gemeten: 355px horizontale overloop). overflow-x
   op de body vangt dat op iOS niet betrouwbaar af. clip knipt af zonder een
   scrollcontainer te maken, dus de plakkende sectie blijft werken; hidden
   zou dat breken. */
section{position:relative;overflow-x:clip}
.sec{padding:96px 0 104px}

/* ---------- tekstmaten ---------- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2.1rem,4vw,3.75rem);letter-spacing:-.045em;max-width:17em}
h3{font-size:1.5rem;letter-spacing:-.03em;font-weight:500;line-height:1.25}
p{margin:0}
.lead{font-size:clamp(1rem,1.25vw,1.12rem);color:var(--t3);max-width:41em;margin-top:22px;line-height:1.7}

/* Eyebrow: mono, goud, brede spatiering. Links met een punt, gecentreerd
   met streepjes aan beide kanten (zoals het voorbeeld doet). */
.eb{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--gold);margin:0 0 22px;display:flex;align-items:center;gap:12px}
.eb::before{content:"·";font-size:1.4em;line-height:0;margin-right:-4px}
.eb.lijn::before{content:"";width:34px;height:1px;background:var(--gold);margin:0}
.eb.mid{justify-content:center}
.eb.mid::before,.eb.mid::after{content:"";width:34px;height:1px;background:var(--gold);margin:0}

/* Het gouden verloop in een kop. Filter geeft de zachte gloed die het
   voorbeeld ook heeft. */
.goud{background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-lo) 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(255,204,79,.28))}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
 background:var(--gold);color:var(--on-gold);border:0;border-radius:999px;
 padding:17px 32px;font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
 cursor:pointer;white-space:nowrap;
 box-shadow:0 0 0 1px rgba(255,204,79,.4),0 0 40px rgba(255,204,79,.32);
 transition:transform .3s var(--curve),box-shadow .3s var(--curve),background .3s}
.knop:hover{transform:translateY(-2px);background:#ffd66e;
 box-shadow:0 0 0 1px rgba(255,204,79,.6),0 0 64px rgba(255,204,79,.5)}
.knop:active{transform:translateY(0) scale(.985)}
.knop:focus-visible,.pil:focus-visible,.nav a:focus-visible,.acc button:focus-visible,
form input:focus-visible,form textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.knop.klein{padding:10px 20px;font-size:14px;box-shadow:0 0 0 1px rgba(255,204,79,.4),0 0 24px rgba(255,204,79,.22)}
.pil{display:inline-flex;align-items:center;border:1px solid rgba(255,204,79,.45);color:#ffd979;
 border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500;text-decoration:none;
 transition:background .3s,border-color .3s}
.pil:hover{background:rgba(255,204,79,.09);border-color:var(--gold)}

/* ---------- balk ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:70px;
 border-bottom:1px solid var(--lijn2);background:rgba(0,0,0,0);
 transition:background .35s var(--curve)}
.nav.gescrold{background:rgba(0,0,0,.72);backdrop-filter:blur(14px)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;
 max-width:none;padding:0 34px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;
 letter-spacing:-.03em;font-size:17px;color:#fff}
.merk svg{width:30px;height:30px}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks .tekst{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--t2);text-decoration:none;transition:color .25s}
.navlinks .tekst:hover{color:var(--gold)}
.navlinks .acties{display:flex;gap:12px;align-items:center;margin-left:6px}

/* ---------- 1. hero ---------- */
.hero{padding:132px 0 0;text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;left:50%;top:-10%;width:1500px;height:760px;
 transform:translateX(-50%);z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 50% 18%,rgba(255,204,79,.27) 0%,rgba(255,170,40,.10) 38%,transparent 70%)}
.hero h1{font-size:clamp(2.4rem,6.67vw,96px);line-height:1;letter-spacing:-.052em;font-weight:600;
 max-width:1120px;margin:0 auto}
.hero .sub{font-size:clamp(1.02rem,1.4vw,1.25rem);color:var(--t1);max-width:41em;margin:36px auto 0;line-height:1.6}
.hero .knoppen{margin-top:42px}

/* Waaier: alle kaarten op één gekanteld vlak. Het voorbeeld doet dit met
   perspective 1400px en één vaste 3D-matrix op het vlak; die waarde is
   overgenomen, want ze geeft precies dat scheve zicht. */
.fan{position:relative;height:clamp(300px,44vw,620px);margin-top:30px;overflow:hidden;
 -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.fan-p{perspective:1400px;position:absolute;left:50%;top:0;width:0;height:100%}
.fan-v{position:absolute;left:-760px;top:112px;width:1520px;display:grid;
 grid-template-columns:repeat(6,1fr);gap:22px;align-items:start;text-align:left;
 transform-style:preserve-3d;transform-origin:50% 0;
 transform:matrix3d(1.0124,-0.107653,-0.0621534,0,0.124307,0.876762,0.506199,0,0,-0.5,0.866025,0,0,0,0,1)}

/* De kaarten zelf: licht, zoals de post-screenshots in het voorbeeld, zodat
   ze op zwart afsteken. Alles voorbeeld, verzonnen namen. */
.pk{background:#f4f3ef;color:#15130e;border-radius:14px;padding:15px 15px 17px;
 font-size:11.5px;line-height:1.45;box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
 overflow:hidden;position:relative}
.pk:nth-child(1){margin-top:44px}.pk:nth-child(2){margin-top:24px}
.pk:nth-child(3){margin-top:6px}.pk:nth-child(4){margin-top:-12px}
.pk:nth-child(5){margin-top:-28px}.pk:nth-child(6){margin-top:-44px}
.pk-k{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.pk-av{width:20px;height:20px;border-radius:50%;background:#15130e;color:#ffcc4f;
 display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}
.pk-k b{font-size:11.5px;font-weight:600}
.pk-k span{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
 text-transform:uppercase;color:#736f64}
.pk-q{font-weight:600;font-size:12.5px;letter-spacing:-.015em;margin-bottom:8px;line-height:1.3}
.pk ol,.pk ul{margin:0;padding:0;list-style:none}
.pk li{display:flex;gap:7px;padding:5px 0;border-top:1px solid #dedbd1}
.pk li i{font-style:normal;font-weight:700;color:#8d690f;font-family:var(--mono);font-size:10px;flex:0 0 14px}
.pk li s{text-decoration:none;color:#6c685c;display:block;font-size:10.5px}
.pk-bal{height:6px;border-radius:3px;background:#dedbd1;margin:7px 0}
.pk-bal u{display:block;height:100%;border-radius:3px;background:#15130e;text-decoration:none}
.pk-bal.g u{background:#e0a21f}
.pk.donker{background:#111;color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,204,79,.35)}
.pk.donker .pk-k span{color:#8c8c8c}.pk.donker .pk-av{background:var(--gold);color:var(--on-gold)}
.pk.donker li{border-color:#2a2a2a}.pk.donker li i{color:var(--gold)}
.pk.donker .pk-bal{background:#2a2a2a}.pk.donker .pk-bal u{background:#8c8c8c}
.pk.donker .pk-bal.g u{background:var(--gold)}
.pk .groot{font-size:46px;font-weight:600;letter-spacing:-.05em;line-height:1;margin:6px 0 4px}
.pk .sterren{color:#e0a21f;letter-spacing:2px;font-size:11px}

/* ---------- 2. de kans ---------- */
.kans::before{content:"";position:absolute;left:55%;top:30%;width:900px;height:600px;transform:translateX(-50%);
 background:radial-gradient(ellipse,rgba(255,204,79,.10),transparent 68%);pointer-events:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.kk{background:#0e0e0e;border:1px solid var(--lijn);border-radius:var(--rk);padding:28px 28px 20px;
 overflow:hidden;position:relative}
.kk.vol{background:linear-gradient(180deg,rgba(255,204,79,.075),rgba(255,204,79,.015) 60%);
 border-color:rgba(255,204,79,.30);box-shadow:0 0 90px rgba(255,204,79,.09)}
.kk .klein{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.kk.vol .klein{color:var(--gold)}
.kk h3{margin-top:14px;font-size:clamp(1.3rem,1.9vw,1.7rem);max-width:18em;font-weight:500;letter-spacing:-.03em}
.kk svg{width:100%;height:auto;margin-top:6px}
.ln{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.6;stroke-dasharray:1;stroke-dashoffset:1;
 transition:stroke-dashoffset 1.6s var(--curve)}
.ln.st{stroke-dasharray:4 5;stroke-dashoffset:0;stroke-opacity:.45}
.zichtbaar .ln:not(.st){stroke-dashoffset:0}
.stip{fill:var(--gold)}
.grijs{fill:#3a3a3a}
.dia-tekst{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--gold)}
.dia-tekst.g{fill:#9a9a9a}
.dia-doos{fill:#161616;stroke:var(--gold);stroke-opacity:.55;stroke-width:1.2}
.dia-doos.vol{fill:var(--gold);stroke:none}
.dia-balk{fill:var(--gold)}.dia-balk.z{fill:#444}


/* ---------- 2b. de vier kanalen ----------
   Vier kaarten in een raster, in dezelfde taal als de twee kaarten van "de
   kans". De mate van sturing is een gouden meter; de eerste kaart (het best
   te sturen) krijgt de gouden variant, net als de uitgelichte kaart in het
   voorbeeld. Geen vier kanaalkleuren: een accent, het verschil zit in de
   inhoud. */
.kanalen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px}
.kn{background:#0e0e0e;border:1px solid var(--lijn);border-radius:var(--rk);padding:30px 30px 26px;
 display:flex;flex-direction:column}
.kn.vol{background:linear-gradient(180deg,rgba(255,204,79,.075),rgba(255,204,79,.015) 60%);
 border-color:rgba(255,204,79,.30);box-shadow:0 0 90px rgba(255,204,79,.09)}
.kn-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
 font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.kn-lab{color:var(--t2)}.kn-st{color:var(--gold)}
.mt{height:6px;border-radius:3px;background:#222;margin:14px 0 24px;overflow:hidden}
.mt u{display:block;height:100%;width:0;border-radius:3px;text-decoration:none;
 background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
 transition:width 1.4s var(--curve) .25s}
.zichtbaar .mt u{width:var(--v)}
.kn h3{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:500;letter-spacing:-.03em}
.kn-uit{color:var(--t2);margin-top:12px;font-size:1rem;line-height:1.65}
.kn ul{list-style:none;margin:20px 0 0;padding:0}
.kn li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--lijn2);color:var(--t1);font-size:.97rem;line-height:1.5}
.kn li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--gold)}
.kn-meet{margin-top:auto;padding-top:22px;color:var(--t1);font-size:.97rem}
.kn-meet b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--gold);font-weight:500;margin-bottom:6px}
.nuance{max-width:62em;margin-top:34px;padding:22px 26px;border:1px dashed #3a3a3a;border-radius:var(--r);
 color:var(--t3);font-size:.97rem;line-height:1.7}
.nuance strong{color:var(--t1);font-weight:600}

/* ---------- 3. trechter ---------- */
.trechter{position:relative;max-width:880px;margin:64px auto 0;padding:26px 0 30px;
 clip-path:polygon(0 0,100% 0,96.5% 100%,3.5% 100%);
 background:linear-gradient(180deg,rgba(255,204,79,.20) 0%,rgba(255,204,79,.045) 38%,rgba(255,255,255,.015) 100%);
 border-radius:26px 26px 0 0}
.tr-rand{display:flex;justify-content:space-between;padding:0 24px 14px;font-family:var(--mono);
 font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.tr-rij{display:flex;align-items:center;gap:16px;background:#121212;border:1px solid var(--lijn);
 border-radius:14px;padding:16px 22px;margin:0 0 10px;
 margin-left:var(--in);margin-right:var(--in);
 opacity:0;transform:translateY(18px);
 transition:opacity .7s var(--curve),transform .7s var(--curve);transition-delay:calc(var(--i) * 90ms)}
.zichtbaar .tr-rij{opacity:1;transform:none}
.tr-n{flex:0 0 34px;height:34px;border-radius:9px;background:#1c1c1c;border:1px solid #2c2c2c;
 display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2)}
.tr-t{font-size:1.18rem;font-weight:500;letter-spacing:-.02em;color:#fff}
.tr-t small{display:block;font-size:.8rem;font-weight:400;color:var(--t3);letter-spacing:0;margin-top:4px;line-height:1.45}
.tr-tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
 border:1px solid rgba(255,204,79,.5);color:var(--gold);border-radius:999px;padding:5px 11px;white-space:nowrap}
.tr-rij.hl{background:linear-gradient(180deg,#ffdc7a 0%,#ffc742 100%);border-color:transparent;
 padding:22px 26px;box-shadow:0 0 70px rgba(255,204,79,.30);margin-bottom:12px}
.tr-rij.hl .tr-n{background:#1a1308;color:var(--gold);border-color:#1a1308;width:44px;height:44px;flex-basis:44px;
 font-size:15px;border-radius:11px}
.tr-rij.hl .tr-t{font-size:1.7rem;color:#1a1308;letter-spacing:-.035em;font-weight:600}
.tr-rij.hl .tr-t small{color:#3b2c0b;font-size:.92rem;font-weight:500;margin-top:6px}
.tr-rij.hl .tr-tag{background:#1a1308;border-color:#1a1308;color:var(--gold)}
.tr-rij.mijn{background:#15120a;border-color:rgba(255,204,79,.32)}
.tr-rij.mijn .tr-n{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.tr-rij.mijn .tr-t{color:var(--gold)}

/* ---------- 4. wat we meten ---------- */
.bewijs::before{content:"";position:absolute;left:35%;top:2%;width:760px;height:520px;transform:translateX(-50%);
 background:radial-gradient(ellipse,rgba(255,204,79,.12),transparent 66%);pointer-events:none}
.brijen{margin-top:50px;display:grid;gap:12px}
.br{display:grid;grid-template-columns:150px 54px 1fr auto;align-items:center;gap:24px;
 background:linear-gradient(180deg,#141414,#0e0e0e);border:1px solid var(--lijn);
 border-radius:var(--rk);padding:26px 28px;
 opacity:0;transform:translateY(20px);transition:opacity .8s var(--curve),transform .8s var(--curve);
 transition-delay:calc(var(--i) * 110ms)}
.zichtbaar .br{opacity:1;transform:none}
.br .lab{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--t2);font-weight:600}
.br .lab::before{content:"";width:9px;height:9px;border-radius:50%;background:#444}
.br .chip{width:52px;height:52px;border-radius:13px;background:#1b1b1b;border:1px solid #2e2e2e;
 display:grid;place-items:center;color:var(--t1)}
.br .chip svg{width:24px;height:24px}
.br h3{font-size:1.28rem;font-weight:500;letter-spacing:-.025em}
.br p{color:var(--t3);font-size:.98rem;margin-top:6px;max-width:44em;line-height:1.55}
.br .getal{text-align:right}
.br .getal b{display:block;font-size:clamp(2.6rem,4.6vw,3.9rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--t2)}
.br .getal span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--t3);margin-top:8px}
.br:nth-child(2) .lab::before{background:var(--gold-lo)}
.br:nth-child(2) .getal b{color:#fff}
.br.nu{background:linear-gradient(180deg,#ffdc7a,#ffc742);border-color:transparent;
 box-shadow:0 0 80px rgba(255,204,79,.30);color:var(--on-gold)}
.br.nu .lab{color:var(--on-gold)}.br.nu .lab::before{background:var(--on-gold)}
.br.nu .chip{background:#d9a93c;border-color:#c79a30;color:#1a1308}
.br.nu h3{color:#1a1308;font-weight:600}
.br.nu p{color:#3b2c0b}
.br.nu .getal b{color:#1a1308;font-size:clamp(3rem,5.4vw,4.6rem)}
.br.nu .getal span{color:#3b2c0b}

/* ---------- 5. de meting in cijfers (scroll-sectie) ---------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lijn2);
 border-bottom:1px solid var(--lijn2);margin-top:58px}
.cijfers > div{padding:28px 30px 30px;border-right:0}
.cijfers b{display:block;font-size:2.4rem;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.cijfers > div:first-child b{color:var(--gold)}
.cijfers span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--t3);margin-top:10px;line-height:1.55;max-width:20em}
.tik{display:flex;align-items:center;gap:14px;border:1px solid var(--lijn);border-radius:var(--r);
 background:#0e0e0e;padding:0 20px;height:44px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--t2)}
.podium-in .tik{position:absolute;top:96px;left:24px;right:24px;max-width:var(--breed);margin:0 auto;z-index:3;
 background:rgba(14,14,14,.86);backdrop-filter:blur(8px)}
.tik .bol{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(255,204,79,.8);
 animation:puls 2.4s ease-in-out infinite}
.tik ol{margin:0 0 0 auto;padding:0;list-style:none;display:flex;gap:26px}
.tik li{color:var(--t3);transition:color .4s}
.tik li b{color:var(--gold);margin-right:8px;font-weight:600}
.tik li.aan{color:#fff}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

.podium{position:relative;height:420vh;margin-top:0}
.podium-in{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;display:grid;place-items:center}
.muur{position:absolute;inset:-6% -4%;display:grid;grid-template-columns:repeat(7,1fr);gap:18px;
 opacity:.20;filter:blur(1.5px) saturate(.8);transform:rotate(-4deg) scale(1.12);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.muur .pk{margin:0 !important;min-height:150px}
.podium-in::after{content:"";position:absolute;inset:0;
 background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.75) 70%);pointer-events:none}
.stap{position:absolute;z-index:2;text-align:center;opacity:0;transform:translateY(30px) scale(.97);
 transition:opacity .8s var(--curve),transform .8s var(--curve);pointer-events:none;padding:0 24px}
.stap.aan{opacity:1;transform:none}
.stap .eb{justify-content:center}
.stap .eb::before{display:none}
.stap .reus{font-size:clamp(7rem,21vw,17rem);font-weight:600;letter-spacing:-.055em;line-height:.9;
 display:block}
.stap p{font-size:clamp(1rem,1.5vw,1.3rem);color:var(--t1);max-width:26em;margin:18px auto 0}
.stap p.eb{font-size:13px;color:var(--gold);max-width:none;margin:0 0 20px}
.trigger{position:absolute;left:0;width:1px;height:100vh;pointer-events:none}

/* ---------- 6. voorbeeld ---------- */
.vb-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:nowrap}
.vb-kop > div:first-child{flex:1 1 auto;min-width:0}
.badge{flex:0 0 auto;margin-top:6px}
.vb-kop::before{content:"";position:absolute;left:30%;top:0;width:900px;height:520px;transform:translateX(-50%);
 background:radial-gradient(ellipse,rgba(255,204,79,.11),transparent 66%);pointer-events:none}
.badge{display:flex;align-items:center;gap:14px;border:1px solid var(--lijn);border-radius:16px;
 background:#0d0d0d;padding:14px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--gold)}
.badge b{background:#fff;color:#0a0a0a;border-radius:10px;padding:9px 14px;font-family:var(--font);
 font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:600}
.paneel{margin-top:44px;border:1px solid var(--lijn);border-radius:var(--rk);background:#0b0b0b;
 padding:26px 26px 0;position:relative;overflow:hidden}
.paneel h3{font-size:2.1rem;letter-spacing:-.04em;font-weight:700}
.paneel .ps{color:var(--t3);margin-top:6px;font-size:1rem}
.tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px}
.tegel{border:1px solid var(--lijn);border-radius:12px;background:#101010;padding:16px 16px 14px}
.tegel b{display:block;font-size:1.65rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#fff}
.tegel span{display:block;font-size:.84rem;color:var(--t3);margin-top:8px}
.tegel.jij{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,204,79,.45),0 0 40px rgba(255,204,79,.18);background:#14110a}
.tegel.jij b{color:var(--gold)}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 -120px;position:relative;z-index:2}
.drie .pk{min-height:360px;font-size:12.5px;padding:18px 18px 20px}
.drie .pk:nth-child(1){transform:rotate(-2.2deg) translateY(10px)}
.drie .pk:nth-child(2){transform:translateY(-6px)}
.drie .pk:nth-child(3){transform:rotate(2.2deg) translateY(10px)}
.drie .pk-q{font-size:15px}
.drie .pk li{padding:7px 0}
.vb-onder{height:130px}

/* ---------- 7. samenwerken ---------- */
.sw{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.sw-paneel{border:1px solid var(--lijn);border-radius:var(--rk);background:#101010;overflow:hidden}
.sw-rij{padding:26px 28px;border-top:1px solid var(--lijn2);
 opacity:0;transform:translateY(14px);transition:opacity .7s var(--curve),transform .7s var(--curve);
 transition-delay:calc(var(--i) * 110ms)}
.sw-rij:first-child{border-top:0}
.zichtbaar .sw-rij{opacity:1;transform:none}
.sw-rij.mijn{background:#1a160c}
.sw-rij .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sw-rij .bedrag{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.sw-rij .bedrag b{font-size:2.5rem;font-weight:600;letter-spacing:-.05em;color:#fff;line-height:1}
.sw-rij .bedrag span{color:var(--t3);font-size:.92rem}
.sw-rij p{margin-top:12px;color:#e8e8e8;font-size:1rem;line-height:1.6}
.sw-rij p.zacht{color:var(--t3);font-size:.9rem;margin-top:10px}
.sw-rij a{color:var(--gold)}

/* ---------- 8. past het ---------- */
.past{text-align:center;padding:100px 0 110px}
.past::before{content:"";position:absolute;left:50%;top:6%;width:1100px;height:640px;transform:translateX(-50%);
 background:radial-gradient(ellipse,rgba(255,204,79,.16),transparent 64%);pointer-events:none}
.past h2{margin:0 auto;font-size:clamp(2.4rem,5.6vw,5rem);max-width:12em}
.past .lead{margin:26px auto 0;max-width:34em;color:var(--t1)}
.past .lead.z{color:var(--t3);margin-top:16px}
form.aanvraag{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin:52px auto 0;text-align:left;
 border:1px solid var(--lijn);border-radius:var(--rk);background:rgba(13,13,13,.85);padding:30px;
 backdrop-filter:blur(8px);position:relative}
form.aanvraag .breedveld,form.aanvraag .formnoot,form.aanvraag .verstopt{grid-column:1/-1}
form label{display:block;font-size:.95rem;font-weight:500;color:var(--t1);margin-bottom:8px}
form input,form textarea{width:100%;font:inherit;font-size:1rem;padding:14px 16px;background:#080808;color:#fff;
 border:1px solid #303030;border-radius:var(--r);transition:border-color .25s,box-shadow .25s,background .25s}
form input:hover,form textarea:hover{border-color:#454545}
form input:focus,form textarea:focus{outline:none;border-color:var(--gold);background:#0b0a06;
 box-shadow:0 0 0 3px rgba(255,204,79,.16)}
form textarea{min-height:170px;resize:vertical;line-height:1.6}
form ::placeholder{color:#7a7a7a;opacity:1}
.optioneel{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);
 border:1px solid #333;border-radius:6px;padding:2px 7px;margin-left:8px}
.formnoot{font-size:.9rem;color:var(--t3);margin:0}
form .knop{width:100%}

/* ---------- 9. veelgestelde vragen ---------- */
.faq{padding:96px 0 110px}
.faq .smal{max-width:720px;margin:0 auto;padding:0 24px}
.faq h2{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.045em}
.acc{margin-top:44px;display:grid;gap:12px}
.acc > div{border:1px solid #3a3a3a;border-radius:14px;background:#0f0f0f;transition:border-color .3s,background .3s}
.acc > div.open{border-color:rgba(255,204,79,.55);background:#100e08}
.acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
 background:none;border:0;color:#fff;padding:24px 28px;font-size:1.1rem;font-weight:600;letter-spacing:-.02em;cursor:pointer}
.acc svg{width:18px;height:18px;flex:0 0 auto;transition:transform .4s var(--curve);color:var(--t2)}
.acc .open svg{transform:rotate(180deg);color:var(--gold)}
.acc .ant{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--curve)}
.acc .open .ant{grid-template-rows:1fr}
.acc .ant > div{overflow:hidden}
.acc .ant p{padding:0 28px 26px;color:var(--t1);font-size:1rem;line-height:1.7;max-width:none}

/* ---------- voet ---------- */
footer{padding:80px 0 46px;text-align:center}
.slag{display:inline-block;color:var(--t1);font-size:1rem;text-decoration:none;
 border-bottom:2px solid var(--gold);padding-bottom:3px}
.contactlabel{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:46px 0 18px}
.rond{display:flex;justify-content:center;gap:14px}
.rond a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,204,79,.55);color:var(--gold);
 display:grid;place-items:center;transition:background .3s,transform .3s var(--curve)}
.rond a:hover{background:rgba(255,204,79,.12);transform:translateY(-2px)}
.rond svg{width:18px;height:18px}
.voetlijn{max-width:1035px;margin:52px auto 0;border-top:1px solid #d8d8d8;padding-top:30px}
.juridisch{display:flex;justify-content:center;gap:16px;font-size:.92rem}
.juridisch a{color:var(--gold);text-decoration:none}
.juridisch a:hover{text-decoration:underline}
.copy{margin-top:18px;color:var(--t2);font-size:.9rem;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.copy svg{width:17px;height:17px}

/* ---------- opkomen ---------- */
.in{opacity:0;transform:translateY(26px);transition:opacity .9s var(--curve),transform .9s var(--curve);
 transition-delay:var(--d,0s)}
.in.zichtbaar{opacity:1;transform:none}
.hero .in{transition-duration:1.1s}

/* ===================================================================
   KLEINERE SCHERMEN
   =================================================================== */
@media (max-width:1100px){
 .kanalen{grid-template-columns:1fr}
 .vb-kop{flex-wrap:wrap}
 .duo{grid-template-columns:1fr}
 .sw{grid-template-columns:1fr;gap:44px}
 .tegels{grid-template-columns:repeat(3,1fr)}
 .br{grid-template-columns:120px 1fr auto;gap:18px}
 .br .chip{display:none}
}
@media (max-width:860px){
 .navlinks .tekst,.navlinks .acties{display:none}
 .nav .wrap{padding:0 20px}
 .sec{padding:72px 0 80px}
 .hero{padding-top:104px}
 .hero .sub{margin-top:26px}
 .hero .knop{white-space:normal;text-align:center}
 .fan-v{left:-560px;width:1120px;gap:14px}
 .cijfers{grid-template-columns:1fr 1fr}
 .cijfers > div{padding:22px 20px 24px 0}
 /* De ticker staat nu in het plakkende vlak en moet op een telefoon
    kunnen wrappen; zonder flex-wrap op de lijst liep hij 40px buiten beeld
    (gemeten: rechterrand op 430 in een scherm van 390). */
 .tik{flex-wrap:wrap;height:auto;padding:12px 16px;gap:8px 14px;font-size:10.5px;letter-spacing:.12em}
 .tik ol{margin:0;gap:6px 14px;flex-wrap:wrap}
 .podium-in .tik{top:84px;left:14px;right:14px}
 .trechter{clip-path:none;border-radius:20px;padding:16px 0 16px}
 .tr-rij{margin-left:calc(var(--in) / 3);margin-right:calc(var(--in) / 3);padding:14px 14px;gap:12px}
 .tr-rij.hl{padding:18px 16px}
 .tr-rij.hl .tr-t{font-size:1.25rem}
 .tr-tag{display:none}
 .br{grid-template-columns:1fr auto;gap:10px 18px;padding:22px 20px}
 .br .lab{grid-column:1/-1}
 .drie{grid-template-columns:1fr;margin-bottom:-60px}
 .drie .pk{min-height:0}
 .drie .pk:nth-child(n){transform:none}
 .vb-onder{height:70px}
 .tegels{grid-template-columns:1fr 1fr}
 .tegel:last-child{grid-column:1/-1}
 .podium{height:380vh}
 .muur{grid-template-columns:repeat(3,1fr)}
 form.aanvraag{grid-template-columns:1fr;padding:22px}
 .acc button{padding:20px 20px;font-size:1.02rem}
 .acc .ant p{padding:0 20px 22px}
 .badge{width:100%;justify-content:space-between}
}
@media (max-width:560px){
 .tr-rand span:last-child{display:none}
 .wrap{padding:0 18px}
 .eb{font-size:11px;letter-spacing:.16em}
 .tr-t{font-size:1rem}
 .paneel{padding:18px 16px 0}
 .paneel h3{font-size:1.6rem}
 .cijfers b{font-size:1.9rem}
}

/* ===================================================================
   MINDER BEWEGING
   =================================================================== */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none !important;transition:none !important}
 .in,.tr-rij,.br,.sw-rij{opacity:1;transform:none}
 .mt u{width:var(--v)}
 .ln:not(.st){stroke-dashoffset:0}
 .stap{opacity:1;transform:none;position:relative;margin-bottom:60px}
 .podium{height:auto}.podium-in{position:relative;height:auto;display:block;padding:60px 0}
}