/* =========================================================================
   Koopman Pro Glass — veel te professioneel, met opzet.
   ========================================================================= */

:root {
  --bg: #000;
  --bg-2: #0a0a0c;
  --ink: #f5f5f7;
  --ink-2: #c7c7cc;
  --muted: #a1a1a6;
  --line: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.16);
  --red: #ff3b30;
  --green: #a6d86b;
  --cyan: #9fdcff;
  --pink: #ffb6ea;
  --violet: #c9b6ff;
  --mint: #b6ffe0;
  --iris: linear-gradient(100deg, #e9fbff 0%, #9fdcff 20%, #c9b6ff 40%, #ffb6ea 60%, #b6ffe0 80%, #e9fbff 100%);
  --font-display: "Inter Tight", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-padding-top: calc(110px + env(safe-area-inset-top));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-booting { overflow: hidden; }
p, li, dd, figcaption, small { text-wrap: pretty; }

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; touch-action: manipulation; }
a { color: inherit; }
sup { font-size: 0.55em; color: var(--muted); margin-left: 1px; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; margin-right: -.04em; }

::selection { background: rgba(159, 220, 255, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---------- cursor ---------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { display: none; }
html.has-cursor .cursor {
  display: block;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s;
}
html.has-cursor .cursor.is-zichtbaar { opacity: 1; }
.cursor__dot, .cursor__ring {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  translate: -50% -50%;
}
.cursor__dot { width: 6px; height: 6px; background: #fff; }
.cursor__ring {
  width: 38px; height: 38px;
  border: 1.5px solid #fff;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), background-color .35s;
}
.cursor.is-hover .cursor__ring { width: 58px; height: 58px; border-width: 1px; }
.cursor__label {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  font: 600 11px/1 var(--font-display);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; opacity: 0; transition: opacity .2s;
  margin-top: 46px;
  white-space: nowrap;
}
.cursor.is-hover .cursor__label { opacity: 1; }

/* ---------- achtergrond ---------- */
.aurora {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  opacity: .5;
}
.grain {
  position: fixed; inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}
.shards {
  /* Achter de inhoud: scherven vallen nooit over tekst of knoppen. */
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
.shards--voor { z-index: 9000; }
.progress {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 200;
}
.progress span {
  display: block; height: 100%;
  background: var(--iris);
  background-size: 200% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: iris 6s linear infinite;
}

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0;
  z-index: 10000;
  background: #000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  transition: opacity .9s var(--ease-out), visibility .9s, filter .9s;
}
.boot.is-done { opacity: 0; visibility: hidden; filter: blur(20px); }
.boot__logo { animation: bootPulse 1.6s var(--ease-out) infinite; }
@keyframes bootPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(159,220,255,0)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 24px rgba(159,220,255,.7)); }
}
.boot__bar {
  width: min(220px, 60vw); height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.boot__fill {
  display: block; height: 100%; width: 0;
  background: #fff;
  border-radius: inherit;
  transition: width .35s var(--ease-out);
}
.boot__line {
  margin: 0;
  font: 500 14px/1 var(--font-body);
  color: var(--muted);
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}
.boot__skip {
  position: absolute; bottom: 32px; left: 50%; translate: -50% 0;
  background: none; border: 0; color: var(--muted);
  font-size: 13px; padding: 10px 16px; cursor: pointer;
}
.boot__skip:hover { color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  /* Een volle balk over de hele breedte, zoals apple.com: niets schijnt erdoor of loopt erlangs. */
  position: fixed;
  top: env(safe-area-inset-top); left: 0; right: 0;
  z-index: 100;
  height: 52px; box-sizing: border-box;
  display: flex; align-items: center; gap: 16px;
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2));
  background: #0e0e12;
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 17px/1 var(--font-display);
  letter-spacing: -.02em;
  text-decoration: none;
}
.nav__links {
  display: flex; gap: 4px;
  position: absolute; left: 50%; translate: -50% 0;
}
.nav__links a {
  font-size: 13px; color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.nav__links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav__links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.nav__cta {
  margin-left: auto;
  font: 600 13px/1 var(--font-body);
  text-decoration: none;
  color: #000; background: #fff;
  padding: 10px 16px; border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 1020px) {
  .nav__links { display: none; }
}

/* ---------- algemeen ---------- */
main { position: relative; }
h1, h2, h3 { word-spacing: .04em; }
section { position: relative; }

.eyebrow {
  margin: 0 0 18px;
  font: 600 clamp(15px, 1.4vw, 19px)/1.2 var(--font-display);
  letter-spacing: .01em;
  color: var(--cyan);
}
@keyframes iris { to { background-position: -200% 0; } }

.display {
  margin: 0;
  font: 700 clamp(40px, 7vw, 88px)/1.06 var(--font-display);
  letter-spacing: -.035em;
  word-spacing: .06em;
  text-wrap: balance;
}
.display em { font-size: 1.08em; }

.mega {
  margin: 0;
  font: 800 clamp(56px, 13vw, 200px)/.97 var(--font-display);
  letter-spacing: -.05em;
  word-spacing: .08em;
}
.mega--center { text-align: center; text-wrap: balance; }

.lede {
  text-wrap: balance;
  margin: 22px auto 0;
  max-width: 40ch;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}

.fine { font-size: 12px; color: var(--muted); margin: 0; }

.section-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(48px, 7vw, 88px);
  padding-inline: var(--gutter);
}

.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%, rgba(255,255,255,.06)), rgba(14,14,20,.42);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: var(--radius);
  /* Een plaat glas heeft dikte: een lichte geslepen kant boven-links, een donkere onder-rechts en licht dat in de rand blijft hangen. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset -2px -3px 6px -2px rgba(0,0,0,.35),
    inset 0 0 28px rgba(190,220,255,.05),
    0 1px 1px rgba(0,0,0,.3),
    0 40px 80px -30px rgba(0,0,0,.8);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.45), rgba(255,255,255,.04) 35%, rgba(201,182,255,.25) 70%, rgba(159,220,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer;
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  padding: 16px 26px;
  border-radius: 999px;
  transition: transform .4s var(--ease-out), background-color .3s, box-shadow .3s;
  translate: var(--mx) var(--my);
}
.btn:active { transform: scale(.96); }
.btn--primary {
  position: relative;
  color: #000;
  background: #fff;
  font-size: 18px;
  padding: 22px 38px;
  box-shadow: 0 12px 40px -14px rgba(159,220,255,.55);
}
.btn--primary:hover { background: #f0f0f3; }
.btn--ghost {
  color: var(--ink);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn[disabled], .btn[aria-disabled="true"] { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.28); box-shadow: none; cursor: not-allowed; }
.btn.is-busy { pointer-events: none; }

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* split letters */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotateX(-80deg) scale(.9);
  filter: blur(10px);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-spring), filter .9s var(--ease-out);
  transition-delay: calc(var(--i) * 38ms + .1s);
}
.is-split.is-in .char { opacity: 1; transform: none; filter: none; }
.word { display: inline-block; white-space: nowrap; }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  padding: 120px var(--gutter) 60px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  perspective: 1200px;
}
.hero__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,59,48,.12);
  border: 1px solid rgba(255,59,48,.35);
  font: 600 12px/1 var(--font-body);
  letter-spacing: .06em;
  color: #ffb3ad;
  margin-bottom: 28px;
}
.hero__sep { opacity: .5; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255,59,48,.8);
  animation: live 1.4s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,.8); }
  100% { box-shadow: 0 0 0 12px rgba(255,59,48,0); }
}
.hero__question {
  margin: 0;
  font: 800 clamp(48px, 10vw, 148px)/.95 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero__answer {
  position: relative;
  margin: clamp(4px, 1vw, 16px) 0 0;
  display: grid; place-items: center;
}
.hero__ja {
  position: relative;
  display: inline-block;
  font: 900 clamp(150px, 34vw, 440px)/.85 var(--font-display);
  letter-spacing: -.07em;
  padding-right: .06em;
  background: var(--iris);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: iris 5s linear infinite;
  opacity: 0;
  transform: scale(.3) rotateX(70deg);
  filter: blur(40px);
  transition: opacity .9s var(--ease-out), transform 1.4s var(--ease-spring), filter 1s var(--ease-out);
}
.hero__ja::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: inherit;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: blur(40px);
  opacity: .8;
  z-index: -1;
}
.hero__answer.is-shown .hero__ja { opacity: 1; transform: none; filter: none; }
.hero__answer.is-shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 2px, 0); }
  40%, 60% { transform: translate3d(8px, -2px, 0); }
}
/* De barsten liggen óp het glas, alsof je eigen scherm een klap heeft gehad; ze lopen weg naar de randen. */
.cracks {
  position: absolute; left: 50%; top: -25%;
  width: 100vw; height: 150%;
  translate: -50% 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__sub {
  margin: 8px 0 0;
  font: 500 clamp(20px, 2.6vw, 30px)/1.3 var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink-2);
}

.vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 44px 0 0;
  width: min(760px, 100%);
}
.vital {
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  text-align: left;
}
.vital dt { font-size: 12px; color: var(--muted); line-height: 1.3; }
.vital dd {
  margin: 8px 0 0;
  font: 700 clamp(30px, 4.6vw, 44px)/1 var(--font-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.vital__unit { font-size: .5em; color: var(--muted); margin-left: 3px; font-weight: 600; }
@media (max-width: 560px) {
  .vitals { grid-template-columns: 1fr; }
  .vital { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .vital dd { margin: 0; }
}

.glassman-wrap {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  margin-top: clamp(40px, 7vw, 80px);
  width: min(320px, 70vw);
  transform-style: preserve-3d;
}
.glassman { display: block; width: 100%; height: auto; overflow: visible; }
.glassman__zweef {
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease-out);
  animation: zweef 6s ease-in-out infinite;
}
@keyframes zweef { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -14px; rotate: 1deg; } }
.glassman__glas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Met echt glas (WebGL) tekent de canvas het lijf; de SVG houdt alleen sjaal, ogen, thermometer en barsten. */
html.glas-man .glassman__romp { fill: none; stroke: none; }
html.glas-man .glassman__glans, html.glas-man .glassman-wrap::before { display: none; }
html.glas-ja .hero__ja { background: none; -webkit-text-fill-color: transparent; animation: none; }
html.glas-ja .hero__ja::after { display: none; }
.hero__glas { position: absolute; left: 50%; top: 50%; width: 140%; height: 150%; translate: -50% -50%; pointer-events: none; }
/* Gloed als vaste verloopvlek in plaats van een filter op het bewegende figuur: dat scheelt de helft van de rekenkracht. */
.glassman-wrap::before {
  content: ""; position: absolute; inset: 0 -20% 0 -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(159,220,255,.22), rgba(201,182,255,.12) 55%, transparent);
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
.glassman__shine { animation: shine 4.5s var(--ease-out) infinite; }
@keyframes shine {
  0% { transform: rotate(18deg) translateX(0); }
  60%, 100% { transform: rotate(18deg) translateX(520px); }
}
.glassman__cracks { stroke-dasharray: 300; stroke-dashoffset: 300; opacity: .8; }
.glassman__barst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.glas-barst .glassman__cracks { display: none; }
/* Met echt glas tekent de shader de barsten (gebroken door het glas); het losse doek dient alleen als bron. */
html.glas-man .glassman__barst { opacity: 0; }
html.glas-ja .cracks { z-index: 0; }
.glassman-wrap.is-cracked .glassman__cracks { animation: draw 1.6s var(--ease-out) forwards; }
.glassman__thermo { transform-origin: 140px 86px; animation: thermo 2.2s ease-in-out infinite; }
@keyframes thermo { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.glassman__shadow {
  width: 70%; height: 26px; margin: -6px auto 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(159,220,255,.45), transparent);
  filter: blur(6px);
  animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .5; } }
.glassman__tag {
  position: absolute; right: -18%; top: 34%; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  text-align: left;
  font: 600 13px/1.25 var(--font-body);
  transform: translateZ(60px);
  z-index: 5;
  animation: float 5s ease-in-out infinite reverse;
}
.glassman__tag small { color: var(--muted); font-weight: 500; }
.glassman__tag-k {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #2a2a30, #0d0d10);
  border: 1px solid rgba(255,255,255,.2);
  font: 800 13px/1 var(--font-display);
  background-clip: padding-box;
  color: var(--cyan);
}
@media (max-width: 560px) { .glassman__tag { right: -6%; top: 62%; } }


/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  padding: 28px 0;
  border-block: 1px solid var(--line);
  margin: 40px 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.05), rgba(255,255,255,.02));
  transform: rotate(-2deg) scale(1.04);
  margin-bottom: 48px;
}
.marquee__track {
  display: flex; gap: 40px; align-items: center;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee span {
  font: 800 clamp(36px, 6vw, 72px)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255,255,255,.6);
  color: transparent;
}
.marquee span:nth-of-type(even) { color: #fff; -webkit-text-stroke: 0; }
.marquee i { font-style: normal; color: var(--pink); font-size: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- experiment ---------- */
.experiment { padding: clamp(72px, 9vw, 120px) var(--gutter) 40px; }
.experiment .g :is(h2, h3, h4) { letter-spacing: -.01em !important; word-spacing: .03em; }
.stage {
  max-width: 980px;
  margin: 0 auto;
  min-height: 520px;
  overflow: hidden;
}
.stage__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.stage__chrome span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.stage__chrome span:nth-child(2) { background: #febc2e; }
.stage__chrome span:nth-child(3) { background: #28c840; }
.stage__chrome p {
  margin: 0 auto; padding-right: 52px;
  font: 500 13px/1 var(--font-body); color: var(--ink-2);
}
.stage__body {
  position: relative;
  padding: clamp(24px, 5vw, 56px);
  min-height: 340px;
  display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr);
  transition: opacity .5s var(--ease-out), filter .5s, transform .5s var(--ease-out);
}
.stage__body.is-leaving { opacity: 0; transform: scale(.98); }
.experiment .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
#exp-title { font-size: clamp(36px, 5.2vw, 68px); white-space: normal; }
#exp-lede { max-width: 46ch; text-wrap: balance; font-size: clamp(17px, 1.6vw, 20px); margin-top: 14px; }
.experiment__foot {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 32px;
}

/* ---------- introducing ---------- */
.introducing { height: 200vh; }
.introducing__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.introducing .mega span {
  display: block;
  opacity: calc(.12 + var(--p, 0) * .88);
  transform: translateY(calc((1 - var(--p, 0)) * 28px));
  filter: blur(calc((1 - var(--p, 0)) * 3px));
}
.introducing .mega em {
  background: var(--iris); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 6s linear infinite;
  padding-right: .1em; margin-right: -.16em;
}
.introducing__tag {
  margin: 36px 0 0; max-width: 34ch;
  font: 500 clamp(18px, 2.2vw, 24px)/1.35 var(--font-display);
  color: var(--ink-2);
  opacity: var(--tag, 0);
  transform: translateY(calc((1 - var(--tag, 0)) * 20px));
}

/* ---------- statement ---------- */
.statement {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
}
.statement__text {
  margin: 0;
  font: 700 clamp(30px, 4.6vw, 60px)/1.12 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.statement__text .w { opacity: .14; transition: opacity .3s, color .3s; }
.statement__text .w.is-lit { opacity: 1; }

/* ---------- specs / bento ---------- */
.specs { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.bento {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tile {
  --gx: 50%; --gy: 50%;
  padding: 30px;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--gx) var(--gy), rgba(255,255,255,.14), transparent 40%);
  opacity: 0; transition: opacity .4s;
}
.tile:hover::after { opacity: 1; }
.tile h3 { margin: 0 0 10px; font: 700 28px/1.1 var(--font-display); letter-spacing: -.025em; }
.tile p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.tile__kicker { font: 600 15px/1 var(--font-display) !important; color: var(--ink-2) !important; margin-bottom: auto !important; }
.tile__big {
  margin: 18px 0 10px !important;
  font: 800 clamp(56px, 7vw, 92px)/.95 var(--font-display) !important;
  letter-spacing: -.05em;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tile__unit { font-size: .45em; letter-spacing: -.02em; margin-left: .18em; }
.tile--wide { grid-column: span 2; }
.tile--chip { grid-row: span 2; justify-content: space-between; }
.tile--temp { grid-column: auto; }
.tile--chip h3 { margin-top: auto; }
@media (min-width: 901px) {
  /* Brede batterijtegel: batterij groot rechts, tekst links, zoals een productfoto. */
  .tile--wide:has(.battery) { padding-right: 300px; }
  .tile--wide .battery { position: absolute; right: 110px; top: 50%; translate: 0 -50%; scale: 2; transform-origin: center; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--chip { grid-column: 1 / -1; grid-row: auto; }
  .tile--temp { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tile--wide { grid-column: auto; }
}

.chip {
  margin: 10px auto 30px;
  width: min(230px, 70%);
  aspect-ratio: 1;
  border-radius: 34px;
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.35) 14px 18px) top / 70% 10px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.35) 14px 18px) bottom / 70% 10px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.35) 14px 18px) left / 10px 70% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.35) 14px 18px) right / 10px 70% no-repeat;
}
.chip__core {
  position: absolute; inset: 16px;
  border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #2b2b33, #0b0b0e 60%, #1c1c24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 60px rgba(159,220,255,.25), 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden;
}
.chip__core::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(159,220,255,.5), transparent 30%, rgba(255,182,234,.5), transparent 60%);
  animation: spin 6s linear infinite;
}
.chip__core::after {
  content: ""; position: absolute; inset: 2px; border-radius: 22px;
  background: linear-gradient(145deg, #23232a, #0b0b0e);
}
.chip__core span {
  position: relative; z-index: 1;
  font: 900 64px/1 var(--font-display); letter-spacing: -.04em;
  background: var(--iris); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 5s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.battery {
  position: relative;
  width: 120px; height: 52px; margin: 22px 0 0;
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 5px;
}
.battery::after {
  content: ""; position: absolute; right: -10px; top: 14px;
  width: 6px; height: 18px; border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,.7);
}
.battery__fill {
  display: block; height: 100%; width: 9%;
  border-radius: 6px; background: var(--red);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .2; } }

.thermo-bar {
  height: 10px; border-radius: 10px; margin: 6px 0 16px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.thermo-bar span {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink), var(--red));
  transition: width 2.4s var(--ease-out) .3s;
}
.tile.is-in .thermo-bar span { width: 96%; }

/* ---------- kleuren ---------- */
.colors { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.colors__stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.orb {
  --hue: 200;
  position: relative;
  width: min(380px, 72vw); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 14%),
    radial-gradient(circle at 70% 80%, hsla(calc(var(--hue) + 40), 100%, 80%, .55), transparent 45%),
    radial-gradient(circle at 50% 50%, hsla(var(--hue), 90%, 70%, .25), hsla(var(--hue), 90%, 40%, .55) 70%, hsla(var(--hue), 90%, 85%, .8) 100%);
  box-shadow:
    inset 0 0 60px hsla(var(--hue), 100%, 90%, .5),
    inset -20px -30px 80px hsla(var(--hue), 80%, 30%, .6),
    0 40px 120px -20px hsla(var(--hue), 100%, 60%, .55);
  transition: --hue 1s var(--ease-out), box-shadow 1s;
  animation: orb 8s ease-in-out infinite;
}
@property --hue { syntax: "<number>"; inherits: true; initial-value: 200; }
@keyframes orb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.02); }
}
.orb__shine {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
}
.orb__shine::before {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 90deg, transparent 0 20%, rgba(255,255,255,.35) 25%, transparent 32% 60%, rgba(255,255,255,.2) 66%, transparent 72%);
  animation: spin 9s linear infinite;
  mix-blend-mode: screen;
}
.swatches { display: flex; gap: 14px; margin: 54px 0 24px; flex-wrap: wrap; justify-content: center; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 30% 30%, #fff, var(--sw) 55%);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px transparent;
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.colors__name { margin: 0; font: 700 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.colors__sub { margin: 8px 0 0; color: var(--ink-2); }

/* ---------- jaaroverzicht ---------- */
.year { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.months {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: m;
}
.month {
  padding: 22px 22px 24px;
  border-radius: 22px;
  min-height: 170px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .5s var(--ease-out), box-shadow .5s, opacity 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}
.month:hover { transform: translateY(-6px) rotate(-1deg); }
.month__m { font: 600 13px/1 var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.month__d { font: 700 24px/1.1 var(--font-display); letter-spacing: -.02em; margin-top: auto; }
.month__n { font-size: 14px; color: var(--ink-2); }
.month::after {
  content: "ZIEK";
  position: absolute; top: 18px; right: 18px;
  font: 800 10px/1 var(--font-display); letter-spacing: .12em;
  color: var(--red);
  padding: 5px 7px; border: 1px solid rgba(255,59,48,.5); border-radius: 6px;
  transform: rotate(8deg);
}
@media (max-width: 900px) { .months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .months {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .month { scroll-snap-align: center; }
}

/* ---------- vergelijk ---------- */
.compare { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.compare__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.model { padding: 34px 28px; }
.model--pro { transform: translateY(-16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 50px 100px -30px rgba(159,220,255,.35); }
.model__badge {
  display: inline-block; margin: 0 0 16px;
  font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 999px; color: #000; background: var(--iris); background-size: 200% 100%;
  animation: iris 5s linear infinite;
}
.model__name { margin: 0; font: 800 30px/1.05 var(--font-display); letter-spacing: -.03em; }
.model__tag { margin: 8px 0 26px; color: var(--muted); font-size: 15px; min-height: 2.9em; }
.model ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.model li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.model li b { font: 600 12px/1 var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.model li span { font: 600 18px/1.25 var(--font-display); letter-spacing: -.01em; }
@media (max-width: 860px) {
  .compare__grid { grid-template-columns: 1fr; }
  .model--pro { transform: none; }
}

/* ---------- quotes ---------- */
.quotes {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.quote { margin: 0; }
.quote blockquote {
  margin: 0;
  font: 400 clamp(24px, 2.6vw, 32px)/1.2 var(--font-serif);
  font-style: italic;
}
.quote figcaption { margin-top: 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- opnieuw ---------- */
.again {
  padding: clamp(100px, 16vw, 220px) var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  text-align: center;
}
.again .mega { font-size: clamp(48px, 10vw, 150px); }
.again .mega em { font-size: 1.05em; }
.again__result {
  margin: 0; min-height: 1.2em;
  font: 900 clamp(64px, 14vw, 200px)/1 var(--font-display);
  letter-spacing: -.06em;
  background: var(--iris); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 5s linear infinite;
}
.again__result.is-pop { animation: iris 5s linear infinite, pop .9s var(--ease-spring); }
.again__result small { display: block; font: 500 18px/1.4 var(--font-body); letter-spacing: 0; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); margin-top: 12px; }
@keyframes pop { 0% { transform: scale(.2); filter: blur(20px); opacity: 0; } 100% { transform: none; filter: none; opacity: 1; } }

/* ---------- footer ---------- */
.footer {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max); margin: 0 auto;
  padding: 40px 0 60px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.footnotes { margin: 0 0 28px; padding-left: 18px; display: grid; gap: 8px; line-height: 1.5; }
.footer__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 28px; align-items: baseline; }
.footer__row p:last-child { text-align: right; }
@media (max-width: 760px) {
  .footer__row { grid-template-columns: 1fr; text-align: center; }
  .footer__row p:last-child { text-align: center; }
}
.footer__row p { margin: 0; }
.noscript { position: fixed; inset: auto 0 0 0; padding: 16px; background: #fff; color: #000; text-align: center; margin: 0; z-index: 99999; }

/* =========================================================================
   EXPERIMENTEN — gedeeld
   ========================================================================= */
.g { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; word-spacing: .04em; }
.g__result {
  margin: 0; min-height: 1.15em; max-width: 16ch;
  text-wrap: balance;
  font: 900 clamp(32px, 6.6vw, 72px)/1.02 var(--font-display);
  letter-spacing: -.03em; word-spacing: .08em;
  background: var(--iris); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 5s linear infinite;
}
.g__result.is-pop { animation: iris 5s linear infinite, pop .8s var(--ease-spring); }
.g__note { margin: -12px 0 0; color: var(--ink-2); font-size: 15px; min-height: 1.5em; max-width: 44ch; }
.g__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 1. rad */
.g-rad__wrap { position: relative; width: min(420px, 100%); aspect-ratio: 1; }
.g-rad__wrap canvas { width: 100%; height: 100%; filter: drop-shadow(0 30px 60px rgba(159,220,255,.25)); }
.g-rad__pointer {
  position: absolute; left: 50%; top: -6px; translate: -50% 0;
  width: 0; height: 0;
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 30px solid #fff;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transform-origin: 50% 0;
  z-index: 2;
}
.g-rad__pointer.is-tick { animation: tick .12s ease-out; }
@keyframes tick { 50% { transform: rotate(-14deg); } }

/* 2. meter */
.g-meter__gauge { width: min(520px, 100%); }
.g-meter svg { width: 100%; height: auto; overflow: visible; }
.g-meter__needle { transform-origin: 200px 200px; transition: transform 1.4s var(--ease-spring); }
.g-meter__readout { font: 800 clamp(48px, 8vw, 84px)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin: -10px 0 0; }
.g-meter__readout small { font-size: .36em; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; font-weight: 600; }
.g-meter__vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(600px, 100%); }
.g-meter__vitals div { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-align: left; }
.g-meter__vitals b { display: block; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.g-meter__vitals span { display: block; margin-top: 8px; font: 700 17px/1.2 var(--font-display); }
@media (max-width: 560px) { .g-meter__vitals { grid-template-columns: 1fr; } }

/* 3. ziekmelding */
.g-cert {
  position: relative;
  width: min(560px, 100%);
  padding: 34px 32px 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfaf6, #f1efe7);
  color: #1d1d1f;
  text-align: left;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.05);
  transform: rotate(-1.2deg);
  font-family: var(--font-body);
}
.g-cert::before {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 3px; pointer-events: none;
}
.g-cert__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 2px solid #1d1d1f; padding-bottom: 12px; margin-bottom: 18px; }
.g-cert__head strong { font: 800 20px/1.1 var(--font-display); letter-spacing: -.02em; }
.g-cert__head span { font: 500 12px/1 ui-monospace, monospace; color: #6e6e73; }
.g-cert dl { margin: 0; display: grid; gap: 12px; }
.g-cert dt { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: #86868b; }
.g-cert dd { margin: 4px 0 0; font: 400 21px/1.25 var(--font-serif); min-height: 1.25em; }
.g-cert dd.is-typing::after { content: "▍"; font-family: var(--font-body); animation: blink .8s steps(2) infinite; margin-left: 2px; }
.g-cert__sig { display: flex; justify-content: space-between; align-items: end; margin-top: 22px; gap: 12px; }
.g-cert__sig p { margin: 0; font-size: 11px; color: #86868b; border-top: 1px solid #c7c7cc; padding-top: 6px; min-width: 160px; }
.g-cert__sig svg { width: 140px; height: 44px; }
.g-cert__sig path { fill: none; stroke: #1d3a8a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.g-cert.is-signed .g-cert__sig path { animation: draw 1.2s ease-out forwards; }
.g-cert__stamp {
  position: absolute; right: 24px; top: 70px;
  font: 900 44px/1 var(--font-display); letter-spacing: .04em;
  color: rgba(255, 59, 48, .85);
  border: 5px solid rgba(255, 59, 48, .85);
  border-radius: 10px;
  padding: 6px 14px;
  transform: rotate(-14deg) scale(3);
  opacity: 0;
  mix-blend-mode: multiply;
}
.g-cert.is-stamped .g-cert__stamp { animation: stamp .45s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: 1; } }

/* 4. bol */
.g-bol__form { display: flex; gap: 10px; width: min(520px, 100%); }
.g-bol__form input {
  flex: 1; min-width: 0;
  font: 500 16px/1 var(--font-body); color: var(--ink);
  padding: 14px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
}
.g-bol__ball {
  position: relative;
  width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), transparent 12%),
    radial-gradient(circle at 50% 55%, rgba(201,182,255,.25), rgba(30,20,60,.9) 70%, rgba(201,182,255,.6) 100%);
  box-shadow: inset 0 0 80px rgba(159,220,255,.35), 0 40px 120px -20px rgba(201,182,255,.55);
  display: grid; place-items: center;
  overflow: hidden;
}
.g-bol__ball::before {
  content: ""; position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,182,234,.35), transparent 50%), radial-gradient(circle at 70% 75%, rgba(159,220,255,.35), transparent 50%);
  animation: spin 7s linear infinite;
}
.g-bol__ball.is-shaking { animation: bolshake .9s cubic-bezier(.36,.07,.19,.97); }
.g-bol__ball.is-shaking::before { animation-duration: .6s; }
@keyframes bolshake {
  10%, 90% { transform: translate(-3px, 1px) rotate(-2deg); }
  20%, 80% { transform: translate(6px, -2px) rotate(3deg); }
  30%, 50%, 70% { transform: translate(-12px, 3px) rotate(-5deg); }
  40%, 60% { transform: translate(12px, -3px) rotate(5deg); }
}
.g-bol__window {
  position: relative;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #10103a, #05051a);
  box-shadow: inset 0 0 30px rgba(0,0,0,.9);
  display: grid; place-items: center;
  padding: 12px;
}
.g-bol__answer {
  max-width: 82%;
  font: 700 clamp(12px, 3.4vw, 15px)/1.2 var(--font-display); color: #b9e9ff;
  text-align: center;
  text-shadow: 0 0 12px rgba(159,220,255,.8);
  opacity: 0; transform: scale(.6) rotate(-20deg);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-spring);
}
.g-bol__answer.is-shown { opacity: 1; transform: none; }

/* 5. kraslot */
.g-kras__card {
  position: relative;
  width: min(480px, 100%); aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #1b1b22, #0b0b0f);
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(0,0,0,.9);
  touch-action: none;
}
.g-kras__prize { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; }
.g-kras__prize strong {
  font: 900 clamp(70px, 14vw, 128px)/.9 var(--font-display); letter-spacing: -.03em; word-spacing: .06em;
  background: var(--iris); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 4s linear infinite;
}
.g-kras__prize span { color: var(--ink-2); font-size: 15px; }
.g-kras__card canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s; }
.g-kras__card canvas.is-gone { opacity: 0; pointer-events: none; }

/* 6. ja/nee */
.g-janee__arena { position: relative; width: 100%; height: 260px; }
.g-janee__btn {
  position: absolute;
  top: 50%; translate: -50% -50%;
  border: 0; cursor: pointer; border-radius: 999px;
  font: 700 22px/1 var(--font-display);
  padding: 20px 40px;
  transition: left .35s var(--ease-spring), top .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.g-janee__btn--ja { left: 30%; color: #000; background: #fff; box-shadow: 0 20px 60px -10px rgba(159,220,255,.6); }
.g-janee__btn--nee { left: 70%; color: var(--ink); background: rgba(255,255,255,.08); border: 1px solid var(--line); }

/* 7. gokkast */
.g-slot__machine { padding: 22px; border-radius: 30px; width: min(520px, 100%); }
.g-slot__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-slot__reel {
  position: relative; height: 140px; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, #050507, #16161c 50%, #050507);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 20px 30px -10px #000, inset 0 -20px 30px -10px #000;
}
.g-slot__strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.g-slot__strip.is-spinning { filter: blur(3px); }
.g-slot__sym { height: 140px; display: grid; place-items: center; line-height: 1; }
.g-slot__sym .ic { width: 64px; height: 64px; stroke-width: 1.4; }
.g-slot__line { position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; background: rgba(255,59,48,.7); box-shadow: 0 0 12px var(--red); pointer-events: none; }
.g-slot__machine.is-win { animation: winflash .25s steps(2) 6; }
@keyframes winflash { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 3px #fff, 0 0 80px rgba(255,182,234,.8); } }

/* 8. radar */
.g-radar__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; width: 100%; }
.g-radar__screen { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; }
.g-radar__screen canvas { width: 100%; height: 100%; }
.g-radar__info { text-align: left; }
.g-radar__info h3 { margin: 0 0 6px; font: 800 30px/1.05 var(--font-display); letter-spacing: -.02em; word-spacing: .04em; }
.g-radar__info p { margin: 0 0 18px; color: var(--ink-2); }
.g-radar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.g-radar__day { padding: 10px 2px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-align: center; }
.g-radar__day b { display: block; font: 600 11px/1 var(--font-body); color: var(--muted); }
.g-radar__day .ic { display: block; width: 22px; height: 22px; margin: 8px auto; color: var(--cyan); }
.g-radar__day span { font: 700 12px/1 var(--font-display); color: var(--red); }
@media (max-width: 760px) { .g-radar__wrap { grid-template-columns: 1fr; } .g-radar__info { text-align: center; } }

/* 9. koers */
.g-koers { gap: 18px; }
.g-koers__top { display: flex; justify-content: space-between; align-items: end; width: 100%; gap: 16px; text-align: left; flex-wrap: wrap; }
.g-koers__sym { font: 700 14px/1 var(--font-display); color: var(--muted); letter-spacing: .08em; }
.g-koers__price { font: 800 clamp(40px, 7vw, 64px)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.g-koers__chg { font: 700 18px/1 var(--font-display); color: #30d158; font-variant-numeric: tabular-nums; }
.g-koers__chart { display: block; width: 100%; min-width: 0; height: 240px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.g-koers__news { width: 100%; overflow: hidden; border-radius: 12px; background: rgba(255,59,48,.1); border: 1px solid rgba(255,59,48,.3); }
.g-koers__news p { margin: 0; padding: 10px 0; white-space: nowrap; font: 600 13px/1 var(--font-body); color: #ffb3ad; animation: marquee 22s linear infinite; width: max-content; }
.g-koers__buy { background: #30d158; color: #000; }

/* 10. glas */
.g-glas__pane {
  position: relative;
  width: min(520px, 100%); aspect-ratio: 4 / 3;
  border-radius: 24px; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(159,220,255,.06) 40%, rgba(255,182,234,.1) 75%, rgba(255,255,255,.16));
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.25), 0 40px 80px -30px rgba(0,0,0,.9);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink);
}
.g-glas__pane::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 52%);
  animation: glasglint 4s var(--ease-out) infinite;
}
@keyframes glasglint { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.g-glas__label { position: relative; z-index: 1; font: 700 clamp(22px, 3.4vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em; padding: 20px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.g-glas__label small { display: block; margin-top: 8px; font: 500 14px/1.3 var(--font-body); color: var(--ink-2); }
.g-glas__barst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.g-glas__pane.is-shattered { visibility: hidden; }
.g-glas__count { font: 600 13px/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Minder beweging
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .char { opacity: 1; transform: none; filter: none; }
  .hero__ja { opacity: 1; transform: none; filter: none; }
  .introducing { height: auto; }
  .introducing__sticky { position: static; height: auto; padding-block: 120px; }
  .introducing .mega span { opacity: 1; transform: none; filter: none; }
  .introducing__tag { opacity: 1; transform: none; }
  .statement__text .w { opacity: 1; }
  .grain { display: none; }
}

/* =========================================================================
   EXPERIMENTEN 11–20
   ========================================================================= */
.g-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; }
.g-chip {
  font: 600 15px/1 var(--font-body);
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink);
  transition: background-color .25s, border-color .25s, transform .3s var(--ease-spring);
}
.g-chip:hover { background: rgba(255,255,255,.12); }
.g-chip:active { transform: scale(.95); }
.g-chip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }

/* 12. nies */
.g-nies { --shake: 0px; }
.g-nies__face { line-height: 1; }
.g-nies__face .ic { width: 160px; height: 160px; stroke-width: 1.3; }
.g-nies__word {
  margin: 0; min-height: 1.1em;
  font: 900 clamp(44px, 8vw, 84px)/1 var(--font-display); letter-spacing: -.025em; word-spacing: .05em;
  background: var(--iris); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 4s linear infinite;
  transform-origin: 50% 60%;
  transition: transform .15s;
}
.g-nies.is-building .g-nies__face, .g-nies.is-building .g-nies__word { animation: nies-shake .09s linear infinite, iris 4s linear infinite; }
@keyframes nies-shake { 0% { translate: calc(var(--shake) * -1) 0; } 50% { translate: var(--shake) calc(var(--shake) * .5); } 100% { translate: 0 calc(var(--shake) * -1); } }
.g-nies__btn { user-select: none; -webkit-user-select: none; touch-action: none; }
.g-nies__count { margin: 0; font: 600 13px/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 13. thermometer */
.g-thermo__row { display: flex; align-items: center; gap: clamp(20px, 6vw, 60px); }
.g-thermo__glass svg { width: clamp(70px, 14vw, 100px); height: auto; filter: drop-shadow(0 0 30px rgba(255,59,48,.35)); }
.g-thermo__mercury { transition: y .05s linear, height .05s linear; }
.g-thermo__lcd {
  padding: 18px 24px; border-radius: 18px;
  background: linear-gradient(180deg, #b9c7a5, #9fae8a); color: #1b2414;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.35), 0 0 0 6px #1c1c22, 0 20px 50px -10px rgba(0,0,0,.8);
  font: 700 clamp(48px, 9vw, 80px)/1 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.g-thermo__lcd small { font-size: .4em; margin-left: 4px; }
.g-thermo__lcd.is-hot { animation: blink .5s steps(2) 4; }

/* 14. swipe */
.g-swipe__stack { position: relative; width: min(340px, 100%); height: 300px; display: grid; place-items: center; }
.g-swipe__card {
  --yes: 0; --no: 0;
  position: absolute; inset: 0;
  padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: grab; touch-action: none; user-select: none;
  animation: pop .5s var(--ease-spring);
}
.g-swipe__card:active { cursor: grabbing; }
.g-swipe__emoji .ic { width: 88px; height: 88px; stroke-width: 1.3; }
.g-swipe__card h3 { margin: 6px 0 0; font: 800 24px/1.1 var(--font-display); letter-spacing: -.02em; }
.g-swipe__card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.g-swipe__stamp {
  position: absolute; top: 22px; padding: 6px 10px; border-radius: 8px;
  font: 900 20px/1 var(--font-display); letter-spacing: .08em; border: 3px solid;
}
.g-swipe__stamp--yes { left: 20px; color: #30d158; transform: rotate(-14deg); opacity: var(--yes); }
.g-swipe__stamp--no { right: 20px; color: var(--red); transform: rotate(14deg); opacity: var(--no); }
.g-swipe__btn {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  font-size: 26px; background: rgba(255,255,255,.06);
  transition: transform .3s var(--ease-spring), background-color .2s;
}
.g-swipe__btn:hover { transform: scale(1.1); }
.g-swipe__btn--no { color: var(--red); }
.g-swipe__btn--yes { color: #30d158; }
.g-swipe__done { font: 700 22px/1.3 var(--font-display); max-width: 22ch; }

/* 15. chat */
.g-chat__phone {
  width: min(380px, 100%); height: 520px;
  display: flex; flex-direction: column;
  border-radius: 40px; padding: 14px;
  background: #0b0b0f;
  box-shadow: 0 0 0 2px #2c2c34, 0 0 0 9px #111116, 0 40px 90px -20px rgba(0,0,0,.9);
  text-align: left;
}
.g-chat__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); }
.g-chat__head b { display: block; font: 700 16px/1.2 var(--font-display); }
.g-chat__head small { color: var(--muted); font-size: 12px; }
.g-chat__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #0b1a2b; }
.g-chat__avatar .ic { width: 20px; height: 20px; stroke-width: 2; }
.g-chat__log { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.g-chat__msg {
  max-width: 80%; padding: 9px 13px; border-radius: 18px;
  font-size: 15px; line-height: 1.35;
  animation: pop .35s var(--ease-spring);
}
.g-chat__msg small { display: block; margin-top: 3px; font-size: 10px; opacity: .6; text-align: right; }
.g-chat__msg--hij { align-self: flex-start; background: #26262c; border-bottom-left-radius: 6px; }
.g-chat__msg--jij { align-self: flex-end; background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; }
.g-chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; margin: 0 4px 8px; border-radius: 18px; background: #26262c; }
.g-chat__typing[hidden] { display: none; }
.g-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.g-chat__typing span:nth-child(2) { animation-delay: .15s; }
.g-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.g-chat__choices { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); min-height: 52px; }
.g-chat__choices .g-chip { font-size: 13px; padding: 9px 12px; }

/* 16. röntgen */
.g-xray__wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; width: 100%; }
.g-xray__screen {
  --lx: 50%; --ly: 50%;
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #0d1a24, #04070a);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -20px rgba(0,0,0,.9);
}
.g-xray__layer { position: absolute; inset: 0; }
.g-xray__layer svg { width: 100%; height: 100%; }
.g-xray__outer svg { fill: rgba(159,220,255,.08); stroke: rgba(159,220,255,.5); stroke-width: .6; }
.g-xray__inner {
  background: radial-gradient(circle at 50% 40%, #0f3a4a, #04121a);
  clip-path: circle(18% at var(--lx) var(--ly));
}
.g-xray__inner svg { fill: rgba(140,240,255,.18); stroke: rgba(200,255,255,.9); stroke-width: .5; filter: drop-shadow(0 0 4px rgba(150,240,255,.8)); }
.g-xray__item { position: absolute; translate: -50% -50%; color: #bff; filter: drop-shadow(0 0 6px #8ff); transition: filter .4s, color .4s; }
.g-xray__item .ic { width: 28px; height: 28px; }
.g-xray__list li .ic { color: var(--cyan); }
.g-xray__item.is-found { filter: drop-shadow(0 0 10px #fff); }
.g-xray__lens {
  position: absolute; left: var(--lx); top: var(--ly); translate: -50% -50%;
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(150,240,255,.8), 0 0 30px rgba(150,240,255,.5), inset 0 0 30px rgba(150,240,255,.25);
  pointer-events: none;
}
.g-xray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.g-xray__list li { padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; transition: all .4s; }
.g-xray__list li.is-found { color: var(--ink); border-style: solid; background: rgba(150,240,255,.08); animation: pop .4s var(--ease-spring); }
@media (max-width: 700px) { .g-xray__wrap { grid-template-columns: 1fr; } }

/* 17. captcha */
.g-captcha {
  width: min(400px, 100%);
  background: #f9f9f9; color: #222; border-radius: 6px; text-align: left;
  box-shadow: 0 0 0 1px #d3d3d3, 0 30px 70px -20px rgba(0,0,0,.9);
  font-family: Roboto, Arial, sans-serif;
}
.g-captcha__start { display: flex; align-items: center; gap: 12px; padding: 18px 14px; font-size: 15px; }
.g-captcha__box {
  position: relative; width: 28px; height: 28px; flex: none; cursor: pointer;
  border: 2px solid #c1c1c1; border-radius: 3px; background: #fff;
}
.g-captcha__box.is-loading { border-radius: 50%; border-color: #4a90e2 #4a90e2 #e3e3e3 #e3e3e3; animation: spin .8s linear infinite; }
.g-captcha__box.is-checked { border-color: transparent; }
.g-captcha__box.is-checked .g-captcha__tick::after { content: "✓"; position: absolute; inset: -8px 0 0 2px; font: 900 30px/1 Arial, sans-serif; color: #009e55; }
.g-captcha__brand { margin-left: auto; font: 700 10px/1.2 Arial, sans-serif; color: #555; text-align: center; }
.g-captcha__brand small { display: block; font-weight: 400; color: #999; font-size: 8px; }
.g-captcha__challenge { border-top: 1px solid #d3d3d3; padding: 8px; }
.g-captcha__challenge[hidden] { display: none; }
.g-captcha__ask { background: #4a90e2; color: #fff; padding: 16px 18px; font-size: 14px; }
.g-captcha__ask b { display: block; font-size: 22px; margin: 2px 0; }
.g-captcha__ask small { font-size: 12px; opacity: .9; }
.g-captcha__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.g-captcha__tile {
  position: relative; aspect-ratio: 1; border: 0; cursor: pointer;
  background: #9fbfd6 url(/assets/img/martijn.webp) no-repeat; background-size: 300% 300%; transition: transform .15s;
}
.g-captcha__tile[aria-pressed="true"] { transform: scale(.86); }
.g-captcha__tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #4a90e2; color: #fff; font: 700 14px/22px Arial, sans-serif; }
.g-captcha__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.g-captcha__foot .g__note { margin: 0; color: #d93025; font-size: 12px; text-align: left; }
.g-captcha__foot .btn { background: #4a90e2; color: #fff; font-size: 14px; padding: 12px 18px; border-radius: 3px; animation: none; box-shadow: none; }

/* 18. bingo */
.g-bingo__head, .g-bingo__card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(520px, 100%); }
.g-bingo__head span { font: 800 clamp(30px, 6vw, 46px)/1 var(--font-display); color: #fff; letter-spacing: -.02em; }
.g-bingo__cell {
  aspect-ratio: 1; padding: 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink);
  font: 600 clamp(11px, 2.4vw, 14px)/1.2 var(--font-body);
  transition: transform .3s var(--ease-spring), background-color .3s;
}
.g-bingo__cell:hover { transform: scale(1.04); }
.g-bingo__cell.is-mine { background: #fff; color: #000; }
.g-bingo__cell.is-auto { background: var(--red); color: #fff; border-color: var(--red); animation: pop .4s var(--ease-spring); }
.g-bingo__call { margin: 0; color: var(--ink-2); min-height: 1.5em; }

/* 19. update */
.g-update { width: min(460px, 100%); padding: 28px; text-align: left; }
.g-update__icon .ic { width: 64px; height: 64px; stroke-width: 1.3; }
.g-update h3 { margin: 10px 0 8px; font: 800 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.g-update__body { margin: 0 0 20px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.g-update__bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.g-update__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: #0a84ff; transition: width .8s var(--ease-out), background-color .3s; }
.g-update.is-failed .g-update__fill { background: var(--red); }
.g-update.is-failed { animation: shake .5s; }
.g-update__pct { display: block; margin-top: 8px; font: 600 13px/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1em; }
.g-update__status { margin: 8px 0 20px; font-size: 14px; min-height: 1.4em; }
.g-update.is-failed .g-update__status { color: #ffb3ad; }

/* 20. koopagotchi */
.g-tama__egg {
  width: 260px; padding: 26px 30px 36px;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: linear-gradient(145deg, #ffb6ea, #c9b6ff 50%, #9fdcff);
  box-shadow: inset -10px -14px 30px rgba(0,0,0,.25), inset 10px 10px 30px rgba(255,255,255,.5), 0 30px 70px -20px rgba(201,182,255,.6);
}
.g-tama__brand { font: 900 11px/1 var(--font-display); letter-spacing: .2em; color: rgba(0,0,0,.5); margin-bottom: 10px; }
.g-tama__lcd {
  padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, #c3d1a8, #a9b98c); color: #1b2414;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.35);
}
.g-tama__face { line-height: 1; margin-bottom: 8px; color: #2d3a1f; }
.g-tama__face .ic { width: 64px; height: 64px; stroke-width: 1.8; }
.g-tama__stat { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; margin-top: 6px; text-align: left; }
.g-tama__stat b { font: 700 10px/1 ui-monospace, monospace; text-transform: uppercase; }
.g-tama__bar { height: 9px; border: 2px solid #1b2414; border-radius: 3px; }
.g-tama__bar span { display: block; height: 100%; width: 0; background: #1b2414; transition: width .6s var(--ease-out); }
.g-tama__msg { margin: 0; min-height: 1.5em; color: var(--ink-2); max-width: 40ch; }

/* =========================================================================
   RONDE 3 — extra's, foto, muur, designronde
   ========================================================================= */

/* ---------- seizoen ---------- */
.dagziekte {
  margin: 18px 0 0; font-size: 14px; color: var(--muted);
}
.dagziekte b {
  color: var(--ink); font-weight: 600;
  padding: 4px 10px; margin-left: 4px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
}

/* ---------- kiezer ---------- */
.picker { width: min(860px, 100%); }
.picker summary {
  list-style: none; cursor: pointer; text-align: center;
  font: 600 14px/1 var(--font-body); color: var(--ink-2);
  padding: 12px; border-radius: 999px;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: " ↓"; transition: transform .3s; display: inline-block; }
.picker[open] summary::after { transform: rotate(180deg); }
.picker summary:hover { color: #fff; }
.picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; animation: pop .4s var(--ease-out); }
.picker__item {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  font: 600 13px/1.25 var(--font-body);
  transition: background-color .2s, border-color .2s;
}
.picker__item span { font: 700 11px/1 ui-monospace, monospace; color: var(--muted); }
.picker__item:hover { background: rgba(255,255,255,.1); }
.picker__item[aria-current="true"] { background: #fff; color: #000; border-color: #fff; }
.picker__item[aria-current="true"] span { color: #555; }
@media (max-width: 760px) { .picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- het origineel (foto) ---------- */
.origineel { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.specimen { margin: 0 auto; max-width: 1000px; display: grid; justify-items: center; }
.specimen > * { grid-area: 1 / 1; }
.specimen__frame {
  position: relative; width: min(400px, 78vw); aspect-ratio: 4 / 5;
  border-radius: 34px; overflow: hidden; isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3),
    0 60px 120px -30px rgba(159,220,255,.45),
    0 30px 60px -20px rgba(0,0,0,.9);
  transform: perspective(1000px) rotateY(-6deg) rotateX(3deg);
  animation: specimen 8s ease-in-out infinite;
}
@keyframes specimen { 0%, 100% { transform: perspective(1000px) rotateY(-6deg) rotateX(3deg); } 50% { transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateY(-8px); } }
.specimen__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.04); }
.specimen__frame::before {
  /* iriserende glaslaag */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(125deg, rgba(159,220,255,.28), transparent 35%, rgba(255,182,234,.22) 65%, rgba(201,182,255,.3));
  mix-blend-mode: soft-light;
}
.specimen__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 60px rgba(255,255,255,.12);
}
.specimen__glare {
  position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 48%, transparent 56%);
  animation: glare 5.5s var(--ease-out) infinite;
}
@keyframes glare { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
.specimen__cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.specimen__cracks path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: .35; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.specimen.is-in .specimen__cracks path { animation: draw 1.6s var(--ease-out) 1s forwards; }

.specimen__notes {
  list-style: none; margin: 0; padding: 0;
  position: relative; width: min(400px, 78vw); aspect-ratio: 4 / 5; z-index: 4; pointer-events: none;
}
.specimen__notes li {
  position: absolute; left: 0; right: 0; top: var(--y);
  height: 0;
}
.specimen__notes li::before {
  content: ""; position: absolute; left: var(--x); top: 0;
  width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%;
  background: #fff; border: 2px solid rgba(0,0,0,.55); box-sizing: border-box;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 0 20px rgba(159,220,255,.9);
  animation: stip 2.2s ease-out infinite;
}
.specimen__notes li::after {
  content: ""; position: absolute; top: 0; height: 1px; background: rgba(255,255,255,.55);
}
.specimen__notes li[style*="--side:1"]::after { left: var(--x); right: -36px; }
.specimen__notes li[style*="--side:-1"]::after { left: -36px; right: calc(100% - var(--x)); }
.specimen__notes b, .specimen__notes span { display: block; }
.specimen__notes li > b {
  position: absolute; top: -26px; white-space: nowrap;
  font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em;
}
.specimen__notes li > span {
  position: absolute; top: 0; width: 220px;
  font-size: 14px; line-height: 1.4; color: var(--ink-2);
}
.specimen__notes li[style*="--side:1"] > b, .specimen__notes li[style*="--side:1"] > span { left: calc(100% + 48px); }
.specimen__notes li[style*="--side:-1"] > b, .specimen__notes li[style*="--side:-1"] > span { right: calc(100% + 48px); text-align: right; }
.specimen figcaption { grid-area: 2 / 1; margin-top: 36px; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  /* Op een telefoon staan de aanwijzingen als genummerde kaartjes onder de foto. */
  .specimen__notes {
    grid-area: 2 / 1; aspect-ratio: auto; width: 100%; max-width: 520px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; counter-reset: n;
  }
  .specimen__notes li { position: static; height: auto; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); counter-increment: n; }
  .specimen__notes li::before { content: none; }
  .specimen__notes li::after { display: none; }
  .specimen__notes li > b, .specimen__notes li > span { position: static; width: auto; text-align: left !important; white-space: normal; }
  .specimen__notes li > b { font-size: 16px; margin-bottom: 2px; }
  .specimen__notes li > span { font-size: 13px; }
  .specimen figcaption { grid-area: 3 / 1; }
}

@keyframes stip { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 0 20px rgba(159,220,255,.9); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0), 0 0 20px rgba(159,220,255,.9); } }

/* ---------- teller ---------- */
.teller {
  margin: 0; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; color: var(--ink-2);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.teller b { color: #fff; }
.teller.is-bump { animation: pop .6s var(--ease-spring); }

/* ---------- beterschapsmuur ---------- */
.muur { padding: clamp(60px, 10vw, 140px) var(--gutter); }
.muur__form { max-width: 640px; margin: 0 auto 48px; padding: 24px; display: grid; gap: 16px; }
.muur__veld { display: grid; gap: 8px; position: relative; font: 600 14px/1.2 var(--font-body); }
.muur__veld small { font-weight: 400; color: var(--muted); }
.muur__veld input, .muur__veld textarea {
  font: 400 16px/1.4 var(--font-body); color: var(--ink);
  padding: 14px 16px; border-radius: 14px; resize: vertical;
  border: 1px solid var(--line); background: rgba(0,0,0,.35);
}
.muur__veld input:focus, .muur__veld textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(159,220,255,.25); }
.muur__tekens { position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.muur__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muur__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.muur__status { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--muted); }
.muur__lijst { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); columns: 3 260px; column-gap: 14px; }
.muur__kaart { break-inside: avoid; margin: 0 0 14px; padding: 20px 20px 16px; border-radius: 20px; transform: rotate(var(--r, 0deg)); }
.muur__kaart:nth-child(3n+1) { --r: -.6deg; }
.muur__kaart:nth-child(3n+2) { --r: .5deg; }
.muur__kaart.is-new { animation: pop .7s var(--ease-spring); box-shadow: 0 0 0 2px var(--cyan), 0 30px 60px -20px rgba(159,220,255,.5); }
.muur__tekst { margin: 0; font: 400 22px/1.25 var(--font-serif); font-style: italic; overflow-wrap: anywhere; }
.muur__meta { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.muur__meta b { color: var(--ink-2); }
.muur__leeg { text-align: center; color: var(--muted); }

/* ---------- meldingen ---------- */
.toasts {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 9500;
  display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none;
}
.toast { padding: 14px 18px; border-radius: 18px; font: 600 14px/1.4 var(--font-body); text-align: center; animation: toastIn .5s var(--ease-spring); }
.toast.is-leaving { animation: toastUit .5s var(--ease-out) forwards; }
@keyframes toastIn { from { transform: translateY(30px) scale(.9); opacity: 0; } }
@keyframes toastUit { to { transform: translateY(20px); opacity: 0; } }

/* ---------- alles gebroken (easter egg) ---------- */
body.is-broken main { animation: shake .6s cubic-bezier(.36,.07,.19,.97) 2; }
body.is-broken::after {
  content: ""; position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-opacity='.7' stroke-width='.25'><path d='M50 45 L30 20 L22 0 M30 20 L5 26 M50 45 L74 12 L80 0 M74 12 L100 20 M50 45 L100 52 M50 45 L80 80 L88 100 M80 80 L100 74 M50 45 L46 100 M50 45 L14 70 L0 76 M14 70 L10 50 M50 45 L0 38'/></g></svg>") center / 100% 100% no-repeat;
  animation: toastIn .2s ease-out;
}

/* ---------- de nieuwe gokkast ---------- */
.g-slot__machine {
  position: relative; width: min(500px, 100%); padding: 18px 18px 22px;
  border-radius: 34px;
  background: linear-gradient(160deg, #3a3a44, #16161c 45%, #24242c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -30px rgba(0,0,0,.95);
}
.g-slot__top { display: flex; justify-content: center; gap: 10px; align-items: baseline; margin-bottom: 14px; font: 800 13px/1 var(--font-display); letter-spacing: .3em; color: var(--muted); }
.g-slot__top b {
  font-size: 22px; letter-spacing: .06em;
  background: var(--iris); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 4s linear infinite;
}
.g-slot__lights { position: absolute; inset: 8px; pointer-events: none; display: flex; justify-content: space-between; padding: 0 22px; }
.g-slot__lights span { width: 6px; height: 6px; margin-top: 2px; border-radius: 50%; background: #ffd27a; opacity: .25; }
.g-slot__machine.is-spinning .g-slot__lights span { animation: chase .5s steps(2) infinite; }
.g-slot__machine.is-spinning .g-slot__lights span:nth-child(odd) { animation-delay: .25s; }
.g-slot__machine.is-win .g-slot__lights span { animation: chase .18s steps(2) 10; }
@keyframes chase { 0% { opacity: .2; } 50% { opacity: 1; box-shadow: 0 0 10px #ffd27a; } }
.g-slot__window { position: relative; padding: 10px; border-radius: 22px; background: #050507; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 10px 30px rgba(0,0,0,.9); }
.g-slot__reel { height: clamp(104px, 26vw, 140px); }
.g-slot__sym { height: clamp(104px, 26vw, 140px); }
.g-slot__strip.is-fast { filter: blur(2.5px); }
.g-slot__reel.is-stopped { animation: reelstop .3s var(--ease-spring); }
@keyframes reelstop { 40% { box-shadow: inset 0 0 0 2px #fff, inset 0 0 30px rgba(255,255,255,.3); } }
.g-slot__line { left: 6px; right: 6px; }
.g-slot__machine.is-win { animation: winflash .25s steps(2) 6; }
.g-slot__lever {
  position: absolute; right: -26px; top: 64px; width: 18px; height: 120px; padding: 0; border: 0; cursor: pointer;
  border-radius: 9px; background: linear-gradient(90deg, #8e8e93, #f2f2f7 45%, #8e8e93);
  transform-origin: 50% 100%;
}
.g-slot__knob { position: absolute; left: 50%; top: -18px; translate: -50% 0; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #ff3b30 55%, #a3160f); box-shadow: 0 6px 16px rgba(255,59,48,.5); }
.g-slot__lever.is-pulled { animation: lever .6s var(--ease-out); }
@keyframes lever { 40% { transform: scaleY(-.35); } 100% { transform: none; } }
@media (max-width: 600px) {
  .g-slot__machine { width: calc(100% - 22px); margin-right: 22px; }
  .g-slot__lever { right: -20px; top: 70px; width: 12px; height: 84px; }
  .g-slot__knob { width: 26px; height: 26px; top: -14px; }
}

/* ---------- telefoon: de designronde ---------- */
@media (max-width: 700px) {
  .g-cert { padding: 26px 20px 22px; }
  .g-cert__stamp { right: 14px; top: 58px; font-size: 34px; }
  .hero { padding-top: 100px; }
  .hero__status { margin-bottom: 20px; }
  .introducing { height: 150vh; }
  /* Telefoon: geen venster om het experiment heen, alleen het experiment zelf. */
  .stage.glass { min-height: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
  .stage.glass::before { display: none; }
  .stage__chrome { display: none; }
  .stage__body { padding: 8px 0 24px; min-height: 0; }
  .experiment { padding-top: 48px; }
  .experiment .section-head { margin-bottom: 24px; }
  .section-head { margin-bottom: 40px; }
  .lede { font-size: 17px; }
  .tile { padding: 24px; min-height: 0; }
  .tile__big { margin-top: 12px !important; }
  .model { padding: 26px 22px; }
  .again { gap: 32px; }
  .btn--primary { font-size: 17px; padding: 18px 28px; }
  .footer__row { flex-direction: column; }
  .marquee { padding: 18px 0; }
  .muur__form { padding: 18px; }
  .muur__tekst { font-size: 20px; }
  .g { gap: 22px; }
}
@media (hover: none) {
  .tile::after { display: none; }
  .month:hover { transform: none; }
}

/* =========================================================================
   RONDE 4 — gedeeld: menu, ticker, koortsmodus, mini-Koopman
   ========================================================================= */

/* ---------- ticker ---------- */
.ticker {
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  height: 28px; padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  display: flex; align-items: center; gap: 10px;
  background: #e8352b; color: #fff;
  font: 600 12px/1 var(--font-body);
  overflow: hidden;
}
.ticker__label { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; height: 100%; background: #b3150c; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; flex: none; }
.ticker__label .live-dot { background: #fff; width: 6px; height: 6px; }
.ticker__status { flex: none; padding-right: 10px; border-right: 1px solid rgba(255,255,255,.35); }
.ticker__koppen {
  flex: 1; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker__koppen span { display: inline-block; padding-left: 20px; animation: marquee 40s linear infinite; }
html.has-ticker .nav { top: calc(env(safe-area-inset-top) + 28px); }
html.has-ticker .progress { top: calc(28px + env(safe-area-inset-top)); }

/* ---------- menu ---------- */
.nav__menu, .nav__koorts {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font: 600 13px/1 var(--font-body);
}
.nav__koorts { padding: 0; width: 38px; display: grid; place-items: center; }
.nav__menu, .nav__koorts, .nav__cta { height: 38px; box-sizing: border-box; }
.nav__cta { display: inline-flex; align-items: center; }
.nav__koorts .ic { width: 17px; height: 17px; }
.nav__koorts[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.nav__menu:hover, .nav__koorts:hover { background: rgba(255,255,255,.14); }
.nav__burger { display: grid; gap: 4px; }
.nav__burger i { display: block; width: 14px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out); }
.nav__menu[aria-expanded="true"] .nav__burger i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__burger i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.nav__cta { margin-left: 0; }
.nav { gap: 8px; }
.nav__cta { margin-left: auto; }
@media (max-width: 820px) {
  .nav__brand { margin-right: auto; }
}
@media (max-width: 480px) {
  .nav__menu-tekst { display: none; }
  .nav__cta { padding: 0 12px; font-size: 13px; height: 32px; background: rgba(255,255,255,.92); }
  .nav__menu { padding: 0; width: 38px; justify-content: center; }
}

.menu {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) max(20px, env(safe-area-inset-bottom));
  background: rgba(5,5,8,.82);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  overflow-y: auto;
  animation: menuIn .45s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; } }
html.menu-open { overflow: hidden; }
.menu__kop { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; width: 100%; margin: 0 auto 20px; }
.menu__kop p { margin: 0; font: 600 13px/1 var(--font-body); color: var(--muted); }
.menu__sluit { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); font-size: 18px; cursor: pointer; }
.menu__lijst { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.menu__item {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  transition: background-color .2s, transform .3s var(--ease-out);
  animation: menuItem .5s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms);
}
@keyframes menuItem { from { opacity: 0; transform: translateY(14px); } }
.menu__item:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.menu__item[aria-current="page"] { background: #fff; color: #000; }
.menu__item[aria-current="page"] small { color: #555; }
.menu__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); flex: none; }
.menu__icoon .ic { width: 22px; height: 22px; }
.menu__item[aria-current="page"] .menu__icoon { background: rgba(0,0,0,.08); }
.menu__tekst { display: grid; gap: 3px; }
.menu__tekst b { font: 700 17px/1.15 var(--font-display); letter-spacing: -.01em; }
.menu__tekst small { font-size: 13px; color: var(--muted); }
.menu__voet { margin: 24px auto 0; color: var(--muted); font-size: 13px; text-align: center; }
.menu__app {
  display: flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  border: 0; background: rgba(255,255,255,.1); color: var(--ink); font: 600 14px var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: background .2s;
}
.menu__app:hover { background: rgba(255,255,255,.18); }
.menu__app[hidden] { display: none; }
.menu__app .ic { width: 18px; height: 18px; }

/* ---------- koortsmodus ---------- */
.koortswaas { position: fixed; inset: 0; z-index: 8000; pointer-events: none; opacity: 0; transition: opacity .8s; }
html.is-koorts .koortswaas {
  opacity: 1;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(255,40,20,.35) 100%), rgba(255,60,30,.10);
  mix-blend-mode: multiply;
}
.koortswaas__temp {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  padding: 6px 10px; border-radius: 10px; background: var(--red); color: #fff;
  font: 800 14px/1 var(--font-display); opacity: 0; transition: opacity .8s;
}
html.is-koorts .koortswaas__temp { opacity: 1; animation: blink 1.4s steps(2) infinite; }
html.is-koorts main, html.is-koorts footer {
  filter: saturate(1.5) hue-rotate(-14deg) contrast(1.06) blur(.5px);
  animation: koortsig 3.2s ease-in-out infinite;
}
@keyframes koortsig {
  0%, 100% { transform: none; }
  25% { transform: skewX(.6deg) translateX(2px); }
  50% { transform: scale(1.004) translateY(1px); }
  75% { transform: skewX(-.6deg) translateX(-2px); }
}

/* ---------- mini-Koopman (rechts in de statusbalk) ---------- */
.mini {
  flex: none; position: relative; align-self: stretch;
  display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px;
  border: 0; background: #b3150c; color: #fff; cursor: pointer;
  font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.mini .ic { width: 17px; height: 17px; stroke-width: 1.9; }
.mini__info {
  position: fixed; z-index: 160; right: 8px; top: calc(28px + env(safe-area-inset-top) + 8px);
  display: none; gap: 6px; width: 220px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(20,20,24,.94); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.mini.is-open .mini__info { display: grid; }
@media (hover: hover) { .mini:hover .mini__info { display: grid; } }
.mini__info small { color: var(--muted); font-weight: 500; font-size: 11px; }
.mini__tekst { font: 600 14px/1.25 var(--font-body); }
.mini__balk { height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.mini__balk i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red), #30d158); transition: width .2s; }

/* ---------- iconen ---------- */
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; overflow: visible; }
.ic--glas { stroke: url(#ic-glas); stroke-width: 1.15; }

@media (prefers-reduced-motion: reduce) {
  html.is-koorts main, html.is-koorts footer { animation: none; }
  /* Minder beweging betekent geen schokken, vliegende dingen of meeschuivende lagen. Rustige, doorlopende
     dingen mogen blijven: de nieuwsbalk (anders is de tekst niet te lezen) en het zachte zweven van de glazen man. */
  .ticker__koppen span { animation-duration: 70s !important; animation-iteration-count: infinite !important; }
  .glassman__zweef { animation-duration: 9s !important; animation-iteration-count: infinite !important; }
}

/* ---------- voor/na ---------- */
.voorna { max-width: 560px; margin: clamp(80px, 12vw, 140px) auto 0; text-align: center; }
.section-head--klein { margin-bottom: 28px; }
.display--s { font-size: clamp(32px, 5vw, 56px); }
.voorna__beeld {
  position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0,0,0,.55); touch-action: pan-y;
}
.voorna__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voorna__beeld img:first-child { filter: saturate(.7) sepia(.25); }
.voorna__na { clip-path: inset(0 0 0 var(--pos)); }
.voorna__label {
  position: absolute; top: 16px; z-index: 2; display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: rgba(0,0,0,.78);
  font: 600 11px/1.1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); text-align: left;
}
.voorna__label b { font: 800 20px/1 var(--font-display); color: #ff6b61; text-transform: none; letter-spacing: 0; }
.voorna__label--l { left: 16px; }
.voorna__label--r { right: 16px; text-align: right; }
.voorna__lijn { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 2; pointer-events: none; box-shadow: 0 0 20px rgba(255,255,255,.6); }
.voorna__lijn i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #000; font-style: normal; font-weight: 800; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.voorna__schuif { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; cursor: ew-resize; touch-action: pan-y; }
.voorna__beeld:has(.voorna__schuif:focus-visible) .voorna__lijn i { outline: 3px solid var(--cyan); outline-offset: 3px; }
.voorna__uitslag { margin-top: 18px; color: var(--muted); }
.voorna__uitslag b { color: var(--ink); }

/* ---------- ranglijst-inzending onder een experiment ---------- */
.inzending { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.inzending span { color: var(--ink); font-weight: 600; }
.inzending a { color: var(--cyan); }
.inzending__naam { font: 400 16px var(--font-body); color: var(--ink); width: 150px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
/* Met de statusbalk erboven moet de verborgen navigatie verder omhoog, anders schemert hij eronder. */
.inzending__uitslag { flex-basis: 100%; margin: 0; text-align: center; color: var(--ink); }
.inzending__uitslag:empty { display: none; }
@media (max-width: 480px) {
  .ticker__label { font-size: 0; gap: 0; padding: 0 8px 0 10px; }
  .ticker__status { display: none; }
  .ticker { gap: 8px; }
}

/* ---------- telefoon: experimenten ---------- */
.g-bingo__cell { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 480px) {
  .g-bingo__head, .g-bingo__card { gap: 6px; }
  .g-bingo__cell { padding: 4px; border-radius: 10px; font-size: 10.5px; }
  .g-radar__days { gap: 4px; }
}
.g-bol__vraag { font-size: 16px; padding: 14px 22px; }

/* =========================================================================
   Telefoon: alles wat je met een duim moet raken is minstens 44 punten,
   en invoervelden zijn 16px zodat iOS niet inzoomt bij het typen.
   ========================================================================= */
@media (pointer: coarse) {
  .nav { gap: 10px; }
  .nav__menu, .nav__koorts { width: 44px; height: 44px; flex: none; }
  .nav__cta { height: 40px; }
  .nav__brand { padding-block: 11px; margin-block: -11px; flex: none; }
  .nav__brand svg { flex: none; }
  .nav__cta { flex: none; }
  .mini { position: relative; }
  .mini::after { content: ""; position: absolute; inset: -8px -6px; }
  .btn { min-height: 44px; }
  .picker summary { padding: 15px; }
  .picker__item { min-height: 48px; align-items: center; }
  input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em); }
  input[type=range] { height: 32px; }
}
/* Smalle telefoons (iPhone SE, kleine Androids): alleen de druppel als logo, zodat de knoppen hun volle maat houden. */
@media (max-width: 400px) {
  .nav__brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__brand svg { width: 26px; height: 26px; }
}

/* =========================================================================
   Telefoon, ronde 2: alles van een experiment op één scherm, minder dode ruimte,
   geen telefoon-in-een-telefoon, leesbare kleine tekst.
   ========================================================================= */
@media (max-width: 700px) {
  /* De ticker schuift weg zodra je naar beneden scrolt en komt terug als je omhoog scrolt. */
  .ticker { transition: transform .35s var(--ease-out); }
  .progress { transition: top .35s var(--ease-out); }
  .nav { transition: top .35s var(--ease-out); }
  html.has-ticker.ticker-weg .ticker { transform: translateY(-100%); }
  html.has-ticker.ticker-weg .nav { top: env(safe-area-inset-top); }
  html.has-ticker.ticker-weg .progress { top: env(safe-area-inset-top); }

  /* Experimenten: compacte kop, zodat de knop van het experiment in beeld staat. */
  .experiment { padding-top: 32px; }
  .experiment .section-head { margin-bottom: 14px; }
  #exp-title { font-size: clamp(30px, 8.6vw, 38px); }
  #exp-lede { font-size: 15px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stage__body { padding: 4px 0 16px; }
  .g { gap: 16px; }
  .experiment__foot { margin-top: 16px; }
  .g-rad__wrap { width: min(78vw, 44svh); }
  .g-meter__gauge { width: min(100%, 52svh); }
  .g-radar__screen { max-width: min(100%, 40svh); }
  .g-xray__screen { max-width: min(100%, 42svh); touch-action: none; }
  .g-swipe__stack { height: min(300px, 40svh); }
  .g-janee__arena { height: 190px; }
  .g-kras__card { max-height: 40svh; }

  /* Bingo: drie kolommen, leesbare tekst. */
  .g-bingo__head, .g-bingo__card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-bingo__head span:nth-child(n+4) { display: none; }
  .g-bingo__cell { font-size: 13px; aspect-ratio: auto; min-height: 72px; }

  /* De chat is al een telefoon: geen tweede toestel eromheen. */
  .g-chat__phone { width: 100%; height: min(480px, 62svh); padding: 4px 0; border-radius: 0; background: none; box-shadow: none; }
  .g-chat__choices .g-chip { min-height: 40px; }

  /* Thermometer: glas en display netjes gecentreerd onder elkaar. */
  .g-thermo__row { flex-direction: column; gap: 14px; }

  .g-chip { min-height: 44px; }
  .g-chips { gap: 10px; }
  .g-captcha__brand small { font-size: 10px; }
  .g-radar__day b { font-size: 12px; }

  /* Homepage: een groter antwoord, een rustiger manifest, minder lege ruimte rond de grote beelden. */
  .hero__ja { font-size: 54vw; }
  .cracks { top: -12%; height: 124%; }
  .statement__text { font-size: clamp(24px, 6.6vw, 28px); line-height: 1.18; }
  .voorna { margin-top: 64px; }
  .voorna__beeld { aspect-ratio: 4 / 3.4; }
  .footer { padding-top: 40px; }
  .footer, .footer a { color: rgba(255,255,255,.7); font-size: 14px; }
}