/*
  ActivityMatch landing concept
  Direction: "Friday-night decision playground"
  Preserve: Baloo 2 + Nunito, ink outlines, flat sticker shadows, lime/coral/purple.
  Risk: poster-scale type and full-bleed chapters replace the uniform card grid.
*/

:root {
  --page-gutter: clamp(20px, 4vw, 72px);
  --content: 1440px;
  --section-space: clamp(88px, 11vw, 176px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  background: var(--lilac);
  font-family: var(--font-body);
  font-size: 16px;
}

body::before { display: none; }

/* Hier stond alleen opacity:1. Dat maakte het element zichtbaar voordat de
   pop-animatie uit style.css losging, en die begint op opacity 0: je zag het
   blok dus staan, waarna het terugsprong om alsnog in te veren. Vandaar de
   schokkerige entree. Nu blijft het element wachten tot rv-in valt en schuift
   het in een keer rustig omhoog.

   Blanco pagina blijft uitgesloten: style.css verbergt uitsluitend onder .js,
   en main.js zet rv-in meteen op alles zodra IntersectionObserver ontbreekt of
   de bezoeker prefers-reduced-motion aan heeft staan.

   Bewust `translate` en niet `transform`: dat is een losse eigenschap, dus
   stickers die via transform gedraaid staan houden hun rotatie. Met de
   pop-animatie raakten ze die na afloop kwijt, want die vult af op een
   identiteitsmatrix. */
.js body [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .55s ease, translate .55s cubic-bezier(.22, .68, .3, 1);
  transition-delay: var(--d, 0s);
}
.js body [data-reveal].rv-in {
  opacity: 1;
  translate: none;
  animation: none;
}

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.035em;
}

p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  transform: translateY(-160%);
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  padding: 10px 18px;
  font-weight: 900;
}

.skip-link:focus { transform: translateY(0); }

.nav {
  position: fixed;
  inset: 18px var(--page-gutter) auto;
  width: auto;
  min-height: 62px;
  padding: 8px 9px 8px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 0 var(--ink);
  backdrop-filter: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.nav.is-condensed {
  transform: translateY(-6px);
  box-shadow: 0 3px 0 var(--ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--ink);
  font-size: 17px;
}

.wordmark:hover { transform: rotate(-1deg); }

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--lime);
  box-shadow: 3px 3px 0 var(--lime);
  transform: rotate(-4deg);
  font-size: 23px;
  line-height: 1;
}

.wordmark-name { text-transform: uppercase; }

.nav-links { gap: clamp(18px, 2.5vw, 38px); font-size: 14px; }
.nav-links a { border: 0; position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--lime);
  transition: right .2s var(--ease-out);
}
.nav-links a:hover::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 7px; }
.nav .btn { min-height: 44px; padding: 8px 16px; font-size: 13px; box-shadow: none; border-width: 2.5px; }
.nav .btn-lime { box-shadow: 0 3px 0 var(--ink); }
.nav .btn:hover { transform: translateY(-1px); }
.js .nav .lang-toggle { min-width: 44px; min-height: 44px; box-shadow: none; border-width: 2.5px; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
  min-height: 100svh;
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(126px, 14vh, 172px) var(--page-gutter) clamp(80px, 9vh, 120px);
}

.hero-copy { position: relative; z-index: 3; }

/* Entrance als pure CSS-animatie: speelt altijd af en eindigt altijd zichtbaar,
   ook zonder scroll of IntersectionObserver. Reveals die op een class wachten
   hebben hier al twee keer een blanco sectie opgeleverd; dit patroon kan dat
   niet. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-kicker, .hero h1, .hero-lede, .hero-actions, .hero-proof {
  animation: rise-in .55s var(--ease-out) both;
}
.hero h1 { animation-delay: .07s; }
.hero-lede { animation-delay: .14s; }
.hero-actions { animation-delay: .21s; }
.hero-proof { animation-delay: .28s; }
.hero-stage { animation: rise-in .65s var(--ease-out) .12s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-kicker, .hero h1, .hero-lede, .hero-actions, .hero-proof, .hero-stage { animation: none; }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 3px 0 var(--ink);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .015em;
}

.hero h1 {
  max-width: 760px;
  margin: 26px 0 24px;
  font-size: clamp(56px, 7.25vw, 96px);
  line-height: .91;
  letter-spacing: -.04em;
}

.hero .hl::after { bottom: .13em; height: .23em; }

.hero-lede {
  max-width: 56ch;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
}

.hero-actions { align-items: center; margin-top: 30px; }
.btn-xl { min-height: 58px; padding: 14px 26px; font-size: 17px; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.text-link::after { content: ' ↘'; margin-left: 5px; }

/* Op desktop staat de demo naast de tekst: een link die "naar beneden" scrolt
   naar iets op dezelfde hoogte is een dode link. Daar wordt het een stille
   aanwijzing met pijl opzij; op smalle schermen (stage eronder) blijft het een
   echte ankerlink. */
.demo-aside { text-decoration: none; cursor: default; }
.demo-aside::after { content: ' →'; }
.demo-below { display: none; }
@media (max-width: 920px) {
  .demo-aside { display: none; }
  .demo-below { display: inline-flex; }
  .demo-below::after { content: ' ↓'; }
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  margin-top: 28px;
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 800;
}

.hero-proof b { color: var(--ink); font-family: var(--font-display); font-size: 17px; }
.proof-location { display: inline-flex; align-items: center; gap: 8px; }
.proof-location i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); }

/* Het toneel is de telefoon. De reuzenwoorden SWIPE/MATCH en de lime cirkel
   erachter zijn weg: ze werden door de telefoon doormidden gesneden en vulden
   vooral de ruimte die de telefoon zelf hoort te vullen. De telefoon is
   daarvoor in de plaats groter, zodat het vlak vanzelf gevuld is. */
/* Geen gekleurde doos en geen geometrie om de telefoon: het toestel is groot
   genoeg om de kolom zelf te dragen, met alleen losse sticker-chips, de
   stempels en wat fonkels eromheen. Clean als basis, speels in de details. */
.hero-stage {
  position: relative;
  display: grid;
  min-height: 640px;
  place-items: center;
  isolation: isolate;
}

.stage-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Buitenste element positioneert (transform), binnenste zweeft (animatie):
   anders zou de float-animatie de plaatsing overschrijven. */
.float-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r));
}
.float-chip > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 26px;
  animation: chip-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes chip-float {
  50% { transform: translateY(-9px); }
}
.chip-a { --dx: -268px; --dy: -158px; --r: -9deg; --dur: 5.4s; }
.chip-b { --dx: 272px; --dy: -122px; --r: 10deg; --dur: 6.4s; --delay: .8s; }
.chip-c { --dx: -292px; --dy: 86px; --r: -5deg; --dur: 6s; --delay: 1.6s; }
.chip-d { --dx: 278px; --dy: 158px; --r: 7deg; --dur: 5.8s; --delay: .4s; }
.chip-e { --dx: -266px; --dy: 268px; --r: 6deg; --dur: 6.8s; --delay: 2.2s; }

.stage-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(var(--dx), var(--dy));
  font-size: 21px;
  color: var(--coral);
  animation: spark-twinkle 3.2s ease-in-out var(--delay, 0s) infinite;
}
.stage-spark-purple { color: var(--purple); }
.stage-spark-1 { --dx: -322px; --dy: -278px; }
.stage-spark-2 { --dx: 306px; --dy: -246px; --delay: 1.1s; }
.stage-spark-3 { --dx: -334px; --dy: 226px; --delay: 2.1s; }
.stage-spark-4 { --dx: 286px; --dy: 34px; --delay: .6s; }
@keyframes spark-twinkle {
  0%, 100% { opacity: .3; scale: .8; }
  50% { opacity: 1; scale: 1; }
}

/* ---------- iPhone-anatomie (alleen deze pagina) ----------
   Deze regels staan bewust in concept.css en NIET in de gedeelde style.css:
   `website/index.html` gebruikt dezelfde .phone-component zonder .phone-screen,
   en zou met een donkere behuizing + 9px padding stukgaan. concept.css laadt
   ná style.css, dus de cascade regelt de override voor deze pagina alleen. */
.phone {
  border-radius: 52px;
  background: var(--ink);
  padding: 9px;
}
/* Zijknoppen: rechts aan/uit, links actieknop + twee volumeknoppen (via de
   box-shadow-truc, zodat het één element blijft). */
.phone::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 148px;
  width: 5px;
  height: 62px;
  border-radius: 3px;
  background: var(--ink);
}
.phone::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 108px;
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: var(--ink);
  box-shadow: 0 34px 0 0 var(--ink), 0 76px 0 0 var(--ink);
}
.phone-screen {
  position: relative;
  background: var(--white);
  border-radius: 42px;
  padding: 52px 12px 10px;
  overflow: hidden;
}
.phone-island {
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 104px;
  height: 29px;
  padding-right: 8px;
  border-radius: 999px;
  background: var(--ink);
}
/* Cameralens: iets lichter dan de island, met een glimpje linksboven. */
.phone-island::after {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #37325A;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.22);
}
.phone-status {
  position: absolute;
  left: 24px;
  right: 22px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
}
.phone-status svg { width: 60px; height: 14px; }
.phone-home {
  display: block;
  width: 94px;
  height: 5px;
  margin: 12px auto 2px;
  border-radius: 999px;
  background: var(--ink);
  opacity: .18;
}

/* Idle-leven op de ICONEN, niet op de knoppen: hover/active zetten transform
   op de knop zelf, en daar zou een infinite animatie mee vechten. */
.demo-btn-like svg { animation: heart-beat 2.8s ease-in-out infinite; }
.demo-btn-nope svg { animation: nope-shake 6s ease-in-out 1.2s infinite; }
@keyframes heart-beat {
  0%, 28%, 100% { transform: scale(1); }
  8% { transform: scale(1.22); }
  16% { transform: scale(1); }
  22% { transform: scale(1.14); }
}
@keyframes nope-shake {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-14deg); }
  92% { transform: rotate(11deg); }
  96% { transform: rotate(-6deg); }
}

.orbit-note {
  position: absolute;
  z-index: 4;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 4px 0 var(--ink);
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 800;
}
/* Vrij zwevend naast het toestel, met een langzame dobber: de `translate`-
   property staat los van de rotate in `transform`, dus de animatie vecht
   niet met de scheefstand. */
.orbit-note { animation: note-float 5s ease-in-out infinite; }
.orbit-note-a { left: calc(50% - 262px); top: 30%; transform: rotate(-12deg); color: var(--coral); }
.orbit-note-b { right: calc(50% - 262px); bottom: 28%; transform: rotate(10deg); color: #2f8d4b; animation-duration: 5.8s; animation-delay: .7s; }
@keyframes note-float {
  50% { translate: 0 -8px; }
}

/* position: relative is hier het hele punt. Het pil-label stond absoluut
   gepositioneerd tegen .hero-stage (top: 0), terwijl de padding-top de telefoon
   omlaag duwde, de telefoon kwam daardoor 30px onder het midden uit. Nu hangt
   het label aan .hero-demo zelf, en wordt label + telefoon samen gecentreerd. */
.hero-demo { position: relative; z-index: 2; margin: 0; padding-top: 30px; }
.demo-meta {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  width: max-content;
  transform: translateX(-50%);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 3px 0 var(--ink);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Groter dan de basiscomponent (340px): dit is het onderwerp van de sectie,
   niet een illustratie ernaast. De kaarthoogte groeit mee, anders wordt het
   een breed toestel met een postzegel erin. */
/* Groter dan eerst (408px): zonder decor-vlak draagt het toestel de
   rechterkolom alleen, dus mag het de ruimte ook echt innemen. */
.hero-stage .phone { width: min(452px, 80vw); border-radius: 60px; box-shadow: 0 7px 0 var(--ink); }
.hero-stage .phone-screen { border-radius: 50px; }
.hero-stage .demo-stage { height: 456px; }
/* Mist een vermelding zijn foto, dan valt de kaart terug op de emoji. Op een
   groter toestel moet die meeschalen, anders staat er een postzegel in een
   leeg vlak. */
.hero-stage .demo-card-art { font-size: 104px; }
.hero-stage .phone-glare { background: none; }
/* Het hart is de like-knop; ingevuld leest die meteen als "ja" in plaats van
   als nog een omtrek-icoontje. Lime i.p.v. coral, zodat de kleur meteen naar
   de primaire CTA-kleur verwijst. De omtrek blijft ink, en het kruis blijft
   een lijn-icoon, vorm houdt de twee knoppen uit elkaar, niet kleur. */
.demo-btn-like svg { fill: var(--lime); }

.scroll-cue {
  position: absolute;
  left: var(--page-gutter);
  bottom: 30px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.scroll-cue::before { content: '↓'; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); }

.marquee { padding: 14px 0; }
.marquee-track { font-size: 18px; gap: 34px; animation-duration: 34s; }

.chaos {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  min-height: 84svh;
  padding: var(--section-space) var(--page-gutter);
  background: var(--ink);
  color: var(--white);
}

/* Kolom breed genoeg voor 2-3 woorden per regel: poster, geen woordtoren. */
.chaos-heading { justify-self: end; max-width: 700px; }
.label-coral { background: var(--coral); color: var(--ink); }
.chaos h2 { margin-top: 24px; font-size: clamp(44px, 5.5vw, 78px); line-height: .98; }
.chaos h2 em { color: var(--lime); font-style: normal; }

.chat-stack { position: relative; min-height: 520px; max-width: 650px; }
.chat {
  position: absolute;
  width: min(90%, 520px);
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  box-shadow: 0 7px 0 var(--white);
  padding: clamp(22px, 3vw, 36px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 35px);
  font-weight: 800;
  line-height: 1.1;
  transition: transform .25s var(--ease-out);
}
/* Staartje: zonder tail lezen de bubbels als knoppen in plaats van chat.
   Zelfde vlak als de bubbel, ink-rand aan twee zijden, 45° gedraaid. */
.chat::after {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 22px;
  height: 22px;
  border: 3px solid var(--ink);
  border-top: 0;
  border-left: 0;
  background: inherit;
  transform: rotate(45deg);
}
.chat-a { top: 0; left: 0; background: var(--lime); transform: rotate(-3deg); }
.chat-a::after { left: 34px; }
.chat-b { top: 170px; right: 0; background: var(--coral); transform: rotate(2deg); }
.chat-b::after { right: 34px; }
.chat-c { bottom: 0; left: 8%; background: var(--purple); color: var(--white); transform: rotate(-1deg); }
.chat-c::after { left: 46px; }
.chat:hover { transform: rotate(0deg) translateY(-4px); }

.process { padding: var(--section-space) var(--page-gutter); }
.section-head { max-width: var(--content); margin: 0 auto; }
.section-head h2 { margin-top: 24px; font-size: clamp(46px, 6vw, 86px); line-height: .95; }
.process-head { display: grid; grid-template-columns: .38fr .62fr; align-items: start; gap: 30px; }
.process-head .label-sticker { justify-self: start; }

.process-rail { max-width: var(--content); margin: clamp(64px, 8vw, 116px) auto 0; border-top: 3px solid var(--ink); }
.process-step {
  display: grid;
  grid-template-columns: 130px minmax(260px, 1fr) minmax(280px, .75fr);
  align-items: center;
  min-height: 260px;
  border-bottom: 3px solid var(--ink);
  transition: background .2s ease;
}
.process-step:hover { background: rgba(255, 255, 255, .55); }
.process-number { font-family: var(--font-display); font-size: 96px; font-weight: 800; line-height: 1; }
.step-one .process-number { color: #7fa000; }
.step-two .process-number { color: var(--coral); }
.step-three .process-number { color: var(--purple-text); }
.process-copy { max-width: 620px; padding: 38px 50px 38px 0; }
.process-copy h3 { font-size: clamp(28px, 3.2vw, 48px); }
.process-copy p { max-width: 56ch; margin-top: 12px; font-size: 17px; }
.process-art { justify-self: center; }

.room-code { display: flex; gap: 8px; padding: 20px; border: 3px solid var(--ink); border-radius: 14px; background: var(--white); box-shadow: 0 6px 0 var(--ink); transform: rotate(2deg); }
.room-code span { display: grid; width: 48px; height: 58px; place-items: center; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--tint-lime); font-family: var(--font-display); font-size: 29px; font-weight: 800; }

/* Drie echte kaarten uit het dek in plaats van lege vlakken met een pijl:
   de illustratie laat nu zien waar je doorheen swipet. */
.mini-deck { position: relative; width: 232px; height: 158px; }
.deck-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 15px;
  background: var(--white);
  box-shadow: 0 6px 0 var(--ink);
}
.deck-card i {
  display: grid;
  flex: 1;
  place-items: center;
  border-bottom: 3px solid var(--ink);
  background: var(--tint-lime);
  font-size: 46px;
  font-style: normal;
  line-height: 1;
}
.deck-card b {
  padding: 8px 13px 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.deck-card:nth-child(1) { transform: rotate(-10deg) translate(-33px, 6px); }
.deck-card:nth-child(1) i { background: var(--tint-purple); }
.deck-card:nth-child(2) { transform: rotate(9deg) translate(31px, 4px); }
.deck-card:nth-child(2) i { background: var(--tint-coral); }

.process .wheel-wrap { width: 150px; height: 150px; }
.process .wheel { width: 140px; height: 140px; border-width: 3px; }

.catalog {
  display: grid;
  grid-template-columns: minmax(400px, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  min-height: 100svh;
  padding: var(--section-space) var(--page-gutter);
  background: var(--lime);
  border-block: 3px solid var(--ink);
  overflow: hidden;
}
.catalog-copy { align-self: center; max-width: 620px; }
.catalog .label-lime { background: var(--ink); color: var(--lime); }
.catalog h2 { margin-top: 24px; font-size: clamp(48px, 5.4vw, 78px); line-height: .94; }
.catalog-copy p { max-width: 50ch; margin: 26px 0 32px; font-size: 18px; line-height: 1.65; }

/* Drie punten onder de belofte. Geen kaartjes met randen: de sectie heeft al
   een gekleurd vlak en een kaartenstapel ernaast, nog een set omlijnde dozen
   maakt het rommelig.
   Ook bewust géén gekleurde streep langs één zijde: dat is precies het patroon
   dat impeccable als 'side-tab' markeert (en het voegde er meetbaar één toe).
   In plaats daarvan het lime bolletje met ink-rand dat de hero al gebruikt. */
.owner-checks {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  max-width: 52ch;
}
.owner-checks li {
  position: relative;
  padding-left: 30px;
}
.owner-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
}
.owner-checks b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -.01em;
}
.owner-checks span {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
}

.catalog-stack { position: relative; min-height: 690px; align-self: center; }
.catalog-loading { position: absolute; inset: 50% auto auto 50%; width: max-content; max-width: 90%; transform: translate(-50%, -50%); font-weight: 900; }
.catalog-card {
  position: absolute;
  width: min(440px, 70%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 0 var(--ink);
  transition: transform .35s var(--ease-out);
}
.catalog-card:nth-child(1) { z-index: 3; left: 2%; top: 18%; transform: rotate(-7deg); }
.catalog-card:nth-child(2) { z-index: 2; right: 4%; top: 3%; transform: rotate(7deg); }
.catalog-card:nth-child(3) { z-index: 1; right: 7%; bottom: 0; transform: rotate(-2deg); }
.catalog-card:hover { z-index: 5; transform: rotate(0) translateY(-12px); }
.catalog-card img { display: block; width: 100%; height: 76%; object-fit: cover; border-bottom: 3px solid var(--ink); background: var(--tint-purple); }
.catalog-card:nth-child(1) img { object-position: 22% center; }
.catalog-card:nth-child(2) img { object-position: 78% center; }
.catalog-card:nth-child(3) img { object-position: 52% center; }
.catalog-card:only-child {
  left: 50%;
  top: 50%;
  width: min(680px, 94%);
  aspect-ratio: 1200 / 630;
  transform: translate(-50%, -50%) rotate(3deg);
}
.catalog-card:only-child:hover { transform: translate(-50%, -50%) rotate(0) translateY(-10px); }
.catalog-card:only-child img { height: 100%; object-position: center; }
.catalog-card:only-child .catalog-card-copy {
  position: absolute;
  right: 18px;
  bottom: 18px;
  max-width: 58%;
  border: 2.5px solid var(--ink);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--ink);
}
.catalog-card-copy { padding: 17px 20px; background: var(--white); }
.catalog-card-copy b { display: block; font-family: var(--font-display); font-size: 23px; line-height: 1.05; }
.catalog-card-copy span { display: block; margin-top: 5px; color: var(--muted-text); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

/* ---- modikeuze: één balk ----
   Was vier volle rijen van 150-220px hoog; dat gaf een menu het gewicht van
   vier hoofdstukken. Nu één omrande balk met vier vakken naast elkaar, samen
   ~150px. De eyebrow "Drie modi" is weg: er stonden er vier, dus hij loog, en
   de kop zegt het al. */
.modes-section { padding: clamp(64px, 7vw, 104px) var(--page-gutter); background: var(--white); }
.modes-title {
  max-width: var(--content);
  margin: 0 auto clamp(26px, 3vw, 40px);
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: .98;
}
/* Vier losse stickers, geen gesegmenteerde balk. Alles in één omrand vak met
   één gedeelde schaduw gaf de items geen eigen aanwezigheid meer: vier
   identieke cellen, nul scheefstand, dat leest als een formulierveld en niet
   als het stickersysteem van de rest van de site. Even compact, wel weer
   handgeplakt. */
.mode-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: var(--content);
  margin: 0 auto;
  /* Lucht voor de schaduwen en de hoeken die door de scheefstand uitsteken. */
  padding: 8px 2px 16px;
}
.mode-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 112px;
  padding: 18px 16px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  box-shadow: 0 6px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
/* Ongelijke hoeken: geplakt met de hand, niet uitgelijnd door een raster. */
.mode-tile:nth-child(1) { transform: rotate(-2deg); }
.mode-tile:nth-child(2) { transform: rotate(1.4deg); }
.mode-tile:nth-child(3) { transform: rotate(-1.2deg); }
.mode-tile:nth-child(4) { transform: rotate(2deg); }
.mode-activity { background: var(--tint-lime); }
.mode-food { background: var(--tint-coral); }
.mode-drinks { background: var(--tint-purple); }

/* Twee tonen per tegel: licht badge-icoon dat benoemt, donkere pijl die
   handelt. Zonder dat verschil waren het vier grijswitte cirkels op een rij. */
.mode-icon {
  display: grid;
  flex: none;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-4deg);
  transition: transform .22s var(--ease-out);
}
.mode-icon svg { width: 55%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mode-tile b {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.45vw, 23px);
  letter-spacing: -.02em;
  line-height: 1.05;
}
/* Ink met lime glyph, hetzelfde pijltje als in de app zelf (solo-strip,
   BottomNav). Lime vlak zou een derde primaire CTA suggereren. */
.mode-go {
  flex: none;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  transition: transform .22s var(--ease-out);
}
/* Sticker wordt rechtgetrokken en komt los van de pagina. */
a.mode-tile:hover,
a.mode-tile:focus-visible { transform: rotate(0deg) translateY(-5px); box-shadow: 0 11px 0 var(--ink); }
a.mode-tile:hover .mode-icon,
a.mode-tile:focus-visible .mode-icon { transform: rotate(7deg) scale(1.06); }
a.mode-tile:hover .mode-go,
a.mode-tile:focus-visible .mode-go { transform: translate(2px, -2px) rotate(10deg); }

/* Evenementen is geen link: gestippelde rand, doffe schaduw en een label in
   plaats van een pijl. style.css geeft .mode-soon bovendien een eigen kader
   mét margin-top; die moet hier expliciet terug. */
.mode-soon {
  margin: 0;
  border: 3px dashed var(--muted-border);
  border-radius: 15px;
  background: var(--lilac);
  box-shadow: 0 6px 0 var(--muted-border);
  justify-content: flex-start;
  text-align: left;
}
.mode-soon .mode-icon { border-color: var(--muted-border); box-shadow: 0 3px 0 var(--muted-border); color: var(--muted-text); }
.mode-soon b { color: var(--muted-text); }
.soon-pill {
  flex: none;
  border: 2.5px solid var(--muted-border);
  border-radius: 999px;
  background: var(--white);
  padding: 5px 10px;
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

/* ---- waarom-band: twee kolommen ----
   Kop + de drie beloftes links, de uitleg rechts. Daarvoor stonden er drie
   blokken onder elkaar, waarvan het middelste (de stickers) links uitlijnde in
   een container van 1440px, met een lege rechterhelft als gevolg. */
.proof-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(44px, 6vw, 96px);
  /* Vlak loopt door tot de schermrand, inhoud blijft op --content gecentreerd.
     Met max-width + auto zou het ink-vlak meekrimpen. */
  padding: var(--section-space) max(var(--page-gutter), calc((100% - var(--content)) / 2));
  background: var(--ink);
  color: var(--white);
}
/* Op ink verdween de sticker-achtergrond van het label; expliciet lime vlak. */
.proof-band .label-lime { border: 2.5px solid var(--white); background: var(--lime); color: var(--ink); box-shadow: 0 3px 0 var(--white); }
/* Kleiner dan de losse-sectie-versie: de kop deelt de breedte nu met de
   uitlegkolom, dus op 76px viel "Gemaakt voor groepen" uiteen over twee regels. */
.proof-lead h2 { margin-top: 26px; font-size: clamp(38px, 4vw, 58px); line-height: 1; }
/* Marker als vlak ACHTER het woord in plaats van een losse veeg eronder:
   op line-height .92 zakte de standaard-offset onder de baseline uit. */
.proof-lead .hl-purple { position: relative; z-index: 0; }
.proof-lead .hl-purple::after {
  background: var(--purple);
  left: -.1em;
  right: -.1em;
  bottom: .02em;
  height: .78em;
  z-index: -1;
}

/* Drie beloftes als handgeplakte stickers over de rand van de kop, de
   drie-kolommen-cijfertabel was het standaard statistiekje-sjabloon en de
   kale "0" betekende niets. Op een sticker krijgt hij zijn label. */
/* Stickers zijn hier bewijs naast de kop, geen eigen sectie: kleiner, en ze
   overlappen elkaar licht zodat het een opgeplakt trosje wordt. */
.proof-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(30px, 3.5vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.proof-sticker {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 13px 18px 15px;
  box-shadow: 0 5px 0 rgba(255, 255, 255, .9);
  transition: transform .25s var(--ease-out);
}
.proof-sticker strong { font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -.03em; line-height: .92; }
.proof-sticker span { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.ps-lime { background: var(--lime); color: var(--ink); transform: rotate(-2.5deg); }
/* Was wit: dat las als een gat tussen de lime en de coral sticker. Paars maakt
   het drieluik compleet in de merkkleuren. Witte tekst, geen ink: wit haalt op
   #7B5CF0 4,53:1 en ink maar 3,68:1, en het kleine label heeft 4,5:1 nodig.
   Nagerekend, niet op gevoel gekozen. */
.ps-purple { background: var(--purple); color: var(--white); transform: rotate(1.5deg); }
.ps-coral { background: var(--coral); color: var(--ink); transform: rotate(-1deg); }
.proof-sticker:hover { transform: rotate(0deg) translateY(-4px); }

/* Rechterkolom: geen driekolomsraster meer maar een verticale lijst, zodat de
   regels lang genoeg blijven om prettig te lezen. */
.feature-notes { display: grid; gap: 0; padding-top: 8px; }
.feature-notes article { padding: 24px 0; border-top: 3px solid var(--lime); }
.feature-notes article:first-child { padding-top: 0; border-top: 0; }
.feature-notes article:first-child h3 { margin-top: 0; }
.feature-notes h3 { font-size: clamp(21px, 1.7vw, 26px); }
.feature-notes p { max-width: 62ch; margin-top: 8px; color: #d7d3ec; line-height: 1.62; }

.everywhere {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
  min-height: 90svh;
  max-width: none;
  margin: 0;
  padding: var(--section-space) var(--page-gutter);
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  background: var(--coral);
  box-shadow: none;
}
.everywhere-copy { max-width: 700px; }
.everywhere h2 { margin-top: 24px; font-size: clamp(48px, 6vw, 88px); line-height: .96; }
/* Ink in plaats van muted: grijsblauw op coral haalt geen 4.5:1. */
.everywhere-copy > p { max-width: 55ch; margin-top: 26px; color: var(--ink); font-size: 18px; font-weight: 700; }
.everywhere .hl { position: relative; z-index: 0; }
.everywhere .hl::after { background: var(--lime); left: -.08em; right: -.08em; bottom: .04em; height: .62em; z-index: -1; }

/* Het beeld bij "In je browser: nu al. In de stores: binnenkort."
   Een browservenster dat leeft, naast twee storebadges die dat zichtbaar nog
   niet doen. Zonder deze regel valt het venster terug op blokniveau, vult het
   de hele kolom en worden de kaarten (aspect-ratio 1/1) metershoog. Precies
   dat ging een keer mis, vandaar deze opmerking. */
.device-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vw, 30px);
  width: min(100%, 540px);
  margin: 0 auto;
}

.browser-live {
  position: relative;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 10px 0 var(--ink);
  /* GEEN overflow:hidden: dat knipt het overhangende NU LIVE-label af. De bar
     en de body ronden daarom hun eigen buitenhoeken af. */
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  border-radius: 17px 17px 0 0;
  /* 2,5px zoals alle andere binnenranden in deze mock; 3px is voorbehouden aan
     het buitenkader. Scheelt ook een impeccable-melding over een dikke rand op
     een afgeronde kaart. */
  border-bottom: 2.5px solid var(--ink);
  background: var(--white);
}
.browser-bar > i { width: 11px; height: 11px; border-radius: 50%; }
.browser-bar > i:nth-child(1) { background: var(--coral); }
.browser-bar > i:nth-child(2) { background: #F7C948; }
.browser-bar > i:nth-child(3) { background: var(--purple); }
.browser-url {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  margin-left: 8px;
  padding: 7px 15px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-size: 13.5px;
  font-weight: 900;
}
.browser-url em { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); }

.browser-body { display: block; padding: 15px; border-radius: 0 0 17px 17px; background: var(--lilac); }
.browser-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.browser-code {
  padding: 5px 13px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
}
.browser-crew { display: inline-flex; }
.browser-crew i { width: 19px; height: 19px; margin-left: -6px; border: 2.5px solid var(--ink); border-radius: 50%; }
.browser-crew i:nth-child(1) { background: var(--lime); margin-left: 0; }
.browser-crew i:nth-child(2) { background: var(--coral); }
.browser-crew i:nth-child(3) { background: var(--purple); }

.browser-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }

/* Kaarten met dezelfde opbouw als in de app: foto boven, naam en categorie in
   een strook eronder. Losse foto's lieten niet zien dat je door KAARTEN swipet.

   Prefix bw- (browser window) en NIET mini-: die naam bestaat al in
   style.css voor de mini-swiper in stap 2, mét position:absolute en een
   lopende animatie. Mijn kaarten erfden dat en de rij klapte naar 0px
   hoogte terwijl de kaarten stonden te wisselen. */
.bw-card {
  display: flex;
  flex-direction: column;
  border: 2.5px solid var(--ink);
  border-radius: 13px;
  background: var(--white);
  box-shadow: 0 4px 0 var(--ink);
  overflow: hidden;
}
.bw-card .cross-photo {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tint-lime) center / cover no-repeat;
  border-bottom: 2.5px solid var(--ink);
}
.bw-card:nth-child(2) .cross-photo { background-color: var(--tint-coral); }
.bw-card:nth-child(3) .cross-photo { background-color: var(--tint-purple); }
.bw-meta { padding: 7px 9px 8px; }
.bw-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bw-meta i {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-controls { display: flex; justify-content: center; gap: 15px; margin-top: 14px; }
.browser-controls i { width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; }
.bc-nope { background: var(--white); }
.bc-like { background: var(--lime); }

/* Het label hangt over de rand, in dezelfde stickertaal als de rest. */
.browser-now {
  position: absolute;
  top: -15px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  transform: rotate(-3deg);
}
/* Het bolletje ademt van lime naar coral en terug: rustig, niet knipperend. */
@keyframes live-breathe {
  0%, 100% { background: var(--ink); }
  50% { background: var(--coral); }
}
.browser-now i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  animation: live-breathe 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .browser-now i { animation: none; }
}

/* De officiele badges, in de donkere stijl die iedereen herkent. Ze zijn
   bewust GEEN link: de apps bestaan nog niet, dus een klikbare badge zou een
   belofte doen die nergens heen gaat. */
.store-soon { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Gelijke breedte, anders is de App Store-badge twaalf pixels breder dan die
   van Google Play: "Coming soon to the" is nu eenmaal langer dan "Coming soon
   to". Twee badges naast elkaar die net niet even groot zijn lezen als een
   fout. De tekst staat vast in het Engels, zoals bij de echte store-badges,
   dus een vaste minimumbreedte kan hier geen vertaling breken. */
.store-official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  gap: 10px;
  padding: 9px 18px 10px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: #111;
  color: var(--white);
}
.store-official svg { width: 26px; height: 26px; flex: none; }
.store-official small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.store-official strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.faq-section { display: grid; grid-template-columns: .38fr .62fr; gap: 70px; padding: var(--section-space) var(--page-gutter); background: var(--white); }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-heading h2 { margin-top: 24px; font-size: clamp(50px, 6vw, 86px); }
.faq-list { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.faq { border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; box-shadow: none; background: transparent; }
.faq summary { min-height: 92px; padding: 22px 4px; font-size: clamp(19px, 2vw, 27px); }
.faq[open] summary { margin: 0; border: 0; background: transparent; }
.faq p { max-width: 65ch; padding: 0 56px 28px 4px; font-size: 16px; }
.faq-plus { position: relative; width: 38px; height: 38px; flex: none; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--lime); transition: transform .22s var(--ease-out); }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 9px; right: 9px; top: 16px; height: 3px; border-radius: 3px; background: var(--ink); }
.faq-plus::after { transform: rotate(90deg); }
.faq[open] .faq-plus { transform: rotate(45deg); }

.final-cta {
  position: relative;
  display: flex;
  min-height: 80svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--section-space) var(--page-gutter);
  background: var(--purple);
  color: var(--white);
  text-align: center;
}
.final-cta h2 { max-width: 1100px; font-size: clamp(64px, 9vw, 132px); line-height: .9; letter-spacing: -.04em; }
/* Wit type: de marker mag er niet doorheen lopen (leest als doorhaling en
   wit-op-lime is onleesbaar). Dus een dikke onderstreping ónder de baseline. */
.final-cta .hl::after { background: var(--lime); left: -.06em; right: -.06em; bottom: -.08em; height: .14em; }
.final-cta p { margin-top: 30px; color: rgba(255, 255, 255, .95); font-size: 19px; font-weight: 800; }
.final-cta .btn { margin-top: 30px; color: var(--ink); }
.final-cta small { margin-top: 22px; color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 800; }
.final-orbit { position: absolute; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 0 6px 0 var(--ink); font-family: var(--font-display); font-weight: 800; }
/* Beide stickers horen in de onderste strook. De hartballon stond op top:20%
   en dat is precies de band waar de kop ligt: die kop loopt door tot zijn
   max-width van 1100px, dus op elke breedte dekte de cirkel de eerste letter
   af. Onderin is de inhoud smal (knop en regel eronder), daar is wel ruimte. */
.final-orbit-a { left: 6%; bottom: 15%; width: 94px; height: 94px; border-radius: 50%; color: var(--lime); font-size: 42px; transform: rotate(-9deg); }
.final-orbit-b { right: 6%; bottom: 15%; border-radius: 13px; padding: 15px 22px; font-size: 22px; transform: rotate(8deg); }

.footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; min-height: 120px; padding: 28px var(--page-gutter); background: var(--ink); color: var(--white); }
.footer .wordmark { color: var(--white); }
.footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 28px; }
.footer a { display: inline-flex; min-height: 44px; align-items: center; padding-block: 8px; font-size: 13px; font-weight: 800; }
.footer > span { font-size: 12px; font-weight: 800; }

@media (max-width: 1180px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); }
  .hero-stage { min-height: 600px; }
  .hero-stage .phone { width: min(414px, 80vw); }
  .hero-stage .demo-stage { height: 420px; }
  /* Smallere kolom: chips iets naar binnen zodat ze niet in de tekst hangen. */
  .chip-a { --dx: -244px; }
  .chip-c { --dx: -262px; }
  .chip-e { --dx: -246px; }
  .chip-b { --dx: 250px; }
  .chip-d { --dx: 254px; }
  .process-step { grid-template-columns: 100px minmax(240px, 1fr) minmax(230px, .65fr); }
  .catalog { grid-template-columns: .82fr 1.18fr; }
  /* Vier naast elkaar worden hier te smal voor de langste naam. */
  .mode-bar { grid-template-columns: repeat(2, 1fr); }
  /* Naast de tekstkolom is hier geen 558px meer beschikbaar voor het kruis. */
}

@media (max-width: 920px) {
  .nav { inset-inline: 14px; }
  .nav-login { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 122px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero h1 { font-size: clamp(58px, 12vw, 92px); }
  .hero-lede { max-width: 58ch; }
  .hero-proof { justify-content: center; }
  .hero-stage { width: min(660px, 100%); min-height: 630px; margin: 25px auto 0; }
  .hero-stage .phone { width: min(430px, 84vw); }
  .hero-stage .demo-stage { height: 434px; }
  .scroll-cue { display: none; }
  .chaos { grid-template-columns: 1fr; min-height: auto; }
  .chaos-heading { justify-self: start; }
  .chat-stack { width: 100%; min-height: 480px; }
  .process-head { grid-template-columns: 1fr; }
  .proof-band { grid-template-columns: 1fr; gap: 40px; }
  .process-step { grid-template-columns: 82px 1fr; padding-block: 30px; }
  .process-number { font-size: 72px; }
  .process-copy { padding: 20px 0; }
  .process-art { grid-column: 2; justify-self: start; margin-block: 12px 26px; }
  .catalog { grid-template-columns: 1fr; min-height: auto; }
  .catalog-stack { width: min(700px, 100%); min-height: 640px; }
  .proof-sticker { padding: 12px 15px 14px; }
  .everywhere { grid-template-columns: 1fr; min-height: auto; }
  /* Gestapeld is de volle breedte beschikbaar, dus mag het kruis weer groter. */
  .faq-section { grid-template-columns: 1fr; }
  .faq-heading { position: static; }
  .footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 640px) {
  :root { --page-gutter: 18px; --section-space: 82px; }
  .nav { min-height: 56px; padding: 6px 7px 6px 9px; }
  .wordmark-name { display: none; }
  .wordmark-mark { width: 36px; height: 36px; }
  /* Zonder nowrap breken 'Voor bedrijven' en 'Start een kamer' naar twee
     regels en wordt de balk twee keer zo hoog. */
  .nav .btn { min-height: 44px; padding-inline: 12px; font-size: 12px; white-space: nowrap; }
  .js .nav .lang-toggle { min-width: 44px; min-height: 44px; }
  .hero { padding-top: 104px; }
  .hero-kicker { font-size: 11px; }
  .hero h1 { margin-top: 20px; font-size: clamp(52px, 16vw, 78px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { justify-content: center; }
  .hero .btn-xl { width: 100%; justify-content: center; }
  .hero-proof { display: grid; }
  .hero-stage { min-height: 540px; }
  /* Naast een telefoon die bijna de volle breedte pakt is geen ruimte meer
     voor losse stempels; ze zouden de kaart afdekken. */
  .orbit-note { display: none; }
  /* Naast een telefoon die bijna de volle breedte pakt is geen ruimte voor
     de sticker-chips; de fonkels dragen daar het decor alleen. */
  .float-chip { display: none; }
  .stage-spark { font-size: 17px; }
  .stage-spark-1 { --dx: -158px; --dy: -300px; }
  .stage-spark-2 { --dx: 148px; --dy: -286px; }
  .stage-spark-3, .stage-spark-4 { display: none; }
  .hero-stage .phone { width: min(340px, 88vw); }
  .hero-stage .demo-stage { height: 330px; }
  .chaos h2, .catalog h2, .everywhere h2 { font-size: clamp(46px, 14vw, 66px); }
  .chat-stack { min-height: 430px; }
  .chat { font-size: 23px; padding: 21px; }
  .chat-b { top: 145px; }
  .section-head h2 { font-size: 46px; }
  .process-rail { margin-top: 48px; }
  .process-step { grid-template-columns: 58px 1fr; }
  .process-number { font-size: 52px; }
  .process-copy p { font-size: 15px; }
  .room-code { gap: 5px; padding: 12px; }
  .room-code span { width: 36px; height: 46px; font-size: 23px; }
  .mini-deck { width: 184px; height: 128px; }
  .deck-card i { font-size: 36px; }
  .deck-card b { padding: 6px 10px 8px; font-size: 15px; }
  .catalog-stack { min-height: 500px; }
  .catalog-card { width: 75%; }
  .catalog-card:nth-child(1) { left: 0; top: 18%; }
  .catalog-card:nth-child(2) { right: 0; }
  .catalog-card:nth-child(3) { right: 1%; }
  .catalog-card:only-child { left: 50%; top: 50%; width: 96%; }
  .catalog-card:only-child .catalog-card-copy { right: 10px; bottom: 10px; max-width: 72%; }
  .catalog-card-copy { padding: 12px 14px; }
  .catalog-card-copy b { font-size: 17px; }
  /* Onder 640px past zelfs 2×2 niet meer met naam én pijl: één kolom. */
  .modes-title { font-size: 38px; }
  .mode-bar { grid-template-columns: 1fr; gap: 13px; }
  .mode-tile { min-height: 84px; padding: 14px 15px; }
  /* Onder elkaar valt scheefstand veel sterker op dan naast elkaar: halveren,
     anders lijkt het een fout in plaats van een keuze. */
  .mode-tile:nth-child(1) { transform: rotate(-1deg); }
  .mode-tile:nth-child(2) { transform: rotate(.7deg); }
  .mode-tile:nth-child(3) { transform: rotate(-.6deg); }
  .mode-tile:nth-child(4) { transform: rotate(1deg); }
  .mode-icon { width: 48px; height: 48px; }
  .mode-tile b { font-size: 19px; }
  .soon-pill { font-size: 10px; padding: 5px 9px; }
  .proof-lead h2 { font-size: 42px; }
  .proof-stickers { gap: 14px; }
  .proof-sticker { flex: 1 1 100%; min-width: 0; flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 18px; }
  .proof-sticker strong { font-size: 40px; }
  .faq-section { gap: 46px; }
  .faq summary { min-height: 78px; font-size: 18px; }
  .faq-plus { width: 34px; height: 34px; }
  .faq-plus::before, .faq-plus::after { top: 14px; left: 8px; right: 8px; }
  .final-cta { min-height: 72svh; }
  .final-cta h2 { font-size: clamp(60px, 18vw, 92px); }
  .final-orbit { display: none; }
  .footer nav { max-width: 320px; }
}

/* Het korte label 'Bedrijven' al vanaf 480px: daaronder past de lange versie
   niet meer op een regel naast de primaire knop. */
@media (max-width: 480px) {
  .nav-biz-long { display: none; }
  .nav-biz-short { display: inline; }
}

@media (max-width: 390px) {
  .nav-actions { gap: 5px; }
  .nav .btn { padding-inline: 9px; font-size: 11px; }
  .js .nav .lang-toggle { min-width: 40px; }

  .nav .btn-lime { padding-inline: 10px; }
  .hero h1 { font-size: 50px; }
  .hero-stage { min-height: 500px; }
  .hero-stage .phone { width: 306px; padding: 8px; }
  .phone-screen { padding-top: 46px; }
  .phone-island { width: 92px; height: 26px; top: 9px; }
  .phone-status { top: 12px; left: 20px; right: 18px; font-size: 12.5px; }
  .phone-status svg { width: 52px; height: 12px; }
  .hero-stage .demo-stage { height: 300px; }
  .crew-label { display: none; }
  .process-art { grid-column: 1 / -1; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .catalog-card, .mode-tile, .mode-go, .mode-icon, .proof-sticker, .nav { transition: none !important; }
  .marquee-track { animation: none !important; }
  .float-chip > span, .stage-spark, .orbit-note,
  .demo-btn-like svg, .demo-btn-nope svg { animation: none !important; }
}