/*
 * noappy.com — de etalage van de app-studio.
 *
 * Dit bestand bedient de publieke pagina. Juridische pagina's (privacy,
 * voorwaarden) krijgen later een eigen bestand: dezelfde scheiding als bij
 * Huesy, zodat een wijziging aan de etalage nooit een verplichte pagina breekt.
 *
 * De hero is opgebouwd uit vier lagen, van achter naar voor:
 *   1. canvas .hero__grond  — traag drijvende kleurmesh, klein gerenderd en
 *                             opgeblazen met blur; kost bijna niets
 *   2. .hero__muur          — kolommen appschermen die verticaal driften
 *   3. .hero__scrim         — vignette + verloop, puur voor de leesbaarheid
 *   4. .hero__korrel        — filmkorrel, breekt de banding in de verlopen
 * De tekst staat daarboven. Wie een van die lagen weghaalt, moet de scrim
 * mee bijstellen, anders valt de kop weg in het beeld.
 */

:root {
  --nacht:       #0a0616;
  --nacht-2:     #150c2a;
  --nacht-3:     #1f1440;
  --magenta:        #ff2e88;
  --violet:   #a24bff;
  --blauw:       #3c8af9;
  /* De accentkleur van het personage: zijn buik, zijn pootzolen, zijn
     vleugelbinnenkant en zijn staartpunt zijn allemaal deze limoen. Ze stond
     in de karakterbladen maar nergens op de site. Spaarzaam gebruiken — als
     merkteken en als eindpunt van een verloop, nooit als vlak. */
  --limoen:      #c6ff2e;
  --ink:         #f3eeff;
  --ink-soft:    rgba(243, 238, 255, 0.62);
  --ink-zacht:   rgba(243, 238, 255, 0.50);
  --lijn:        rgba(243, 238, 255, 0.12);

  /* De merktekens, getekend naar de losse onderdelen op het karakterblad:
     de pootzool, de kroon uit het woordmerk en de vonk uit de FX-elementen.
     Als masker en niet als achtergrond, zodat ze elke kleur aannemen die we
     eronder zetten — en als data-URI, zodat er geen extra verzoek bij komt. */
  --merk-poot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.4' rx='6.5' ry='5.3'/%3E%3Cellipse cx='4.6' cy='9.5' rx='2.7' ry='3.2'/%3E%3Cellipse cx='9.6' cy='5.3' rx='2.8' ry='3.4'/%3E%3Cellipse cx='15.3' cy='5.3' rx='2.8' ry='3.4'/%3E%3Cellipse cx='20.2' cy='9.5' rx='2.7' ry='3.2'/%3E%3C/svg%3E");
  --merk-kroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 18.6 2.2 8.1c-.1-1 1-1.6 1.8-1l4.1 3.1L11 4.6c.4-.9 1.6-.9 2 0l2.9 5.6 4.1-3.1c.8-.6 1.9 0 1.8 1l-1.2 10.5c-.1.8-.7 1.4-1.5 1.4H4.9c-.8 0-1.4-.6-1.5-1.4z'/%3E%3C/svg%3E");
  --merk-kruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.7 2.6 12 9.9l7.3-7.3a1.5 1.5 0 1 1 2.1 2.1L14.1 12l7.3 7.3a1.5 1.5 0 0 1-2.1 2.1L12 14.1l-7.3 7.3a1.5 1.5 0 0 1-2.1-2.1L9.9 12 2.6 4.7a1.5 1.5 0 0 1 2.1-2.1z'/%3E%3C/svg%3E");
  --merk-vonk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6.3 4.7 10.3 11 11-6.3.7-10.3 4.7-11 11-.7-6.3-4.7-10.3-11-11 6.3-.7 10.3-4.7 11-11z'/%3E%3C/svg%3E");

  --max:         76rem;
  --radius:      16px;

  --sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  /* De filmkorrel. Een SVG-ruis als data-URI: geen bestand, geen verzoek, en
     hij schaalt mee met het scherm. Zonder korrel gaan de grote verlopen in de
     hero banden vertonen op goedkope panelen. */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.62'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------ *
 *  Navigatie — zweeft over de hero, wordt pas een balk bij het scrollen
 * ------------------------------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  /* Een verloop achter de balk, altijd. Vroeger stond de balk boven een donkere
     kop en had ze niets nodig; sinds de mascotte er met zijn felroze kop achter
     hangt, verliezen de links hun contrast. Dit lost het op zonder hem kleiner
     te maken. */
  --navwaas: linear-gradient(to bottom, rgba(10, 6, 22, .78) 0%, rgba(10, 6, 22, .45) 55%, rgba(10, 6, 22, 0) 100%);
  padding-block: 1.1rem;
  transition: background-color .35s ease, backdrop-filter .35s ease,
              border-color .35s ease, padding .35s ease;
  border-bottom: 1px solid transparent;
}

.nav::before {
  content: "";
  position: absolute;
  inset: -1px 0 -1.6rem 0;
  z-index: -1;
  background: var(--navwaas);
  pointer-events: none;
  transition: opacity .35s ease;
}
/* Zodra de balk zelf een grond krijgt, is het verloop overbodig. */
.nav[data-vast]::before { opacity: 0; }

.nav[data-vast] {
  padding-block: .7rem;
  background: rgba(10, 6, 22, .72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--lijn);
}

.nav__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.merk {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -.035em;
  text-decoration: none;
}
.merk i {
  font-style: normal;
  background: linear-gradient(96deg, var(--magenta) 8%, var(--violet) 55%, var(--blauw) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: .92rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .nav__links a:not(.knop) { display: none; }
}

/* ------------------------------------------------------------------ *
 *  Knoppen
 * ------------------------------------------------------------------ */

.knop {
  --knop-bg: var(--magenta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .82em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  /* Wit op magenta haalt maar 3,5:1 en dat is te weinig voor een knoplabel.
     Bijna-zwart haalt 5,7:1 en de gloed komt toch van de schaduw, niet van de
     tekst. Zie de kleurgids. */
  background: var(--knop-bg);
  color: #12031c;
  font: inherit;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease, color .25s ease;
  box-shadow: 0 6px 26px -10px rgba(255, 46, 136, .85);
}
.knop:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px -10px rgba(255, 46, 136, .95), 0 0 0 1px rgba(255, 94, 168, .35);
}
.knop:active { transform: translateY(0); }

.knop--leeg {
  background: transparent;
  color: var(--ink);
  border-color: rgba(243, 238, 255, .26);
  backdrop-filter: blur(6px);
}
.knop--leeg:hover {
  border-color: rgba(243, 238, 255, .55);
  background: rgba(243, 238, 255, .06);
  box-shadow: none;
}

.knop--klein { padding: .6em 1.15em; font-size: .88rem; }

/* ------------------------------------------------------------------ *
 *  Hero — één scherm hoog, en niets mag eronder uitsteken
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background: var(--nacht);
}

/* 1. de kleurmesh */
.hero__grond {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  z-index: 0;
  filter: blur(30px) saturate(150%);
  opacity: 1;
}

/* video-slot: pas actief als <html data-film="..."> gezet is, anders wordt er
   niets opgehaald en blijft de mesh de grond. Zie de notitie over het filmpje
   in de projectdocumentatie. */
.hero__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero__film[data-speelt] { opacity: .55; }

/* 2. de muur met appschermen */
.hero__muur {
  position: absolute;
  inset: -18% -10%;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(.7rem, 1.6vw, 1.4rem);
  transform: perspective(1500px) rotateX(9deg) rotateY(-13deg) rotateZ(5deg) scale(1.16);
  transform-origin: 50% 45%;
  opacity: .56;
  pointer-events: none;
}

.kolom {
  flex: 0 0 clamp(96px, 9.6vw, 158px);
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 1.6vw, 1.4rem);
  animation: drift var(--duur, 58s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kolom--terug { animation-direction: reverse; }

/* Een tegel is één toestel in de muur. Er zitten twee schermen in die traag
 * over elkaar heen wisselen: dat is wat de muur laat leven zonder dat er één
 * byte video aan te pas komt. Dezelfde app in beide lagen, anders wordt het
 * een diavoorstelling in plaats van een app die iets doet. */
.tegel {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(10px, 1.4vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(243, 238, 255, .14);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85);
  background: var(--nacht-2);
  flex: 0 0 auto;
}
.tegel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tegel__om {
  opacity: 0;
  animation: wissel 11s ease-in-out infinite;
  animation-delay: calc(var(--wacht, 0s) * -1);
}
@keyframes wissel {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* de buitenste kolommen staan verder weg */
.kolom:first-child, .kolom:last-child { filter: blur(2.5px); opacity: .7; }
.kolom:first-child .tegel__om, .kolom:last-child .tegel__om { animation: none; }
.kolom:nth-child(2), .kolom:nth-child(6) { opacity: .84; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}


/* 2b. de horizon — een raster in perspectief onder de muur. Staat stil: geen
   animatie, geen filter, dus geen kost per frame. */
.hero__raster {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -6%;
  height: 52%;
  z-index: 2;
  pointer-events: none;
  transform: perspective(340px) rotateX(64deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(to right, rgba(255,46,136,.42) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(to bottom, rgba(162,75,255,.34) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 100%);
  opacity: .5;
}
@media (max-width: 900px) { .hero__raster { opacity: .34; } }

/* 3. leesbaarheid */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(118% 96% at 50% 44%, rgba(10,6,22,0) 30%, rgba(10,6,22,.58) 74%, rgba(10,6,22,.92) 100%),
    radial-gradient(62% 62% at 24% 46%, rgba(10,6,22,.99) 0%, rgba(10,6,22,.93) 34%, rgba(10,6,22,0) 74%),
    linear-gradient(to top, var(--nacht) 0%, rgba(10,6,22,.42) 20%, rgba(10,6,22,0) 46%),
    linear-gradient(to bottom, rgba(10,6,22,.9) 0%, rgba(10,6,22,.3) 13%, rgba(10,6,22,0) 28%);
}

/* 5. gloed — een warme bloom rechtsboven en een koele tegenhanger linksonder.
   Dit is wat de hero laat glanzen; zonder deze laag blijft alles middentoon. */
.hero__gloed {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(44% 42% at 80% 20%, rgba(255, 46, 136, .30) 0%, rgba(255,46,136,0) 66%),
    radial-gradient(40% 40% at 14% 88%, rgba(60, 138, 249, .17) 0%, rgba(60,138,249,0) 70%),
    radial-gradient(80% 42% at 50% 106%, rgba(162, 75, 255, .20) 0%, rgba(162,75,255,0) 72%);
}

/* 4. korrel */
.hero__korrel {
  position: absolute;
  inset: -50%;
  z-index: 6;
  width: 200%;
  height: 200%;
  opacity: .085;
  pointer-events: none;
  background-image: var(--korrel);
  background-size: 190px 190px;
}

/* de inhoud */
.hero__inhoud {
  position: relative;
  z-index: 10;
  align-self: center;
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.hero__blok { max-width: 46rem; }

.label {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  margin: 0 0 1.6rem;
}
.label b {
  font-weight: 500;
  color: var(--magenta);
}
.label s {
  width: 2.6rem; height: 1px;
  background: linear-gradient(90deg, var(--magenta), var(--limoen) 74%, transparent);
  text-decoration: none;
}

h1 {
  margin: 0;
  text-shadow: 0 2px 60px rgba(10, 6, 22, .75);
  font-size: clamp(2.9rem, 7.6vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 800;
}

/* de kinetische regel: één woordgroep die wisselt */
.rol {
  display: block;
  text-shadow: 0 2px 46px rgba(255, 46, 136, .32), 0 2px 60px rgba(10, 6, 22, .7);
  position: relative;
  height: 1.02em;
  overflow: hidden;
  color: var(--magenta);
}
.rol span {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(88%);
  transition: transform .62s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.rol span[data-aan] { opacity: 1; transform: translateY(0); }
.rol span[data-weg] { opacity: 0; transform: translateY(-88%); }

.hero__lead {
  margin: 1.7rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.02rem, 1.55vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero__lead b { color: var(--ink); font-weight: 600; }

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.3rem;
}

/* de balk onderaan de hero */
.strook {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--lijn);
  background: linear-gradient(to top, rgba(10,6,22,.9), rgba(10,6,22,.35));
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.strook__spoor {
  display: flex;
  width: max-content;
  animation: spoor 46s linear infinite;
}
.strook__reeks {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding: .92rem 1.3rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  white-space: nowrap;
}
.strook__reeks em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  color: var(--ink-soft);
}
.strook__reeks em::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px 1px rgba(255,46,136,.7);
}
.strook__reeks em[data-stil]::before {
  background: var(--blauw);
  box-shadow: none;
}
@keyframes spoor {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* het pijltje */
.scrolwenk {
  position: absolute;
  z-index: 10;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: 4.4rem;
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(to bottom, transparent, rgba(243,238,255,.45));
  overflow: hidden;
}
.scrolwenk::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 40%;
  background: var(--magenta);
  animation: zak 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes zak {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}
@media (max-width: 900px) { .scrolwenk { display: none; } }

/* de kop komt binnen zodra de pagina staat */
.op {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--traag, 0ms);
}
[data-klaar] .op { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ *
 *  Wat er onder de hero komt (voorlopig één strook, de rest volgt)
 * ------------------------------------------------------------------ */

:root { --ruimte: clamp(5rem, 11vw, 9rem); }

.sectie { padding-block: var(--ruimte); }
.sectie--rand { border-top: 1px solid var(--lijn); }

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 750;
}
.sectie p.lead {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 3.4rem;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.cijfers div {
  background: var(--nacht);
  padding: 1.7rem 1.5rem;
}
.cijfers b {
  display: block;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--magenta);
}
.cijfers span {
  display: block;
  margin-top: .55rem;
  font-size: .88rem;
  color: var(--ink-soft);
}


/* Op smalle schermen blijven er drie kolommen over — de rest is ballast. De
 * muur zakt daar ook dieper weg: op 430 pixels loopt de tekst nu eenmaal over
 * het hele beeld, en dan wint de leesbaarheid van het effect. */
@media (max-width: 900px) {
  .kolom:nth-child(n+4) { display: none; }
  .hero__muur {
    opacity: .40;
    transform: perspective(1200px) rotateX(6deg) rotateZ(3deg) scale(1.3);
  }
  .hero__scrim {
    background:
      radial-gradient(130% 62% at 50% 44%, rgba(10,6,22,.93) 0%, rgba(10,6,22,.8) 46%, rgba(10,6,22,.6) 100%),
      linear-gradient(to top, var(--nacht) 0%, rgba(10,6,22,.4) 22%, rgba(10,6,22,0) 50%),
      linear-gradient(to bottom, rgba(10,6,22,.92) 0%, rgba(10,6,22,0) 26%);
  }
  .label { flex-wrap: wrap; font-size: .66rem; letter-spacing: .15em; }
}

/* ------------------------------------------------------------------ *
 *  Wie beweging liever niet heeft, krijgt ze niet
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kolom, .tegel__om, .strook__spoor, .hero__korrel, .scrolwenk::after { animation: none; }
  .op { opacity: 1; transform: none; transition: none; }
  .rol span { transition: none; }
}

/* ================================================================== *
 *  Het commerciële luik
 *
 *  Dit is de sectie waarvoor de site bestaat. Ze mag daarom zwaarder
 *  wegen dan de rest: een eigen grond, grotere koppen, en één warme
 *  gloed bovenaan zodat de overgang uit de hero niet als een muur voelt.
 * ================================================================== */

/* Een anker onder een vaste balk landt anders met de kop onder de nav. */
section[id] { scroll-margin-top: 5.5rem; }

.sectie--licht {
  position: relative;
  background: var(--nacht-2);
  border-top: 1px solid var(--lijn);
  overflow: hidden;
}
.sectie--licht::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 70%;
  background: radial-gradient(48% 60% at 50% 0%, rgba(255, 46, 136, .16), rgba(255, 46, 136, 0) 70%);
  pointer-events: none;
}
.sectie--licht > .wrap { position: relative; }

h2.groot {
  font-size: clamp(2.15rem, 5.4vw, 4.3rem);
  line-height: 1.0;
  letter-spacing: -.044em;
  font-weight: 800;
  margin: 0 0 1.7rem;
}

.lead--breed {
  max-width: 44rem !important;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.5;
}
.lead--breed b { color: var(--ink); font-weight: 600; }

.kop3 {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.8rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.kop3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--lijn), transparent);
}

/* ---- de vier doelgroepen ---- */

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}

.kaart {
  position: relative;
  padding: 1.7rem 1.6rem 1.8rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(243,238,255,.045), rgba(243,238,255,.012));
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), background-color .25s ease;
}
.kaart::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--magenta), var(--blauw));
  opacity: 0;
  transition: opacity .25s ease;
}
.kaart:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 46, 136, .38);
}
.kaart:hover::before { opacity: 1; }

.kaart h4 {
  margin: 0 0 .55rem;
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.kaart p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.5;
}
.kaart ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lijn);
  padding-top: .9rem;
}
.kaart li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--ink-zacht);
}
.kaart li + li { margin-top: .5rem; }
.kaart li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
}

/* ---- de vier stappen ---- */

.stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.stappen li {
  position: relative;
  background: var(--nacht-2);
  padding: 1.7rem 1.5rem 1.9rem;
}
.stappen b {
  display: block;
  font-family: var(--mono);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 400;
  color: rgba(255, 46, 136, .28);
  margin-bottom: 1rem;
}
.stappen h4 {
  margin: 0 0 .5rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.stappen p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.stappen em { font-style: italic; color: var(--ink); }

/* ---- waarom bij ons ---- */

.redenen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3.2rem;
}
@media (max-width: 700px) { .redenen { grid-template-columns: 1fr; } }
.redenen h4 {
  margin: 0 0 .45rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.02em;
  padding-top: .9rem;
  border-top: 2px solid var(--magenta);
  display: inline-block;
}
.redenen div { display: flex; flex-direction: column; align-items: flex-start; }
.redenen p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- claims: de lichte tegenhanger van .redenen ----
   Staat telkens vlak na een raster van kaartjes. Daarom geen doos, geen alinea
   en geen streepje boven de kop: één uitspraak met een korte regel eronder,
   onder een enkele haarlijn. Twee kaartrasters na elkaar lezen als een
   document; dit breekt dat ritme zonder de inhoud te laten vallen. */

/* Bijgesteld nadat de rij te stil bleek: ze draagt de sterkste argumenten van
   de sectie en las als een voetnoot. Nu met meer lucht eromheen, een kop op
   volle grootte en een lijn die begint waar de kroon staat. Nog altijd geen
   kaartraster — dat was net het probleem. */
.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 2.6rem 3rem;
  margin: 0;
  padding: 2.9rem 0 .4rem;
  list-style: none;
  border-top: 1px solid var(--lijn);
}
.claims li { position: relative; }
.claims b {
  display: block;
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .5rem;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -.025em;
}
.claims b::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 17px;
  height: 17px;
  background: var(--limoen);
  filter: drop-shadow(0 0 7px rgba(198, 255, 46, .35));
  -webkit-mask: var(--merk-kroon) center / contain no-repeat;
          mask: var(--merk-kroon) center / contain no-repeat;
}
.claims span {
  display: block;
  padding-left: 1.7rem;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- de oproep ---- */

.oproep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid rgba(255, 46, 136, .32);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 160% at 0% 0%, rgba(255, 46, 136, .13), rgba(255, 46, 136, 0) 70%),
    rgba(243, 238, 255, .035);
}
.oproep h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: -.03em;
  font-weight: 750;
}
.oproep p {
  margin: 0;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: .98rem;
}
.knop--groot { padding: 1.05em 2em; font-size: 1.02rem; }

/* ---- de vragen ---- */

.vragen {
  margin-top: 2.6rem;
  border-top: 1px solid var(--lijn);
}
.vragen details {
  border-bottom: 1px solid var(--lijn);
}
.vragen summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color .2s ease;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary:hover { color: var(--magenta); }
.vragen summary::after {
  content: "";
  position: absolute;
  right: .45rem;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--magenta);
  -webkit-mask: var(--merk-vonk) center / contain no-repeat;
          mask: var(--merk-vonk) center / contain no-repeat;
  transform: translateY(-50%);
  transition: transform .3s ease, background-color .3s ease;
}
/* Open: de vonk draait een kwartslag en springt naar de limoen. Dat is
   dezelfde beweging als een pijl die omklapt, maar met het teken van het
   personage in plaats van een streepje. */
.vragen details[open] summary::after {
  transform: translateY(-50%) rotate(90deg) scale(1.1);
  background: var(--limoen);
}
.vragen details p {
  margin: 0 0 1.4rem;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  h2.groot { max-width: none; }
  .oproep { flex-direction: column; align-items: flex-start; }
  .knop--groot { width: 100%; }
}

/* ================================================================== *
 *  Het webshop-hoofdstuk, de catalogus, de jobs, het formulier en de
 *  voet. Alles hieronder hoort bij het tweede deel van de pagina.
 * ================================================================== */

/* Het accentwoord in een kop. Een verloop in plaats van één kleur, want
   twee neonkleuren naast elkaar is wat dit palet zijn karakter geeft. */
.neon {
  background: linear-gradient(96deg, var(--magenta) 0%, #ff6bb5 38%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sectie--donker {
  position: relative;
  background:
    radial-gradient(70% 42% at 82% 4%, rgba(60, 138, 249, .10), rgba(60,138,249,0) 70%),
    var(--nacht);
  border-top: 1px solid var(--lijn);
  overflow: hidden;
}
.sectie--donker > .wrap { position: relative; }

.label--blauw b { color: var(--blauw); }
.label--blauw s { background: linear-gradient(90deg, var(--blauw), transparent); }

/* ---- de weegschaal: de gewone weg naast de onze ---- */

.weegschaal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.weegschaal__kant {
  background: var(--nacht);
  padding: 1.9rem 1.7rem 2rem;
}
.weegschaal__kant--wij {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 46, 136, .12), rgba(255,46,136,0) 70%),
    var(--nacht-2);
}
.weegschaal__merk {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
.weegschaal__kant--wij .weegschaal__merk { color: var(--magenta); }
.weegschaal ul { margin: 0; padding: 0; list-style: none; }
.weegschaal li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.weegschaal li + li { margin-top: .8rem; }
.weegschaal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 11px;
  height: 11px;
  background: rgba(243, 238, 255, .26);
  -webkit-mask: var(--merk-kruis) center / contain no-repeat;
          mask: var(--merk-kruis) center / contain no-repeat;
}
/* Onze kant krijgt de pootafdruk. Het is het enige merkteken dat niemand
   anders heeft: een pijl staat op elke site, deze poot staat op ons beest. */
.weegschaal__kant--wij li { color: var(--ink); }
.weegschaal__kant--wij li::before {
  top: .18em;
  width: 14px;
  height: 14px;
  background: var(--limoen);
  -webkit-mask: var(--merk-poot) center / contain no-repeat;
          mask: var(--merk-poot) center / contain no-repeat;
}

/* ---- een eenvoudig raster met korte blokjes ---- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.9rem 2.4rem;
}
.raster--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .raster--twee { grid-template-columns: 1fr; } }

.raster h4 {
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.raster > div > h4::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: .85rem;
  background: linear-gradient(90deg, var(--magenta), var(--blauw) 62%, var(--limoen));
}
.raster p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.stappen--drie { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.6rem; }

.voetnoot {
  margin: 2.4rem 0 0;
  max-width: 44rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-zacht);
  padding-left: 1rem;
  border-left: 2px solid var(--lijn);
}
.voetnoot a { color: var(--magenta); }

.oproep--blauw {
  border-color: rgba(60, 138, 249, .32);
  background:
    radial-gradient(80% 160% at 0% 0%, rgba(60, 138, 249, .13), rgba(60,138,249,0) 70%),
    rgba(243, 238, 255, .035);
}

/* ---- de catalogus ---- */

.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: 3rem;
}

/* De kaart is de affiche plus vier regels. Alles wat er meer bij stond, staat
   in de kijkgids — daar is plaats voor, hier niet. */
.app {
  position: relative;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(243,238,255,.05), rgba(243,238,255,.012));
  overflow: hidden;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.app:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--eigen, #ff2e88) 55%, transparent); }
.app__link { display: block; color: inherit; text-decoration: none; }

.app__affiche {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--nacht-2);
}
.app__affiche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De affiches staan rechtop (2:3) en hebben hun titel bovenaan. Iets boven
     het midden uitsnijden houdt die titel in beeld zonder de kaart hoog te
     maken. */
  object-position: center 26%;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.app:hover .app__affiche img { transform: scale(1.05); }

/* Een app zonder schermen heeft een affiche zonder inhoud: enkel kleur en
   bogen. Dat leest als een kapot beeld. De pootafdruk vult die plek — het is
   geen verzonnen schermafbeelding, het is een merkteken, en dat is eerlijker. */
.app__affiche[data-kaal]::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-9deg);
  background: color-mix(in srgb, var(--eigen, #ff2e88) 42%, var(--ink));
  opacity: .30;
  -webkit-mask: var(--merk-poot) center / contain no-repeat;
          mask: var(--merk-poot) center / contain no-repeat;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.app:hover .app__affiche[data-kaal]::before {
  transform: translate(-50%, -50%) rotate(-9deg) scale(1.07);
  opacity: .42;
}
/* Een verloop van de eigen kleur onderaan de affiche: het bindt het beeld aan
   de tekst en houdt de rand van de uitsnede zacht. */
.app__affiche::after {
  content: "";
  z-index: 2;
  position: absolute;
  inset: auto 0 -1px 0;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(10, 6, 22, 0),
    color-mix(in srgb, var(--eigen, #ff2e88) 14%, rgba(10, 6, 22, .82)) 62%,
    rgba(10, 6, 22, .96));
}

.app__tekst { display: block; padding: 1.15rem 1.3rem 1.4rem; }
.app__tekst strong {
  display: block;
  font-size: 1.22rem;
  font-weight: 750;
  letter-spacing: -.03em;
}
.app__wat {
  display: block;
  margin: .18rem 0 .7rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blauw);
}
.app__kort {
  display: block;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.app__staat {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.app__staat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px 1px rgba(255, 46, 136, .8);
}
.app__staat[data-stil] { color: var(--ink-zacht); }
.app__staat[data-stil]::before { background: var(--blauw); box-shadow: none; }

.app--leeg {
  display: flex;
  align-items: center;
  background: none;
  border-style: dashed;
  border-color: rgba(243, 238, 255, .16);
}
.app--leeg h3, .app--leeg p { opacity: .72; }

/* ---- het contactformulier ---- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.veldrij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 560px) { .veldrij { grid-template-columns: 1fr; } }

.veld { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.veld label {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}
.veld label b { color: var(--magenta); font-weight: 600; }

.veld input[type=text],
.veld input[type=email],
.veld input[type=tel],
.veld select,
.veld textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(243, 238, 255, .18);
  border-radius: 12px;
  background: rgba(10, 6, 22, .6);
  color: var(--ink);
  font: inherit;
  font-size: .97rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.veld textarea { resize: vertical; min-height: 8.5rem; line-height: 1.55; }
.veld select { appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--magenta) 50%),
                    linear-gradient(135deg, var(--magenta) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .82rem) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.veld :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255, 46, 136, .22);
  background: rgba(10, 6, 22, .85);
}
.veld input::placeholder, .veld textarea::placeholder { color: rgba(243, 238, 255, .28); }

.veld--fout :is(input, select, textarea) { border-color: #ff5a5a; }
.fout { font-size: .84rem; color: #ff8a8a; }

.veld--vink label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.veld--vink input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--magenta); }
.veld--vink a { color: var(--magenta); }

.veld__hulp { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-zacht); }
.veld__hulp b { color: var(--magenta); }

/* De honeypot. display:none wordt door sommige robots herkend; buiten beeld
   duwen is minder opvallend en even onzichtbaar voor een mens. */
.lokaas {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.melding {
  padding: 1.1rem 1.3rem;
  border-radius: 12px;
  margin-bottom: 1.6rem;
  font-size: .95rem;
  line-height: 1.5;
}
.melding--fout {
  border: 1px solid rgba(255, 90, 90, .45);
  background: rgba(255, 90, 90, .1);
  color: #ffc9c9;
}
.melding--goed {
  border: 1px solid rgba(60, 138, 249, .4);
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(60, 138, 249, .16), rgba(60,138,249,0) 70%),
    rgba(243, 238, 255, .04);
  padding: 1.8rem;
}
.melding--goed h3 { margin: 0 0 .4rem; font-size: 1.3rem; letter-spacing: -.03em; }
.melding--goed p { margin: 0; color: var(--ink-soft); }

.contact__naast { display: grid; gap: 1.8rem; align-content: start; }
.contact__naast h3 {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  font-weight: 500;
}
.contact__naast p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.contact__naast a { color: var(--magenta); }

/* ---- de voet ---- */

.voet {
  position: relative;
  border-top: 0;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255, 46, 136, .09), rgba(255,46,136,0) 70%),
    var(--nacht);
  color: var(--ink-soft);
  font-size: .92rem;
  overflow: hidden;
}
.voet__neon {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta) 22%, var(--violet) 52%, var(--blauw) 78%, transparent);
  opacity: .85;
}

.voet__boven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 3rem;
}
@media (max-width: 860px) { .voet__boven { grid-template-columns: 1fr; } }

.voet__wordmark {
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
}
.voet__wordmark i {
  font-style: normal;
  background: linear-gradient(96deg, var(--magenta) 8%, var(--violet) 55%, var(--blauw) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.voet__zin { margin: 0 0 1.6rem; max-width: 22rem; line-height: 1.6; }

.voet__kolommen {
  display: grid;
  /* Vier rubrieken, dus vier kolommen. Met auto-fit werd het er drie en stond
     het kleine lettertje als wees op een tweede rij. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
@media (max-width: 900px) { .voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .voet__kolommen { grid-template-columns: 1fr; } }
.voet__kolommen h2 {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  font-weight: 500;
}
.voet__kolommen ul { margin: 0; padding: 0; list-style: none; }
.voet__kolommen li + li { margin-top: .55rem; }
.voet__kolommen a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.voet__kolommen a:hover { color: var(--magenta); }

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.8rem;
  border-top: 1px solid var(--lijn);
  font-size: .84rem;
  color: var(--ink-zacht);
}
.voet__onder p { margin: 0; }
.voet__onder b { color: var(--ink-soft); font-weight: 600; }
.voet__onder a { color: var(--magenta); }

/* ---- een uitgelicht paneel binnen een sectie ----
   Voor de doelgroep waar eerst een bezwaar weg moet voor de rest landt. */
.uitgelicht {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid rgba(60, 138, 249, .22);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(60, 138, 249, .10), rgba(60,138,249,0) 68%),
    radial-gradient(60% 90% at 0% 100%, rgba(162, 75, 255, .12), rgba(162,75,255,0) 70%),
    rgba(10, 6, 22, .55);
}
.uitgelicht h3 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 780;
}
.uitgelicht > .uitgelicht__tekst > p {
  margin: 0 0 1.1rem;
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.uitgelicht .raster { margin-top: 2.4rem; }
.uitgelicht .voetnoot { margin-top: 2.2rem; }
.uitgelicht .oproep { margin-top: 2.4rem; }
.uitgelicht .oproep h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .5rem; }

/* ---- toegankelijkheid ---- */

/* De eerste tabstop van de pagina. Springt tevoorschijn zodra hij focus krijgt
   en verdwijnt weer; wie met de muis werkt ziet hem nooit. */
.overslaan {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  border-radius: 0 0 10px 10px;
  background: var(--magenta);
  color: #fff;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  transition: top .18s ease;
}
.overslaan:focus { top: 0; }

/* Een zichtbare focusring op alles wat bediend kan worden. Zonder dit is de
   site met een toetsenbord niet te doen, en dat is geen detail. */
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- de duimbalk ----
   Op de telefoon verdwijnt de knop uit de kop zodra je scrolt. Dan staat er
   pagina's lang niets meer dat naar het formulier leidt. Dit staat binnen
   duimbereik en gaat weg zodra het contactblok in beeld komt. */
.duimbalk { display: none; }

@media (max-width: 720px) {
  .duimbalk {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: flex;
    gap: .6rem;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(10, 6, 22, .86);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--lijn);
    transform: translateY(120%);
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .duimbalk[data-aan] { transform: none; }
  .duimbalk .knop { flex: 1; padding: .8em 1em; font-size: .9rem; }
  /* de voet mag niet onder de balk verdwijnen */
  .voet { padding-bottom: 6rem; }
}

/* ================================================================== *
 *  Beeldbreuken
 *
 *  Een band die over de rand tussen twee secties heen ligt. Zonder die
 *  overlap stapelen de blokken gewoon op elkaar en leest de pagina als
 *  een lijst; mét overlap breekt het beeld de kolom open en weet de
 *  lezer dat er een nieuw hoofdstuk begint.
 *
 *  De band staat als broer tussen twee secties, niet erbinnen. Daardoor
 *  kan hij met een negatieve marge in allebei bijten. De z-index moet
 *  erbij, anders schuift de volgende sectie met haar dekkende grond er
 *  overheen.
 * ================================================================== */

.breuk {
  position: relative;
  z-index: 5;
  margin-block: 0;
  pointer-events: none;
}

.breuk figure {
  position: relative;
  margin: 0;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  border: 1px solid rgba(243, 238, 255, .14);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 46, 136, .12);
  background: var(--nacht-2);
}

.breuk img {
  display: block;
  width: 100%;
  height: clamp(150px, 21vw, 300px);
  object-fit: cover;
}

.breuk figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 2.6rem clamp(1.2rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1.5rem);
  background: linear-gradient(to top, rgba(10, 6, 22, .88), rgba(10, 6, 22, 0));
}
.breuk figcaption b {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--magenta);
}
.breuk figcaption span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Een streep in de huiskleuren over de bovenrand: dat maakt van een foto een
   onderdeel van de site in plaats van een plaatje dat er toevallig ligt. */
.breuk figure::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet) 55%, var(--blauw));
  opacity: .8;
}

/* Op de telefoon minder overlap: daar is de sectie zelf al smal en zou een
   band die te ver bijt de kop van het volgende blok opeten. */
@media (max-width: 720px) {
  .breuk figcaption { padding-top: 2rem; }
}

/* Het beeld in het schoolpaneel loopt aan één kant uit het paneel. Dezelfde
   gedachte, andere richting: hier is het de zijrand die doorbroken wordt. */
.uitloop {
  position: relative;
  margin: 2.6rem calc(-1 * clamp(1.8rem, 4vw, 3rem)) 0 0;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
  border: 1px solid rgba(60, 138, 249, .18);
  border-right: 0;
}
.uitloop img {
  display: block;
  width: 100%;
  height: clamp(120px, 16vw, 210px);
  object-fit: cover;
}
@media (max-width: 720px) {
  .uitloop { margin-right: calc(-1 * clamp(1.2rem, 4vw, 2rem)); }
}

/* ================================================================== *
 *  De uitgelichte tegel
 *
 *  Magenta, violet en cyaan zijn de huiskleuren en zitten overal. Wat
 *  in de kijker moet staan, kan daar dus niet mee opvallen. Daarom een
 *  vierde kleur die nergens anders voorkomt: zure limoen. Ze botst
 *  bewust met de rest — dat is precies waar ze voor dient.
 * ================================================================== */

:root { --signaal: #c6ff2e; }

.tegel--uit {
  /* De muur staat op pointer-events: none; deze ene tegel niet. */
  pointer-events: auto;
  cursor: pointer;
  border-color: rgba(198, 255, 46, .55);
  box-shadow:
    0 0 0 1px rgba(198, 255, 46, .35),
    0 0 26px -2px rgba(198, 255, 46, .5),
    0 30px 60px -20px rgba(0, 0, 0, .85);
  animation: signaal 3.4s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.tegel--uit:hover { transform: scale(1.045); }

@keyframes signaal {
  0%, 100% { box-shadow: 0 0 0 1px rgba(198,255,46,.3), 0 0 20px -4px rgba(198,255,46,.36), 0 30px 60px -20px rgba(0,0,0,.85); }
  50%      { box-shadow: 0 0 0 1px rgba(198,255,46,.6), 0 0 40px 0 rgba(198,255,46,.62), 0 30px 60px -20px rgba(0,0,0,.85); }
}

.tegel__vlag {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.6rem .6rem .55rem;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--signaal);
  background: linear-gradient(to top, rgba(10, 6, 22, .92), rgba(10, 6, 22, 0));
  text-align: center;
}

/* Waar de tegel naartoe wijst, licht even op als je erop klikt. Zonder dat
   springt de pagina naar een blok en weet niemand waarom. */
[data-aangewezen] {
  animation: aangewezen 1.8s ease-out 1;
}
@keyframes aangewezen {
  0%   { box-shadow: 0 0 0 0 rgba(198, 255, 46, .0); border-color: var(--lijn); }
  18%  { box-shadow: 0 0 30px 2px rgba(198, 255, 46, .55); border-color: var(--signaal); }
  100% { box-shadow: 0 0 0 0 rgba(198, 255, 46, 0); border-color: var(--lijn); }
}

@media (prefers-reduced-motion: reduce) {
  .tegel--uit { animation: none; }
  [data-aangewezen] { animation: none; border-color: var(--signaal); }
}

/* ================================================================== *
 *  De vier vertrekken
 *
 *  Vier doelgroepen onder elkaar betekent dat iedereen door drie stukken
 *  moet die niet over hem gaan. Naast elkaar in kaarten betekent dat er
 *  van elk maar drie zinnen passen, en dan is het een opsomming en geen
 *  argument. Met een schakelaar krijgt elk deel de ruimte van een hele
 *  sectie en kiest de lezer in één tik wie hij is.
 * ================================================================== */

.vertrekken { margin-top: 1.5rem; }

/* ---- de schakelaar ---- */

.vertrekken__keuze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.vertrekken__keuze button {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 0;
  background: var(--nacht);
  color: var(--ink-zacht);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background-color .22s ease, color .22s ease;
}
.vertrekken__keuze button b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-soft);
  transition: color .22s ease;
}
.vertrekken__keuze button span {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* De streep die aangeeft waar je staat. Boven in plaats van onder, omdat het
   paneel eronder hangt en de streep dan de twee aan elkaar naait. */
.vertrekken__keuze button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}

.vertrekken__keuze button:hover { background: rgba(243, 238, 255, .04); }
.vertrekken__keuze button:hover b { color: var(--ink); }

.vertrekken__keuze button[aria-selected="true"] {
  background: var(--nacht-2);
  color: var(--ink-soft);
}
.vertrekken__keuze button[aria-selected="true"] b { color: var(--ink); }
.vertrekken__keuze button[aria-selected="true"]::before { transform: scaleX(1); }

@media (max-width: 820px) {
  .vertrekken__keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .vertrekken__keuze { grid-template-columns: 1fr; }
  .vertrekken__keuze button { flex-direction: row; align-items: baseline; gap: .6rem; padding: .85rem 1rem; }
}

/* ---- het paneel ---- */

.vertrek {
  position: relative;
  border: 1px solid var(--lijn);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--nacht-2);
  overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.vertrek[hidden] { display: none; }

/* Het beeld staat achter de tekst en vervaagt naar de leeskant toe. Een foto
   die volledig zichtbaar is, vecht met de tekst; een foto die volledig weg is,
   had je evengoed niet kunnen zetten. */
.vertrek__vlak {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--vlak);
  background-size: cover;
  background-position: 60% 40%;
  opacity: .62;
  mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 38%, #000 82%);
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 38%, #000 82%);
  pointer-events: none;
}
/* En daaroverheen nog een laag van de eigen grond, zodat de tekst hoe dan ook
   op contrast zit — ook als er straks een echte foto in komt die lichter is. */
.vertrek__vlak::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, var(--nacht-2) 18%, rgba(21, 12, 42, .78) 44%, rgba(21, 12, 42, .22) 100%);
}

.vertrek__tekst { position: relative; z-index: 2; max-width: 58rem; }

.vertrek h3 {
  margin: 0 0 1.3rem;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 780;
  color: var(--ink);
}
.vertrek__intro {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.vertrek .raster { margin-top: 2.4rem; }
.vertrek .voetnoot { margin-top: 2.2rem; }
.vertrek .oproep { margin-top: 2.4rem; background: rgba(10, 6, 22, .5); }
.vertrek .oproep h3 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); margin-bottom: .5rem; }

/* Het wisselen zelf: het nieuwe paneel komt op, het oude is al weg. Geen
   schuifbeweging — die suggereert een volgorde, en die is er niet. */
.vertrek[data-komt] { animation: vertrek-op .42s cubic-bezier(.16,1,.3,1); }
@keyframes vertrek-op {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vertrek[data-komt] { animation: none; }
  .vertrekken__keuze button::before { transition: none; }
}

/* ================================================================== *
 *  De techniekstrook
 *
 *  Zes blokjes met een zelfgetekend teken en de naam uitgeschreven. Geen
 *  merklogo's: het zijn handelsmerken, we zijn geen partner van die
 *  bedrijven, en een rij vreemde logo's maakt een pagina goedkoper dan
 *  ze is. De namen als tekst zijn bovendien wat een zoekmachine leest.
 * ================================================================== */

.techniek {
  position: relative;
  border-top: 1px solid var(--lijn);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(162, 75, 255, .08), rgba(162,75,255,0) 70%),
    var(--nacht-2);
  padding-block: calc(var(--ruimte) * 0.62);
}
.techniek .kop3 { margin-top: 0; }

.techniek__rij {
  display: grid;
  /* Zes blokjes, dus drie kolommen: twee volle rijen in plaats van vijf en een wees. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}

.techniek__rij li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--nacht-2);
  transition: background-color .25s ease, color .25s ease;
}
.techniek__rij li:hover { background: var(--nacht-3); }

.techniek__rij svg {
  width: 26px;
  height: 26px;
  margin-bottom: .55rem;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.techniek__rij li:nth-child(3n+2) svg { stroke: var(--violet); }
.techniek__rij li:nth-child(3n) svg { stroke: var(--blauw); }

.techniek__rij b {
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.techniek__rij span {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 900px) { .techniek__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .techniek__rij { grid-template-columns: 1fr; } }

.techniek__noot {
  margin: 2rem 0 0;
  max-width: 44rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-zacht);
  padding-left: 1rem;
  border-left: 2px solid var(--lijn);
}

/* De lamp: een gloed die de muisaanwijzer volgt.
   Alleen transform per frame, dus het draait op de compositor. Ze staat boven
   de scrim en onder de korrel: laag genoeg om de kop niet weg te wassen, hoog
   genoeg om de tegels waar ze overheen gaat echt te laten oplichten. */
.hero__lamp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 46, 136, .26) 0%,
    rgba(162, 75, 255, .16) 42%,
    rgba(60, 138, 249, .07) 66%,
    rgba(60, 138, 249, 0) 100%);
  transition: opacity .5s ease;
  will-change: transform;
}
.hero__lamp[data-aan] { opacity: 1; }

/* Op een aanraakscherm heeft een muisaanwijzer geen betekenis. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero__lamp { display: none; }
}

/* ---- de mark ----
   Het app-icoon staat naast de wordmark, zoals een beeldmerk dat hoort te doen.
   Dat de mark een N is en de naam met dezelfde letter begint, leest niet als een
   dubbele N: een beeldmerk wordt als teken gelezen en niet als letter. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* De wordmark is één woord. Zonder deze span worden "No" en "appy" twee losse
   flexkinderen en zet de gap er een spatie tussen. */
.merk__woord { display: inline; }

.merk__n {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(255, 46, 136, .45));
}
@media (max-width: 460px) { .merk__n { width: 26px; height: 26px; } }

.voet__wordmark {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.voet__n {
  width: clamp(44px, 7vw, 64px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 22px rgba(255, 46, 136, .4));
}

/* ================================================================== *
 *  De mascotte in de vertrekken
 *
 *  Elk figuurtje hangt over de rand van zijn paneel heen. Dat is de hele
 *  bedoeling: een beeld dat netjes binnen het kader blijft, ligt plat op
 *  de pagina; een beeld dat eroverheen steekt, geeft diepte.
 *
 *  Daarvoor moest `overflow: hidden` van het paneel af. Het verloop dat
 *  het paneel afrondt, zit nu op de vlak-laag zelf.
 * ================================================================== */

.vertrek { overflow: visible; }
.vertrek__vlak { border-radius: inherit; overflow: hidden; }

.vertrek__mascotte {
  position: absolute;
  /* Onder de tekst, boven het vlak. Hij steekt nog altijd over de rand van het
     paneel — daar komt de diepte vandaan — maar hij kan nooit een knop of een
     zin afdekken. Dat scheelt vier keer per figuurtje pixels schuiven. */
  z-index: 1;
  width: var(--maat, 20vw);
  height: auto;
  pointer-events: none;
  /* Het beeld draagt zijn eigen gloed al; deze schaduw zet hem los van het
     paneel zodat hij ervoor lijkt te zweven in plaats van erop geplakt. */
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .55));
  transform-origin: var(--spil, 50% 50%);
  animation-duration: var(--tempo, 8s);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1);
}

/*
 * Elk figuurtje beweegt anders, en die beweging hoort bij wat hij dóét. Vier
 * keer hetzelfde op-en-neer maakt van vier taferelen één behang.
 *
 * De spil staat per figuur in doelgroepen.json, want die bepaalt of een
 * beweging klopt: een draak die aan een haak hangt moet om die haak draaien en
 * niet om zijn eigen buik.
 */

/* Hangt aan een kraanhaak, dus slingert hij. Spil in de haak. */
.vertrek__mascotte[data-beweging="slinger"] { animation-name: slinger; }
@keyframes slinger {
  0%, 100% { transform: rotate(-3.6deg); }
  50%      { transform: rotate(3.2deg); }
}

/* Ligt uitgeteld op zijn bureau. Die zweeft niet, die ademt: nauwelijks
   beweging en traag. Wie hier zou wippen, was niet moe. */
.vertrek__mascotte[data-beweging="uitgeteld"] { animation-name: uitgeteld; }
@keyframes uitgeteld {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, 4px, 0) scale(1.012); }
}

/* Juicht op een stapel papier. Een stuiter met een korte landing, spil onderaan,
   zodat hij van de stapel afduwt in plaats van in de lucht te zweven. */
.vertrek__mascotte[data-beweging="juich"] {
  animation-name: juich;
  animation-timing-function: ease-in-out;
}
@keyframes juich {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); }
  12%      { transform: translate3d(0, 2px, 0) scaleY(.985); }
  45%      { transform: translate3d(0, -18px, 0) scaleY(1.02); }
  70%      { transform: translate3d(0, 0, 0) scaleY(1); }
}

/* Verveelt zich met de kin op de hand. Een trage leun heen en weer, spil laag
   bij de bank, alsof hij op zijn stoel zit te draaien. */
.vertrek__mascotte[data-beweging="verveling"] { animation-name: verveling; }
@keyframes verveling {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.1deg); }
  50%      { transform: translate3d(0, -5px, 0) rotate(1.1deg); }
}

/* Op een tablet mag hij blijven, maar kleiner en met wat minder dekking: hij
   staat toch al onder de tekst. Onder de 760 px is het paneel te smal en ligt
   hij dwars door alles heen — dan weg. */
@media (max-width: 980px) {
  .vertrek__mascotte {
    width: clamp(150px, 30vw, 260px) !important;
    opacity: .8;
  }
}
/* Op een telefoon is het paneel te smal om hem eroverheen te laten hangen: daar
   ligt hij dwars door de tekst. Dat was de reden dat hij hier verdween — maar
   een figuurtje wegnemen haalt precies weg waarvoor deze pagina gemaakt is. Hij
   blijft dus staan en krijgt een eigen plek: uit de absolute positionering,
   rechts boven de kop, met zijn schouder nog altijd over de rand van het paneel
   heen. De diepte blijft, en hij dekt niets meer af. */
@media (max-width: 760px) {
  .vertrek__mascotte {
    position: static;
    display: block;
    /* De inline --maat hoort bij het absolute geval; hier telt de breedte van
       het paneel, vandaar dat deze regel wint. */
    width: min(58%, 210px) !important;
    /* Boven en rechts over de padding van het paneel heen; onderaan trekt hij
       de kop naar zich toe zodat er geen gat valt. */
    margin-top: calc(-.45 * clamp(1.8rem, 4vw, 3.2rem));
    margin-right: calc(-.6 * clamp(1.8rem, 4vw, 3.2rem));
    margin-bottom: -.4rem;
    margin-left: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vertrek__mascotte { animation: none; }
}

/* ---- de mascotte in de kop ----
   Rechts, groot, en met zijn voeten over de looplijn onderaan heen. Hij staat
   boven de muur en de scrim maar onder de tekst, zodat de kop altijd leesbaar
   blijft — dezelfde afspraak als in de vertrekken. */
.hero__held {
  position: absolute;
  /* Verder naar binnen en groter dan de eerste versie: hij stond half buiten
     beeld en dat is zonde van een render van deze kwaliteit. Hij mag over de
     tekst heen vallen — de kop staat op z-index 10 en blijft dus altijd boven
     hem, net als in de vertrekken. */
  right: clamp(-1.5rem, 1vw, 3rem);
  bottom: -3%;
  z-index: 7;
  width: clamp(320px, 47vw, 780px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
  animation: zweefheld 9s ease-in-out infinite;
}

@keyframes zweefheld {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-10px, -20px, 0) rotate(-1.8deg); }
}

/* Op een tablet blijft hij staan, maar kleiner en verder naar onder — daar is
   ruimte zat en zonder hem is de kop leeg. Pas op een telefoon verdwijnt hij:
   daar loopt de tekst tot de rand en zou hij eronder liggen. */
@media (max-width: 1100px) {
  .hero__held {
    width: clamp(220px, 34vw, 340px);
    right: -3rem;
    bottom: -2%;
    opacity: .92;
  }
}
/* Op een telefoon stond hij op display:none omdat de tekst tot de rand loopt en
   hij eronder zou liggen. Een kop zonder held is echter een halve kop — dus in
   plaats van hem weg te halen, krijgt de kop er ruimte voor: hero__inhoud houdt
   onderaan een strook vrij en hij gaat daarin staan, rechts, met zijn voeten
   net boven de lopende band. Zo blijft de kop op een telefoon even volwaardig
   als op een scherm. */
@media (max-width: 700px) {
  .hero__inhoud { padding-bottom: min(52vw, 230px); }
  .hero__held {
    width: min(56vw, 240px);
    right: -1rem;
    /* Boven de strook blijven: die is de onderste rij van de kop en dekt hem
       anders af, want zij staat op z-index 10 en hij op 7. */
    bottom: clamp(2.2rem, 7vw, 3.4rem);
    opacity: .96;
  }
}
@media (prefers-reduced-motion: reduce) { .hero__held { animation: none; } }


/* ---- het scherm van de mascotte ----------------------------------------
   De mascotte is één render met de telefoon erin. Deze rechthoek ligt er
   precies op: opgemeten op held-900.webp en uitgedrukt in procenten van dat
   beeld, dus ze klopt op elke maat. De getallen komen uit telefoon.json en
   staan als variabelen op het element zelf — niet hier, want dan zou elke
   bijstelling een wijziging aan het stijlblad zijn. */

.hero__held {
  /* De mascotte is van een <img> een doosje geworden, zodat er iets bovenop
     kan liggen dat met hem meezweeft. */
  display: block;
  overflow: visible;
}
.hero__held img.hero__held__beeld {
  display: block;
  width: 100%;
  height: auto;
}

.tel {
  position: absolute;
  left: var(--tel-x);
  top: var(--tel-y);
  width: var(--tel-b);
  height: var(--tel-h);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--tel-hoek));
  /* De ronding staat in procent van de breedte, en de verticale helft is met
     dezelfde verhouding meegerekend — anders worden het ovalen zodra het beeld
     groter of kleiner wordt. */
  border-radius: calc(var(--tel-rond) * 1%) / calc(var(--tel-rond) * .44%);
  overflow: hidden;
  /* Geen masker: de vingers van het beest liggen naast de telefoon en niet over
     het scherm. Wel een randje binnenin, anders ligt de rechthoek te plat op
     de render en ziet ge dat er iets overheen geplakt is. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 9px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.tel__doos { position: absolute; inset: 0; display: block; background: var(--nacht-2); }

/* De afdrukken zijn met de statusbalk en de thuisbalk erop genomen, allebei
   wit. Op een donker scherm zijn dat twee strepen die er niet horen, dus het
   beeld hangt aan de boven- en onderkant buiten de doos en wordt daar
   afgesneden. Hoeveel, staat in telefoon.json. */
.tel__beeld {
  position: absolute;
  left: 0;
  /* De hoogte staat er voluit bij. Een absoluut geplaatste <img> met enkel een
     boven- en onderwaarde valt terug op haar eigen afmetingen — 480 bij 1040 —
     en dan staat er een uitvergrote hoek op het scherm in plaats van het hele
     beeld. Dat is hier één keer gebeurd; vandaar deze regel en deze uitleg. */
  top: calc(var(--tel-boven, 6.4%) * -1);
  width: 100%;
  height: calc(100% + var(--tel-boven, 6.4%) + var(--tel-onder, 5.2%));
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--tel-overgang, 700ms) ease,
              transform var(--tel-overgang, 700ms) cubic-bezier(.2,.8,.3,1);
}
.tel__beeld[data-aan] { opacity: 1; transform: none; }
.tel__beeld[data-weg] { opacity: 0; }

/* De effecten. Elk effect zegt alleen waar een beeld vandaan komt en waar het
   naartoe gaat; de speler weet daar niets van en telt enkel door. */
.tel[data-effect="schuiven"] .tel__beeld            { transform: translateY(18%); }
.tel[data-effect="schuiven"] .tel__beeld[data-weg]  { transform: translateY(-18%); }
.tel[data-effect="zoomen"] .tel__beeld              { transform: scale(1.14); }
.tel[data-effect="zoomen"] .tel__beeld[data-weg]    { transform: scale(.92); }
.tel[data-effect="omslaan"] .tel__doos              { perspective: 460px; }
.tel[data-effect="omslaan"] .tel__beeld             { transform: rotateY(38deg); }
.tel[data-effect="omslaan"] .tel__beeld[data-weg]   { transform: rotateY(-38deg); }

/* De zwarte pil bovenaan. Die zat in de render en verdwijnt onder de afdruk;
   zonder hem is het geen telefoon meer maar een schermpje. */
.tel__eiland {
  position: absolute;
  left: 50%;
  top: var(--tel-eiland-y, 3.6%);
  width: var(--tel-eiland-b, 32%);
  height: var(--tel-eiland-h, 5.6%);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #07060c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* De glans over het glas. Zonder dit ligt het scherm plat op de render en ziet
   ge meteen dat er iets overheen geplakt is. */
.tel__glans {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(128deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 26%,
                    rgba(255,255,255,0) 46%),
    linear-gradient(200deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  /* Bewust licht gehouden: de afdrukken staan nu in hun eigen kleuren en een
     zware glans trok die weer naar violet. Een glimp op het glas volstaat. */
  mix-blend-mode: screen;
}

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


/* ---- de gloed rond de telefoon ----------------------------------------
   De kleur komt van het scherm dat op dat moment speelt: elke afdruk draagt
   haar overheersende kleur mee als `data-kleur`, één keer uitgerekend door
   tools/schermkleuren.mjs. De speler zet ze op de wikkel en het verloop
   hieronder doet de rest.

   Waarom een eigen element en geen schaduw op .tel: die doos heeft
   `overflow: hidden` voor de afdrukken, en een gloed hoort er juist buiten te
   vallen. Dit ligt eronder, iets groter, en wordt vervaagd. */

.tel-gloed {
  position: absolute;
  left: var(--tel-x);
  top: var(--tel-y);
  width: var(--tel-b);
  height: var(--tel-h);
  transform: translate(-50%, -50%) rotate(var(--tel-hoek)) scale(1.06);
  border-radius: calc(var(--tel-rond) * 1%) / calc(var(--tel-rond) * .44%);
  background: var(--tel-kleur, #a24bff);
  filter: blur(26px);
  opacity: var(--tel-gloed, .62);
  z-index: -1;
  pointer-events: none;
  transition: background-color 700ms ease, opacity 700ms ease;
  animation: telflikker 3.7s ease-in-out infinite;
  will-change: opacity;
}

/* De flikkering. Niet regelmatig: twee ongelijke pieken per ronde, zodat het
   op een scherm lijkt dat leeft en niet op een lampje dat pulseert. Het is
   bewust klein gehouden — een gloed die te hard knippert leest als een fout. */
@keyframes telflikker {
  0%, 100% { opacity: var(--tel-gloed, .62); }
  18%      { opacity: calc(var(--tel-gloed, .62) * 1.22); }
  31%      { opacity: calc(var(--tel-gloed, .62) * .84); }
  47%      { opacity: calc(var(--tel-gloed, .62) * 1.1); }
  63%      { opacity: calc(var(--tel-gloed, .62) * .9); }
  81%      { opacity: calc(var(--tel-gloed, .62) * 1.16); }
}

/* Een tweede, wijdere halo. Die geeft de afstand: zonder hem lijkt de gloed
   op de telefoon geplakt, met hem straalt hij de hero in. */
.tel-gloed::after {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, currentColor, transparent 72%);
  color: inherit;
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  .tel-gloed { animation: none; }
}

/* ═══════════════════════════════════════════════════════════ de prijzen ══
 *
 * Vier kaarten, elk in zijn eigen kleur op dertig procent met witte tekst.
 *
 * Waarom een kleur per kaart en niet één huisstijl over alle vier: bij vier
 * gelijke kaarten leest niemand het verschil, hij scant de bedragen en kiest de
 * goedkoopste. Met vier kleuren wordt het vier soorten aanbod, en dan leest hij
 * eerst waarvoor ze dienen.
 *
 * De derde is de bedoeling en die is voller ingekleurd. Dat is geen truc maar
 * eerlijkheid: het is de kaart die voor de meeste winkels klopt, en hem
 * verstoppen tussen drie gelijke helpt niemand.
 */

.prijzen__uitleg { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.prijzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: stretch;
}

.prijskaart {
  --vlak: color-mix(in oklab, var(--eigen) 30%, transparent);

  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border-radius: 1.25rem;
  background: var(--vlak);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--eigen) 55%, transparent);
  color: #fff;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
}

.prijskaart:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--eigen) 75%, transparent),
    0 10px 30px color-mix(in oklab, var(--eigen) 35%, transparent);
}

/* De uitgelichte: dezelfde kleur, dieper ingezet, en een rand die aanstaat. */
.prijskaart--uit {
  --vlak: color-mix(in oklab, var(--eigen) 42%, transparent);
  box-shadow:
    inset 0 0 0 2px var(--eigen),
    0 8px 26px color-mix(in oklab, var(--eigen) 30%, transparent);
}

.prijskaart__soort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

.prijskaart__vlag {
  margin-left: auto;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: #fff;
  color: #12081c;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.prijskaart__naam { margin: 0.1rem 0 0; font-size: 1.5rem; line-height: 1.1; }

.prijskaart__prijs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.2rem 0 0.1rem;
}

.prijskaart__prijs b { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.prijskaart__prijs span { font-size: 0.82rem; color: rgb(255 255 255 / 0.75); }
.prijskaart__vanaf { align-self: center; }

.prijskaart__voor {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  color: rgb(255 255 255 / 0.85);
  text-wrap: pretty;
}

.prijskaart__lijst {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}

.prijskaart__lijst li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.92);
}

/* Een vinkje getekend met randen: geen extra bestand, geen lettertype, en het
   schaalt mee met de tekst eromheen. */
.prijskaart__lijst li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.34em;
  width: 0.34rem;
  height: 0.62rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
  opacity: 0.9;
}

.prijskaart .knop { margin-top: auto; text-align: center; }

.prijzen__voet {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 46rem;
  font-size: 0.86rem;
  color: rgb(255 255 255 / 0.6);
}

/* Op een telefoon staan ze onder elkaar en hoort de uitgelichte niet meer uit
   te steken: daar is hij gewoon de derde die je tegenkomt. */
@media (max-width: 560px) {
  .prijskaart:hover { transform: none; }
}


/* ===================================================== het menu bij de apps */

/*
   De rij bovenaan de appsectie: één regel per app, rechtstreeks naar haar
   eigen site. Op een breed scherm staan ze naast elkaar, op een telefoon
   vullen ze twee kolommen - en dat is precies waar het om ging: alles in één
   blik in plaats van zes affiches diep scrollen.
*/
.appmenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .55rem;
  margin-top: 2rem;
}
.appmenu__link {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(243,238,255,.05), rgba(243,238,255,.012));
  transition: border-color .2s ease, transform .2s cubic-bezier(.2,.8,.3,1), background .2s ease;
}
.appmenu__link b { font-size: .98rem; letter-spacing: -.01em; }
.appmenu__link i {
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
.appmenu__link:hover,
.appmenu__link:focus-visible {
  border-color: color-mix(in srgb, var(--eigen, #ff2e88) 60%, transparent);
  transform: translateY(-2px);
}
.appmenu__link--alles {
  border-style: dashed;
}

/*
   Op een telefoon schuift de rij opzij in plaats van elf rijen hoog te worden.

   Dit menu staat er om te vermijden dat iemand een halve meter moet scrollen
   voor hij bij een app is. Op 390 pixels deed het precies dat zelf: elf blokken
   over de volle breedte, samen zowat negenhonderd pixels, vóór de eerste kaart
   in beeld kwam. Een rij die schuift, staat in één blik en kost twee regels.
*/
@media (max-width: 720px) {
  .appmenu {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .35rem;
  }
  .appmenu::-webkit-scrollbar { display: none; }
  .appmenu__link {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* De regel onderaan een kaart die zegt waar hij naartoe gaat. */
.app__naar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--eigen, #ff2e88);
}
.app__naar svg { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.app:hover .app__naar svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .appmenu__link, .app__naar svg { transition: none; }
}

/* ─────────────────────────────────────────────────── de rekentool ──
 *
 * Drie balken die met de schuif meebewegen. De onze staat er tussen en niet
 * bovenaan: wie zijn eigen balk altijd eerst zet, wordt niet geloofd.
 */

.vgl {
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
}

.vgl__titel { margin: 0.4rem 0 1.2rem; font-size: clamp(1.2rem, 2.6vw, 1.6rem); }

.vgl__knoppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.6rem;
  margin-bottom: 1.6rem;
}

.vgl__veld { display: grid; gap: 0.45rem; }
.vgl__veld > span { font-size: 0.86rem; color: rgb(255 255 255 / 0.72); }
.vgl__veld b { color: #fff; font-variant-numeric: tabular-nums; }

/* De schuif zelf. Groot genoeg voor een duim, want dit is precies het soort
   ding dat iemand op zijn telefoon uitprobeert. */
.vgl__veld input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  outline: none;
}

.vgl__veld input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #ff2e88;
  box-shadow: 0 2px 10px rgb(255 46 136 / 0.5);
  cursor: pointer;
}

.vgl__veld input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #ff2e88;
  cursor: pointer;
}

.vgl__veld input[type="range"]:focus-visible { outline: 3px solid #ff2e88; outline-offset: 4px; }

.vgl__balken { display: grid; gap: 0.95rem; }

.vgl__rij { display: grid; gap: 0.35rem; }

.vgl__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.vgl__naam { font-weight: 600; }
.vgl__bedrag { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vgl__bedrag small { margin-left: 0.4rem; font-size: 0.68rem; font-weight: 400; color: rgb(255 255 255 / 0.55); }

.vgl__spoor { height: 12px; border-radius: 999px; background: rgb(255 255 255 / 0.07); overflow: hidden; }

.vgl__balk {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--eigen);
  transition: width 260ms cubic-bezier(.22, 1, .36, 1);
}

.vgl__uitleg { margin: 0; font-size: 0.78rem; color: rgb(255 255 255 / 0.55); }

/* De onze krijgt een merkteken en geen voorkeursbehandeling in de volgorde. */
.vgl__rij--ons .vgl__naam::after {
  content: 'wij';
  margin-left: 0.5rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--eigen);
  color: #06251f;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vgl__besluit {
  margin: 1.3rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 0.05);
  font-size: 0.95rem;
  line-height: 1.5;
}

.vgl__besluit--wint {
  background: color-mix(in oklab, #21c2a4 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #21c2a4 45%, transparent);
}

.vgl__aannames {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.45);
}

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


/* ====================================================== de kaart, opnieuw */

/*
   De kaart toonde een affiche en één regel tekst. Dat leest als een
   inventaris: je weet dat de app bestaat en verder niets. Nu staat erin wat er
   over die app te zeggen valt - zijn eigen belofte, zijn eigen punten, echte
   schermen, en een knop die ergens naartoe gaat.

   Eén kaart per rij op een telefoon, twee op een breed scherm. Breder dan dat
   worden de schermen te klein om iets aan te hebben.
*/
.apps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/*
   Elke kaart zo hoog als haar eigen inhoud, en niet zo hoog als haar buur.
   Sinds een kaart zonder schermen ook geen beeld meer krijgt, staan er korte
   en lange kaarten naast elkaar. Een raster rekt ze standaard allebei tot de
   hoogte van de rij, en dan hangt er onder de korte een handbreedte leegte die
   er als een fout uitziet.
*/
#apps .apps { align-items: start; }

/*
   De schermenrij. Schuift opzij op een telefoon, want vier schermen naast
   elkaar op vierhonderd pixels is vier keer niets.

   Twee schermen passen er helemaal in, en van het derde zie je een rand. Dat
   is met opzet: een rij die precies uitkomt ziet eruit alsof er niets meer
   volgt. De vervaging rechts zegt dat er wel iets volgt, zodat een half beeld
   leest als "schuif verder" en niet als "hier is iets kapot".
*/
.app__schermen {
  position: relative;
  display: flex;
  gap: .6rem;
  padding: 1.1rem 1.1rem .2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.25) 97%, transparent 100%);
          mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.25) 97%, transparent 100%);
}
.app__schermen::-webkit-scrollbar { display: none; }
.app__schermen img {
  flex: 0 0 auto;
  width: 44%;
  max-width: 200px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--lijn);
  background: #0b0710;
  scroll-snap-align: start;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}

.app__tagline {
  margin: .5rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--eigen, #ff2e88);
  letter-spacing: -.01em;
}
.app__kort { margin: .4rem 0 0; color: var(--ink-zacht); font-size: .93rem; }

.app__punten {
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
}
.app__punten li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  color: var(--ink);
}
.app__punten li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--eigen, #ff2e88);
}

.app__acties {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem;
}
.knop--klein { padding: .55rem 1rem; font-size: .9rem; }

/* De staat komt nu bovenaan de tekst te staan, als etiket. */
.app__tekst .app__staat { margin-bottom: .5rem; }

/* De hele kaart is geen link meer: de knoppen zijn dat. Dus ook geen
   zweefeffect dat een klik belooft die er niet is. */
.app:hover { transform: none; }


/* ============================================ de band voor het tweede product */

/*
   Eén blok dat een ander product aankondigt, aan het einde van de sectie waar
   iemand net doorheen gescrold is. Blauw en niet roze: dat is de kleur die het
   webshop-hoofdstuk al draagt, dus de bezoeker herkent verderop dat het over
   hetzelfde gaat.
*/
.band {
  margin-top: 2.6rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(70,130,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(243,238,255,.05), rgba(243,238,255,.012));
  display: grid;
  gap: 1.2rem;
}
.band--blauw { border-color: color-mix(in srgb, var(--blauw, #4a8dff) 40%, transparent); }
.band h3 {
  margin: .5rem 0 .5rem;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.band p { margin: 0; color: var(--ink-zacht); max-width: 62ch; }
.band__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (min-width: 860px) {
  .band {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1.9rem 2rem;
  }
  .band__knoppen { flex-direction: column; }
}


/* De vaste kleuren van de prijskaarten. Stonden als style-kenmerk in de HTML,
   en dat blokkeert de Content-Security-Policy van deze server. */
.prijskaart--paars { --eigen: #7c5cff; }
.prijskaart--groen { --eigen: #21c2a4; }
.prijskaart--roze  { --eigen: #ff2e88; }
.prijskaart--oker  { --eigen: #f7a83b; }


/* ── de twee groepen in het prijzenblok ─────────────────────────────────
 *
 * De vier kaarten stonden in één raster, en op een telefoon zie je er dan
 * één tegelijk. Wie de kaart van negenendertig euro als eerste in beeld
 * kreeg, las die als de prijs van een app, want daar ging de hele pagina
 * erboven over. Deze twee koppen staan er om dat te breken: ze zeggen
 * voor elke groep in gewone woorden waar het over gaat, en ze staan zo
 * dicht bij de kaarten dat je ze niet mist.
 */

.prijsgroep {
  margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(0.9rem, 2vw, 1.2rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.prijsgroep:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.prijsgroep__kop {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.prijsgroep__uitleg {
  margin: 0;
  max-width: 42rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.7);
}

.prijsgroep__uitleg b { color: rgb(255 255 255 / 0.95); font-weight: 600; }

/* De groep op maat heeft één kaart. Die mag breder staan dan een kolom van
   het raster, anders oogt ze als een restje naast lege ruimte. */
.prijzen--maat { grid-template-columns: minmax(0, 34rem); }

.prijskaart--breed .prijskaart__lijst li:last-child {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  list-style: none;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.92rem;
}

.prijskaart--breed .prijskaart__lijst li:last-child::before { content: none; }