/* De voetbal app — website. Zelfde basis als de app (navy, limoen, Anton + Barlow), opgebouwd met genummerde secties
   die afwisselen tussen donker en licht. */
:root{
  --navy:#0a1120; --navy-2:#0b1324; --kaart:#121b2e; --rand:#1f2a42; --tekst:#e8edf7; --zacht:#9aa6bf;
  --licht:#f4f6fa; --wit:#ffffff; --inkt:#0a1120; --inkt-zacht:#4a5570; --lijn:#dfe4ee;
  --accent:#d4ff3a; --accent-donker:#5f7a00;
  --cond:"Anton","Arial Narrow",Impact,sans-serif; --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breed:1160px; --rond:18px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--navy);color:var(--tekst);font-family:var(--body);font-size:18px;line-height:1.55;font-synthesis:none}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(var(--breed),100% - 40px);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:14px;border:0;background:var(--accent);color:var(--inkt);font-family:var(--body);font-weight:700;font-size:18px;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.knop:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,255,58,.25)}
.knop.stil{background:transparent;color:inherit;border:2px solid currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.knop.stil:hover{box-shadow:none;border-color:currentColor}
.knop.donker{background:var(--navy);color:var(--wit)}
.knop svg{width:20px;height:20px}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* Kop */
.kop{position:sticky;top:0;z-index:20;background:rgba(10,17,32,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.kop .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.merk{font-family:var(--cond);font-size:24px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1}
.merk span{color:var(--accent)}
.menu{display:flex;align-items:center;gap:24px;margin-left:auto}
.menu a{text-decoration:none;font-weight:600;font-size:16px;color:var(--zacht)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tekst)}
.menu .knop{min-height:44px;padding:0 18px;font-size:16px;color:var(--inkt)}
.menu .inlog{color:var(--tekst)}
.hamburger{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--rand);background:var(--kaart);color:var(--tekst);cursor:pointer}
.hamburger svg{width:22px;height:22px;margin:auto}
@media (max-width:900px){
  .hamburger{display:flex}
  .menu{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;background:var(--navy-2);border-bottom:1px solid var(--rand);padding:8px 20px 20px}
  .menu.open{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--rand);font-size:18px}
  .menu .knop{margin-top:14px;min-height:52px}
}

/* Hero */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero .foto{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 85% 10%,rgba(212,255,58,.16),transparent 55%),
  repeating-linear-gradient(90deg,#14381f 0 9%,#11321b 9% 18%);}
.hero .foto img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,17,32,.25) 0%,rgba(10,17,32,.55) 45%,var(--navy) 100%),linear-gradient(90deg,rgba(10,17,32,.85) 0%,rgba(10,17,32,.2) 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;padding:120px 0 72px}
.hero h1{font-family:var(--cond);font-weight:400;font-size:clamp(48px,7.2vw,104px);line-height:.94;text-transform:uppercase;margin:0 0 22px;letter-spacing:.005em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:clamp(19px,2vw,23px);color:#cdd5e5;max-width:36ch;margin:0 0 30px}
.hero .klein{margin:18px 0 0;font-size:15px;color:var(--zacht)}
.hero .telefoon{justify-self:end;width:min(320px,100%);margin-bottom:-120px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding:96px 0 40px}.hero .telefoon{justify-self:center;width:min(270px,78%);margin-bottom:-90px}}

/* Telefoon met echte schermafbeelding */
.telefoon{position:relative;border-radius:44px;padding:11px;background:linear-gradient(145deg,#2a3654,#0d1526);box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.telefoon img{border-radius:34px;width:100%;height:auto;aspect-ratio:390/780;object-fit:cover;object-position:top;background:var(--navy)}
.telefoon::before{display:none}

/* Secties */
.sectie{padding:clamp(72px,10vw,128px) 0}
.sectie.licht{background:var(--licht);color:var(--inkt)}
.sectie.wit{background:var(--wit);color:var(--inkt)}
.sectie.donker{background:var(--navy)}
.sectie.diep{background:var(--navy-2)}
.label{display:flex;align-items:center;gap:14px;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);margin:0 0 18px}
.label b{font-family:var(--cond);font-weight:400;font-size:20px;letter-spacing:.04em;color:var(--accent)}
.licht .label,.wit .label{color:var(--inkt-zacht)}
.licht .label b,.wit .label b{color:var(--inkt);background:var(--accent);padding:2px 8px;border-radius:6px}
h2{font-family:var(--cond);font-weight:400;font-size:clamp(38px,5vw,68px);line-height:.98;text-transform:uppercase;margin:0 0 20px;letter-spacing:.005em;max-width:18ch}
h2 em{font-style:normal;color:var(--accent)}
.licht h2 em,.wit h2 em{color:var(--inkt);background:linear-gradient(transparent 62%,var(--accent) 62%)}
h3{font-family:var(--cond);font-weight:400;font-size:26px;line-height:1.05;text-transform:uppercase;margin:0 0 10px;letter-spacing:.01em}
.intro{font-size:clamp(19px,1.8vw,22px);color:var(--zacht);max-width:58ch;margin:0 0 44px}
.licht .intro,.wit .intro{color:var(--inkt-zacht)}
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:900px){.twee{grid-template-columns:1fr}}

/* Probleem → oplossing */
.chat{display:grid;gap:10px;max-width:420px}
.bel{background:var(--kaart);border:1px solid var(--rand);border-radius:18px 18px 18px 6px;padding:12px 16px;font-size:16px;color:#cdd5e5;width:fit-content;max-width:90%}
.bel small{display:block;font-size:12px;font-weight:700;color:var(--zacht);margin-bottom:2px}
.bel.ik{justify-self:end;border-radius:18px 18px 6px 18px;background:#1d3b1a;border-color:#2e5a24}
.teller{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--zacht)}
.teller b{background:#e3343f;color:#fff;border-radius:999px;padding:1px 9px;font-size:13px}

/* Functies */
.functies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.functies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.functies{grid-template-columns:1fr}}
.functie{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:26px;display:flex;flex-direction:column;gap:8px}
.donker .functie,.diep .functie{background:var(--kaart);border-color:var(--rand)}
.functie .ico{width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.functie .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.functie p{margin:0;color:var(--inkt-zacht);font-size:17px}
.donker .functie p,.diep .functie p{color:var(--zacht)}
.binnenkort{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--lijn);color:var(--inkt-zacht)}
.donker .binnenkort,.diep .binnenkort{background:var(--rand);color:var(--zacht)}

/* Voor wie */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.routes{grid-template-columns:1fr}}
.route{position:relative;display:flex;flex-direction:column;gap:12px;border-radius:22px;padding:30px;background:var(--kaart);border:1px solid var(--rand);text-decoration:none;color:var(--tekst);overflow:hidden;min-height:360px;transition:transform .2s,border-color .2s}
.route:hover{transform:translateY(-4px);border-color:var(--accent)}
.route .citaat{font-size:20px;font-style:italic;color:#cdd5e5;margin:0}
.route ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--zacht);font-size:16px}
.route li{position:relative;padding-left:20px}
.route li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.route .meer{margin-top:auto;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:8px}
.route .tag{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Stappen + video */
.stappen{display:grid;gap:14px;counter-reset:stap;margin:0;padding:0;list-style:none}
.stappen li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;padding:18px;border-radius:16px;background:var(--wit);border:1px solid var(--lijn)}
.stappen li::before{counter-increment:stap;content:counter(stap);font-family:var(--cond);font-size:30px;line-height:56px;text-align:center;border-radius:14px;background:var(--navy);color:var(--accent)}
.stappen b{display:block;font-size:19px;margin-top:4px}
.stappen span{color:var(--inkt-zacht);font-size:16px}
.video{position:relative;border-radius:22px;overflow:hidden;background:var(--navy);aspect-ratio:16/10;box-shadow:0 30px 60px rgba(10,17,32,.25)}
.video video,.video img{width:100%;height:100%;object-fit:cover}
.video .speel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(10,17,32,.1),rgba(10,17,32,.6));color:#fff;border:0;cursor:pointer;font:inherit;font-weight:700}
.video .speel i{width:84px;height:84px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.video .speel i::after{content:"";border-left:24px solid var(--inkt);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.video .rij{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4%;padding:5%}
.video .rij .telefoon{width:27%;border-radius:26px;padding:6px}.video .rij .telefoon img{border-radius:20px}.video .rij .telefoon::before{display:none}
.video .rij .telefoon:nth-child(2){transform:translateY(-6%)}

/* Voorbeelden: schermen naast elkaar */
.schermen{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 30px;margin:0 -4px;scrollbar-width:thin}
.scherm{flex:0 0 min(280px,70vw);scroll-snap-align:start;margin:0}
.scherm .telefoon{border-radius:38px;padding:9px}.scherm .telefoon img{border-radius:30px}
.scherm figcaption{margin-top:18px}
.scherm figcaption b{display:block;font-family:var(--cond);font-weight:400;font-size:22px;text-transform:uppercase}
.scherm figcaption span{font-size:16px;color:var(--zacht)}

/* Ervaringen */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:24px;overflow:hidden;background:var(--navy);color:var(--tekst)}
@media (max-width:900px){.case{grid-template-columns:1fr}}
.case .beeld{min-height:340px;background:
  radial-gradient(90% 70% at 30% 20%,rgba(212,255,58,.18),transparent 60%),repeating-linear-gradient(90deg,#14381f 0 12%,#11321b 12% 24%);position:relative}
.case .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .tekst{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.case .tekst p{margin:0;color:#cdd5e5}
.case .feiten{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px}
.case .feiten div{display:grid}
.case .feiten b{font-family:var(--cond);font-weight:400;font-size:40px;color:var(--accent);line-height:1}
.case .feiten span{font-size:14px;color:var(--zacht)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:26px;display:flex;flex-direction:column;gap:18px;margin:0}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;color:var(--inkt)}
.quote blockquote::before{content:"“";display:block;font-family:var(--cond);font-size:64px;line-height:.6;color:var(--accent-donker)}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote figcaption img,.quote .ini{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--navy);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-size:18px}
.quote figcaption b{display:block;font-size:16px}.quote figcaption span{font-size:14px;color:var(--inkt-zacht)}

/* Prijzen */
.prijzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:1000px){.prijzen{grid-template-columns:1fr}}
.pakket{border-radius:24px;padding:32px;background:var(--wit);border:1px solid var(--lijn);display:flex;flex-direction:column;gap:14px;color:var(--inkt)}
.pakket.uitgelicht{background:var(--navy);color:var(--tekst);border:2px solid var(--accent);box-shadow:0 30px 60px rgba(10,17,32,.25)}
.pakket .naam{font-family:var(--cond);font-size:30px;text-transform:uppercase;line-height:1}
.pakket .bedrag{font-family:var(--cond);font-size:58px;line-height:1}
.pakket .bedrag small{font-family:var(--body);font-size:16px;font-weight:600;color:var(--inkt-zacht)}
.pakket.uitgelicht .bedrag{color:var(--accent)}.pakket.uitgelicht .bedrag small{color:var(--zacht)}
.pakket ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:16px}
.pakket li{display:flex;gap:10px;align-items:flex-start}
.pakket li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1120' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.pakket .knop{margin-top:auto}
.pakket .noot{font-size:14px;color:var(--inkt-zacht);margin:0}
.pakket.uitgelicht .noot{color:var(--zacht)}
.staffel{width:100%;border-collapse:collapse;font-size:16px}
.staffel td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.staffel td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.staffel s{color:var(--zacht);font-weight:500;margin-right:6px}
.tabs-cat{display:inline-flex;padding:4px;border-radius:12px;background:var(--kaart);gap:4px;align-self:flex-start}
.tabs-cat button{border:0;background:transparent;color:var(--zacht);font:inherit;font-weight:700;font-size:15px;padding:8px 14px;border-radius:9px;cursor:pointer}
.tabs-cat button[aria-pressed="true"]{background:var(--accent);color:var(--inkt)}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{border-radius:16px;background:var(--wit);border:1px solid var(--lijn)}
.donker .faq details,.diep .faq details{background:var(--kaart);border-color:var(--rand)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1120' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 22px 22px;color:var(--inkt-zacht);font-size:17px}
.donker .faq details p,.diep .faq details p{color:var(--zacht)}

/* Afsluitende oproep */
.oproep{position:relative;overflow:hidden;border-radius:28px;background:var(--accent);color:var(--inkt);padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.oproep::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;border:26px solid rgba(10,17,32,.08)}
.oproep h2{margin:0;max-width:16ch}.oproep p{margin:10px 0 0;font-size:19px;max-width:44ch}
@media (max-width:800px){.oproep{grid-template-columns:1fr}}

/* Voet */
.voet{background:var(--navy-2);border-top:1px solid var(--rand);padding:56px 0 40px;color:var(--zacht);font-size:16px}
.voet .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.voet h4{color:var(--tekst);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.voet a{text-decoration:none}.voet a:hover{color:var(--tekst)}
.voet .klein{grid-column:1/-1;border-top:1px solid var(--rand);padding-top:22px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
@media (max-width:800px){.voet .wrap{grid-template-columns:1fr 1fr}.voet .wrap>div:first-child{grid-column:1/-1}}

/* Subpagina-hero */
.subhero{padding:clamp(80px,10vw,130px) 0 clamp(50px,7vw,90px);position:relative;overflow:hidden;background:radial-gradient(80% 120% at 100% 0,rgba(212,255,58,.12),transparent 55%),var(--navy)}
.subhero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.subhero h1{font-family:var(--cond);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:.95;text-transform:uppercase;margin:0 0 20px}
.subhero h1 em{font-style:normal;color:var(--accent)}
.subhero .telefoon{width:min(290px,100%);justify-self:center}
@media (max-width:900px){.subhero .wrap{grid-template-columns:1fr}.subhero .telefoon{width:min(250px,72%)}}

/* Kleine animatie bij in beeld komen */
.js .op{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .op.zichtbaar{opacity:1;transform:none}

/* ---------- Spelerskaarten ---------- */
.kaarten-sectie{overflow:hidden}
.kaarten-podium{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,36px);margin:10px 0 64px}
.kp{margin:0;text-align:center;flex:0 1 240px}
.kp>img,.kp>.vkaart{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));transition:transform .3s}
.kp.goud{flex-basis:290px}
.kp.zilver>img,.kp.zilver>.vkaart{transform:rotate(-6deg) translateY(8px)}.kp.brons>img,.kp.brons>.vkaart{transform:rotate(6deg) translateY(8px)}
.kp:hover>img,.kp:hover>.vkaart{transform:translateY(-6px)}
.kp figcaption{margin-top:16px;font-size:15px;color:var(--zacht)}
.kp figcaption b{display:block;font-family:var(--cond);font-weight:400;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--tekst)}
.kp.goud figcaption b{color:#ffd76a}.kp.zilver figcaption b{color:#d9dee7}.kp.brons figcaption b{color:#e9a36f}
.kaart-uitleg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:860px){.kaart-uitleg{grid-template-columns:1fr}}
.kaart-blok{position:relative;background:var(--kaart);border:1px solid var(--rand);border-radius:var(--rond);padding:28px 26px 26px}
.kaart-blok p{margin:0;color:var(--zacht);font-size:17px}
.kaart-blok .stap{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--inkt);font-family:var(--cond);font-size:20px;margin-bottom:14px}
.pos-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pos-chips span{font-family:var(--cond);font-size:17px;letter-spacing:.04em;padding:5px 11px;border-radius:9px;border:1px solid var(--rand);background:var(--navy)}
.pos-chips span:nth-child(1){color:#ffb45a}.pos-chips span:nth-child(n+2):nth-child(-n+4){color:#8fb2ff}.pos-chips span:nth-child(n+5):nth-child(-n+9){color:#7fe0ac}.pos-chips span:nth-child(n+10){color:#ff8a95}
.effecten{list-style:none;margin:0;padding:0;display:grid;gap:0}
.effecten li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rand);font-size:16px;color:var(--zacht)}
.effecten li:last-child{border-bottom:0}
.effecten b{font-weight:700;white-space:nowrap}.effecten .omhoog{color:var(--accent)}.effecten .neer{color:#ff7a85}
.linies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.linies figure{margin:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.linies figure>img{width:100%;height:auto;display:block;margin-bottom:8px}
.carriere-rij{display:flex;gap:10px;margin-top:20px}
.carriere-rij span{flex:1;text-align:center;padding:12px 6px;border-radius:14px;border:1px solid var(--rand);background:var(--navy);font-size:13px;color:var(--zacht)}
.carriere-rij b{display:block;font-family:var(--cond);font-weight:400;font-size:34px;line-height:1.05;color:var(--tekst)}
.carriere-rij .nu{border-color:var(--accent)}.carriere-rij .nu b{color:var(--accent)}
.kaart-schermen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:56px}
.kaart-schermen .scherm{flex:none}
@media (max-width:860px){.kaart-schermen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px}.kaart-schermen .scherm{flex:0 0 min(260px,70vw)}}
@media (max-width:520px){.linies figure{font-size:10.5px;letter-spacing:0}.kp figcaption{font-size:13px}.kp figcaption b{font-size:20px}}

/* ---------- Het spel (homepage) ---------- */
.hero-kick{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.hero-kaarten{position:relative;justify-self:center;width:min(440px,100%);aspect-ratio:1/1;align-self:center}
.hk{position:absolute;width:52%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));animation:hk-zweef 6s ease-in-out infinite}
.hk-1{left:0;top:14%;transform:rotate(-10deg);animation-delay:-2s}
.hk-2{left:24%;top:0;z-index:2;width:56%}
.hk-3{right:0;top:18%;transform:rotate(9deg);animation-delay:-4s}
@keyframes hk-zweef{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hk-tag{position:absolute;z-index:3;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hk-tag-1{left:-2%;bottom:8%;background:var(--accent);color:var(--inkt)}
.hk-tag-2{right:2%;top:2%;background:#ffd76a;color:#3d2c08}
@media (max-width:900px){.hero-kaarten{width:min(340px,86%);margin:10px auto -40px}}
@media (prefers-reduced-motion:reduce){.hk{animation:none}}
.lus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:lus}
@media (max-width:1000px){.lus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.lus{grid-template-columns:1fr}}
.lus li{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:26px 26px 24px 26px;counter-increment:lus}
.lus li::after{content:counter(lus,decimal-leading-zero);position:absolute;right:22px;top:16px;font-family:var(--cond);font-size:44px;line-height:1;color:var(--lijn)}
.lus .dag{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:var(--inkt);color:var(--accent);padding:4px 10px;border-radius:8px;margin-bottom:14px}
.lus p{margin:0;color:var(--inkt-zacht);font-size:17px}
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:56px}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs-kol{border-radius:var(--rond);padding:28px;border:1px solid var(--rand);background:var(--navy-2)}
.vs-kop{display:block;font-family:var(--cond);font-size:28px;text-transform:uppercase;margin-bottom:14px;color:var(--zacht)}
.vs-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:17px;color:var(--zacht)}
.vs-kol li::before{content:"–";margin-right:10px;color:var(--rand)}
.vs-wij{background:var(--kaart);border-color:var(--accent)}
.vs-wij .vs-kop{color:var(--accent)}.vs-wij li{color:var(--tekst)}.vs-wij li::before{content:"▲";color:var(--accent);font-size:12px;vertical-align:2px}
.regellijst{list-style:none;margin:0;padding:0;display:grid;gap:0}
.regellijst li{padding:12px 0;border-bottom:1px solid var(--lijn);font-size:17px;color:var(--inkt-zacht)}
.regellijst li:last-child{border-bottom:0}
.regellijst b{display:block;color:var(--inkt);font-size:18px}

/* ---------- Downloadknoppen ---------- */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.store{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 18px 8px 14px;border-radius:14px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.28);text-decoration:none;transition:transform .15s,border-color .2s}
.store:hover{transform:translateY(-2px);border-color:#fff}
.store svg{width:26px;height:26px;flex:0 0 auto}
.store span{display:flex;flex-direction:column;font-weight:700;font-size:19px;line-height:1.05;letter-spacing:-.01em}
.store small{font-size:11px;font-weight:500;letter-spacing:.02em;opacity:.85}
.store em{position:absolute;top:-9px;right:-8px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--inkt)}
.stores-noot{margin-top:10px!important}
.oproep-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.klein-stores{margin-top:0}.klein-stores .store{min-height:50px}
.oproep .store{background:var(--inkt);border-color:var(--inkt)}

/* ---------- Speels: tegels die reageren, iconen in kleur ---------- */
.functie{transition:transform .2s cubic-bezier(.2,.9,.25,1.3),border-color .2s,box-shadow .2s}
.functie:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.functies .functie:nth-child(6n+2) .ico{color:#ffd76a}.functies .functie:nth-child(6n+3) .ico{color:#3ccf8e}.functies .functie:nth-child(6n+4) .ico{color:#8fb2ff}.functies .functie:nth-child(6n+5) .ico{color:#ff9f5a}.functies .functie:nth-child(6n) .ico{color:#ff7a85}
.functie .ico{transition:transform .25s cubic-bezier(.2,.9,.25,1.4)}.functie:hover .ico{transform:rotate(-8deg) scale(1.08)}
.lus li{transition:transform .2s}.lus li:hover{transform:translateY(-3px)}
.lus li:hover::after{color:var(--accent-donker)}
@media (prefers-reduced-motion:reduce){.functie,.functie .ico,.lus li{transition:none}.functie:hover,.lus li:hover{transform:none}}

/* ---------- Spelerskaart als HTML (zelfde opbouw als de kaart in de app) ---------- */
.vkaart{--k1:#1d9a5c;--k2:#0f6038;--k3:#05241a;--r1:#7fe0ac;--r2:#1d9a5c;position:relative;container-type:inline-size;aspect-ratio:5/7;width:100%;
  clip-path:polygon(11.7% 0,100% 0,100% 91.7%,88.3% 100%,0 100%,0 8.3%);background:linear-gradient(135deg,var(--r1),var(--r2));filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));color:#fff;margin:0}
.vkaart .vk-in{position:absolute;inset:1.6%;clip-path:polygon(11.2% 0,100% 0,100% 91.9%,88.8% 100%,0 100%,0 8.1%);background:linear-gradient(135deg,var(--k1),var(--k2) 50%,var(--k3));overflow:hidden}
.vkaart .vk-in::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(10,17,32,.55);clip-path:polygon(0 62%,100% 46%,100% 100%,0 100%);pointer-events:none}
.vk-goud{--k1:#c99a2e;--k2:#8a6514;--k3:#3d2c08;--r1:#ffe69a;--r2:#b88a2a}.vk-zilver{--k1:#a7b1bf;--k2:#66707e;--k3:#262c35;--r1:#f4f6fa;--r2:#8d98a8}.vk-brons{--k1:#b4703f;--k2:#7a4522;--k3:#33190a;--r1:#f0b98a;--r2:#8a5631}
.vk-aan{--k1:#d12a3a;--k2:#8c1424;--k3:#2a0710;--r1:#ff8a95;--r2:#d12a3a}.vk-mid{--k1:#1d9a5c;--k2:#0f6038;--k3:#05241a;--r1:#7fe0ac;--r2:#1d9a5c}.vk-ver{--k1:#2a63d6;--k2:#163c8f;--k3:#081633;--r1:#8fb2ff;--r2:#2a63d6}.vk-kee{--k1:#e08a1e;--k2:#94570c;--k3:#2e1903;--r1:#ffc77a;--r2:#e08a1e}
.vk-goud .vk-in::after,.vk-zilver .vk-in::after,.vk-brons .vk-in::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);background-size:250% 100%;mix-blend-mode:overlay;animation:vk-glans 5s ease-in-out infinite}
@keyframes vk-glans{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
.vk-boven{position:absolute;left:8.6%;top:7%;z-index:4;display:flex;flex-direction:column;max-width:34%}
.vk-ov{font-family:var(--cond);font-size:21cqw;line-height:.9}
.vk-code{font-weight:700;font-size:5.6cqw;color:var(--r1);margin-top:2cqw;display:flex;align-items:center;gap:2cqw}
.vk-vorm{font-size:4.2cqw;color:#3ccf8e}
.vk-label{font-weight:600;font-size:3.1cqw;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:1.4cqw;line-height:1.15}
.vk-beeld{position:absolute;left:25%;top:1.5%;width:75%;height:62%;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%),linear-gradient(to bottom,#000 58%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 24%),linear-gradient(to bottom,#000 58%,transparent 100%);mask-composite:intersect}
.vk-portret{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;filter:grayscale(1) contrast(1.25) brightness(1.04)}
.vk-beeld:has(.vk-portret)::after{content:"";position:absolute;inset:0;background:var(--k2);mix-blend-mode:color;opacity:.85}
.vk-ini{position:absolute;left:36%;top:15.5%;width:57%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-size:20cqw;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.24),rgba(255,255,255,.04) 70%);border:.7cqw solid var(--r1)}
.vk-badges{position:absolute;left:0;right:0;top:53.5%;z-index:4;display:flex;justify-content:center;gap:1.6cqw}
.vk-badges span{font-weight:700;font-size:3.1cqw;letter-spacing:.03em;text-transform:uppercase;padding:1cqw 2.6cqw;border-radius:99px;background:rgba(10,17,32,.72)}
.vk-badges span:first-child{background:var(--r1);color:#0a1120}
.vk-naam{position:absolute;left:6%;right:6%;top:58.5%;z-index:4;margin:0;font-family:var(--cond);font-weight:400;font-size:10.6cqw;line-height:1.1;text-transform:uppercase;text-align:center;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-naam::after{content:"";display:block;width:40%;height:.5cqw;margin:1.6cqw auto 0;background:var(--r1)}
.vk-cijfers{position:absolute;left:15%;right:9%;top:72%;z-index:4;display:grid;grid-template-columns:1fr 1fr;row-gap:1.4cqw;column-gap:12%}
.vk-cijfers::before{content:"";position:absolute;left:47%;top:0;bottom:0;width:.35cqw;background:var(--r1);opacity:.5}
.vk-cijfers span{display:flex;align-items:baseline;gap:2.6cqw;font-weight:700;font-size:3.7cqw;color:rgba(255,255,255,.78);text-transform:uppercase}
.vk-cijfers b{font-family:var(--cond);font-weight:400;font-size:7cqw;color:#fff;min-width:9cqw}
.vk-voet{position:absolute;left:0;right:0;bottom:3.4%;z-index:4;text-align:center;font-weight:600;font-size:3cqw;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.62)}
@media (prefers-reduced-motion:reduce){.vkaart .vk-in::after{animation:none}}

/* ---------- Foto's ---------- */
.hero .foto img{object-position:72% 50%}
.hero::after{background:linear-gradient(180deg,rgba(10,17,32,.15) 0%,rgba(10,17,32,.35) 55%,var(--navy) 100%),linear-gradient(90deg,rgba(10,17,32,.92) 0%,rgba(10,17,32,.62) 38%,rgba(10,17,32,0) 68%)!important}
@media (max-width:900px){.hero .foto img{object-position:74% 35%}.hero::after{background:linear-gradient(180deg,rgba(10,17,32,.2) 0%,rgba(10,17,32,.55) 40%,rgba(10,17,32,.92) 70%,var(--navy) 100%)!important}}
.route-foto{display:block;width:calc(100% + 60px);max-width:none;margin:-30px -30px 6px;aspect-ratio:3/2;height:auto;object-fit:cover;object-position:center 40%;border-bottom:1px solid var(--rand)}
.route .route-foto{transition:transform .5s ease}.route:hover .route-foto{transform:scale(1.03)}
.sectiefoto{margin:0 0 34px;border-radius:var(--rond);overflow:hidden;aspect-ratio:3/2;max-height:520px;width:100%}
.sectiefoto img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.langs-lijn{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-width:520px;justify-self:center;width:100%;box-shadow:0 30px 60px rgba(10,17,32,.25)}
.langs-lijn img{width:100%;height:100%;object-fit:cover;display:block}
.langs-lijn figcaption{position:absolute;left:16px;top:16px;max-width:70%;margin:0}
.kp .vkaart{display:block}
.linies .vkaart{margin-bottom:8px}
.foto-naar-kaart{display:grid;grid-template-columns:minmax(0,200px) auto minmax(0,200px) minmax(0,1fr);gap:22px;align-items:center;margin-top:18px;padding:26px;border-radius:var(--rond);background:var(--kaart);border:1px solid var(--rand)}
.fnk-foto{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5}.fnk-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.fnk-kaart{margin:0}
.fnk-pijl{font-size:34px;font-weight:800;color:var(--accent)}
.fnk-tekst p{color:var(--zacht);font-size:17px;margin:0}.fnk-tekst .label{margin-bottom:10px}.fnk-tekst h3{margin-bottom:8px}
@media (max-width:860px){.foto-naar-kaart{grid-template-columns:1fr auto 1fr}.fnk-tekst{grid-column:1 / -1}}
.vk-cijfers{top:70%;row-gap:.8cqw}.vk-cijfers span{line-height:1.05}.vk-voet{bottom:2.6%}
/* Hero: kaarten rechtsonder over de foto, zodat de juichende spelers in beeld blijven */
@media (min-width:901px){.hero-kaarten{align-self:end;justify-self:end;width:min(360px,100%);margin:0 -10px 56px 0}}
/* Hero: de kaarten zijn echte HTML-kaarten; het hele blok (rand, foto, tekst) beweegt als één geheel */
.hk .vkaart{filter:none}
.hk{filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
/* Grote koppen als eigen laag: geen trillende letters bij scrollen (Windows met schermvergroting) */
.hero h1,.subhero h1{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
/* Teamroutes naast elkaar: koppen, citaten, lijstjes en links op dezelfde hoogte (subgrid) */
@media (min-width:901px){
  .routes{grid-template-rows:repeat(6,auto);row-gap:0}
  .route{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .route .meer{align-self:end;margin-top:8px}
  .route ul,.route .citaat,.route h3{align-self:start}
}

/* ---------- Alles op één plek: vier echte schermen direct onder de hero ---------- */
.eenplek{background:var(--navy);padding:24px 0 40px;overflow:hidden}
.eenplek-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:34px}
.eenplek-kop h2{font-family:var(--cond);font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1.06;text-transform:uppercase;margin:0}
.eenplek-kop h2 em{font-style:normal;color:var(--accent)}
.eenplek-kop p{margin:0;color:var(--zacht);font-size:clamp(17px,1.6vw,20px);max-width:44ch}
.eenplek-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;align-items:start}
.ep{margin:0;display:flex;flex-direction:column;gap:14px}
.ep:nth-child(even){margin-top:34px}
.ep .telefoon{border-radius:34px;padding:8px;transition:transform .3s cubic-bezier(.2,.9,.25,1.3)}
.ep .telefoon img{border-radius:27px;aspect-ratio:390/700}
.ep:hover .telefoon{transform:translateY(-6px) rotate(-1deg)}
.ep-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-size:22px;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.ep-tag b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--inkt);font-weight:400;font-size:18px}
.ep:nth-child(2) .ep-tag b{background:#3ccf8e}.ep:nth-child(3) .ep-tag b{background:#8fb2ff}.ep:nth-child(4) .ep-tag b{background:#ffd76a}
.ep figcaption{color:var(--zacht);font-size:16px;line-height:1.45}
@media (max-width:1000px){.eenplek-kop{grid-template-columns:1fr;gap:12px}.eenplek-rij{grid-template-columns:repeat(2,minmax(0,1fr))}.ep:nth-child(even){margin-top:0}.eenplek-rij .ep{max-width:340px;justify-self:center}}
@media (max-width:700px){.eenplek-rij .ep{max-width:none}.eenplek-rij>.ep{flex:0 0 72%}}
@media (prefers-reduced-motion:reduce){.ep .telefoon{transition:none}.ep:hover .telefoon{transform:none}}

/* ---------- Jeugd: avatar op de kaart en de avatarmaker om zelf te proberen ---------- */
.vk-ini.vk-av{overflow:hidden;align-items:flex-end;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.06) 70%)}
.vk-ini.vk-av svg{width:112%;height:auto;margin-bottom:-22%;flex:none}
.avatar-demo{margin-top:48px;padding:28px;border-radius:24px;background:var(--kaart);border:1px solid var(--rand)}
.avatar-demo-kop{margin-bottom:22px}
.avatar-demo-kop .tag{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.avatar-demo-kop h3{font-family:var(--cond);font-weight:400;font-size:clamp(28px,3vw,38px);text-transform:uppercase;margin:6px 0 6px}
.avatar-demo-kop p{margin:0;color:var(--zacht)}
@media (max-width:560px){.avatar-demo{padding:20px 16px}}

/* ---------- Drie pijlers direct onder de hero: teamapp, team, spel ---------- */
.pijlers-band{background:var(--navy);padding:40px 0 72px}
.pijlers-kop{font-family:var(--cond);font-weight:400;font-size:clamp(30px,3.6vw,44px);text-transform:uppercase;line-height:1;margin:0 0 22px}
.pijlers-kop em{font-style:normal;color:var(--accent)}
.pijlers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pijler{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:22px;background:var(--kaart);border:1px solid var(--rand);color:var(--tekst);text-decoration:none;transition:transform .2s cubic-bezier(.2,.9,.25,1.3),border-color .2s}
.pijler:hover{transform:translateY(-4px);border-color:var(--accent)}
.pijler .ico{width:52px;height:52px;border-radius:14px;background:var(--accent);color:var(--inkt);display:flex;align-items:center;justify-content:center}
.pijler:nth-child(2) .ico{background:#8fb2ff}.pijler:nth-child(3) .ico{background:#ffd76a}
.pijler .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pijler-nr{position:absolute;right:24px;top:16px;font-family:var(--cond);font-size:46px;line-height:1;color:var(--rand)}
.pijler h3{font-family:var(--cond);font-weight:400;font-size:28px;text-transform:uppercase;margin:6px 0 0;letter-spacing:.01em}
.pijler p{margin:0;color:var(--zacht);font-size:17px}
.pijler .meer{margin-top:auto;padding-top:6px;font-weight:700;color:var(--accent)}
@media (max-width:900px) and (min-width:701px){.pijlers{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pijler{transition:none}.pijler:hover{transform:none}}

/* ---------- Telefoon: lange rijen kaartjes als veegcarrousel (desktop en tablet blijven een raster) ---------- */
.veeg-stip{display:none}
@media (max-width:700px){
  .veeg{display:flex!important;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;
    margin-inline:-20px;padding:4px 20px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .veeg::-webkit-scrollbar{display:none}
  .veeg>*{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  .js .veeg>.op{opacity:1;transform:none}
  .veeg-stip{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}
  .veeg-stip button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:currentColor;opacity:.25;cursor:pointer;transition:width .25s,opacity .25s,background .25s}
  .veeg-stip button[aria-current="true"]{width:24px;opacity:1;background:var(--accent)}
  .sectie.licht .veeg-stip button[aria-current="true"]{background:var(--inkt)}
  .veeg-hint{display:block;text-align:center;font-size:13px;opacity:.6;margin-top:6px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.veeg{scroll-behavior:auto}}