/* ==========================================================================
   Tougather — de website
   Kleuren uit het gloei-karakter: marineblauwe kern, kobalt als signaal.
   Eén lettertype voor alles: Mona Sans, ook voor code. Titels, tags, labels
   en meta-regels in kleine letters; lopende tekst en knoppen gewoon. Tags in
   grijs met bolletjes ertussen, secties als afgeronde blokken met een witte
   kaart erop, elk blok een eigen palet. Geen hoofdletterteksten.
   Bewust alleen een lichte, witte versie.

   Opbouw: tokens en basis → gedeelde vormen → hulpjes voor de indeling →
   hero, blokken, paginakop, tegels, pixelbol → onderdelen (balk, schermen,
   pinnen, lichtbak, replica's, toolkaart, keuzes, pillen, kopieerchip,
   tellers, luie karakters, bolletjes) → footer → beweging.
   Wat alleen op één pagina hoort staat in pages/<pagina>.css.
   ========================================================================== */

/* Mona Sans staat in de repo (public/fonts/, SIL OFL 1.1), niet op een CDN:
   geen verzoek naar een ander domein voor de eerste tekst, en de pagina's
   kunnen het Latijnse deel vooraf laden (<link rel="preload">). Dezelfde
   bestanden als fonts.googleapis.com levert, variabel van 400 tot 600. */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/mona-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/mona-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #ffffff;
  --panel: #f4f5f7;
  --surface: #ffffff;
  --ink: #0c1330;
  --ink-2: #4b536e;
  --ink-3: #6b7189;
  --line: rgba(12, 19, 48, .09);
  --line-2: rgba(12, 19, 48, .16);
  --signal: #1f4fd6;
  --core: #0d2580;
  --red: #b24c42;                 /* het rood van de tool (#c0564b), iets donkerder: ≥ 4.5:1 als tekst op elke tint */
  --btn: #0c1330;
  --btn-ink: #ffffff;
  --glass: #ffffff;
  --shadow-sm: 0 1px 2px rgba(12, 19, 48, .06), 0 6px 18px -6px rgba(12, 19, 48, .12);
  --shadow-card: 0 1px 2px rgba(12, 19, 48, .05), 0 14px 34px -16px rgba(12, 19, 48, .18);

  --sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --mono: var(--sans);
  --tag: #75757f;                 /* grijs voor tags en labels, met genoeg contrast op wit */

  /* De maatlijn. Elk groot blok is even breed als de hero: de pagina min
     --frame aan elke kant. Binnen elk blok begint alles op dezelfde lijn,
     --inset van de rand, en de inhoud gebruikt de hele breedte tot de
     lijn aan de andere kant: geen smalle kolom in het midden van een breed
     scherm. Drie stralen, twee afstanden, verder niets. */
  --frame: 10px;
  --gutter: clamp(16px, 7.5vw - 10px, 90px);
  --inset: var(--gutter);
  --space: clamp(36px, 4.4vw, 64px);    /* tussen de kop en de inhoud, en onderin een blok */
  --gap: clamp(12px, 1.4vw, 18px);      /* tussen kaarten */
  --r-block: clamp(24px, 2.4vw, 34px);  /* hero, blokken, footer */
  --r-card: clamp(18px, 1.7vw, 24px);   /* kaarten in een blok */
  --radius: var(--r-block);
  color-scheme: light;
}

/* De grijzen hierboven zijn de huisstijl (packages/core/src/uitvoer/huisstijl.js,
   voor documenten op wit). Op de site staat grijze tekst ook op de getinte
   blokken (--tint), en daar halen ze net geen 4.5:1 (4.0 tot 4.5). Voor de
   pagina's dus donkerder, met marge (≥ 5.3:1 op elke tint, want bijschriften
   staan ook op een grijs vlak over een tint); website.test.js rekent het na. */
body {
  --ink-3: #5c627a;
  --tag: #62626b;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  scroll-padding-top: 84px;       /* de vaste balk bovenin dekt een anker niet af */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, canvas { display: block; max-width: 100%; }
/* <picture> kiest alleen het bestand; de indeling hoort bij de <img> erin. */
picture { display: contents; }
code, pre, kbd, samp { font-family: var(--sans); font-variant-numeric: tabular-nums; }
::selection { background: rgba(31, 79, 214, .24); background: color-mix(in srgb, var(--signal) 24%, transparent); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- gedeeld ---------- */

.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* elke sectie is een blok: afgerond, licht getint, met een witte kaart bovenop.
   clip in plaats van hidden: dan blijft position: sticky binnen een blok werken. */
.section { padding: var(--frame) var(--frame) 0; }
.section > .wrap {
  max-width: none;
  padding: 0 0 var(--space);
  border-radius: var(--r-block);
  background: var(--tint, #f4f5f7);
  overflow: hidden;
  overflow: clip;
}
.section > .wrap > :not(.sec-head) {
  width: auto;
  max-width: none;
  margin-inline: var(--inset);
}
.sec-head {
  margin-bottom: var(--space);
  padding: clamp(22px, 2.6vw, 34px) var(--inset) clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-block);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.sec-head h2 { margin-top: clamp(40px, 6vw, 96px); }
/* Titel links, uitleg rechts vanaf de middenlijn: dezelfde lijn als de
   tweede helft van een .split eronder. */
.sec-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px var(--gap);
}
@media (min-width: 900px) {
  .sec-head-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.eyebrow {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.3;
  color: var(--tag);
}
/* Weinig woorden, dus groot: een sectietitel is kort en draagt het blok. */
h2 {
  margin: 18px 0 0;
  max-width: 14ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 104px);
  line-height: .96;
  letter-spacing: -.04em;
  word-spacing: .06em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: normal; }
.sec-head-split > div { min-width: 0; }
.sec-aside {
  max-width: 40ch;
  margin: 0 0 6px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.6;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  font: 500 15px/1 var(--sans);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-ink { background: var(--btn); color: var(--btn-ink); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(12, 19, 48, .5); }
.btn-surface {
  height: 42px;
  padding: 0 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.btn-surface:hover { transform: translateY(-1px); }
.btn-line {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn-line:hover { background: var(--surface); }
.arr { display: inline-block; transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Het echte logo (public/logo.svg), één keer als <symbol id="tg-logo"> bovenin
   de pagina en daarna met <use>: in de navigatie, de balk en de footer. Het
   pad vult met currentColor, dus het logo neemt de inktkleur van zijn plek. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.brand-logo { display: block; width: auto; height: 25px; aspect-ratio: 1460 / 257; }
.brand-sm .brand-logo { height: 21px; }

/* Het karakter als klein bolletje. Een agent krijgt zijn kleur zoals in de
   tool: het blauwe bolletje met hue-rotate, via --hue (bijv. --hue: 110deg). */
.orb {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --s: 52px;
  gap: calc(var(--s) * .12);
  width: var(--s);
  height: var(--s);
  padding: 0 calc(var(--s) * .1) calc(var(--s) * .14) 0;
  border-radius: 50%;
  --o0: #0d2580;
  --o1: #1b61cf;
  --o2: #6ea7ec;
  background: radial-gradient(closest-side, var(--o0) 0%, var(--o0) 40%, var(--o1) 68%, var(--o2) 88%, transparent 100%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--o0) 82%, #000) 0%, var(--o0) 40%, var(--o1) 68%, var(--o2) 88%, transparent 100%);
  filter: hue-rotate(var(--hue, 0deg));
}
.orb i {
  display: block;
  width: calc(var(--s) * .15);
  height: calc(var(--s) * .26);
  border-radius: 99px;
  background: #fff;
  transform: rotate(11deg);
  translate: var(--ex, 0) var(--ey, 0);
  transition: translate .25s ease-out;
  animation: blink 6s var(--blink, 0s) infinite;
}
/* De orchestrator (team lead) op de kaart: in de tool standaard de regenboog
   met een kroon (ORCHESTRATOR_STANDAARD in public/app/src/uiterlijk.js), dus
   geen hue-rotate maar zijn eigen kleuren. De kroon is wit, net als de ogen. */
.orb--lead {
  background:
    radial-gradient(closest-side, rgb(255 255 255 / .28) 0%, transparent 55%),
    conic-gradient(from 200deg, #e03131, #f08c00, #ffd43b, #2f9e44, #1971c2, #9c36b5, #e03131);
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask: radial-gradient(closest-side, #000 72%, transparent 100%);
  filter: none;
}
.orb--lead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 17%;
  width: calc(var(--s) * .3);
  height: calc(var(--s) * .16);
  translate: -55% 0;
  background: #fff;
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%);
}
@keyframes blink {
  0%, 93%, 100% { transform: rotate(11deg) scaleY(1); }
  95.5% { transform: rotate(11deg) scaleY(.12); }
}
.orb-name {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink-3);
  text-transform: lowercase;
}
/* de rol klein onder de eigen naam, zoals op de kaart van de tool */
.orb-role {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink-3);
  text-transform: lowercase;
}
/* springt 6px op als je over het ding gaat waar hij in staat */
.orb--hop { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
:hover > .orb--hop,
:focus-visible > .orb--hop { transform: translateY(-6px); }

.round-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s ease;
}
.round-btn:hover { transform: translateY(-1px); }
.round-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- hulpjes voor de indeling ---------- */

/* Twee gelijke helften vanaf 900px, daaronder onder elkaar in bronvolgorde.
   Altijd helften: de middenlijn van de pagina is ook die van de kop erboven
   en van een raster van twee, vier of zes kaarten. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--flip > :first-child { grid-column: 2; grid-row: 1; }
}

/* een grijze tagregel; als lijst met bolletjes ertussen */
.tags {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--tag);
}
ul.tags { padding: 0; list-style: none; }
ul.tags li { display: inline; }
ul.tags li + li::before { content: " • "; }

/* de link onderaan een kopkaart, naar de volgende stap */
.sec-link {
  display: inline;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.sec-link:hover { text-decoration: underline; }
.sec-link .arr { margin-left: .1em; }
.sec-link:hover .arr { transform: translateX(3px); }
.sec-aside .sec-link { white-space: nowrap; }

/* kleine lettertjes */
.note {
  max-width: 64ch;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
.note a { color: var(--ink); }

/* ---------- kaarten met uitleg: een raster dat zelf zijn kolommen kiest ---------- */

.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap);
}
.fx-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.fx-card h3 { margin: 0; font: 500 clamp(20px, 1.8vw, 26px)/1.15 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere; }
.fx-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.fx-card .fx-small { color: var(--ink-3); font-size: 14px; }
.fx-kicker { margin: 0; color: var(--tag); font-size: 14px; }
.fx-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-list li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.fx-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink)); }
.fx-list b { color: var(--ink); font-weight: 600; }
.fx-stack { display: grid; gap: var(--gap); align-content: start; }
.fx-media { display: grid; gap: var(--gap); align-content: start; }
.fx-media .shot { max-width: var(--max, none); justify-self: center; width: 100%; }

/* ---------- toegankelijkheid: overslaan ---------- */

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform .2s ease;
}
.skip:focus,
.skip:focus-visible { transform: none; }

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

.hero { padding: var(--frame); }
.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2 * var(--frame));
  height: calc(100svh - 2 * var(--frame));
  min-height: 620px;
  max-height: 1080px;
  border-radius: var(--radius);
  background: var(--panel);
}
/* boven het gezicht van het karakter: klikbaar (main.js zet .is-poke) */
.hero-panel.is-poke { cursor: pointer; }
.hero-char {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  z-index: -1;
  transition: filter .8s ease;    /* kleurt mee met de agent die praat */
}

.nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px var(--inset);
}
.nav .brand { justify-self: start; }
.nav > .btn { justify-self: end; }
.nav-links {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.nav-links a {
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink-2);
  text-decoration: none;
  font: 500 14px/1 var(--sans);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--ground); }
.nav-links a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); }

.hero-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--inset) clamp(56px, 9vh, 112px);
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(46px, 7.6vw, 124px);
  line-height: .95;
  letter-spacing: -.045em;
  word-spacing: .05em;
  color: var(--ink);
}
.lead {
  max-width: 36ch;
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.55;
  color: var(--ink-2);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 4vh, 40px);
}

/* tekstballon bij een karakter; .is-on laat hem zien. Werkt in elke
   ouder met een positie. */
.bubble {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: 264px;
  margin: 0;
  padding: 11px 14px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(12, 19, 48, .08), 0 18px 36px -14px rgba(12, 19, 48, .3);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.bubble.is-on { opacity: 1; transform: none; }
.bubble-meta {
  display: block;
  margin-bottom: 5px;
  font: 12px/1 var(--mono);
  color: var(--ink-3);
}
.bubble-text { display: block; font-size: 14.5px; line-height: 1.4; text-wrap: balance; }

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { grid-column: 1 / -1; order: 3; justify-self: start; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 480px) {
  .nav-links { justify-self: stretch; justify-content: space-between; gap: 0; padding: 3px; }
  .nav-links a { padding: 9px 6px; font-size: 13px; }
}
@media (max-width: 374px) {
  .nav-links a { padding: 8px 4px; font-size: 13px; }
}
@media (max-width: 760px) {
  .hero-copy { justify-content: flex-start; padding-top: 7vh; }
}
@media (max-width: 559px) {
  .hero .bubble { display: none; }
}

/* ---------- blokken onder de hero ---------- */

.blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frame);
  padding: 0 var(--frame);
}
.block {
  --c: #ffb42e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  height: clamp(460px, 48vw, 680px);
  border-radius: var(--r-block);
  background: #fdf5e6;
  color: var(--ink);
  text-decoration: none;
}
.block-roze { --c: #ff5c9a; background: #fdf0f5; }
.block-mint { --c: #1fc48c; background: #ecfaf3; }
.block-lila { --c: #8b6cff; background: #f2effe; }
.block-koraal { --c: #ff6a4a; background: #fff1ec; }
.block-aqua { --c: #1bb5e3; background: #ebf8fd; }
.block-limoen { --c: #7cc72c; background: #f3fae6; }
.block-blauw { --c: #3b6fe0; background: #eef3fd; }
.block-char {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  z-index: -1;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.block:hover .block-char { transform: translateY(-10px) scale(1.03); }
.block-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  min-height: 44%;
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-block);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.block:hover .block-card { transform: translateY(-4px); }
.block-tags { font-size: clamp(15px, 1.4vw, 19px); color: var(--tag); }
.block-title {
  margin-top: auto;
  padding-top: 40px;
  font: 500 clamp(38px, 4.6vw, 68px)/1 var(--sans);
  letter-spacing: -.04em;
}
.block-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: clamp(16px, 1.5vw, 20px);
}
.block-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.block-go { margin-left: auto; color: var(--tag); transition: color .2s ease; }
.block:hover .block-go { color: var(--ink); }
.block:focus-visible { outline-offset: -4px; }
@media (max-width: 760px) {
  .blocks { grid-template-columns: minmax(0, 1fr); }
  .block { height: 480px; }
}

/* ---------- paletten: blokken, tegels en paginakoppen ---------- */

/* getinte achtergrond, bolletje en glow */
.c-blauw  { --tint: #eef3fd; --c: #3b6fe0; --o0: #0d2580; --o1: #1b61cf; --o2: #9ec3f2; }
.c-zon    { --tint: #fdf5e6; --c: #ffb42e; --o0: #ff8a1f; --o1: #ffb42e; --o2: #ffe3a4; }
.c-roze   { --tint: #fdf0f5; --c: #ff5c9a; --o0: #ff3f88; --o1: #ff8bb7; --o2: #ffd6e7; }
.c-mint   { --tint: #ecfaf3; --c: #1fc48c; --o0: #0fb57e; --o1: #4fd6a4; --o2: #c6f3e1; }
.c-lila   { --tint: #f2effe; --c: #8b6cff; --o0: #6a4cff; --o1: #a08bff; --o2: #e2dbff; }
.c-koraal { --tint: #fff1ec; --c: #ff6a4a; --o0: #ff4d2e; --o1: #ff8a70; --o2: #ffd8cc; }
.c-aqua   { --tint: #ebf8fd; --c: #1bb5e3; --o0: #0aa5d8; --o1: #4cc9ee; --o2: #c9eefb; }
.c-limoen { --tint: #f3fae6; --c: #7cc72c; --o0: #5fb31a; --o1: #9fd84a; --o2: #e1f5c2; }
.section[class*="c-"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: .08em;
}

/* ---------- paginakop: groot blok, witte kaart bovenop, karakter eronder ---------- */

.page-hero { padding: var(--frame) var(--frame) 0; }
.page-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(640px, 94vh, 1000px);
  border-radius: var(--r-block);
  background: var(--tint);
}
.page-char {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  z-index: -1;
}
.page-card {
  padding: 0 var(--inset) clamp(24px, 3vw, 38px);
  border-radius: var(--r-block);
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 19, 48, .05), 0 18px 40px -18px rgba(12, 19, 48, .2);
}
.page-card .nav { padding-inline: 0; }
.page-card .nav-links { background: var(--panel); box-shadow: none; }
.page-card .nav-links a:hover { background: #fff; }
.page-tags {
  margin: clamp(36px, 7vh, 88px) 0 0;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--tag);
}
.page-title {
  margin: 12px 0 0;
  font: 500 clamp(64px, 12vw, 190px)/.88 var(--sans);
  letter-spacing: -.06em;
}
.page-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
  margin-top: clamp(20px, 3vw, 34px);
}
.page-lead {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}
.page-meta { margin: 0; display: flex; align-items: center; gap: 9px; font-size: clamp(16px, 1.5vw, 20px); }

/* ---------- tegels: kleine blokken met een zachte glow en oogjes ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}
.tiles-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 470px;
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: 0 0 0 1px rgba(12, 19, 48, .04);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(12, 19, 48, .04), 0 26px 50px -26px rgba(12, 19, 48, .35); }
.tile-card {
  position: relative;
  z-index: 1;
  padding: 22px 24px 20px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 19, 48, .05), 0 12px 28px -16px rgba(12, 19, 48, .2);
}
.tile-tags { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tag); }
.tile-title { margin: 34px 0 0; font: 500 clamp(30px, 2.6vw, 40px)/1 var(--sans); letter-spacing: -.04em; }
.tile-desc { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.tile-meta { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 16px; }
.tile-meta .block-dot { background: var(--c); }
.glow {
  position: absolute;
  left: 50%;
  top: calc(100% - 190px);
  width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o0) 0%, var(--o0) 22%, var(--o1) 52%, var(--o2) 78%, transparent 100%);
  /* Bij hover komt hij omhoog met translate (--op), niet met top: top is
     elk beeld de tegel opnieuw opmaken, en het verschuift de inhoud. */
  translate: -50% var(--op, 0px);
  z-index: 0;
  animation: breathe 5.5s ease-in-out infinite;
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
.tile:hover .glow { --op: -24px; }
.glow-eyes {
  position: absolute;
  left: 38%;
  top: 22%;
  display: flex;
  gap: 12px;
  rotate: 11deg;
  translate: var(--ex, 0) var(--ey, 0);
  transition: translate .25s ease-out;
}
.glow-eyes i {
  display: block;
  width: 20px;
  height: 30px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  animation: blink 6s var(--blink, 0s) infinite;
}
@keyframes breathe { 50% { scale: 1.04; } }
@media (max-width: 600px) {
  .tile { min-height: 340px; }
  .glow { width: 300px; top: calc(100% - 140px); }
  .tile:hover .glow { --op: -16px; }
}

/* ---------- probleem & oplossing (over ons): de pixelbol ---------- */

.ps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(560px, 54vw, 720px);
}
.ps-problems {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 48px;
  padding-block: 24px;
}
.problem-tab {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font: 500 15px/1 var(--sans);
}
.problem p {
  max-width: 40ch;
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.ps-visual { position: absolute; inset: 0; pointer-events: none; }
.sphere, .ps-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ps-lines { color: var(--signal); overflow: visible; }
.ps-solution { position: absolute; z-index: 1; color: #fff; }
.ps-solution h3 {
  margin: 0 0 12px;
  font: 500 clamp(26px, 2.4vw, 34px)/1 var(--display);
  letter-spacing: -.035em;
}
.ps-solution p {
  margin: 0;
  color: #fff;
  font-size: 15.5px;
  line-height: 1.55;
  text-shadow: 0 1px 14px rgba(8, 22, 100, .5);
}
@media (max-width: 899px) {
  .ps { display: block; min-height: 0; }
  .ps-problems { gap: 36px; padding: 0; }
  .ps-visual { position: relative; height: min(92vw, 440px); margin-top: 24px; }
  .ps-lines { display: none; }
  .ps-solution { position: static; margin-top: 8px; color: var(--ink); }
  .ps-solution p { color: var(--ink-2); text-shadow: none; }
}

/* ==========================================================================
   Onderdelen die elke pagina kan gebruiken (main.js zet ze aan het werk)
   ========================================================================== */

/* ---------- de balk: schuift erin zodra de kop uit beeld is ---------- */

.bar {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 50;
  width: calc(100% - 2 * var(--frame) - 2 * var(--gutter));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px -16px rgba(12, 19, 48, .32);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 24px));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s linear .45s;
}
.bar.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.bar .brand { justify-self: start; }
.bar-links { display: flex; gap: 2px; }
.bar-links a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  font: 500 14px/1 var(--sans);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.bar-links a:hover { color: var(--ink); background: var(--panel); }
.bar-links a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); }
.bar-cta { justify-self: end; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; }
@media (max-width: 859px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar-links { display: none; }
}

/* ---------- echte schermen uit de tool ---------- */

.shot {
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.shot-media { position: relative; }
.shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: none;
  cursor: zoom-in;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}
.shot-cap {
  margin: 10px 8px 3px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tag);
}
/* een uitsnede: ook in de lichtbak nooit het hele beeld */
.shot--crop img {
  aspect-ratio: var(--ar);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.shot--phone { max-width: 280px; border-radius: 40px; }
.shot--phone .shot-open,
.shot--phone img { border-radius: 30px; }

/* ---------- pinnen op een scherm, met de lijst eronder ---------- */

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 600 13px/1 var(--sans);

  box-shadow: 0 0 0 3px var(--c, var(--signal)), 0 8px 18px -6px rgba(12, 19, 48, .45);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.pin:hover,
.pin.is-on { transform: scale(1.15); box-shadow: 0 0 0 3px var(--c, var(--signal)), 0 0 0 9px transparent, 0 8px 18px -6px rgba(12, 19, 48, .45); box-shadow: 0 0 0 3px var(--c, var(--signal)), 0 0 0 9px color-mix(in srgb, var(--c, var(--signal)) 30%, transparent), 0 8px 18px -6px rgba(12, 19, 48, .45); }
.pin-list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pin;
}
.pin-list li {
  position: relative;
  counter-increment: pin;
  padding: 9px 12px 9px 44px;
  border-radius: 14px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
  cursor: default;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pin-list li::before {
  content: counter(pin);
  position: absolute;
  left: 11px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--c, var(--signal));
  color: var(--ink);
  font: 600 12px/1 var(--sans);
}
.pin-list li.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
@media (max-width: 759px) {
  .pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
}

/* ---------- de lichtbak: één voor de hele pagina ---------- */

.lightbox {
  width: auto;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(12, 19, 48, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 88vh;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.lightbox.is-crop .lightbox-img {
  aspect-ratio: var(--ar);
  width: min(94vw, calc(88vh * (var(--ar))));
  max-height: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.lightbox-cap {
  max-width: 64ch;
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.lightbox-close { position: fixed; top: 14px; right: 14px; }

/* ---------- replica: een stukje tool dat zich gedraagt als de tool ---------- */

.replica { position: relative; min-width: 0; margin: 0; }
.replica-sheet {
  position: relative;
  aspect-ratio: var(--ar, 16 / 10);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 19, 48, .06), 0 18px 44px -20px rgba(12, 19, 48, .28);
}
.replica-ctrl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  gap: 6px;
}
.replica-ctrl .pill {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 13px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(12, 19, 48, .35);
}
.replica-ctrl .pill[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.replica-cap {
  margin: 10px 8px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tag);
}

/* ---------- toolkaart: zoals de tool een toolaanroep laat zien ---------- */

.toolcard {
  display: block;
  margin: 0;
  border-radius: 11px;
  background: rgba(12, 19, 48, .05);
  font-size: 13px;
  overflow: hidden;
}
.toolcard > summary,
div.toolcard {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  list-style: none;
}
.toolcard[hidden] { display: none; }
.toolcard > summary { cursor: pointer; }
.toolcard > summary::-webkit-details-marker { display: none; }
.toolcard-name { font: 500 12.5px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.toolcard-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12px;

  white-space: nowrap;
}
.toolcard[data-state="running"] .toolcard-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: toolpuls 1s ease-in-out infinite;
}
.toolcard[data-state="done"] .toolcard-state { color: var(--ink); }
.toolcard[data-state="failed"] { box-shadow: inset 3px 0 0 var(--red); }
.toolcard[data-state="failed"] .toolcard-state { color: var(--red); font-weight: 600; }
.toolcard-json {
  max-height: 300px;
  margin: 0 12px 12px;
  padding: 10px 11px;
  overflow: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: var(--ink);
  font: 400 12.5px/1.5 var(--sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@keyframes toolpuls { 50% { opacity: .3; transform: scale(.7); } }

/* ---------- keuzes: pillen op een grijs spoor ---------- */

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: 20px;
  background: rgba(12, 19, 48, .06);
}
.seg button {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 14px/1.1 var(--sans);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(12, 19, 48, .1), 0 6px 14px -8px rgba(12, 19, 48, .35);
}

/* ---------- pillen en stippen ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 100%;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 500 14px/1.2 var(--sans);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(12, 19, 48, .04);
}
button.pill, a.pill { cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
button.pill:hover, a.pill:hover { box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px -10px rgba(12, 19, 48, .35); }
.pill--dashed {
  padding: 5px 13px;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
}
.dot {
  flex: none;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--c, var(--ink-3)));
}

/* ---------- kopieerchip ---------- */

.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  padding: 7px 7px 7px 14px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 500 14px/1.3 var(--sans);
  text-align: left;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  cursor: pointer;
}
.copy-chip code { min-width: 0; overflow-wrap: anywhere; }
.copy-state {
  flex: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.copy-chip:hover .copy-state { color: var(--ink); }
.copy-chip.is-copied .copy-state { background: var(--btn); color: var(--btn-ink); }

/* ---------- getallen die optellen ---------- */

.count { }

/* ---------- luie karakters: een affiche tot het echte karakter er is ---------- */

/* De plek bepaalt de maat (de paginastijl zet hem neer). Het affiche is een
   gloed in het palet van de plek, of de blauwe gloed met --hue, plus twee
   witte ogen; main.js zet de maten zo dat het affiche op het karakter valt. */
:where(.karakter-plek) { position: relative; }
.karakter-plek {
  overflow: hidden;
  --o0: #0d2580;
  --o1: #1b61cf;
  --o2: #9ec3f2;
}
.karakter-plek::before,
.karakter-plek::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity .9s ease-out;
}
.karakter-plek::before {
  left: var(--kx, 50%);
  top: var(--ky, 50%);
  width: var(--kd, 190%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o0) 0%, var(--o0) 22%, var(--o1) 44%, var(--o2) 66%, transparent 100%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--o0) 82%, #000) 0%, var(--o0) 22%, var(--o1) 44%, var(--o2) 66%, transparent 100%);
  transform: translate(-50%, -50%);
  filter: hue-rotate(var(--hue, 0deg));
}
.karakter-plek::after {
  left: var(--fx, 40%);
  top: var(--fy, 39%);
  width: var(--fw, 20%);
  aspect-ratio: 98 / 56.2;
  background:
    radial-gradient(closest-side, #fff 94%, transparent 100%) left / 40.6% 100% no-repeat,
    radial-gradient(closest-side, #fff 94%, transparent 100%) right / 40.6% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(10.9deg);
}
.karakter-plek.is-live::before,
.karakter-plek.is-live::after { opacity: 0; }
/* zonder JavaScript: het affiche ongeveer waar main.js het karakter neerzet
   (JavaScript zet de precieze maten als inline variabelen) */
.block-char { --fx: 44%; --fy: 70%; --fw: 120px; --kx: calc(44% + 58px); --ky: calc(70% + 66px); --kd: 1150px; }
.foot-char {
  --fx: 60%;
  --fy: calc(100% - clamp(64px, 7.5vw, 95px));
  --fw: clamp(88px, 12vw, 176px);
  --kx: calc(60% + clamp(43px, 6vw, 86px));
  --ky: calc(100% - clamp(64px, 7.5vw, 95px) + clamp(49px, 6.8vw, 98px));
  --kd: clamp(850px, 115vw, 1700px);
}
@media (max-width: 699px) {
  .foot-char { --fx: 30%; --kx: calc(30% + 43px); }
}
.karakter-plek > gloei-karakter {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
}

/* het palet van een plek, een link of iets anders met data-palette */
[data-palette="blauw"]  { --c: #3b6fe0; --o0: #0d2580; --o1: #1b61cf; --o2: #9ec3f2; }
[data-palette="zon"]    { --c: #ffb42e; --o0: #ff8a1f; --o1: #ffb42e; --o2: #ffe3a4; }
[data-palette="roze"]   { --c: #ff5c9a; --o0: #ff3f88; --o1: #ff8bb7; --o2: #ffd6e7; }
[data-palette="mint"]   { --c: #1fc48c; --o0: #0fb57e; --o1: #4fd6a4; --o2: #c6f3e1; }
[data-palette="lila"]   { --c: #8b6cff; --o0: #6a4cff; --o1: #a08bff; --o2: #e2dbff; }
[data-palette="koraal"] { --c: #ff6a4a; --o0: #ff4d2e; --o1: #ff8a70; --o2: #ffd8cc; }
[data-palette="aqua"]   { --c: #1bb5e3; --o0: #0aa5d8; --o1: #4cc9ee; --o2: #c9eefb; }
[data-palette="limoen"] { --c: #7cc72c; --o0: #5fb31a; --o1: #9fd84a; --o2: #e1f5c2; }

/* ==========================================================================
   Footer: op elke pagina hetzelfde (tussen footer:start en footer:end)
   ========================================================================== */

.foot { padding: var(--frame) var(--frame) 0; }

/* de oproep: een blok met een witte kaart, en een karakter dat eronder
   vandaan kijkt. De ruimte onder de kaart is er altijd, ook op een telefoon. */
.foot-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 44vw, 520px);
  padding-bottom: clamp(128px, 15vw, 190px);
  border-radius: var(--r-block);
  background: var(--tint);
  transition: background-color .5s ease;
}
.foot-card {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.6vw, 34px) var(--inset) clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-block);
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 19, 48, .05), 0 18px 40px -18px rgba(12, 19, 48, .2);
}
.foot-tags {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.3;
  color: var(--tag);
}
.foot-title {
  max-width: 14ch;
  margin: clamp(28px, 4.4vw, 64px) 0 0;
  font: 500 clamp(42px, 6.4vw, 104px)/.96 var(--sans);
  letter-spacing: -.04em;
}
.foot-card .actions { margin-top: clamp(20px, 2.6vw, 30px); }
.foot-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.foot-char {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.foot-bubble {
  z-index: 2;
  border-radius: 14px 14px 14px 4px;
  transform-origin: 0 100%;
}

/* de kaart van de site: vier kolommen, twee, of één op een telefoon */
.foot-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px 40px;
  padding: var(--space) var(--inset) clamp(30px, 4vw, 52px);
}
@media (min-width: 760px) {
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .foot-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.foot-h {
  margin: 0 0 16px;
  font: 400 15px/1.2 var(--sans);
  color: var(--tag);
}
.foot-col ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-col a:not(.sec-link) {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  text-underline-offset: .22em;
}
.foot-col li > a { display: inline-flex; align-items: center; gap: 10px; }
.foot-col a:not(.sec-link):hover { text-decoration: underline; }
.foot-col a[aria-current="page"] { font-weight: 600; }
.foot-col .tags { font-size: 15px; line-height: 1.6; }
.foot-plans li { font-size: 15px; line-height: 1.3; color: var(--ink); }
.foot-col .sec-link { display: inline-block; margin-top: 16px; font-size: 15px; }
.foot-lines { margin: 14px 0 0; font-size: 15px; line-height: 1.4; }

/* de ondertekening: een regel, en het woord dat de onderrand afsnijdt */
.foot-sign { overflow: hidden; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  margin: 0 var(--inset);
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}
.foot-base .tags { font-size: 14px; }
/* privacy en voorwaarden: klein, naast het jaartal */
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-right: auto; }
.foot-legal a { color: var(--ink); text-decoration: none; text-underline-offset: .22em; }
.foot-legal a:hover { text-decoration: underline; }
.foot-legal a[aria-current="page"] { font-weight: 600; }
.foot-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: .22em;
}
.foot-top:hover { text-decoration: underline; }
/* ---------- aanraken: elk doel minstens 44px hoog ----------
   Met een vinger (pointer: coarse) groeien de kleine doelen tot 44px, zoals
   Apple en Material vragen (WCAG 2.5.5). Met een muis blijft alles zoals het
   was. Waar groeien de indeling zou verschuiven, groeit alleen het doel: een
   onzichtbare rand (::after) of verticale padding op een inline link. */
@media (pointer: coarse) {
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .sec-link { padding-block: 12px; }
  .foot-col ul { gap: 0; }
  .foot-col li > a { min-height: 44px; }
  .foot-lines a, .foot-col .sec-link, .foot-top, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .foot-col .sec-link { margin-top: 6px; }
  .foot-lines { margin-top: 4px; }
  button.pill, a.pill, .replica-ctrl .pill { min-height: 44px; }
  .pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
}

/* het logo in bleekgrijs, zo breed als de footer, onderaan afgesneden */
.foot-word {
  margin: 8px var(--inset) 0;
  aspect-ratio: 1460 / 190;
  overflow: hidden;
  color: #eceef2;
  -webkit-user-select: none;
  user-select: none;
}
.foot-logo { display: block; width: 100%; height: auto; aspect-ratio: 1460 / 257; }

/* ==========================================================================
   Beweging
   ========================================================================== */

/* binnenkomen bij scrollen (alleen met JavaScript, anders gewoon zichtbaar) */
.js .reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Een tegel die al binnen is, reageert gewoon op de muis: zonder deze regel
   wint "transform: none" van .tile:hover, en erft het optillen de vertraging
   van het binnenkomen. De vertraging blijft bij het binnenkomen zelf staan,
   anders komen de tegels niet meer na elkaar binnen. */
.js .tile.reveal.is-in:hover { transform: translateY(-6px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .tile.reveal.is-in:hover { transform: none; } }

/* koppen komen woord voor woord omhoog */
.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rise .w > span { display: inline-block; animation: rise 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { transform: translateY(105%); } }
/* op een telefoon staat de kop er meteen: hij is daar vaak het grootste
   element (LCP), en een kop die nog onder de rand zit telt pas later */
@media (max-width: 600px) { .rise .w > span { animation: none; } }

/* Tussen pagina's: de browser laat de oude pagina uitvloeien en de nieuwe
   inschuiven, in plaats van een witte flits. Browsers zonder ondersteuning
   navigeren gewoon zoals altijd. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pagina-uit 180ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: pagina-in 340ms cubic-bezier(.2, .9, .25, 1) both; }
@keyframes pagina-uit { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pagina-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .rise .w > span, .glow { animation: none; }
  .orb--hop { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}