/* ═══════════════════════════════════════════
   FundAChamp · light, fresh, dynamic
   ═══════════════════════════════════════════ */

:root{
  --lime:#D4F016;
  --lime-soft:#EAFB8E;
  --lime-wash:#F5FDD5;
  --ink:#0C0D0A;
  --ink-2:#4A4E42;
  --ink-3:#8B9082;
  --paper:#FBFCF8;
  --paper-2:#F2F5EA;
  --line:#E4E8D9;
  --white:#fff;
  --r:20px;
  --r-lg:32px;
  --wrap:1200px;
  /* één verticaal ritme voor alle secties, zodat de afstanden gelijk zijn */
  --sec:96px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(12,13,10,.04), 0 12px 32px -12px rgba(12,13,10,.10);
  --shadow-lg:0 2px 4px rgba(12,13,10,.04), 0 32px 64px -24px rgba(12,13,10,.18);
  --acc:var(--lime);
}

/* ── pictogrammen ── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:40px;height:40px;display:block;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-plate{
  width:74px;height:74px;border-radius:24px;
  background:var(--lime-wash);border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 22px;
  transition:transform .55s var(--ease), background .4s, border-color .4s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4,h5{font-family:'Archivo',sans-serif;line-height:1.02;letter-spacing:-.035em;font-weight:800}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.section{padding:var(--sec) 0;position:relative}

/* ── scroll progress ── */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 14px rgba(212,240,22,.9)}

/* ── nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;gap:32px;
  padding:20px 32px;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(251,252,248,.72);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .4s var(--ease);
  border-bottom:1px solid var(--line);
}
.nav.is-stuck{padding:12px 32px}
.nav.is-stuck::before{opacity:1}
/* De nav ligt over de donkere hero, dus hij begint licht en wordt donker
   zodra hij vastplakt en zijn eigen lichte achtergrond krijgt. */
.nav__logo{position:relative;display:block;height:24px}
.nav__logo img{height:24px;width:auto;display:block;transition:opacity .35s var(--ease)}
.nav__logo--dark{position:absolute;top:0;left:0;opacity:0}
.nav.is-stuck .nav__logo--light,
.nav.menu-open .nav__logo--light{opacity:0}
.nav.is-stuck .nav__logo--dark,
.nav.menu-open .nav__logo--dark{opacity:1}
/* boven het schermvullende mobiele menu blijven staan */
.nav.menu-open .nav__logo{z-index:5}

.nav__links{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:500;color:rgba(255,255,255,.78)}
.nav__links a{position:relative;padding:4px 0;transition:color .25s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime);transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav.is-stuck .nav__links{color:var(--ink-2)}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}

.nav__cta{display:flex;gap:10px;align-items:center}
.nav__cta .btn--ghost{color:rgba(255,255,255,.82)}
.nav__cta .btn--ghost:hover{color:#fff}
.nav.is-stuck .nav__cta .btn--ghost{color:var(--ink-2)}
.nav.is-stuck .nav__cta .btn--ghost:hover{color:var(--ink)}

/* ── taalkeuze ──
   Getekende vlaggen in plaats van emoji: vlagemoji worden op Windows
   als twee losse letters getoond. De inactieve taal staat grijs. */
.taal{display:flex;gap:9px;align-items:center;margin-right:14px;margin-left:6px}
/* De gekozen taal staat vol in kleur, de andere is doorzichtig en daardoor
   vanzelf doffer. Geen randje eromheen: het verschil in kleur is genoeg. */
.taal__knop{
  width:22px;height:15px;padding:0;border:0;border-radius:3px;
  background:none;cursor:pointer;overflow:hidden;line-height:0;
  opacity:.38;
  transition:opacity .25s, transform .25s var(--ease);
}
.taal__knop svg{width:100%;height:100%;display:block;border-radius:3px}
.taal__knop:hover{opacity:.7;transform:translateY(-1px)}
.taal__knop[aria-pressed="true"]{opacity:1}
.taal__knop:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* Scheidingsstreepje. De navigatiebalk is donker boven de hero en licht zodra
   hij vastplakt, dus de kleur wisselt mee. */
.taal__streep{width:1px;height:14px;flex:none;border-radius:1px;background:rgba(255,255,255,.3)}
.nav.is-stuck .taal__streep{background:var(--line)}

.nav__burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav__burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav.is-stuck .nav__burger span,
.nav.menu-open .nav__burger span{background:var(--ink)}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:100px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
}
.btn--lg{padding:16px 30px;font-size:16.5px}
.btn--lime{background:var(--lime);color:var(--ink);box-shadow:0 4px 20px -6px rgba(212,240,22,.9)}
.btn--lime:hover{transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(212,240,22,1)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--white);transform:translateY(-3px)}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(12,13,10,.5)}
.btn .arr{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ── reveal system ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── beeldband ──
   Een brede foto tussen twee tekstsecties, als adempauze en om de toon te
   zetten. Puur sfeer: de alt blijft leeg, want de foto vertelt niets wat er
   niet ook in de tekst staat. */
.band{
  position:relative;overflow:hidden;background:#0A0B08;
  height:clamp(230px,34vw,490px);
}
.band img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.07);opacity:.92;
  transition:transform 1.6s var(--ease), opacity 1.2s var(--ease);
}
.band.in img{transform:none;opacity:1}
/* randen wegvloeien naar de pagina erboven en eronder, plus een limeaccent */
.band::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,8,.55) 0%,transparent 26%,transparent 72%,rgba(10,11,8,.6) 100%);
}
.band::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:var(--lime);opacity:.9;
}
/* Voor een foto waarvan niets afgesneden mag worden, zoals de racerolstoel. */
.band--vol{height:clamp(260px,46vw,660px)}

@media (max-width:820px){
  .band{height:clamp(200px,54vw,300px)}
  .band--vol{height:clamp(220px,60vw,360px)}
}
@media (prefers-reduced-motion:reduce){
  .band img{transform:none}
}

/* ═══════ HERO ═══════ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:150px 0 118px;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0A0B08}

/* beeld achter de kop; de sluier houdt de zwarte typografie leesbaar.
   De bronvideo is portret (860×1068), dus de uitsnede staat hoog zodat
   het gezicht in beeld blijft op brede schermen. */
/* De bron is portret. Op breed scherm krijgt hij daarom de rechterhelft in
   plaats van de volle breedte: zo past haar hele figuur erin, boven
   uitgelijnd, en blijft de linkerkant vrij voor de kop. */
.hero__photo{
  position:absolute;top:-5%;right:0;bottom:-5%;left:auto;
  width:min(62%,900px);will-change:transform;
}
.hero__video,
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% top;display:block}
.hero__veil{
  position:absolute;inset:0;
  background:
    /* van links donker naar rechts open, zodat de witte kop leesbaar blijft */
    linear-gradient(96deg,
      rgba(8,9,6,.9) 0%,
      rgba(8,9,6,.8) 40%,
      rgba(8,9,6,.52) 64%,
      rgba(8,9,6,.26) 100%),
    /* onderkant dicht, zodat de hero naadloos in de filmsectie overgaat */
    linear-gradient(180deg,
      rgba(8,9,6,.7) 0%,
      rgba(8,9,6,.28) 26%,
      rgba(8,9,6,.34) 58%,
      rgba(8,9,6,.92) 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.62;will-change:transform}
.blob--1{width:560px;height:560px;background:radial-gradient(circle,#D4F016,transparent 68%);top:-190px;right:-160px;opacity:.4;animation:float1 17s ease-in-out infinite}
.blob--2{width:520px;height:520px;background:radial-gradient(circle,#C8ECFF,transparent 68%);bottom:-190px;left:-130px;animation:float2 21s ease-in-out infinite}
.blob--3{width:700px;height:700px;background:radial-gradient(circle,#D4F016,transparent 70%);top:-260px;left:50%;transform:translateX(-50%);opacity:.4}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.1)}}

.hero__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}

.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
  padding:7px 16px 7px 12px;border-radius:100px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.01em;
  margin-bottom:30px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(212,240,22,.8);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(212,240,22,0)}100%{box-shadow:0 0 0 0 rgba(212,240,22,0)}}

.hero__title{
  font-size:clamp(2.9rem,7.6vw,6.6rem);
  font-weight:900;letter-spacing:-.05em;line-height:.93;
  margin-bottom:26px;color:#fff;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .w{
  display:inline-block;
  transform:translateY(110%) rotate(4deg);
  opacity:0;
  transition:transform 1.05s var(--ease),opacity .7s ease;
}
.hero.ready .w{transform:none;opacity:1}
.hero.ready .line:nth-child(1) .w:nth-child(1){transition-delay:.05s}
.hero.ready .line:nth-child(1) .w:nth-child(2){transition-delay:.13s}
.hero.ready .line:nth-child(2) .w:nth-child(1){transition-delay:.21s}
.hero.ready .line:nth-child(2) .w:nth-child(2){transition-delay:.29s}
.hero.ready .line:nth-child(2) .w:nth-child(3){transition-delay:.37s}
.hl{position:relative;color:#fff}
.underline{
  position:absolute;left:-2%;bottom:-.06em;width:104%;height:.24em;
  color:var(--lime);z-index:-1;overflow:visible;
}
.underline path{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.3s var(--ease) .95s}
.hero.ready .underline path{stroke-dashoffset:0}

.hero__sub{font-size:clamp(1.05rem,1.6vw,1.28rem);color:rgba(255,255,255,.76);max-width:560px;margin-bottom:32px}
.hero__sub strong{color:#fff;font-weight:700}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:38px}

/* de omlijnde knop staat op donker, dus omgekeerd van de rest van de site */
.hero__actions .btn--outline{border-color:rgba(255,255,255,.5);color:#fff}
.hero__actions .btn--outline:hover{background:#fff;color:var(--ink);border-color:#fff}

.hero__meta{display:flex;align-items:center;gap:14px;font-size:14.5px;color:rgba(255,255,255,.6)}
.hero__meta strong{color:#fff}
.avatars{display:flex}
.avatars i{
  width:34px;height:34px;border-radius:50%;border:2.5px solid #0E0F0B;
  margin-left:-11px;background:hsl(var(--h) 38% 68%);
}
.avatars i:first-child{margin-left:0}
.hero__scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;
}
.hero__scroll span{width:1.5px;height:44px;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.85));position:relative;overflow:hidden}
.hero__scroll span::after{content:'';position:absolute;inset:0;background:var(--lime);animation:scrolldot 2s ease-in-out infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ═══════ FILM ═══════ */
.film{position:relative;height:78vh;min-height:460px;overflow:hidden;background:#0A0B08;isolation:isolate}
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.film__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(6,7,5,.82) 0%,rgba(6,7,5,.5) 45%,rgba(6,7,5,.12) 100%),
             linear-gradient(0deg,rgba(6,7,5,.6),transparent 45%);
}
.film__copy{
  position:relative;z-index:2;height:100%;
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;flex-direction:column;justify-content:center;
}
.film__line{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1.12;
  font-size:clamp(1.5rem,3.4vw,2.9rem);color:#fff;max-width:660px;
}
.film__line--lime{color:var(--lime);margin-top:14px}
.film__sound{
  position:absolute;z-index:3;right:28px;bottom:28px;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;
  transition:background .25s, transform .3s var(--ease);
}
.film__sound:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.film__sound svg{width:20px;height:20px}

/* ═══════ SHOTS ═══════ */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:70px}
.shot{margin:0}
/* filmische uitsnede: breder dan hoog, met een subtiele vignettering */
.shot__frame{
  position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink);
}
.shot__frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 40%,rgba(8,9,6,.32) 100%);
}
.shot img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease);
}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  margin-top:15px;font-size:14px;color:var(--ink-3);padding-left:2px;
  display:flex;gap:10px;align-items:baseline;
}
.shot figcaption b{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.04em;color:var(--ink);flex:none;
}

/* ═══════ PODIUM ═══════ */
.podium{
  position:relative;overflow:hidden;background:var(--ink);isolation:isolate;
  /* schermvullend moment: de foto is ~16:9, dus zo blijft zij helemaal in beeld */
  min-height:100svh;padding:var(--sec) 0;
  display:flex;align-items:center;
}
.podium__img{position:absolute;inset:0;z-index:0;will-change:transform}
/* rechts verankerd: zij staat in de rechterderde van de foto */
.podium__img img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:.95}
.podium::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    /* donker waar de tekst staat, open waar zij rijdt */
    linear-gradient(94deg,rgba(10,11,8,.9) 0%,rgba(10,11,8,.78) 34%,rgba(10,11,8,.38) 62%,rgba(10,11,8,.14) 100%),
    linear-gradient(180deg,rgba(10,11,8,.5) 0%,transparent 22%,transparent 74%,rgba(10,11,8,.8) 100%);
}
.podium__copy{position:relative;z-index:2;width:100%;text-align:left}
.podium__copy p{
  font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.05em;
  font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.08;color:#fff;
  max-width:16ch;
}
.podium__kicker{
  margin-top:20px!important;color:var(--lime)!important;
  font-size:clamp(1.05rem,1.9vw,1.6rem)!important;letter-spacing:-.035em!important;
}

/* ═══════ MARQUEE ═══════ */
.marquee{
  background:var(--ink);color:var(--white);
  padding:20px 0;overflow:hidden;white-space:nowrap;
  position:relative;
}
.marquee__track{display:inline-flex;gap:34px;align-items:center;animation:scrollx 34s linear infinite;padding-right:34px}
.marquee span{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.marquee .s{color:var(--lime);font-size:15px}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ═══════ INTRO / MISSIE ═══════ */
.intro{padding:var(--sec) 0}
.intro__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.intro__left h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.intro__left{position:sticky;top:112px}
.intro__right p{font-size:1.08rem;color:var(--ink-2);margin-bottom:20px;max-width:640px}
.intro__right p strong{color:var(--ink);font-weight:600}
.pillars{margin-top:34px;display:grid;gap:2px;border-top:1px solid var(--line)}
.pillars li{
  padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:180px 1fr;gap:20px;
  font-size:15px;color:var(--ink-2);
}
.pillars b{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
  letter-spacing:-.01em;color:var(--ink);
}

/* ═══════ STATS ═══════ */
.stats{padding:var(--sec) 0;border-bottom:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.stat b{display:block;font-family:'Archivo',sans-serif;font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:900;letter-spacing:-.05em;line-height:1;margin-bottom:8px}
.stat span{font-size:14.5px;color:var(--ink-3);display:block;max-width:190px}

/* ═══════ headings ═══════ */
.sec-head{max-width:820px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-3);margin-bottom:18px;
  padding-left:20px;position:relative;
}
.eyebrow::before{content:'';position:absolute;left:0;top:50%;width:12px;height:2px;background:var(--lime)}
.eyebrow--light{color:rgba(255,255,255,.6)}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.5rem)}
.lead{margin-top:22px;font-size:1.12rem;color:var(--ink-2);max-width:620px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* ═══════ PROBLEEM ═══════ */
.problem{background:var(--white);border-bottom:1px solid var(--line)}
.problem__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.timeline{position:relative;padding-left:44px}
.timeline__rail{position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.timeline__rail span{display:block;width:100%;height:0;background:var(--lime);border-radius:2px;transition:height .1s linear}
.tl-item{position:relative;padding-bottom:38px}
.tl-item::before{
  content:'';position:absolute;left:-42px;top:9px;width:18px;height:18px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);transition:.5s var(--ease);
}
.tl-item.in::before{border-color:var(--lime);background:var(--lime);transform:scale(1.12)}
.tl-item b{font-family:'Archivo',sans-serif;font-size:15px;letter-spacing:.04em;color:var(--ink-3);display:block;margin-bottom:4px}
.tl-item p{font-size:1.16rem;font-weight:500;letter-spacing:-.015em}
.tl-item:last-child p{font-weight:700}

.quote-card{
  background:var(--ink);color:var(--white);border-radius:var(--r-lg);
  padding:44px 40px;position:sticky;top:110px;box-shadow:var(--shadow-lg);
}
.quote-card__mark{font-family:'Archivo',sans-serif;font-size:80px;line-height:.4;color:var(--lime);margin-bottom:26px}
.quote-card p{font-size:1.2rem;color:rgba(255,255,255,.86);margin-bottom:32px}
.quote-card__foot{border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.quote-card__foot strong{display:block;font-family:'Archivo',sans-serif;font-size:1.35rem;color:var(--lime);letter-spacing:-.03em;margin-bottom:5px}
.quote-card__foot span{font-size:14px;color:rgba(255,255,255,.5)}

/* ═══════ STEPS ═══════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.step{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 32px 34px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.step__num{
  font-family:'Archivo',sans-serif;font-size:14px;font-weight:800;letter-spacing:.06em;
  color:var(--ink);background:var(--lime);display:inline-block;
  padding:5px 12px;border-radius:100px;margin-bottom:22px;
}
.step h3{font-size:1.45rem;margin-bottom:12px}
.step p{color:var(--ink-2);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.chips li{font-size:13px;font-weight:500;padding:6px 12px;border-radius:100px;background:var(--paper-2);color:var(--ink-2)}

.tiers{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 16px}
.tier{
  font-size:14.5px;font-weight:600;
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--white);cursor:pointer;transition:.25s var(--ease);color:var(--ink);
}
.tier:hover{border-color:var(--ink);transform:translateY(-2px)}
.tier.is-active{background:var(--lime);border-color:var(--lime)}
.tier--custom{font-weight:500;color:var(--ink-3)}
.tier-out{font-size:14.5px;color:var(--ink-3)}
.tier-out b{color:var(--ink);font-weight:700}

.flow{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:8px}
.flow__node{
  width:100%;text-align:center;padding:12px;border-radius:14px;
  background:var(--paper-2);font-size:14.5px;font-weight:600;
}
.flow__node--lime{background:var(--lime)}
.flow__node--sm{font-size:13px;font-weight:500;color:var(--ink-3);padding:9px}
.flow__arrow{width:2px;height:16px;background:var(--line);position:relative}
.flow__arrow::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--line)}
.flow__split{display:grid;gap:6px;width:100%}

/* ═══════ BENTO ═══════ */
.rewards{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.b{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 26px 30px;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s;
}
.b:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);background:var(--white)}
.b:hover .ico-plate{transform:translateY(-4px) rotate(-5deg)}
.b h3{font-size:1.22rem;margin-bottom:9px}
.b p{font-size:14.8px;color:var(--ink-2)}
.b--tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--white);border-color:transparent;min-height:290px}
.b--tall:hover{background:var(--ink)}
.b--tall p{color:rgba(255,255,255,.72)}
.b--tall .ico-plate{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.b--lime{background:var(--lime);border-color:transparent}
.b--lime:hover{background:var(--lime)}
.b--lime .ico-plate{--acc:var(--ink);background:rgba(12,13,10,.08);border-color:rgba(12,13,10,.16)}
.b--wide{grid-column:span 4}
.b--wide p{max-width:760px;margin:0 auto}
.badge-row{margin-top:18px}
.badge-row span{
  display:inline-block;background:var(--ink);color:var(--lime);
  font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:100px;
}

/* ═══════ SPORTERS ═══════ */
.roster{background:var(--white);border-top:1px solid var(--line)}
.roster__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rcard{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}

/* ── beeld ── */
.rcard__media{
  position:relative;display:block;
  aspect-ratio:4/3;background:var(--paper-2);overflow:hidden;
}
.rcard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease);
}
.rcard:hover .rcard__media img{transform:scale(1.04)}
.rcard__media--empty{
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 76% 22%,rgba(212,240,22,.85),transparent 60%),
    radial-gradient(circle at 14% 84%,rgba(200,236,255,.7),transparent 56%),
    linear-gradient(120deg,var(--lime-wash),var(--paper-2));
}
.rcard__plus{
  width:58px;height:58px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:28px;color:var(--ink);
}
.rcard__sport{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  color:var(--ink);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;
}
.rcard__seal{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  filter:drop-shadow(0 2px 6px rgba(12,13,10,.3));
}

/* ── tekst ── */
.rcard__body{display:flex;flex-direction:column;flex:1;padding:22px}
.rcard__name{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:-.035em;
}
.rcard__meta{font-size:14px;color:var(--ink-3);margin-top:4px}
.rcard__ask{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:14px}
/* getint blok met het begin van de bio; de rest lees je op het profiel */
.rcard__bio{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:var(--lime-wash);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.rcard__btn{
  /* margin-top:auto duwt de knop naar beneden, zodat alle kaarten
     hun knop op dezelfde hoogte hebben ondanks verschillende tekstlengtes */
  display:block;text-align:center;margin-top:auto;
  padding:13px 20px;border-radius:100px;
  border:1px solid var(--line);background:var(--paper);
  font-size:15px;font-weight:600;
  transition:background .2s, border-color .2s, color .2s;
}
.rcard__bio{margin-bottom:18px}
.rcard:hover .rcard__btn{background:var(--lime);border-color:var(--lime)}
.rcard__btn--lime{background:var(--lime);border-color:var(--lime)}

.roster__cta{text-align:center;margin-top:40px}
.hint-line{font-size:13.5px;color:var(--ink-3);margin-top:16px}

/* ═══════ GOALS ═══════ */
.goals__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.goals__col h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:34px}
.goal{margin-bottom:22px}
.goal__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.goal__top b{font-size:16px;font-weight:600}
.goal__top span{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em}
.bar{height:9px;background:var(--paper-2);border-radius:100px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B8DC00,var(--lime));border-radius:100px;transition:width 1.5s var(--ease)}
.goal small{font-size:12.5px;color:var(--ink-3);display:block;margin-top:7px}
.goal small em{font-style:normal;font-weight:700;color:var(--ink)}

.challenge{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px;margin-bottom:12px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.challenge:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.challenge__who{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);margin-bottom:8px;font-weight:500}
.challenge__who i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--lime),#8FD1A0)}
.challenge--biz .challenge__who i{background:linear-gradient(135deg,#0C0D0A,#4A4E42)}
.challenge p{font-size:1.08rem;font-weight:500}
.challenge b{font-family:'Archivo',sans-serif;font-weight:800}
.mini{margin-top:24px;font-size:14.5px;color:var(--ink-3);border-left:2px solid var(--lime);padding-left:16px}

/* ═══════ DUO ═══════ */
.split-sec{background:var(--white);border-top:1px solid var(--line)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo__card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 36px;
  background:var(--paper);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.duo__card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.duo__card header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:var(--white);padding:6px 13px;border-radius:100px}
.tag--lime{background:var(--lime);color:var(--ink)}
.duo__card header b{font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-.04em}
.duo__card header b em{font-style:normal;font-size:.95rem;font-weight:600;color:var(--ink-3)}
.duo__card li{padding:11px 0 11px 30px;position:relative;font-size:15.6px;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.duo__card li:last-child{border:0}
.duo__card li::before{content:'';position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--lime)}
.duo__card--dark{background:var(--ink);border-color:transparent;color:var(--white)}
.duo__card--dark header{border-color:rgba(255,255,255,.14)}
.duo__card--dark header b em{color:rgba(255,255,255,.5)}
.duo__card--dark li{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.1)}
.pkgs{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.pkgs span{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:100px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8)}
.biz-quote{
  margin-top:72px;text-align:center;max-width:800px;margin-left:auto;margin-right:auto;
  font-family:'Archivo',sans-serif;font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.16;
}
.biz-quote em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 62%,var(--lime) 62%)}
.biz-quote cite{display:block;font-style:normal;font-size:14.5px;font-weight:400;color:var(--ink-3);margin-top:20px;letter-spacing:0;line-height:1.6}

/* ═══════ CAREER TRACK ═══════ */
.career{overflow:clip}
.career__scroller{height:300vh;position:relative}
.career__pin{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:52px;
}
.career__pin .sec-head{margin-bottom:0}
.track-wrap{overflow:hidden;padding:14px 0}
.track{
  display:flex;gap:18px;will-change:transform;position:relative;
  /* links én rechts uitlijnen op de contentkolom, zodat de laatste kaart
     net zo netjes eindigt als de eerste begint */
  padding:0 max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
}
.ct{
  flex:0 0 372px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 26px;
  position:relative;
}
.ct::before{content:'';position:absolute;top:0;left:26px;right:26px;height:3px;background:var(--line);border-radius:3px}
.ct b{font-family:'Archivo',sans-serif;font-size:2.4rem;font-weight:900;letter-spacing:-.05em;color:var(--line);display:block;margin-bottom:10px;line-height:1}
.ct h4{font-size:1.16rem;margin-bottom:7px}
.ct p{font-size:14.5px;color:var(--ink-3)}
.ct--gold{background:var(--ink);border-color:transparent;color:var(--white)}
.ct--gold::before{background:var(--lime)}
.ct--gold b{color:var(--lime)}
.ct--gold p{color:rgba(255,255,255,.65)}

/* ═══════ CHAMPIONS WALL ═══════ */
.wall{padding-top:var(--sec)}
.wall__card{
  background:var(--ink);color:var(--white);border-radius:44px;
  padding:90px 60px;text-align:center;position:relative;overflow:hidden;
}
.wall__card::after{
  content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,240,22,.22),transparent 66%);
  top:-280px;left:50%;transform:translateX(-50%);
}
.wall__card>*{position:relative;z-index:2}
.wall__card h2{font-size:clamp(1.7rem,3.6vw,2.9rem);margin-bottom:22px}
.counter-line b{color:var(--lime)}
.wall__card p{color:rgba(255,255,255,.62);max-width:600px;margin:0 auto;font-size:15.5px}
.wall__names{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:38px;max-width:900px;margin-left:auto;margin-right:auto}
.wall__names span{
  font-size:12.5px;color:rgba(255,255,255,.42);background:rgba(255,255,255,.06);
  padding:6px 13px;border-radius:100px;transition:.3s;
}
.wall__names span:hover{color:var(--lime);background:rgba(212,240,22,.12)}

/* ═══════ PLATFORM ═══════ */
.platform{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{padding:38px 28px 34px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper);text-align:center;transition:.5s var(--ease)}
.feat:hover{border-color:var(--lime);background:var(--lime-wash);transform:translateY(-5px)}
.feat:hover .ico-plate{transform:translateY(-4px) rotate(5deg);background:var(--white)}
.feat h3{font-size:1.18rem;margin-bottom:11px}
.feat p{font-size:14.8px;color:var(--ink-2)}

/* ═══════ TRUST ═══════ */
.trust__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.trust h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.checks li{padding:16px 0 16px 38px;position:relative;border-bottom:1px solid var(--line);font-size:16.5px;font-weight:500}
.checks li:last-child{border:0}
.checks li::before{
  content:'✓';position:absolute;left:0;top:14px;
  width:24px;height:24px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;font-size:13px;font-weight:800;
}

/* ═══════ CTA ═══════ */
.cta{position:relative;padding:150px 0 160px;text-align:center;overflow:hidden;background:var(--paper-2)}
.cta__bg{position:absolute;inset:0;pointer-events:none}
.cta__inner{position:relative;z-index:2;max-width:880px}
.cta__mark{width:74px;margin:0 auto 30px;animation:spinmark 9s ease-in-out infinite}
@keyframes spinmark{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.07)}}
.cta h2{font-size:clamp(2.1rem,5.4vw,4.2rem);margin-bottom:26px}
.cta p{color:var(--ink-2);font-size:1.08rem;max-width:640px;margin:0 auto 38px}
.cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.cta small{font-size:13.5px;color:var(--ink-3);display:block}

/* ═══════ FOOTER ═══════ */
.footer{background:var(--ink);color:var(--white);padding:80px 0 34px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand img{height:26px;margin-bottom:16px}
.footer__brand p{color:rgba(255,255,255,.45);font-size:14.5px}
.footer h5{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--lime);margin-bottom:16px;font-weight:700}
.footer a{display:block;font-size:14.5px;color:rgba(255,255,255,.62);padding:5px 0;transition:.25s}
.footer a:hover{color:var(--white);transform:translateX(4px)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.35)}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width:1024px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:38px}
  .problem__grid,.goals__grid,.trust__grid{grid-template-columns:1fr;gap:48px}
  .intro__grid{grid-template-columns:1fr;gap:34px}
  .intro__left{position:static}
  .quote-card{position:static}
  .steps{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b--tall{grid-row:span 1;min-height:auto}
  .b--wide{grid-column:span 2}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .roster__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  :root{--sec:68px}
  .nav{padding:14px 18px}
  .nav.is-stuck{padding:10px 18px}
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;padding:96px 28px 40px;
    background:var(--paper);flex-direction:column;gap:6px;font-size:26px;font-weight:700;
    font-family:'Archivo',sans-serif;letter-spacing:-.03em;color:var(--ink);
    transform:translateY(-101%);transition:transform .5s var(--ease);height:100svh;justify-content:center;
  }
  .nav__links.open{transform:none}
  .nav__burger{display:flex;margin-left:auto;z-index:5}
  .nav.menu-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.menu-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav__cta .btn--ghost{display:none}
  .nav__cta{margin-left:0}
  /* Het logo werd samengedrukt om ruimte te maken voor de knop ernaast.
     Nu houdt het zijn vorm en is de knop wat compacter, zodat logo, knop en
     burger samen binnen 390 px passen. */
  .nav__logo{flex:none;height:21px}
  .nav__logo img{height:21px}
  .nav__cta{gap:8px}
  .nav__cta .btn--lime{padding:9px 15px;font-size:13.5px}
  /* In de smalle balk is geen plek voor de vlaggen naast logo, knop en burger.
     Ze verhuizen naar het uitklapmenu, waar wel ruimte is. */
  .taal{display:none}
  .nav.menu-open .taal{
    display:flex;gap:10px;position:fixed;left:28px;bottom:44px;z-index:6;margin:0;
  }
  .nav.menu-open .taal__knop{width:34px;height:24px}
  .nav.menu-open .taal{gap:14px}
  .nav.menu-open .taal__streep{height:22px;background:var(--line)}
  .hero{padding:130px 0 100px}
  .film{height:66vh}
  .film__veil{background:linear-gradient(0deg,rgba(6,7,5,.88),rgba(6,7,5,.35) 60%,rgba(6,7,5,.5))}
  .shots{grid-template-columns:1fr;gap:26px;margin-bottom:48px}

  .pillars li{grid-template-columns:1fr;gap:4px;padding:15px 0}
  /* smal scherm: zij past niet naast de tekst, dus verloop van boven naar onder */
  .podium{min-height:78svh;align-items:flex-end}
  .podium__img img{object-position:78% 50%}
  .podium::after{
    background:linear-gradient(180deg,rgba(10,11,8,.45) 0%,rgba(10,11,8,.25) 30%,rgba(10,11,8,.86) 72%,rgba(10,11,8,.96) 100%);
  }
  .podium__copy p{max-width:none}
  .duo{grid-template-columns:1fr}
  .bento,.feat-grid,.roster__grid{grid-template-columns:1fr}
  .b--wide{grid-column:span 1}
  .wall__card{padding:56px 26px;border-radius:28px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .career__scroller{height:auto}
  .track-wrap{position:static;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .track{transform:none!important;padding:0 22px}
  .ct{flex:0 0 250px;scroll-snap-align:center}
  .ico-plate{width:64px;height:64px;border-radius:20px;margin-bottom:18px}
  .ico{width:34px;height:34px}
  .marquee span{font-size:17px}
  .hero__scroll{display:none}
  .blob{opacity:.32}
  .blob--1{width:420px;height:420px;top:-120px;right:-160px}
  .blob--2{width:360px;height:360px;bottom:-120px;left:-140px}
  /* smal scherm: het beeld mag wél de volle breedte hebben, want daar
     staat de tekst eroverheen in plaats van ernaast */
  .hero__photo{left:0;right:0;width:auto}
  .hero__video,
  .hero__photo img{object-position:50% top}
  /* smal scherm: verlopen van boven naar beneden in plaats van zijwaarts,
     want er is geen ruimte om de tekst naast het onderwerp te zetten */
  .hero__veil{
    background:
      linear-gradient(180deg,
        rgba(8,9,6,.72) 0%,
        rgba(8,9,6,.62) 34%,
        rgba(8,9,6,.55) 62%,
        rgba(8,9,6,.92) 100%);
  }
}
@media (max-width:520px){
  .stats__grid{grid-template-columns:1fr;gap:26px}
  .hero__actions .btn{width:100%;justify-content:center}
  .footer__grid{grid-template-columns:1fr}
}