/* ============================================================
   ActivityMatch, marketing site
   Tokens komen 1:1 uit de webapp (tailwind.config.ts + theme.ts)
   ============================================================ */

:root {
  --lime: #C8F135;
  --purple: #7B5CF0;
  --coral: #F0595C;
  --alert: #FF4D6D;
  --ink: #1E1B33;
  --lilac: #ECEAF8;
  --muted-border: #C5BFE8;
  /* Donkerder dan het app-token (#6F6A8A): op lilac haalt dat net geen
     WCAG AA (4,3:1); deze haalt 5,5:1 en blijft in dezelfde familie. */
  --muted-text: #5C5678;
  /* Purple voor TEKST op lilac/wit: het merk-purple (#7B5CF0) haalt daar
     geen 4,5:1. Vlakken en borders blijven gewoon --purple. */
  --purple-text: #5F41D6;
  --tint-lime: #EFF8D4;
  --tint-coral: #FDE7E2;
  --tint-purple: #EDE7FF;
  --white: #fff;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --shadow: 0 5px 0 0 var(--ink);
  --shadow-sm: 0 3px 0 0 var(--ink);
  --shadow-lg: 0 7px 0 0 var(--ink);

  --pop-ease: cubic-bezier(0.3, 1.5, 0.4, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--lilac);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--lime); color: var(--ink); }

/* ---------- sticker-systeem (identiek aan de app) ---------- */

.sticker {
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.sticker-press {
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sticker-press:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 0 var(--ink) !important;
}

.label-sticker {
  display: inline-block;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 13px;
  padding: 4px 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
  box-shadow: 4px 4px 0 rgba(30, 27, 51, 0.18);
  transform: rotate(-2deg);
}

/* Markeerstift-highlight in koppen.
   `display: inline-block` is hier het hele punt: als inline element is de box
   van .hl de font-contentbox (bij 68px Baloo: 109px hoog, ~35px lager dan de
   letters zelf), dus een `bottom`-offset landde ver ónder het woord, zichtbaar
   bij de grote koppen. Als inline-block is de box exact de line-height (1.08em),
   en dan zetten em-waarden de balk op elke kopmaat door de onderste helft van
   de letters. Gemeten in de browser, niet gegokt. */
.hl {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  font-style: normal;
}
.hl::after {
  content: '';
  position: absolute;
  left: -0.1em; right: -0.1em;
  bottom: 0.22em;
  height: 0.28em;
  z-index: -1;
  border-radius: 4px;
  background: var(--lime);
  transform: rotate(-1.5deg);
}
/* De tint-tokens zijn bedoeld als vlak-achtergrond op wit; als markeerstift op
   de lilac pagina verdwijnen ze. --tint-purple (#EDE7FF) is bijna exact de
   pagina-achtergrond (#ECEAF8), dus die highlight was onzichtbaar. Diepere
   tinten, wél afgeleid van dezelfde merkkleuren. */
.hl-coral::after { background: color-mix(in srgb, var(--coral) 45%, var(--white)); }
.hl-purple::after { background: color-mix(in srgb, var(--purple) 38%, var(--white)); }

/* ---------- knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 3px solid var(--ink);
  border-radius: 9999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 0 var(--ink); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn-lime { background: var(--lime); }
.btn-white { background: var(--white); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }

.btn-sm { padding: 8px 18px; font-size: 14px; }
.btn-lg { padding: 13px 26px; font-size: 17px; }
.btn-xl { padding: 16px 34px; font-size: 20px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--lilac) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wordmark {
  display: inline-block;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  border-radius: 13px;
  padding: 3px 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(30, 27, 51, 0.18);
  transform: rotate(-2deg);
  transition: transform 0.15s var(--pop-ease);
}
.wordmark:hover { transform: rotate(2deg) scale(1.04); }
.wordmark-sm { font-size: 15px; }
.wordmark-mono { display: none; }
.nav-biz-short { display: none; }

.nav-links {
  display: flex;
  gap: 26px;
  font-weight: 800;
  font-size: 15px;
}
.nav-links a {
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s ease;
}
.nav-links a:hover { border-bottom-color: var(--lime); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Taalknop, bewust hetzelfde beeld als in de app (Header.tsx): een ronde
   sticker met de taal waar je heen schakelt. Compact, want hij staat naast
   twee knoppen die het al krap hebben op smalle schermen. */
/* Zonder JS kan de knop niets, dus tonen we hem ook niet. De `.js`-vlag wordt
   in de <head> gezet, vóór de stylesheet, dus dit flikkert niet. */
.lang-toggle { display: none; }
.js .lang-toggle {
  display: inline-block;
  flex-shrink: 0;
  border: 3px solid var(--ink);
  border-radius: 9999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 11px;
  line-height: 1;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lang-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.lang-toggle:active { transform: translateY(5px); box-shadow: 0 0 0 0 var(--ink); }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 44px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  margin: 14px 0 18px;
}

.lede {
  font-size: 18px;
  max-width: 46ch;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Hero: waar het werkt + hoeveel er in zit. Klein en feitelijk, de storebadges
   die hier stonden zijn weg (die staan nu alleen nog in de Overal-sectie). */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 24px;
}
.proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2.5px solid var(--ink);
  border-radius: 9999px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 6px 15px;
  font-size: 13.5px;
  font-weight: 800;
}
.proof-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: var(--lime);
  border: 2px solid var(--ink);
  flex: none;
}
.proof-sep { color: var(--muted-text); }
.proof-note {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--muted-text);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  padding: 7px 16px;
  line-height: 1.15;
  box-shadow: var(--shadow-sm);
}
.store-badge svg { width: 22px; height: 22px; }
.store-badge small { display: block; font-size: 10px; font-weight: 700; opacity: 0.85; }
.store-badge strong { font-size: 15px; font-family: var(--font-display); letter-spacing: 0.01em; }
.store-badge.is-soon {
  background: var(--white);
  color: var(--ink);
  border-style: dashed;
  border-color: var(--muted-border);
  box-shadow: none;
  opacity: 0.85;
}

/* ---------- hero: telefoon + demo ---------- */

.hero-demo {
  position: relative;
  justify-self: center;
}

.demo-hint {
  position: absolute;
  top: -34px;
  right: -8px;
  z-index: 5;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--purple-text);
  transform: rotate(4deg);
}
.demo-hint-arrow { display: inline-block; font-size: 20px; }

.phone {
  width: min(340px, 88vw);
  border: 3px solid var(--ink);
  border-radius: 34px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  padding: 16px 14px 14px;
  position: relative;
  z-index: 2;
}

/* 3D-tilt: .hero-demo geeft diepte, JS zet rotatie + glanspositie. */
.hero-demo { perspective: 1100px; }
.phone.tilting {
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.phone.tilt-reset { transition: transform 0.5s var(--pop-ease); }
.phone-glare {
  position: absolute;
  inset: 0;
  border-radius: 31px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 30%),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0) 52%
  );
  transition: opacity 0.25s ease;
}
.phone.tilting .phone-glare { opacity: 1; }

.phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 12px;
}
.phone-brand {
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 2px 9px;
  transform: rotate(-2deg);
}
.phone-room {
  border: 2.5px solid var(--ink);
  border-radius: 9999px;
  padding: 2px 11px;
  font-size: 12px;
  font-weight: 800;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.phone-room b { color: var(--purple-text); }

.demo-stage {
  position: relative;
  height: 330px;
  border-radius: 22px;
  background: var(--lilac);
  border: 3px solid var(--ink);
  overflow: hidden;
  /* pan-y: verticaal scrollen blijft van de browser; alleen horizontaal
     slepen is van ons (intent-lock in main.js). Nooit een scroll-dode zone. */
  touch-action: pan-y;
}

.demo-card {
  position: absolute;
  inset: 12px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  transform: translateX(var(--dx, 0px)) translateY(var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
}
.demo-card.is-top { cursor: grab; }
.demo-card.is-top:active { cursor: grabbing; }
.demo-card.is-under { --sc: 0.94; --dy: 10px; filter: saturate(0.9); }
.demo-card.is-flying { transition: transform 0.45s cubic-bezier(0.5, 0, 0.8, 0.6); }
.demo-card.is-returning { transition: transform 0.4s var(--pop-ease); }
.demo-card.is-entering { animation: card-enter 0.5s var(--pop-ease) both; }
@keyframes card-enter {
  from { opacity: 0; transform: translateY(26px) scale(0.9); }
}

.demo-card-art {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 74px;
  background: var(--tint, var(--tint-purple));
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
/* Echte catalogusfoto over de emoji heen (emoji blijft fallback). */
.demo-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-card-meta {
  padding: 10px 14px 12px;
  background: var(--white);
}
.demo-card-meta h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.15;
}
.demo-card-meta span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-text);
}

.stamp {
  position: absolute;
  top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.05em;
  padding: 2px 14px;
  border: 4px solid;
  border-radius: 10px;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
}
.stamp-like { left: 14px; color: #3BA55C; border-color: #3BA55C; transform: rotate(-14deg); }
.stamp-nope { right: 14px; color: var(--alert); border-color: var(--alert); transform: rotate(14deg); }

/* eindkaart / match-overlay binnen de stage */
.demo-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--lilac);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 18px;
  animation: card-enter 0.5s var(--pop-ease) both;
}
.demo-end .match-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--ink);
  animation: match-pop 0.6s var(--pop-ease) both;
}
@keyframes match-pop {
  0% { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.demo-end .match-sticker {
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 10px 20px;
  font-weight: 900;
  font-size: 17px;
  animation: card-enter 0.5s var(--pop-ease) 0.15s both;
}
.demo-end .match-sub {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--muted-text);
  max-width: 30ch;
}
.demo-end .btn { animation: card-enter 0.5s var(--pop-ease) 0.3s both; }

.confetti-bit {
  position: absolute;
  width: 10px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  top: 45%;
  left: 50%;
  pointer-events: none;
  animation: confetti-fall var(--t, 1.4s) cubic-bezier(0.2, 0.6, 0.4, 1) both;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); opacity: 0; }
}

.demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px 2px;
}

.demo-btn {
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  border: 3px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.demo-btn:hover { transform: translateY(-2px); }
.demo-btn:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--ink); }
.demo-btn svg { width: 24px; height: 24px; }
/* Like en nope: identieke witte containers, alleen het icoon verschilt
   (hart = ink, kruis = alert), conform de app-kleurdiscipline. */
.demo-btn-nope { color: var(--alert); }
.demo-btn-like { color: var(--ink); }

.crew {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crew-dot {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 2.5px solid var(--ink);
  background: var(--fill, var(--white));
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  position: relative;
}
.crew-dot.bump { animation: crew-bump 0.55s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes crew-bump {
  35% { transform: scale(1.22) rotate(-7deg); }
  70% { transform: scale(0.96) rotate(3deg); }
}
.crew-dot .mini-heart {
  position: absolute;
  top: -14px;
  left: 50%;
  font-size: 13px;
  pointer-events: none;
  animation: heart-float 0.9s ease-out both;
}
@keyframes heart-float {
  0% { transform: translate(-50%, 4px) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -14px) scale(1.1); opacity: 0; }
}
.crew-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-text);
  margin-left: 4px;
}

/* deco-emoji rond de telefoon */
.deco {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 27px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.deco-1 { top: 8%; left: -34px; transform: rotate(-8deg); background: var(--tint-lime); }
.deco-2 { bottom: 18%; right: -30px; transform: rotate(7deg); background: var(--tint-coral); animation-delay: 1.2s; }
.deco-3 { bottom: -18px; left: 8%; transform: rotate(-5deg); background: var(--tint-purple); animation-delay: 0.6s; }

.bob { animation: deco-bob 4s ease-in-out infinite; }
@keyframes deco-bob {
  50% { transform: rotate(6deg) translateY(-6px); }
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--lime);
  padding: 12px 0;
}
.marquee-track {
  display: flex;
  gap: 26px;
  width: max-content;
  white-space: nowrap;
  animation: marquee-slide 26s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.marquee-track > span { display: inline-flex; align-items: center; gap: 9px; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }

/* ---------- secties ---------- */

.section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 84px 24px 10px;
}
.section-narrow { max-width: 760px; }

.section h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 18px 0 40px;
}

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

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.step {
  position: relative;
  padding: 24px 22px 26px;
  border-radius: 26px;
}
.step h3 { font-size: 22px; margin: 14px 0 8px; }
.step p { font-size: 15.5px; }
.step-nr {
  position: absolute;
  top: -18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--fill, var(--lime));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  transform: rotate(6deg);
}

.step-visual {
  height: 120px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--lilac);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* stap 1: code typt zichzelf */
.code-boxes { display: flex; gap: 8px; }
.code-boxes span {
  width: 40px;
  height: 50px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
}
.code-boxes span.filled { background: var(--tint-lime); animation: code-pop 0.3s var(--pop-ease); }
@keyframes code-pop { 50% { transform: scale(1.18); } }

/* stap 2: mini auto-swiper */
.mini-swiper { position: relative; width: 74px; height: 96px; }
.mini-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  animation: mini-swipe 3.6s var(--pop-ease) infinite;
}
.mini-card.mc-1 { animation-delay: 0s; background: var(--tint-coral); }
.mini-card.mc-2 { animation-delay: 1.2s; background: var(--tint-lime); }
.mini-card.mc-3 { animation-delay: 2.4s; background: var(--tint-purple); }
@keyframes mini-swipe {
  0%, 55% { transform: translateX(0) rotate(0); opacity: 1; z-index: 2; }
  70%, 100% { transform: translateX(90px) rotate(18deg); opacity: 0; z-index: 2; }
}

/* stap 3: het rad */
.wheel-wrap { position: relative; width: 92px; height: 92px; }
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  border: 3px solid var(--ink);
  background: conic-gradient(
    var(--lime) 0 60deg, var(--coral) 60deg 120deg,
    var(--purple) 120deg 180deg, var(--tint-lime) 180deg 240deg,
    var(--alert) 240deg 300deg, var(--tint-purple) 300deg 360deg
  );
  box-shadow: var(--shadow-sm);
}
.wheel.spin { animation: wheel-spin 2.4s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes wheel-spin { to { transform: rotate(1170deg); } }
.wheel-pin {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid var(--ink);
}

/* ---------- modi ---------- */

.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.mode {
  display: block;
  text-decoration: none;
  padding: 30px 28px;
  border-radius: 26px;
  background: var(--tint, var(--white));
  transition: transform 0.15s var(--pop-ease), box-shadow 0.15s ease;
}
.mode:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: var(--shadow-lg); }
.mode-emoji { font-size: 34px; letter-spacing: 6px; }
.mode h3 { font-size: 26px; margin: 12px 0 8px; }
.mode p { font-size: 15.5px; }
.mode-go {
  display: inline-block;
  margin-top: 16px;
  font-weight: 900;
  border-bottom: 3px solid var(--ink);
}

/* Vierde modus, nog niet te gebruiken. Gestreepte rand + gedempt, dezelfde
   taal als de "binnenkort"-storebadges, zodat het niet als aanbod leest. */
.mode-soon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 22px;
  border: 3px dashed var(--muted-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
}
.mode-soon-emoji { font-size: 22px; letter-spacing: 4px; opacity: 0.75; }
.mode-soon-copy { display: flex; flex-direction: column; line-height: 1.3; }
.mode-soon-copy strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.mode-soon-copy small { font-size: 13.5px; font-weight: 700; color: var(--muted-text); }

/* ---------- features bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.feat {
  padding: 24px 22px;
  border-radius: 26px;
  transition: transform 0.15s var(--pop-ease), box-shadow 0.15s ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feat:hover .feat-icon { transform: rotate(-8deg) scale(1.08); }
.feat h3 { font-size: 20px; margin: 14px 0 7px; }
.feat p { font-size: 15px; }
.feat-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--fill, var(--lime));
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--pop-ease);
}
.feat-icon svg { width: 26px; height: 26px; }

/* ---------- overal ---------- */

.everywhere {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 30px;
  align-items: center;
  padding: 44px 40px;
  border-radius: 26px;
  background: var(--tint-purple);
}
.everywhere h2 { margin: 18px 0 14px; }
.everywhere p { max-width: 52ch; }
.everywhere .hero-actions { margin-top: 22px; }

.devices { position: relative; height: 230px; }
.device {
  position: absolute;
  border: 3px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.device-phone {
  width: 104px; height: 168px;
  border-radius: 22px;
  left: 6%; top: 6%;
  transform: rotate(-7deg);
  z-index: 2;
}
.device-laptop {
  width: 200px; height: 132px;
  border-radius: 16px;
  right: 2%; bottom: 6%;
  transform: rotate(4deg);
}

/* Mini-weergave van de app in de apparaatkaders: alleen vlakken en randen,
   genoeg om te herkennen als het product zonder screenshot die veroudert. */
.mock {
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--lilac);
}
.mock-code {
  align-self: flex-end;
  border: 2px solid var(--ink);
  border-radius: 9999px;
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 7px;
}
.mock-card {
  flex: 1;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--tint-purple);
  box-shadow: 0 2px 0 0 var(--ink);
}
.mock-card-lead { background: var(--tint-lime); }
.mock-controls { display: flex; justify-content: space-between; padding: 0 4px; }
.mock-controls i {
  width: 18px; height: 18px;
  border-radius: 9999px;
  border: 2.5px solid var(--ink);
  background: var(--white);
  display: block;
}
.mock-controls .mock-heart { background: var(--lime); }
.mock-controls .mock-x { background: var(--tint-coral); }

.mock-wide { gap: 7px; }
.mock-bar { display: flex; gap: 4px; }
.mock-bar i {
  width: 22px; height: 7px;
  border-radius: 4px;
  border: 2px solid var(--ink);
  background: var(--white);
  display: block;
}
.mock-bar i:first-child { background: var(--ink); width: 30px; }
.mock-row { display: flex; gap: 6px; flex: 1; }
.mock-row .mock-card { flex: 1; }
.mock-card-a { background: var(--tint-lime); }
.mock-card-b { background: var(--tint-coral); }
.mock-card-c { background: var(--tint-purple); }
.mock-cta {
  height: 12px;
  width: 54px;
  border: 2.5px solid var(--ink);
  border-radius: 9999px;
  background: var(--lime);
  box-shadow: 0 2px 0 0 var(--ink);
}

/* ---------- faq ---------- */

.faq-list { display: grid; gap: 16px; }

.faq {
  border-radius: 18px;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq p { padding: 0 20px 18px; font-size: 15.5px; }
.faq-chev {
  flex: none;
  width: 14px; height: 14px;
  border-right: 3.5px solid var(--ink);
  border-bottom: 3.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.25s var(--pop-ease);
  margin-top: -4px;
}
.faq[open] .faq-chev { transform: rotate(225deg); margin-top: 6px; }
.faq[open] summary { background: var(--tint-lime); border-bottom: 3px solid var(--ink); margin-bottom: 12px; }

/* ---------- footer cta + footer ---------- */

.final-cta {
  text-align: center;
  padding: 30px 20px 90px;
}
.final-cta h2 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 12px; }
.final-cta p { font-size: 17px; margin-bottom: 28px; color: var(--muted-text); font-weight: 800; }

.footer {
  border-top: 3px solid var(--ink);
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
}
.footer-links { display: flex; gap: 22px; font-weight: 800; font-size: 14.5px; }
.footer-links a { text-decoration: none; border-bottom: 2.5px solid var(--lime); }
.footer-links a:hover { border-bottom-color: var(--ink); }
.footer-note { font-size: 13px; color: var(--muted-text); font-weight: 700; }

/* ---------- scroll reveal ---------- */

/* Alleen verbergen als JS de boel ook weer zichtbaar kán maken. De .js-vlag
   wordt in de <head> gezet; laadt main.js niet, dan staat er gewoon een
   complete pagina zonder animaties in plaats van een blanco scherm.
   `:where()` telt niet mee voor specificiteit, bewust: een kale `.js [...]`
   zou zwaarder wegen dan de prefers-reduced-motion-override onderaan, en dan
   blijft de pagina juist voor die gebruikers onzichtbaar. */
:where(.js) [data-reveal] {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
}
[data-reveal].rv-in {
  animation: pop 0.55s var(--pop-ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 36px;
    text-align: center;
  }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .lede { max-width: 56ch; }
  .hero-actions, .store-row, .proof-row { justify-content: center; }
  /* Mobiel: de demo (dé piek) eerst, de copy eronder, de doelgroep
     scrollt niet eerst door tekst heen. Marge zodat de hint in beeld past. */
  .hero-demo { order: -1; margin: 34px auto 0; }
  .steps, .bento { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
  .mode-soon { justify-content: center; text-align: left; }
  .everywhere { grid-template-columns: 1fr; padding: 32px 24px; }
  .devices { height: 190px; max-width: 320px; margin: 0 auto; width: 100%; }
  .section { padding-top: 64px; }
  .deco-1 { left: -10px; }
  .deco-2 { right: -8px; }
}

/* De nav houdt beide doelgroepknoppen op elke breedte overeind. Wat er als
   eerste moet wijken is gemeten, niet gegokt: onder 560px past "Inloggen" er
   niet meer bij, onder 480px het volledige woordmerk, onder 365px het woord
   "Voor". Zonder nowrap breken de labels over meerdere regels en loopt de nav
   alsnog over. */
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { white-space: nowrap; }
  .nav-cta .btn-ghost { display: none; }
  .wordmark { font-size: 15px; }
  /* De taalknop is de kleinste van de drie en levert het eerst ruimte in. */
  .js .lang-toggle { padding: 6px 8px; font-size: 11px; letter-spacing: 0.05em; }
}

@media (max-width: 480px) {
  .wordmark-full { display: none; }
  .wordmark-mono { display: inline; }
  /* Eén letter mag weer op volle grootte staan. */
  .wordmark { font-size: 20px; }
  .nav-cta .btn-sm { padding: 8px 14px; }
}

@media (max-width: 365px) {
  .nav-biz-long { display: none; }
  .nav-biz-short { display: inline; }
  .nav-cta { gap: 5px; }
  .nav-cta .btn-sm { padding: 7px 11px; }
  .js .lang-toggle { padding: 6px 7px; }
}

@media (max-width: 480px) {
  .nav { padding: 10px 14px; }
  .btn-lg { padding: 12px 20px; font-size: 15.5px; }
  .demo-hint { right: 6px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone.tilting, .phone.tilt-reset { transform: none !important; transition: none; }
  .phone-glare { display: none; }
  .bob, .marquee-track, .mini-card, .wheel.spin,
  .demo-card.is-entering, .crew-dot.bump,
  .confetti-bit, .demo-end, .demo-end .match-word,
  .demo-end .match-sticker, .demo-end .btn {
    animation: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal].rv-in { animation: none; }
  .btn, .btn:hover, .feat:hover, .mode:hover { transform: none; transition: none; }
}