/* =====================================================================
   FUZZIE FRIENDS — stylesheet (bold brand)
   Merk-tokens (kleuren + fonts) staan bovenaan in :root.
   ===================================================================== */

/* ---------- Eigen fonts ---------- */
@font-face {
  font-family: "Bevellier";
  src: url("../FONT/Bevellier-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Merkkleuren (gesampeld uit FF-colors) ---- */
  --green:#0C700E;  --green-tint:#EAF6DA;
  --blue:#0720D4;   --blue-tint:#E9F1FE;
  --yellow:#FFCB49; --yellow-tint:#FFF3D2;
  --orange:#FE7122; --orange-tint:#FFE5D2;
  --pink:#FE719C;   --pink-tint:#FBDDE9;
  --red:#E51F16;    --red-tint:#FFE0DB;

  /* ---- Basis ---- */
  --paper:#FBF5EA;          /* warme crème pagina-achtergrond */
  --ink:#23202B;            /* warm bijna-zwart voor tekst op licht */
  --ink-soft:#5C5667;

  /* ---- Fonts ---- */
  --font-display:"Bevellier", system-ui, sans-serif;
  --font-body:"Montserrat", system-ui, sans-serif;

  --maxw:1180px;
  --r-pill:999px;
  --r-lg:34px;
  --shadow-card:0 26px 60px -30px rgba(35,32,43,.45);
}

* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:1.12rem; line-height:1.6; font-weight:400;
  letter-spacing:normal;
  overflow-x:clip;
}
p { margin:0 0 1rem; max-width:62ch; }
a { color:inherit; }
img { max-width:100%; display:block; }
::selection { background:var(--yellow); color:var(--ink); }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }

/* ---------- Display-typografie met offset-schaduw (merk-signatuur) ---------- */
.display {
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  line-height:.9; letter-spacing:-.005em; margin:0;
  text-shadow:.045em .055em 0 var(--ds, rgba(35,32,43,.18));
}
.eyebrow {
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; font-size:.8rem; color:var(--ink-soft); margin:0 0 1.1rem;
}

/* ---------- Header ---------- */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:15px clamp(20px,5vw,44px);
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.scrolled { background:rgba(251,245,234,.9); backdrop-filter:blur(10px); box-shadow:0 10px 30px -24px rgba(35,32,43,.6); padding-block:10px; }
.brand-logo { height:58px; width:auto; display:block; }
.nav { display:flex; align-items:center; gap:8px; }
.icon-link {
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); text-decoration:none; transition:background-color .2s ease, transform .2s ease, color .2s ease;
}
.icon-link svg { width:21px; height:21px; }
.icon-link:hover { transform:translateY(-2px) rotate(-6deg); }
.brand-logo { transition:transform .3s cubic-bezier(.25,1,.5,1); }
.brand-link:hover .brand-logo { transform:rotate(-3deg) scale(1.04); }
.icon-link.yt:hover { color:var(--red); }
.icon-link.ig:hover { color:var(--pink); }
.icon-link.tt:hover { color:var(--blue); }
.icon-link.pin:hover { color:var(--orange); }

/* ---------- Buttons (pill, bold) ---------- */
.btn {
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.01em;
  font-size:1rem; text-decoration:none; cursor:pointer; border:0;
  padding:14px 26px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  box-shadow:0 14px 26px -16px rgba(35,32,43,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .2s ease;
}
.btn:hover { transform:translateY(-3px); box-shadow:0 22px 36px -18px rgba(35,32,43,.55); }
.btn:active { transform:translateY(-1px); }
.btn svg { width:20px; height:20px; }
.btn-red { --bg:var(--red); --fg:#fff; }
.btn-blue { --bg:var(--blue); --fg:#fff; }
.btn-pink { --bg:var(--pink); --fg:var(--ink); }
.btn-yellow { --bg:var(--yellow); --fg:var(--ink); }
.btn-ghost { --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 2.5px currentColor; }
.btn-ghost:hover { box-shadow:inset 0 0 0 2.5px currentColor; }
.btn-on-color { --bg:#fff; --fg:var(--ink); }

/* ---------- Hero ---------- */
.hero { position:relative; padding:clamp(118px,16vh,168px) 0 clamp(24px,4vh,54px); overflow:visible; }
.hero .wrap { position:relative; }
.hero-copy { position:relative; z-index:3; max-width:600px; }
.hero h1 { font-size:clamp(2.9rem,7.2vw,6rem); --ds:var(--pink); color:var(--blue); margin:0 0 1.3rem; }
.hero .lead { font-size:clamp(1.1rem,1.7vw,1.34rem); color:var(--ink-soft); max-width:42ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:13px; margin-top:2rem; }
/* Grote Tigor die onder de volgende sectie doorloopt, met parallax */
.hero-tigor { position:absolute; z-index:1; right:clamp(-50px,3vw,40px); top:92px; height:clamp(560px,103vh,940px); pointer-events:none; will-change:transform; }
.hero-tigor img { height:100%; width:auto; display:block; filter:drop-shadow(0 26px 36px rgba(35,32,43,.22)); }

/* ---------- Full-bleed beeldband ---------- */
.band { position:relative; overflow:hidden; z-index:2; }
.band img { width:100%; height:clamp(260px,46vw,560px); object-fit:cover; display:block; }
.band-cap { position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,4vw,46px); background:linear-gradient(transparent, rgba(35,32,43,.55)); }
.band-cap .display { color:#fff; --ds:rgba(0,0,0,.25); font-size:clamp(1.6rem,4vw,3rem); }
.band img { will-change:transform; }

/* Doorlopende merkwoorden-strip (marquee) */
.marquee { overflow:hidden; background:var(--orange); padding:clamp(14px,2vw,22px) 0; }
.marquee-track { display:flex; width:max-content; will-change:transform; }
.marquee-group { display:flex; align-items:center; gap:clamp(22px,4vw,52px); padding-right:clamp(22px,4vw,52px); flex:none; }
.marquee-group span { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.3rem,3.2vw,2.5rem); color:var(--paper); white-space:nowrap; letter-spacing:.01em; }
.marquee-group .sep { color:rgba(255,255,255,.5); }

/* In de pers (BNR) — geel met zwarte letters */
.press { z-index:2; background:var(--yellow); color:var(--ink); }
.press .kicker { color:rgba(35,32,43,.6); opacity:1; }
.press h2.display { font-size:clamp(2rem,5vw,3.6rem); margin:.4rem 0 1rem; }
.press p { color:rgba(35,32,43,.82); font-size:1.1rem; max-width:42ch; }
.press-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center; }
.press-badge { display:inline-flex; align-items:center; gap:9px; margin-top:1.5rem; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; padding:11px 18px; border-radius:999px; background:var(--ink); color:var(--paper); text-decoration:none; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.press-badge:hover { transform:translateY(-2px); box-shadow:0 14px 24px -12px rgba(35,32,43,.65); }
.press-badge .dot { width:9px; height:9px; border-radius:50%; background:var(--yellow); flex:none; }
.press-badge .arrow { width:15px; height:15px; margin-left:2px; transition:transform .25s ease; }
.press-badge:hover .arrow { transform:translateX(3px); }
.press-video { width:100%; max-width:430px; margin-inline:auto; }
.press-video video { width:100%; aspect-ratio:4/5; border-radius:22px; box-shadow:var(--shadow-card); background:#000; display:block; }

/* ---------- Kleur-geblokte sectie ---------- */
.section { padding:clamp(64px,10vh,120px) 0; position:relative; }
.kicker { font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; opacity:.8; margin:0 0 .8rem; }
.block-blue { background:var(--blue); color:#fff; }
.block-blue .kicker { color:var(--yellow); opacity:1; }
.block-green { background:var(--green); color:#fff; }
.block-pink-tint { background:var(--pink-tint); }
.block-green-tint { background:var(--green-tint); }
.block-yellow-tint { background:var(--yellow-tint); }
.block-cream { background:var(--paper); }

h2.h-section { font-size:clamp(2.1rem,5.4vw,4.2rem); margin:.3rem 0 1rem; }

/* Wat is het (blauw blok) */
.statement { max-width:15ch; --ds:#020a3a; font-size:clamp(3rem,9.5vw,7.2rem); line-height:.86; }
.statement-sub { font-size:1.22rem; max-width:50ch; color:rgba(255,255,255,.9); margin-top:1.4rem; }
.chips { display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
.chip { display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.28); padding:11px 18px; border-radius:var(--r-pill); font-size:1rem; }
.chip b { font-weight:500; }
.chip .dot { width:13px; height:13px; border-radius:50%; flex:none; }

/* Pijlers */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.6rem; }
.pillar { position:relative; border-radius:var(--r-lg); padding:30px 26px; color:#fff; overflow:hidden; min-height:230px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.pillar:hover { transform:translateY(-7px); }
/* Iconen krijgen betekenis op hover: Move wiebelt, Chill ademt, Learn groeit */
@media (hover:hover){
  .pillar.orange:hover .p-icon { animation:ffWiggle .55s ease-in-out; }
  .pillar.blue:hover .p-icon { animation:ffBreathe 1.9s ease-in-out infinite; }
  .pillar.green:hover .p-icon { animation:ffSprout .5s cubic-bezier(.25,1,.5,1); transform-origin:50% 100%; }
}
@keyframes ffWiggle { 0%{transform:rotate(0)} 28%{transform:rotate(-7deg)} 62%{transform:rotate(5deg)} 100%{transform:rotate(0)} }
@keyframes ffBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes ffSprout { 0%{transform:scaleY(.84)} 100%{transform:scaleY(1)} }
.pillar.orange { background:var(--orange); }
.pillar.blue { background:var(--blue); }
.pillar.green { background:var(--green); }
.pillar .p-icon { width:46px; height:46px; margin-bottom:auto; }
.pillar h3 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2rem); margin:14px 0 .4rem; text-shadow:.03em .04em 0 rgba(0,0,0,.18); }
.pillar p { font-size:.98rem; color:rgba(255,255,255,.9); margin:0 0 16px; }
.pillar .status { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.78rem; letter-spacing:.03em; padding:7px 14px; border-radius:var(--r-pill); text-decoration:none; }
.status.live { background:#fff; color:var(--ink); }
.status.live .pulse { width:9px; height:9px; border-radius:50%; background:var(--green); }
.status.soon { background:rgba(255,255,255,.16); color:#fff; border:1.5px solid rgba(255,255,255,.3); }
.pillar.featured { outline:4px solid var(--yellow); outline-offset:-4px; }

/* Adem mee */
.breathe { text-align:center; }
.breathe-stage { display:grid; place-items:center; margin:2.2rem auto 1.4rem; height:330px; position:relative; }
.breathe-rings { position:absolute; inset:0; display:grid; place-items:center; }
.breathe-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(35,32,43,.12); }
.breathe-ring.r1 { width:250px; height:250px; }
.breathe-ring.r2 { width:330px; height:330px; }
.breathe-circle { width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 36% 30%, var(--sky,#7da6ff), var(--pink)); box-shadow:0 30px 60px -22px rgba(7,32,212,.5); display:grid; place-items:center; will-change:transform; }
.breathe-label { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.1rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.breathe-source { font-size:.95rem; color:var(--ink-soft); max-width:52ch; margin:0 auto; }

/* Voor ouders */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,64px); align-items:center; }
.split.reverse .split-media { order:2; }
.split-media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.trust-list { list-style:none; margin:1.4rem 0 0; padding:0; counter-reset:t; }
.trust-list li { position:relative; padding:18px 0 18px 60px; border-top:2px solid rgba(35,32,43,.12); }
.trust-list li:last-child { border-bottom:2px solid rgba(35,32,43,.12); }
.trust-list li::before { counter-increment:t; content:counter(t); position:absolute; left:0; top:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; background:var(--yellow); color:var(--ink); }
.trust-list .t { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.05rem; letter-spacing:.01em; margin-bottom:1px; }
.trust-list .d { color:var(--ink-soft); font-size:.98rem; }

/* De Fuzzies */
.fuzzies-feature { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-top:2.2rem; background:#fff; }
.fuzzies-feature img { width:100%; display:block; }
.fuzzie-names { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.name-tag { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.86rem; padding:8px 16px; border-radius:var(--r-pill); color:#fff; }

/* Video's */
.videos { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.4rem; }
.video-card { text-decoration:none; color:inherit; border-radius:22px; overflow:hidden; background:#fff; box-shadow:var(--shadow-card); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.video-card:hover { transform:translateY(-6px); }
.video-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--blue-tint); }
.video-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.video-card:hover .video-thumb img { transform:scale(1.06); }
.video-thumb .play { position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background:rgba(251,245,234,.94); display:grid; place-items:center; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); transition:transform .3s cubic-bezier(.25,1,.5,1), box-shadow .3s ease; }
.video-card:hover .play { transform:scale(1.14); box-shadow:0 16px 32px -12px rgba(0,0,0,.55); }
.video-thumb .play svg { width:22px; height:22px; margin-left:3px; color:var(--red); }
.video-meta { padding:15px 18px 20px; }
.video-meta .tag { font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--ink-soft); }
.video-meta .vt { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1rem; margin:5px 0 0; }

/* Hoe gemaakt (slim band) */
.maker { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px); align-items:center; }
.maker-media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-card); }

/* CTA */
.cta { background:var(--red); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta .display { --ds:rgba(0,0,0,.22); color:#fff; }
.cta .wrap { position:relative; z-index:1; }
/* Tigor gluurt vanaf de onderrand de rode sectie in (JS schuift hem omhoog) */
.peek-tigor { position:absolute; left:clamp(8px,4vw,72px); bottom:0; width:clamp(110px,15vw,185px); z-index:0; pointer-events:none; transform:translateY(100%); }
.cta-sub { color:rgba(255,255,255,.9); max-width:42ch; margin:.6rem auto 2rem; font-size:1.16rem; }
.cta-buttons { display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.cta-fuzzie { width:min(220px,40vw); margin:1.6rem auto 0; }

/* Footer */
footer { background:var(--paper); padding:54px 0 40px; }
.foot-logo { height:42px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.foot-brand { max-width:320px; }
.foot-brand .foot-logo { margin-bottom:16px; }
.foot-brand p { margin:0 0 12px; color:var(--ink-soft); font-size:.94rem; line-height:1.6; }
.foot-brand .nav { margin-top:16px; }
.foot-bar { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; border-top:2px solid rgba(35,32,43,.14); padding-top:24px; }
.foot-bar p { margin:0; color:var(--ink-soft); font-size:.9rem; }
.foot-legal a { color:var(--ink-soft); text-decoration:none; font-size:.9rem; transition:color .2s ease; }
.foot-legal a:hover { color:var(--blue); }

/* Cookie-toestemming */
.cookie-banner { position:fixed; left:clamp(14px,3vw,24px); bottom:clamp(14px,3vw,24px); right:auto; width:min(440px, calc(100vw - 28px)); z-index:9999; background:var(--paper); color:var(--ink); border-radius:22px; border:1.5px solid rgba(35,32,43,.1); box-shadow:0 26px 60px -20px rgba(35,32,43,.55); padding:22px 24px; opacity:0; transform:translateY(18px); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.cookie-banner.show { opacity:1; transform:translateY(0); }
.cookie-banner[hidden] { display:none; }
.cookie-text { margin:0 0 16px; font-size:.98rem; line-height:1.55; color:var(--ink-soft); max-width:none; }
.cookie-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cookie-btn { padding:10px 22px; font-size:.92rem; }

/* Footer-kolommen */
.foot-col { display:flex; flex-direction:column; gap:12px; }
.foot-col h3 { margin:0 0 6px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.82rem; letter-spacing:.06em; color:var(--ink); }
.foot-col a { color:var(--ink-soft); text-decoration:none; font-size:.95rem; transition:color .2s ease; }
.foot-col a:hover { color:var(--blue); }
@media (max-width:820px){
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px 24px; }
  .foot-brand { grid-column:1 / -1; max-width:none; }
}
@media (max-width:520px){
  .foot-grid { grid-template-columns:1fr; }
  .foot-bar { justify-content:flex-start; }
}

/* Inhoudspagina's */
.page-hero { padding:clamp(120px,16vh,168px) 0 clamp(18px,3vh,36px); }
.page-hero .lead { font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:54ch; margin-top:1rem; }
.prose { max-width:70ch; font-size:1.12rem; }
.prose h2 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.05; letter-spacing:-.005em; margin:2.4rem 0 .8rem; color:var(--ink); }
.prose h3 { font-family:var(--font-display); font-weight:900; font-size:1.22rem; margin:1.7rem 0 .4rem; color:var(--ink); }
.prose p { margin:0 0 1.1rem; }
.prose a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.prose ul { margin:.2rem 0 1.3rem; padding-left:1.3rem; }
.prose li { margin:.45rem 0; }
.prose .source { font-size:.92rem; color:var(--ink-soft); }
.prose .pill-links { display:flex; flex-wrap:wrap; gap:12px; margin:1.8rem 0 .5rem; }

/* FAQ */
.faq-list { max-width:760px; }
.faq-item { border-top:2px solid rgba(35,32,43,.1); padding:24px 0; }
.faq-item:last-child { border-bottom:2px solid rgba(35,32,43,.1); }
.faq-item h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(1.15rem,2.2vw,1.4rem); margin:0 0 .6rem; color:var(--ink); }
.faq-item p { margin:0 0 .6rem; color:var(--ink-soft); }
.faq-item p:last-child { margin-bottom:0; }
.faq-item a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* FAQ accordion (uitklap) */
.faq-acc { max-width:760px; }
.faq-acc details {
  background:#fff;
  border:2px solid rgba(35,32,43,.1);
  border-radius:16px;
  margin-bottom:14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-acc details[open] {
  border-color:var(--blue);
  box-shadow:0 10px 30px rgba(7,32,212,.10);
}
.faq-acc summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.05rem,2vw,1.3rem);
  line-height:1.25;
  color:var(--ink);
  transition:color .15s ease;
}
.faq-acc summary::-webkit-details-marker { display:none; }
.faq-acc summary::marker { content:""; }
.faq-acc summary:hover { color:var(--blue); }
.faq-acc .chev {
  flex:0 0 auto;
  width:24px; height:24px;
  color:var(--blue);
  transition:transform .25s ease;
}
.faq-acc details[open] .chev { transform:rotate(180deg); }
.faq-acc .faq-a { padding:0 22px 22px; }
.faq-acc .faq-a p { margin:0; color:var(--ink-soft); }
.faq-acc .faq-a a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.faq-acc details[open] .faq-a { animation:faqIn .25s ease; }
@keyframes faqIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* Reveal (gated; zonder JS blijft alles zichtbaar) */
.js .reveal { opacity:0; }

@media (max-width:880px){
  .split, .maker, .press-grid { grid-template-columns:1fr; }
  .split.reverse .split-media { order:0; }
  .pillars, .videos { grid-template-columns:1fr; }
  .hero { padding-bottom:0; }
  .hero-copy { max-width:none; }
  .hero-tigor { position:static; display:block; height:auto; width:min(80vw,360px); margin:16px auto -44px; right:auto; top:auto; }
  .hero-tigor img { height:auto; width:100%; }
}
@media (max-width:560px){
  body { font-size:1.06rem; }
  .nav .icon-link { width:36px; height:36px; }
  .brand-logo { height:44px; }
}
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; }
  .pillar .p-icon { animation:none !important; }
  .peek-tigor { display:none; }
  .brand-logo, .video-thumb .play, .icon-link { transition:none; }
}


/* ============ Hoofdmenu ============ */
.header-right { display:flex; align-items:center; gap:clamp(16px,3vw,32px); }
.site-nav { display:flex; align-items:center; gap:clamp(14px,2.2vw,26px); }
.site-nav a { color:var(--ink); text-decoration:none; font-weight:600; font-size:1.02rem; line-height:1; white-space:nowrap; transition:color .15s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color:var(--blue); }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0; background:none; border:0; cursor:pointer; position:relative; z-index:80; }
.nav-toggle span { display:block; width:27px; height:3px; margin:0 auto; background:var(--ink); border-radius:3px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width:920px){
  .nav-toggle { display:flex; }
  .header-right {
    position:fixed; top:0; right:0; bottom:0; height:100vh; width:min(84vw,330px);
    background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:26px; padding:100px 32px 32px; overflow-y:auto;
    transform:translateX(106%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 50px -22px rgba(35,32,43,.55); z-index:70;
  }
  .header-right.open { transform:translateX(0); }
  .site-nav { flex-direction:column; align-items:flex-start; gap:22px; }
  .site-nav a { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.55rem; }
  .header-right .nav { margin-top:4px; }
}

/* ============ Over ons ============ */
.about-hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about-photo { position:relative; transform:rotate(2deg); margin:12px 8px 0 0; }
.about-photo img { width:100%; border-radius:26px; box-shadow:0 34px 74px -28px rgba(35,32,43,.55); display:block; }
.about-photo .name-tag { position:absolute; left:16px; bottom:16px; background:var(--blue); transform:rotate(-2.5deg); box-shadow:0 10px 22px -10px rgba(35,32,43,.6); }
.roadmap { list-style:none; margin:2rem 0 0; padding:0; }
.roadmap li { display:flex; align-items:baseline; gap:10px 18px; flex-wrap:wrap; border-top:2px solid rgba(35,32,43,.12); padding:18px 0; }
.roadmap li:last-child { border-bottom:2px solid rgba(35,32,43,.12); }
.roadmap .r-name { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.35rem,2.7vw,2rem); line-height:1; flex:0 0 auto; min-width:min(300px,100%); }
.roadmap .r-what { color:var(--ink-soft); flex:1 1 260px; font-size:1.02rem; }
.status-pill { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.74rem; letter-spacing:.03em; padding:8px 15px; border-radius:var(--r-pill); background:rgba(35,32,43,.08); color:var(--ink); white-space:nowrap; }
.status-pill.live { background:var(--green); color:#fff; }
.status-pill.live .pulse { width:8px; height:8px; border-radius:50%; background:var(--yellow); }
@media (max-width:880px){
  .about-hero .wrap { grid-template-columns:1fr; }
  .about-photo { max-width:400px; margin:10px auto 0; }
}

/* ============ App-pagina ============ */
.app-hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
.phone { position:relative; border-radius:clamp(34px,4.4vw,46px); background:#12101a; padding:9px; box-shadow:0 42px 90px -34px rgba(35,32,43,.65), inset 0 0 0 2px rgba(255,255,255,.07); }
.phone img { width:100%; border-radius:clamp(26px,3.6vw,38px); display:block; }
.phone-fan { position:relative; min-height:clamp(380px,44vw,620px); }
.phone-fan .p1 { position:absolute; left:0; top:0; width:min(60%,290px); transform:rotate(-4.5deg); z-index:2; }
.phone-fan .p2 { position:absolute; right:0; top:clamp(40px,6vw,84px); width:min(56%,270px); transform:rotate(5deg); z-index:1; }
.split-media .phone { max-width:330px; margin-inline:auto; }
.split-media .phone.tilt-l { transform:rotate(-2.5deg); }
.split-media .phone.tilt-r { transform:rotate(2.5deg); }
.phone-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.5vw,26px); align-items:start; }
.phone-pair .phone { max-width:none; }
.phone-pair .phone:first-child { transform:rotate(-2.5deg) translateY(14px); }
.phone-pair .phone:last-child { transform:rotate(2.5deg); }
.worlds { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; max-width:52ch; }
.world-pill { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.88rem; letter-spacing:.02em; padding:10px 18px; border-radius:var(--r-pill); color:#fff; box-shadow:0 10px 20px -12px rgba(35,32,43,.5); }
.moment-list { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:10px; }
.moment-list li { display:flex; align-items:baseline; gap:12px; }
.moment-list .m { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.05rem; white-space:nowrap; }
.moment-list .md { color:var(--ink-soft); font-size:1rem; }
@media (max-width:880px){
  .app-hero .wrap { grid-template-columns:1fr; }
  .phone-fan { min-height:0; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:440px; margin:10px auto 0; }
  .phone-fan .p1, .phone-fan .p2 { position:static; width:auto; }
}

/* ---------- Site-brede app-topbar (bovenaan elke pagina) ---------- */
:root { --topbar-h: 62px; }
.app-topbar {
  position:fixed; top:0; left:0; right:0; z-index:75;
  min-height:var(--topbar-h);
  background:#fff; border-bottom:1px solid rgba(35,32,43,.09);
  box-shadow:0 3px 16px -9px rgba(35,32,43,.35);
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,2.4vw,26px);
  padding:9px clamp(14px,4vw,30px); text-align:center;
}
.app-topbar .tt { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; color:var(--green); white-space:nowrap; }
.app-topbar .tt .dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:livePulse 2.4s ease-out infinite; }
.app-topbar .msg { font-weight:700; color:var(--ink); font-size:.95rem; }
.app-topbar .dl { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.8rem; letter-spacing:.02em; background:var(--blue); color:#fff; padding:10px 20px; border-radius:var(--r-pill); text-decoration:none; white-space:nowrap; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.app-topbar .dl:hover { transform:translateY(-1px); box-shadow:0 12px 22px -10px rgba(7,32,212,.65); }
.app-topbar .dl svg { width:15px; height:15px; }
body.has-topbar { padding-top:var(--topbar-h); }
body.has-topbar .site-header { top:var(--topbar-h); }
body.has-topbar .stage { height:calc(100vh - var(--topbar-h)); min-height:600px; }
/* embed-modus (adem-mee in iframe): geen topbar */
html.embed .app-topbar { display:none !important; }
html.embed body.has-topbar { padding-top:0 !important; }
@media (max-width:760px){
  :root { --topbar-h: 56px; }
  .app-topbar .msg { display:none; }
  .app-topbar .dl { padding:9px 16px; font-size:.76rem; }
}

/* ---------- App Store badge (herbruikbaar, hele site) ---------- */
.appstore-badge { display:inline-block; line-height:0; border-radius:11px; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.appstore-badge img { height:52px; width:auto; display:block; }
.appstore-badge:hover { transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(35,32,43,.45); }
.appstore-badge.sm img { height:44px; }
.appstore-badge.lg img { height:60px; }
/* badge in de app-topbar */
.topbar-badge { line-height:0; }
.topbar-badge img { height:40px; }
@media (max-width:760px){ .topbar-badge img { height:34px; } }

/* "nu live" markering bij de app */
.live-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; padding:6px 13px; border-radius:var(--r-pill); background:var(--green); color:#fff; }
.live-tag .pulse { width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 0 rgba(255,203,73,.7); animation:livePulse 2.4s ease-out infinite; }
@keyframes livePulse { 0%{ box-shadow:0 0 0 0 rgba(255,203,73,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,203,73,0);} 100%{ box-shadow:0 0 0 0 rgba(255,203,73,0);} }
@media (prefers-reduced-motion:reduce){ .live-tag .pulse { animation:none; } }

/* ---------- App-promo banner (homepage) ---------- */
.app-banner { background:var(--blue); color:#fff; border-radius:clamp(24px,4vw,40px); overflow:hidden; }
.app-banner .inner { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,50px); align-items:center; padding:clamp(28px,5vw,56px); }
.app-banner .kicker { color:var(--yellow); opacity:1; }
.app-banner h2 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.8rem,4.2vw,3rem); line-height:1; margin:.4rem 0 0; --ds:#020a3a; }
.app-banner p { color:rgba(255,255,255,.86); margin:1rem 0 1.6rem; max-width:46ch; }
.app-banner .badge-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.app-banner .shot { position:relative; display:flex; justify-content:center; }
.app-banner .shot img { width:min(210px,58%); border-radius:26px; box-shadow:0 40px 70px -30px rgba(0,0,0,.6); transform:rotate(-3deg); border:6px solid rgba(255,255,255,.9); }
/* ================= Activiteiten (inspiratieplatform) ================= */
.act-hero { padding:clamp(120px,16vh,168px) 0 1rem; }
.act-hero .lead { font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:60ch; margin-top:1rem; }

/* --- layout: sidebar + results --- */
.act-layout { display:grid; grid-template-columns:264px 1fr; gap:clamp(20px,3vw,36px); align-items:start; margin-top:2.2rem; }
.act-sidebar {
  position:sticky; top:calc(var(--topbar-h) + 90px);
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:22px 22px 24px; max-height:calc(100vh - var(--topbar-h) - 120px); overflow-y:auto;
}
.act-sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.act-sidebar-head .tool-head { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1rem; margin:0; }
.act-reset { background:none; border:0; text-decoration:underline; text-underline-offset:3px; font-family:var(--font-body); font-weight:700; font-size:.8rem; color:var(--ink-soft); cursor:pointer; padding:0; }
.act-reset:hover { color:var(--ink); }

.act-search-box { margin-bottom:18px; }
.act-search-box input { width:100%; border:2px solid rgba(35,32,43,.14); border-radius:var(--r-pill); padding:9px 16px; font-family:var(--font-body); font-size:.9rem; background:#fff; }
.act-search-box input:focus { outline:none; border-color:var(--ink); }

.act-filter-group { padding:14px 0; border-top:2px solid rgba(35,32,43,.08); }
.act-filter-group:first-of-type { border-top:0; padding-top:0; }
.act-filter-group .afg-label { font-family:var(--font-body); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); margin:0 0 10px; }
.filter-pills { display:flex; flex-wrap:wrap; gap:7px; }
.filter-pill {
  font-family:var(--font-body); font-weight:700; font-size:.82rem;
  padding:7px 13px; border-radius:var(--r-pill); border:2px solid rgba(35,32,43,.14);
  background:transparent; color:var(--ink); cursor:pointer; transition:all .15s ease;
}
.filter-pill:hover { border-color:var(--ink); }
.filter-pill.active { background:var(--ink); border-color:var(--ink); color:var(--paper); }

.act-cat-list { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow-y:auto; margin-right:-8px; padding-right:8px; }
.act-cat-row {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  font-family:var(--font-body); font-weight:600; font-size:.86rem; color:var(--ink);
  background:none; border:0; border-radius:10px; padding:7px 8px; cursor:pointer; transition:background .15s ease;
}
.act-cat-row:hover { background:rgba(35,32,43,.05); }
.act-cat-row .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 2px rgba(35,32,43,.15); }
.act-cat-row.active { background:rgba(35,32,43,.07); font-weight:800; }
.act-cat-row .n { margin-left:auto; font-weight:700; color:var(--ink-soft); font-size:.76rem; }

.act-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.act-count { font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--ink-soft); }
.act-filter-toggle {
  display:none; align-items:center; gap:8px; font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:.82rem; background:var(--ink); color:var(--paper); border:0; border-radius:var(--r-pill); padding:10px 18px; cursor:pointer;
}
.act-filter-toggle .badge { background:var(--yellow); color:var(--ink); border-radius:50%; width:20px; height:20px; display:inline-grid; place-items:center; font-size:.72rem; }

.act-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.act-chip {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.78rem;
  background:var(--yellow-tint); color:var(--ink); border-radius:var(--r-pill); padding:6px 8px 6px 14px;
}
.act-chip button { background:rgba(35,32,43,.12); border:0; border-radius:50%; width:18px; height:18px; display:grid; place-items:center; cursor:pointer; color:var(--ink); font-size:.7rem; line-height:1; }
.act-chip button:hover { background:var(--ink); color:var(--paper); }

.act-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.act-card {
  background:#fff; border-radius:22px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:var(--ink);
  border-top:6px solid var(--accent, var(--blue));
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.act-card:hover { transform:translateY(-4px); box-shadow:0 30px 54px -26px rgba(35,32,43,.5); }
.act-card .act-cat { font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; color:var(--accent, var(--blue)); padding:16px 20px 0; }
.act-card .act-body { padding:8px 20px 20px; flex:1; display:flex; flex-direction:column; }
.act-card h3 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.22rem; margin:0 0 9px; line-height:1.08; }
.act-card p { font-size:.95rem; color:var(--ink-soft); margin:0 0 14px; line-height:1.4; }
.act-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.act-badges span { font-family:var(--font-body); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:var(--r-pill); background:rgba(35,32,43,.07); color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
.rommel-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.rommel-dot.geen { background:var(--green); }
.rommel-dot.gemiddeld { background:var(--yellow); }
.rommel-dot.flink { background:var(--red); }
.act-empty { text-align:center; padding:4rem 1rem; color:var(--ink-soft); display:none; }
.act-empty.show { display:block; }

.act-loadmore-wrap { display:flex; justify-content:center; margin-top:2.4rem; }
.act-loadmore-wrap .btn[disabled] { opacity:.4; pointer-events:none; }

.act-drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(35,32,43,.5); z-index:85; }
.act-drawer-backdrop.show { display:block; }

@media (max-width:960px){
  .act-layout { grid-template-columns:1fr; }
  .act-sidebar {
    position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(88vw,360px);
    max-height:none; border-radius:0; box-shadow:-18px 0 50px -22px rgba(35,32,43,.55);
    transform:translateX(106%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    padding:28px 22px 32px; overflow-y:auto;
  }
  .act-sidebar.open { transform:translateX(0); }
  .act-filter-toggle { display:inline-flex; }
}

/* --- individuele activiteitenpagina --- */
.act-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:1.8rem 0 2.2rem; }
.act-meta-item { background:#fff; border-radius:18px; box-shadow:var(--shadow-card); padding:14px 16px; }
.act-meta-item .lbl { font-family:var(--font-body); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 4px; }
.act-meta-item .val { font-family:var(--font-display); font-weight:900; font-size:1rem; }

.act-quote { display:flex; align-items:center; gap:20px; border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); margin:2rem 0; }
.act-quote img { width:76px; height:76px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 8px 14px rgba(0,0,0,.15)); }
.act-quote .q-name { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.95rem; margin:0 0 4px; }
.act-quote .q-text { font-size:1.08rem; font-style:italic; margin:0; }

.act-steps { list-style:none; margin:1.4rem 0 2rem; padding:0; counter-reset:s; }
.act-steps li { position:relative; padding:16px 0 16px 56px; border-top:2px solid rgba(35,32,43,.12); }
.act-steps li:last-child { border-bottom:2px solid rgba(35,32,43,.12); }
.act-steps li::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:14px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; background:var(--yellow); color:var(--ink); }
.act-steps .t { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.98rem; margin-bottom:2px; }
.act-steps .d { color:var(--ink-soft); }

.act-table { width:100%; border-collapse:collapse; margin:1.4rem 0 2rem; }
.act-table th { text-align:left; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.82rem; padding:10px 14px; background:var(--ink); color:var(--paper); }
.act-table th:first-child { border-radius:14px 0 0 0; } .act-table th:last-child { border-radius:0 14px 0 0; }
.act-table td { padding:12px 14px; border-bottom:1px solid rgba(35,32,43,.1); font-size:.95rem; vertical-align:top; }
.act-table tr:nth-child(even) td { background:rgba(35,32,43,.03); }

.act-variants { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:1.4rem 0 2rem; }
.act-variant { border-radius:20px; padding:18px 20px; background:var(--pink-tint); }
.act-variant .v-t { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:.9rem; margin:0 0 8px; }
.act-variant ul { margin:0; padding-left:1.1rem; } .act-variant li { margin:.3rem 0; font-size:.92rem; }
.act-variant.v2 { background:var(--blue-tint); } .act-variant.v3 { background:var(--green-tint); } .act-variant.v4 { background:var(--yellow-tint); }
@media (max-width:700px){ .act-variants { grid-template-columns:1fr; } }

.act-safety { background:var(--red-tint); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px); margin:1.4rem 0 2rem; }
.act-safety h2 { margin-top:0 !important; }
.act-safety ul { margin:.4rem 0 0; padding-left:1.2rem; } .act-safety li { margin:.4rem 0; }

.act-badge-callout { display:flex; align-items:center; gap:16px; background:var(--yellow-tint); border-radius:var(--r-lg); padding:clamp(18px,2.6vw,26px); margin:1.4rem 0 2rem; }
.act-badge-callout .emoji { font-size:2.2rem; line-height:1; }
.act-badge-callout p { margin:0; font-size:.98rem; }
.act-badge-callout strong { display:block; font-family:var(--font-display); text-transform:uppercase; font-size:.95rem; margin-bottom:2px; }

.act-crumb { font-size:.85rem; color:var(--ink-soft); margin:0 0 .6rem; }
.act-crumb a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.act-crumb a:hover { color:var(--ink); }

@media (max-width:820px){
  .app-banner .inner { grid-template-columns:1fr; text-align:center; }
  .app-banner .badge-row { justify-content:center; }
  .app-banner p { margin-inline:auto; }
  .app-banner .shot { order:-1; margin-bottom:6px; }
  .app-banner .shot img { width:170px; }
}