/* Zelfde palet als de app (Stijl/Kleuren.swift), zodat wie van de site naar
   de App Store gaat dezelfde app herkent. */
:root {
  --paars:   #7c5cff;
  --blauw:   #2f9bff;
  --oranje:  #ff9f43;
  --groen:   #29c46b;
  --rood:    #ff6b6b;
  --geel:    #ffd34d;
  --turkoois:#16b8a6;
  --inkt:    #2c2340;
  --zacht:   #6b6280;
  --papier:  #fff8ee;
  --rand:    #e9e0d4;
  --kaart:   rgba(255, 255, 255, 0.85);
}

/* Geen webfont: het publiek van een iOS-app zit op Apple-toestellen, en daar
   geeft ui-rounded precies het lettertype dat de app zelf gebruikt. Scheelt
   meteen elk verzoek naar een externe server — wat nogal het punt is van een
   app die reclameert met "geen tracking". */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--inkt);
  background: var(--papier);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Dezelfde twee zachte kleurvlekken als OefenAchtergrond in de app. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25vh -25vw;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
/* Maten in procenten van het vlak zelf, niet in rem: anders bedekt een vlek
   op een telefoon het hele scherm en op een breed scherm een hoekje. */
body::before {
  background: radial-gradient(58% 42% at 26% 20%,
              rgba(255, 228, 205, 0.88), transparent 70%);
}
body::after {
  background: radial-gradient(54% 40% at 76% 30%,
              rgba(228, 221, 255, 0.85), transparent 70%);
}

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

a { color: var(--paars); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--inkt); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .6rem; }
h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 800; }
p  { margin: 0 0 1rem; }

section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
/* De balk bovenaan plakt, dus een sprong naar een anker moet eronder
   landen in plaats van erachter. */
section[id] { scroll-margin-top: 4.5rem; }
.lood { font-size: 1.12rem; color: var(--zacht); max-width: 42rem; }

/* ---- Kop ---- */
.balk {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(160%) blur(12px);
  background: rgba(255, 248, 238, 0.78);
  border-bottom: 1px solid var(--rand);
}
.balk .wrap { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; }
.balk img { width: 34px; height: 34px; border-radius: 9px; }
.balk strong { font-size: 1.1rem; font-weight: 800; }
.balk nav { margin-left: auto; display: flex; gap: 1.2rem; font-size: .95rem; font-weight: 700; }
.balk nav a { text-decoration: none; color: var(--zacht); }
.balk nav a:hover { color: var(--inkt); }
@media (max-width: 560px) { .balk nav a.verberg-klein { display: none; } }

/* ---- Hero ---- */
.hero { padding-top: clamp(2.5rem, 7vw, 4.5rem); text-align: center; }
.hero img.icoon {
  width: clamp(112px, 22vw, 156px); height: auto;
  border-radius: 24%; box-shadow: 0 18px 44px rgba(44, 35, 64, 0.18);
}
.hero h1 { margin-top: 1.4rem; }
.hero .slogan {
  font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 800;
  margin: .4rem 0 .3rem;
}
.hero .onder { color: var(--zacht); font-size: 1.1rem; }

.speld {
  display: inline-block; margin-top: 1.6rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  background: var(--kaart); border: 2px solid var(--rand);
  font-weight: 800; font-size: .95rem; color: var(--zacht);
}

/* ---- Blokken ---- */
.raster {
  display: grid; gap: 1rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.blok {
  padding: 1.4rem 1.3rem; border-radius: 22px; color: #fff;
  box-shadow: 0 8px 0 rgba(44, 35, 64, 0.12);
}
.blok .emoji { font-size: 2rem; display: block; margin-bottom: .5rem; }
.blok h3 { color: #fff; margin-bottom: .25rem; }
.blok p { margin: 0; font-size: .97rem; opacity: .95; }
.b-paars { background: var(--paars); }
.b-blauw { background: var(--blauw); }
.b-oranje{ background: var(--oranje); }
.b-groen { background: var(--groen); }
.b-rood  { background: var(--rood); }
.b-turkoois { background: var(--turkoois); }

/* ---- Schermen ---- */
/* Een schuifstrook zonder scrollbalk, met de bediening ernaast.
   Drie eerdere pogingen strandden op hetzelfde: de affordance hing aan de
   scrollbalk, en op macOS verdwijnt die tot je hem gebruikt. Nu hangt ze aan
   drie onafhankelijke signalen — een kaart die onder de vervaging wordt
   afgesneden, een stippenrij, en pijlen naast de kop. */
.schermen {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.8rem);
  margin-top: 1.6rem;
  padding-block: .4rem 1rem;
  padding-inline: var(--strookrand, .2rem);
  scroll-padding-inline-start: var(--strookrand, .2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* proximity en niet mandatory: tussen 860 en ~1120px is de sluitpadding maar
     een paar tientallen pixels, en dan kan de laatste kaart de start-uitlijning
     niet halen. Naar een element navigeren mikt sowieso op een snap-punt. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Vervaging aan de randen: bij 0px is de stop hard, dus één declaratie dekt
     zowel de aan- als de uit-stand. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--strookrand, .2rem),
              #000 calc(100% - var(--strookrand, .2rem)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--strookrand, .2rem),
              #000 calc(100% - var(--strookrand, .2rem)), transparent 100%);
}
.schermen::-webkit-scrollbar { display: none; }
/* Safari maakt een scrollcontainer niet vanzelf focusbaar. Zonder dit is de
   strook met een toetsenbord onbereikbaar zodra de pijlen verborgen zijn. */
.schermen:focus-visible { outline: 3px solid var(--paars); outline-offset: 4px; }

.schermenbak { position: relative; }

/* Kop met de pijlen ernaast in plaats van eroverheen. Scheelt alle absolute
   positionering en negatieve marges, en ze dekken nooit een scherm af. */
.strookkop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.strookknoppen { display: flex; gap: .6rem; flex: 0 0 auto; }
.scrolknop { display: none; }

body.heeft-strookbediening .scrolknop {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%; padding: 0;
  background: var(--paars); color: #fff;
  box-shadow: 0 5px 14px rgba(44, 35, 64, 0.24);
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.scrolknop:hover { transform: scale(1.07); }
.scrolknop:active { transform: scale(0.95); }
.scrolknop:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
/* Aan het einde gedimd in plaats van weggehaald: anders springt de andere knop. */
.scrolknop:disabled { opacity: .25; cursor: default; transform: none; }

/* Het pijltje is met de hand getekend uit twee randen. Een icoonbibliotheek
   zou het enige externe verzoek van deze site worden. */
.scrolknop span {
  width: 11px; height: 11px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 2px;
}
.scrolknop--volgende span { transform: translateX(-2px) rotate(-45deg); }
.scrolknop--vorige span { transform: translateX(2px) rotate(135deg); }

/* De stippenrij vervangt de scrollbalk. Meerdere stippen branden tegelijk: dat
   toont in één blik hoeveel van het geheel je ziet. */
.strookstippen {
  display: flex; justify-content: center; gap: .5rem;
  margin-top: .9rem;
}
.strookstip {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(44, 35, 64, 0.18);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.strookstip.in-beeld { background: var(--paars); transform: scale(1.25); }
.strookstip:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

.toestel {
  flex: 0 0 auto; margin: 0;
  width: 72%;
  scroll-snap-align: start;
}
@media (min-width: 700px)  { .toestel { width: 38%; } }
@media (min-width: 1100px) { .toestel { width: 26%; } }
@media (min-width: 1700px) { .toestel { width: 21%; } }

/* Vanaf 1240px loopt de strook door tot de vensterranden terwijl de tekst in
   de kolom blijft. De kantlijn zet de eerste kaart exact onder de kop.
   overflow-x: clip en niet hidden — de balk bovenaan is echt sticky en zou
   daardoor breken. */
@media (min-width: 1240px) {
  body { overflow-x: clip; }
  .schermenbak { margin-inline: calc(50% - 50vw); }
  .schermen { --strookrand: calc(50vw - min(540px, 50vw - 1.25rem)); }
}

.toestel img {
  width: 100%; height: auto; display: block;
  border-radius: 26px;
  border: 7px solid var(--inkt);
  box-shadow: 0 14px 34px rgba(44, 35, 64, 0.2);
  background: var(--papier);
}
.toestel figcaption {
  margin-top: .7rem; text-align: center;
  font-size: .9rem; font-weight: 700; color: var(--zacht);
}

/* ---- Kaarten ---- */
.kaarten {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.kaart {
  background: var(--kaart); border: 2px solid var(--rand);
  border-radius: 20px; padding: 1.3rem;
}
.kaart h3 { margin-bottom: .3rem; }
.kaart p { margin: 0; color: var(--zacht); font-size: .97rem; }
.kaart .emoji { font-size: 1.7rem; display: block; margin-bottom: .5rem; }

/* ---- Prijstabel ---- */
.prijs {
  /* Dezelfde kolombreedte als .lood eromheen. Over de volle 1080px uitgerekt
     liep de rechterkant van de tabel meters voorbij het einde van de tekst, en
     dan lijkt er niets meer uitgelijnd. */
  max-width: 42rem;
  margin: 2rem 0 1.6rem; background: var(--kaart);
  border: 2px solid var(--rand); border-radius: 22px; overflow: hidden;
}
.prijs table { width: 100%; border-collapse: collapse; }
.prijs th, .prijs td {
  padding: .9rem 1.1rem; text-align: left;
  border-bottom: 1px solid var(--rand); font-size: .98rem;
}
.prijs tbody th { width: 45%; }
.prijs thead th:not(:first-child), .prijs tbody td { width: 27.5%; }
.prijs th { font-weight: 800; }
.prijs thead th { background: rgba(124, 92, 255, 0.08); }
.prijs tr:last-child td, .prijs tr:last-child th { border-bottom: 0; }
.prijs td { color: var(--zacht); }
/* Specifieker dan `.prijs td`, anders wint het grijs daarvan. */
.prijs .ja { color: var(--groen); font-weight: 800; }

@media (max-width: 560px) {
  .prijs th, .prijs td { padding: .7rem .6rem; font-size: .88rem; }
  .prijs thead th:first-child { width: 0; }
}

/* ---- Voet ---- */
footer {
  border-top: 1px solid var(--rand); padding: 2.5rem 0 3rem;
  color: var(--zacht); font-size: .93rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; }
footer nav { display: flex; gap: 1.2rem; margin-left: auto; font-weight: 700; }
footer a { color: var(--zacht); }

/* ---- Tekstpagina's ---- */
.tekst { max-width: 46rem; }
.tekst h2 { margin-top: 2.4rem; }
.tekst ul { padding-left: 1.2rem; }
.tekst li { margin-bottom: .45rem; }
.terug { display: inline-block; margin-bottom: 1.5rem; font-weight: 700; }

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

/* ---- Beweging ----------------------------------------------------------
   Alles hieronder is puur CSS. Scroll-gestuurde animaties hoeven sinds
   `animation-timeline` geen JavaScript meer, en dat komt hier goed uit: de
   Content-Security-Policy van deze site staat geen scripts toe, en dat is
   precies de belofte die de app maakt. Een browser die het niet kent, krijgt
   gewoon de stilstaande versie — er gaat niets stuk.

   Elke regel zit achter `prefers-reduced-motion`. Wie beweging heeft
   uitgezet, heeft daar een reden voor. */

/* De kleurvlekken schuiven traag uit elkaar terwijl je naar beneden gaat.
   Geen parallax-truc met vaste snelheden: de voortgang van de pagina ís de
   tijdlijn, dus het loopt exact mee met de scrollbalk, ook bij een sprong
   naar een anker. */
@keyframes vlek-warm {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, 26vh, 0) scale(1.22); }
}
@keyframes vlek-koel {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-14vw, 38vh, 0) scale(1.18); }
}

/* Een dun streepje onder de balk dat meegroeit met hoever je bent. Het
   verloop gebruikt drie kleuren uit de app, dus het hoort er visueel bij
   zonder dat er een nieuw element bij komt. */
@keyframes voortgang {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Blokken en kaarten komen omhoog wanneer ze in beeld schuiven. Kort en
   klein gehouden: het mag opvallen dat het beweegt, niet dat je erop wacht. */
@keyframes opduiken {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Het icoon ademt. Eén detail dat zegt dat dit een app voor kinderen is. */
@keyframes zweven {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero img.icoon { animation: zweven 6s ease-in-out infinite; }

  @supports (animation-timeline: scroll()) {
    body::before {
      animation: vlek-warm linear both;
      animation-timeline: scroll(root block);
    }
    body::after {
      animation: vlek-koel linear both;
      animation-timeline: scroll(root block);
    }

    .balk::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 3px;
      background: linear-gradient(90deg,
                  var(--paars), var(--turkoois), var(--oranje));
      transform-origin: left center;
      animation: voortgang linear both;
      animation-timeline: scroll(root block);
    }
  }

  @supports (animation-timeline: view()) {
    /* Bewust niet op .toestel: die staan in een strook die zelf horizontaal
       scrolt, en `view()` meet dan tegen die strook in plaats van tegen de
       pagina — dan blijven ze onzichtbaar hangen. */
    .blok, .kaart, .prijs {
      animation: opduiken linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
  }
}

/* Dezelfde harde schaduw als de knoppen in de app, dus indrukken voelt
   logisch. Alleen op toestellen die echt kunnen zweven — op een touchscreen
   blijft een hover-stand anders plakken na een tik. */
@media (hover: hover) {
  .blok, .toestel img {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .blok:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 0 rgba(44, 35, 64, 0.14);
  }
  .toestel img:hover {
    transform: translateY(-6px) rotate(-0.6deg);
    box-shadow: 0 20px 40px rgba(44, 35, 64, 0.26);
  }
}


/* ---- Tablet naast telefoon ---- */
.duo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: 2.4rem;
}
.duo img {
  display: block; height: auto; background: var(--papier);
  border: 7px solid var(--inkt);
  box-shadow: 0 16px 38px rgba(44, 35, 64, 0.22);
}
.duo-tablet {
  flex: 1 1 auto; min-width: 0; max-width: 780px;
  width: 100%;
  border-radius: 22px;
}
.duo-telefoon {
  flex: 0 0 auto; width: clamp(110px, 15vw, 172px);
  border-radius: 24px;
}
/* Op een telefoon naast elkaar zetten maakt allebei onleesbaar klein: daar
   staat de tablet boven en de telefoon eronder, allebei op ware grootte. */
@media (max-width: 620px) {
  .duo { flex-direction: column; align-items: center; gap: 1.4rem; }
  .duo-tablet { max-width: none; }
  .duo-telefoon { width: 62%; max-width: 230px; }
}