/* Landingspagina van het partnerprogramma.
 *
 * Eigen stijl, los van stijl.css: deze pagina is de etalage en is donker met de
 * huisstijlkleur, terwijl de ingelogde omgeving licht en zakelijk is. Zo blijft
 * stijl.css onaangeraakt en kan hier niets stuk gaan aan de app.
 *
 * De vijf voorbeeldvideo's spelen zonder geluid in een lus. Er hoort een klein
 * eigen scriptje bij (landing.js) dat alleen speelt wat in beeld staat en dat
 * stilhoudt als iemand 'minder beweging' heeft aangezet. Dat script komt van
 * onze eigen server; er gaat bij het bekijken van deze pagina geen enkel
 * verzoek naar TikTok, dus ook geen cookies van hen.
 */

:root {
  --grond: #121212;
  --vlak: #1c1c1c;
  --vlak-op: #242424;
  --tekst: #ffffff;
  --tekst-dun: #a2a2a2;
  --tekst-vaag: #8b8b91;
  --lijn: #2c2c2c;
  --merk: #ffc000;
  --tiktok: #25f4ee;
  --insta: #e1306c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--grond);
  color: var(--tekst);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.vel { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

a { color: var(--merk); }

/* ---------------- kopbalk ---------------- */

.balk {
  border-bottom: 1px solid var(--lijn);
  padding: 18px 0;
}

.balk-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.merknaam {
  font-weight: 800;
  letter-spacing: -.025em;
  font-size: 1.12rem;
  text-decoration: none;
  color: var(--tekst);
}

.merknaam span { color: var(--merk); }

.balk .stil {
  color: var(--tekst-dun);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
}

.balk .stil:hover { color: var(--merk); }

/* ---------------- hero ---------------- */

/* Alleen boven en onder padding zetten. Dit element heeft ook class .vel, en
   met een volledige padding-regel wis je de zijmarge daarvan; dan staat de
   hero 22px verder naar links dan de rest van de pagina. */
.hero { padding-top: 68px; padding-bottom: 8px; }

.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--merk);
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(2.1rem, 6.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
  margin-bottom: 20px;
  text-wrap: balance;
  max-width: 20ch;
}

h1 em { font-style: normal; color: var(--merk); }

.hero p {
  color: var(--tekst-dun);
  font-size: 1.1rem;
  max-width: 54ch;
  margin-bottom: 30px;
}

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.knop {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  transition: filter .15s ease, transform .15s ease, border-color .15s ease;
}

.knop-vol { background: var(--merk); color: #1a1400; }
.knop-vol:hover { filter: brightness(1.09); }
.knop-leeg { color: var(--tekst); border-color: #3a3a3a; }
.knop-leeg:hover { border-color: var(--merk); color: var(--merk); }
.knop:active { transform: translateY(1px); }

.knop:focus-visible,
a:focus-visible,
.rail:focus-visible {
  outline: 3px solid var(--merk);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .knop { transition: none; }
}

.onder-knoppen {
  color: var(--tekst-vaag);
  font-size: .88rem;
  margin-top: 18px;
}

/* ---------------- carrousel ---------------- */

.sectie { padding: 62px 0; }
.sectie + .sectie { border-top: 1px solid var(--lijn); }

.sectie-kop { margin-bottom: 26px; }

h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: 8px;
  text-wrap: balance;
}

.sectie-kop p {
  color: var(--tekst-dun);
  max-width: 58ch;
  font-size: 1.02rem;
}

/* De carrousel.
   Er staan altijd vijf hele kaarten in beeld met aan beide kanten een halve,
   zodat je ziet dat er meer is. De breedte is daarop uitgerekend: zeven
   zichtbare kaarten waarvan twee half, dus zes kaartbreedtes plus vier gaten.
   Kaarten happen in het midden vast (scroll-snap-align: center), waardoor die
   halve randen bij elk veeg en elke pijlklik blijven kloppen.

   Het rondlopen zit in landing.js: dat kloont de reeks ervoor en erachter en
   zet de scrollpositie onzichtbaar terug zodra je een set voorbij bent. Zonder
   JavaScript blijft het een gewone veegbare rij, en dat is de terugvaloptie. */
.carrousel {
  position: relative;
  --rand: 110px;
}

/* Zachte randen. Twee lagen in een: een verloop naar de achtergrondkleur, en
   een echte blur op wat erachter langs schuift. Het masker maakt beide sterker
   naar de buitenrand toe, zodat de halve kaarten wegvloeien in plaats van
   ergens hard af te breken.
   pointer-events: none, anders zou deze laag de kliks op de kaarten opvangen.
   z-index 3 houdt hem onder de pijlen (4), die blijven dus scherp. */
.carrousel::before,
.carrousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px;
  width: var(--rand);
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.carrousel::before {
  left: 0;
  background: linear-gradient(to right, var(--grond) 12%, transparent);
  mask-image: linear-gradient(to right, #000 18%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 18%, transparent);
}

.carrousel::after {
  right: 0;
  background: linear-gradient(to left, var(--grond) 12%, transparent);
  mask-image: linear-gradient(to left, #000 18%, transparent);
  -webkit-mask-image: linear-gradient(to left, #000 18%, transparent);
}

.rail {
  --gat: 12px;
  /* Aantal "plekken" over de volle breedte. Bij gecentreerd vastklikken toont
     de rand dan precies een HALVE kaart, links en rechts. Uitgerekend:
       (W - w) / 2 = k * (w + gat) + gat + w / 2   met k hele kaarten ernaast
     werk je uit naar   w = W / (2k + 2) - gat
     Dus plekken = 2k + 2, altijd even, en er staan (plekken - 1) hele kaarten
     in beeld. 4 plekken = 3 hele kaarten. */
  --plekken: 4;
  display: flex;
  gap: var(--gat);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Scrollbalk weg: er zijn nu pijlen, en de halve kaarten laten al zien dat er
   meer is. Op de telefoon veeg je gewoon. */
.rail::-webkit-scrollbar { display: none; }

.kaart {
  flex: 0 0 calc(100% / var(--plekken) - var(--gat));
  scroll-snap-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0;
}

/* --- pijlen --- */

/* Pas zichtbaar als JavaScript de carrousel heeft opgezet. Zonder JavaScript
   zouden ze niets doen, en dan horen ze er niet te staan. */
.pijl { display: none; }

.carrousel.klaar .pijl {
  display: grid;
  place-items: center;
  position: absolute;
  /* Verticaal op het midden van het BEELD, niet van de hele carrousel: de
     ondertitel (30px) en de ruimte eronder (14px) tellen niet mee. */
  top: calc((100% - 44px) / 2);
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 10, 10, .78);
  color: var(--tekst);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.carrousel.klaar .pijl:hover {
  background: var(--merk);
  border-color: var(--merk);
  color: #1a1400;
}

.pijl:focus-visible { outline: 3px solid var(--merk); outline-offset: 3px; }

.pijl-links { left: -6px; }
.pijl-rechts { right: -6px; }

.pijl svg { width: 17px; height: 17px; display: block; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .carrousel.klaar .pijl { transition: none; }
}

.beeld {
  /* Moet block zijn: dit is een span (geldig binnen een link) en op een inline
     element doen aspect-ratio en hoogte niets, dan klapt de kaart dicht. */
  display: block;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vlak);
  border: 1px solid var(--lijn);
}

/* Poster en video liggen op elkaar. De poster is er meteen, de video schuift
   eroverheen zodra hij speelt. Zo is er nooit een leeg vlak. */
.beeld img,
.beeld video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.beeld video { opacity: 0; transition: opacity .4s ease; }
.beeld video.speelt { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .beeld video { transition: none; }
}

/* Donkere voet over het beeld zodat de naam altijd leesbaar is. */
.beeld::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  padding: 3px 8px;
  border-radius: 99px;
}

.naam {
  position: absolute;
  bottom: 9px;
  left: 11px;
  right: 11px;
  z-index: 2;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Klein pijltje dat duidelijk maakt dat je naar TikTok gaat. */
.uit {
  position: absolute;
  bottom: 9px;
  right: 9px;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s ease;
}

.kaart:hover .uit, .kaart:focus-visible .uit { opacity: 1; }
.uit svg { width: 13px; height: 13px; display: block; fill: var(--merk); }

.kaart-onder {
  margin-top: 9px;
  color: var(--tekst-vaag);
  font-size: .82rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.veeg {
  color: var(--tekst-vaag);
  font-size: .85rem;
  margin-top: 2px;
}

/* ---------------- stappen ---------------- */

.stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.stap {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 22px 22px 24px;
}

.stap-icoon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--merk);
  background: rgba(255, 192, 0, .08);
  color: var(--merk);
  /* Gecentreerd, want de tekst in deze kaarten staat ook gecentreerd. Alleen
     margin-bottom liet het icoon links staan naast gecentreerde tekst. */
  margin: 0 auto 16px;
}

.stap-icoon svg { width: 24px; height: 24px; display: block; }

.stap strong { color: var(--tekst); font-weight: 700; }

.stap h3 {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}

.stap p { color: var(--tekst-dun); font-size: .96rem; }

/* ---------------- voorbeeld van het dashboard ----------------
 *
 * Een nagemaakt scherm, met opzet iets kleiner dan echt, zodat het leest als een
 * afbeelding van een scherm en niet als een deel van deze pagina. De cijfers
 * zijn verzonnen, en daarom staat er een label VOORBEELD op.
 */

.mock {
  border: 1px solid var(--lijn);
  border-radius: 14px;
  overflow: hidden;
  background: var(--vlak);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 24px 60px -40px rgba(0, 0, 0, .9);
  font-size: .94rem;
}

.mock-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--vlak-op);
  border-bottom: 1px solid var(--lijn);
}

.mock-merk { font-weight: 800; letter-spacing: -.02em; font-size: .95rem; }
.mock-merk span { color: var(--merk); }

.mock-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grond);
  background: var(--merk);
  border-radius: 999px;
  padding: 3px 10px;
}

.mock-binnen { padding: 22px 18px 24px; }

.mock-groet {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.mock-kopje {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tekst-vaag);
}

.mock-videokop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 24px 0 6px;
}

.mock-link {
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.mock-url {
  display: block;
  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 1rem;
  color: var(--merk);
  margin: 6px 0 4px;
  overflow-wrap: anywhere;
}

.mock-fijn { display: block; color: var(--tekst-vaag); font-size: .82rem; }

.mock-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.mock-tegel {
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 14px 16px;
}

.mock-groot {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-top: 4px;
}

.mock-geel { color: var(--merk); }

.mock-rij {
  display: grid;
  grid-template-columns: 1fr auto 76px;
  gap: 6px 14px;
  align-items: center;
  border-top: 1px solid var(--lijn);
  padding: 10px 2px;
  color: var(--tekst-dun);
  font-size: .9rem;
}

.mock-titel { color: var(--tekst); }

/* Knoppen in het voorbeeld zijn spans, geen echte knoppen: dit is een plaatje
   van een scherm en er valt hier niets te klikken. */
.mock-knop {
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tekst);
  white-space: nowrap;
}

.mock-knop-vol {
  border-color: var(--merk);
  background: var(--merk);
  color: var(--grond);
}

.mock-toevoegen {
  border-top: 1px solid var(--lijn);
  padding-top: 14px;
  margin-top: 2px;
}

.mock-raket {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 30px;
  height: 30px;
  color: var(--merk);
}

.mock-raket svg { width: 20px; height: 20px; display: block; }
.mock-leeg { width: 30px; }

/* ---------------- wat je krijgt ---------------- */

.punten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  list-style: none;
}

.punt {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 22px;
}

.punt strong {
  display: block;
  font-size: 1.04rem;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}

.punt span { color: var(--tekst-dun); font-size: .96rem; }

.groot {
  color: var(--merk);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

/* ---------------- slot ---------------- */

.slot {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 38px 32px;
  text-align: center;
}

.slot h2 { margin-bottom: 10px; }
.slot p { color: var(--tekst-dun); max-width: 46ch; margin: 0 auto 24px; }
.slot .knoppen { justify-content: center; }

.kleine-letters {
  color: var(--tekst-vaag);
  font-size: .86rem;
  max-width: 62ch;
  margin-top: 30px;
}

.kleine-letters li { margin-bottom: 6px; margin-left: 1.1em; }

footer {
  border-top: 1px solid var(--lijn);
  padding: 26px 0 40px;
  text-align: center;
}

footer p { color: var(--tekst-vaag); font-size: .84rem; }
footer a { color: var(--tekst-dun); }

/* ---------------- telefoon ---------------- */

/* Smaller scherm: minder kaarten naast elkaar. De rij zelf verandert niet,
   alleen hoeveel er passen. BEWUST niet tot de schermrand laten doorlopen met
   een negatieve marge: dat maakt het element breder dan het scherm en dan
   schuift de hele pagina zijwaarts mee. */
@media (max-width: 680px)  { .carrousel { --rand: 70px; } }
@media (max-width: 430px)  { .carrousel.klaar .pijl { width: 38px; height: 38px; } }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero { padding-top: 44px; padding-bottom: 4px; }
  .sectie { padding: 44px 0; }
  .knoppen .knop { flex: 1 1 100%; text-align: center; }
  .slot { padding: 28px 20px; }
  .mock-rij { grid-template-columns: 1fr auto 40px; gap: 6px 10px; }
  .mock-raket { width: 24px; height: 24px; }
  .mock-leeg { width: 24px; }
  .mock-binnen { padding: 18px 14px 20px; }
}

/* ===================================================================
   Videorij over de volle schermbreedte, met gecentreerde tekst.
   Gekozen boven de variant binnen de tekstkolom, 18-08-2026.
   =================================================================== */
.rail-buiten {
  /* Volle schermbreedte: de rij loopt van rand tot rand. */
  max-width: none;
  padding: 0;
}

/* De regel onder de rij hoort wel in de tekstkolom te blijven staan, anders
   begint die tegen de schermrand. */
.veeg {
  max-width: 1040px;
  margin: 2px auto 0;
  padding: 0 22px;
}

/* Pijlen naar binnen, want bij een volle breedte staan ze anders half buiten
   het scherm. */
.pijl-links { left: 12px; }
.pijl-rechts { right: 12px; }

/* Aantal plekken per schermbreedte. Altijd EVEN, anders vallen de halve randen
   weg.

   ZES IS HET MAXIMUM, en dat is geen smaakkeuze. Er staan `plekken + 1` kaarten
   in beeld (twee halve aan de randen plus `plekken - 1` hele). Zolang dat aantal
   niet groter is dan het aantal VERSCHILLENDE creators in de lijst, kan er nooit
   twee keer dezelfde creator in het eerste scherm staan. We hebben er zeven, dus
   hoogstens zeven kaarten in beeld, dus hoogstens zes plekken.

   Stond eerder op 8 en 10 voor brede schermen: dan staan er negen of elf kaarten
   in beeld en zie je zonder te scrollen dezelfde creator twee of drie keer. Komen
   er creators bij, dan mag dit mee omhoog: een extra stap van 2 plekken kan pas
   bij twee extra namen. De kaarten worden op een breed scherm nu ook gewoon
   groter, tot ongeveer de eigen resolutie van de video (360px breed). */
@media (min-width: 1300px) { .rail { --plekken: 6; } }
@media (min-width: 700px)  and (max-width: 1299px) { .rail { --plekken: 4; } }
@media (max-width: 699px)  { .rail { --plekken: 2; } }

/* --- variant breed: alle tekst gecentreerd ---
   De blokken met een maximumbreedte moeten er ook nog met margin-inline auto
   bij, anders staat de tekst wel gecentreerd maar het blok zelf niet. */
.hero,
.sectie-kop,
.stap,
.punt,
.veeg,
.kaart-onder,
.kleine-letters {
  text-align: center;
}

h1,
.hero p,
.sectie-kop p,
.kleine-letters {
  margin-left: auto;
  margin-right: auto;
}

.knoppen { justify-content: center; }

/* Het cijfer bij een stap is een rondje op blokniveau, dus dat moet zelf ook
   gecentreerd worden. */
.stap::before { margin-left: auto; margin-right: auto; }

/* Een opsomming met bolletjes staat lelijk gecentreerd; die halen we hier weg. */
.kleine-letters { list-style: none; }
.kleine-letters li { margin-left: 0; }

/* Op een telefoon valt de uitleg-alinea in de hero weg. De kop, de knoppen en
   de regel eronder vertellen het verhaal daar al, en zo staat de eerste
   videokaart een stuk hoger in beeld. Op desktop blijft hij staan. */
@media (max-width: 680px) {
  .hero-tekst { display: none; }
}