/* =====================================================================
   FUZZIE FRIENDS · paginas.css (homepage en de hoofdpagina's)
   Bovenop site.css. Ritme: schermbrede banden wisselen af met afgeronde
   blokken. Beweging vertelt het verhaal: de aan/uit-schakelaar in de
   opening, "standje disco" dat tot rust komt, vier diensten die op één
   plek samenkomen, en een balk die gewoon mag eindigen.
   Beeldplekken (.ph) worden in de laatste fase gevuld.
   ===================================================================== */
/* ---------- 1. belofte: schermbreed, met de schakelaar ---------- */
/* de kop is in beide standen crème: de beelden hebben dezelfde crème en lopen naadloos over in de pagina */
.hero { margin-top:0; padding-block:clamp(40px, 5vw, 80px); background:var(--cream); color:var(--ink); }
.hero::before { display:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(24px, 4vw, 64px); align-items:center; }
/* Bij het eerste stukje scrollen blijft de kop staan: eerst gaat de schakelaar om, dan schuift alles door.
   home.js zet .vastgezet, --pin (waar de inhoud vast blijft staan) en --ruimte (hoe lang). */
.hero.vastgezet { overflow:visible; overflow:clip; }
.hero.vastgezet::after { content:""; display:block; height:var(--ruimte, 0px); }
.hero.vastgezet .hero-grid { position:sticky; top:var(--pin, 0px); }
.hero .eyebrow { background:#fff; color:var(--blue); }
.hero h1 { font-size:clamp(2.6rem, 1.3rem + 4.2vw, 5.1rem); max-width:12.5ch; }
.hero h1 span { display:block; transition:color 1.1s var(--ease-out), opacity 1.1s var(--ease-out), transform 1.2s var(--ease-pop); }
.hero .l1 { color:var(--blue); }
.hero .l2 { color:var(--blue); opacity:.3; transform:translateY(6px); }
.hero[data-state="uit"] .l1 { opacity:.3; }
.hero[data-state="uit"] .l2 { opacity:1; transform:none; }
.switch-row { display:flex; align-items:center; gap:16px; margin:1.6rem 0 0; min-height:76px; }
.switch-say { position:relative; font-weight:700; font-size:clamp(1rem, .95rem + .3vw, 1.15rem); min-width:0; flex:1; margin:0; }
.switch-say span { display:block; transition:opacity .6s var(--ease-out), transform .7s var(--ease-pop); }
.switch-say .say-uit { position:absolute; inset:0; opacity:0; transform:translateY(10px); }
.hero[data-state="uit"] .say-aan { opacity:0; transform:translateY(-10px); }
.hero[data-state="uit"] .say-uit { opacity:1; transform:none; }
.hero .lead { max-width:36ch; margin:1.2rem 0 1.8rem; }
.hero .btn-white { background:#fff; }
/* de aan/uit-schakelaar uit de kit: rechts + vinkje + AAN, links + streepje + UIT */
.toggle { position:relative; flex:none; width:150px; height:72px; border:0; padding:0; cursor:pointer; border-radius:var(--pill); box-shadow:var(--hard); font-family:var(--font); background:var(--green); transition:background-color .5s var(--ease-out), transform .35s var(--ease-pop), box-shadow .35s; }
.toggle:active { transform:translate(3px,5px); box-shadow:var(--hard-down); }
.toggle-word { position:absolute; top:50%; transform:translateY(-50%); left:20px; font-weight:700; font-size:1.25rem; color:var(--cream); transition:left .5s var(--ease-pop), color .3s; }
.toggle-thumb { position:absolute; top:6px; left:calc(100% - 66px); width:60px; height:60px; border-radius:var(--pebble); background:var(--cream); display:grid; place-items:center; transition:left .55s var(--ease-pop), background-color .4s; }
.toggle-thumb svg { position:absolute; width:56%; height:56%; fill:var(--ink); transition:opacity .25s, transform .35s var(--ease-pop); }
.toggle .i-min { opacity:0; transform:scale(.4); }
.toggle[aria-checked="false"] { background:#fff; }
.toggle[aria-checked="false"] .toggle-thumb { left:6px; background:var(--sky); }
.toggle[aria-checked="false"] .toggle-word { left:88px; color:var(--ink); }
.toggle[aria-checked="false"] .i-chk { opacity:0; transform:scale(.4); }
.toggle[aria-checked="false"] .i-min { opacity:1; transform:scale(1); }
.hero-visual { position:relative; display:grid; place-items:center; }
.home-beeld { --accent-a:var(--pink); --accent-b:var(--yellow); position:relative; display:block; margin:0; width:min(100%, 720px, calc((100svh - 150px) * .8)); }
.hero-kader { position:relative; width:100%; aspect-ratio:1200 / 1490; transform:translate3d(calc(var(--mx, 0) * 6px), calc(var(--py, 0) * -14px + var(--my, 0) * 4px), 0); will-change:transform; }
.hero-kader img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-pop);; -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite:intersect; }
.hero-foto-uit { opacity:0; transform:scale(1.02); }
.hero[data-state="uit"] .hero-foto-aan { opacity:0; transform:scale(.99); }
.hero[data-state="uit"] .hero-foto-uit { opacity:1; transform:none; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns:1fr; } .home-beeld { width:min(100%, 520px); }
  /* telefoon: het beeld direct onder de schakelaar, zodat je ze samen ziet omgaan */
  .hero .hero-grid { row-gap:0; }
  .hero .hero-grid > div:first-child { display:contents; }
  .hero .hero-grid .eyebrow { order:1; justify-self:start; }
  .hero .hero-grid h1 { order:2; }
  .hero .hero-grid .switch-row { order:3; }
  .hero .hero-grid .hero-visual { order:4; margin:20px 0 4px; }
  .hero .hero-grid .lead { order:5; }
  .hero .hero-grid .actions { order:6; }
  .hero .home-beeld { width:min(100%, 420px); }
}

/* ---------- 2. herkenning: afgerond, standje disco komt tot rust ---------- */
.recog { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.recog-quote { background:var(--ink); color:var(--cream); border-radius:var(--r-card); padding:clamp(26px, 3.4vw, 46px); rotate:-1.2deg; }
.recog-quote p { font-weight:900; font-size:clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem); line-height:1.04; letter-spacing:-.03em; margin:0; }
.disco { margin-top:.35em !important; }
.disco span { display:inline-block; color:var(--yellow); transform:translateY(calc(var(--y, 0px) * (1 - var(--p, 1)))) rotate(calc(var(--r, 0deg) * (1 - var(--p, 1)))); transition:color .8s var(--ease-out); }
.motion .disco:not(.calm) span { color:var(--c, var(--yellow)); animation:wiebel .42s ease-in-out infinite alternate; animation-delay:var(--d, 0s); }
@keyframes wiebel { from { rotate:calc(-6deg * (1 - var(--p, 1))); } to { rotate:calc(6deg * (1 - var(--p, 1))); } }
.chill-line { font-size:clamp(1.2rem, 1rem + .9vw, 1.7rem) !important; color:var(--mint); margin-top:.9em !important; transition:opacity .9s var(--ease-out), transform 1s var(--ease-pop); }
.motion .recog-quote:not(.calmed) .chill-line { opacity:0; transform:translateY(12px); }
.recog-text p { max-width:48ch; font-size:clamp(1.08rem, 1rem + .3vw, 1.25rem); }
@media (max-width: 860px) { .recog { grid-template-columns:1fr; } }

/* ---------- 3. één plek: schermbreed, de vier diensten komen samen ---------- */
.band-blue { background:var(--blue); color:var(--cream); text-align:center; }
.band-blue .h2 { color:var(--cream); margin-inline:auto; max-width:18ch; }
.band-blue .lead { margin-inline:auto; max-width:50ch; }
.converge { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(30px, 4vw, 52px); }
.converge .svc { font-size:clamp(.9rem, .8rem + .5vw, 1.2rem); transform:translate(calc(var(--dx, 0px) * (1 - var(--p, 1))), calc(var(--dy, 0px) * (1 - var(--p, 1)))) rotate(calc(var(--rot, 0deg) * (1 - var(--p, 1)))); }
.one-mark { display:block; margin:clamp(22px, 3vw, 36px) auto 0; font-weight:900; font-size:clamp(1.2rem, 1rem + .8vw, 1.7rem); letter-spacing:-.02em; opacity:var(--p, 1); transform:scale(calc(.9 + .1 * var(--p, 1))); }

/* ---------- 4. vier deuren: afgeronde kaarten ---------- */
.doors { display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(16px, 2vw, 26px); margin-top:clamp(28px, 3vw, 44px); }
.door { border-radius:var(--r-card); padding:clamp(20px, 2.4vw, 32px); display:grid; gap:18px; overflow:clip; }
.door-chill { background:var(--chill-tint); } .door-leren { background:#fff; border:2px solid var(--line); } .door-spelen { background:var(--spelen-tint); } .door-doen { background:var(--doen-tint); }
.door h3 { font-weight:900; font-size:clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); letter-spacing:-.03em; line-height:.98; color:var(--blue); margin:.9rem 0 .5rem; }
.door p { margin:0 0 .8rem; max-width:44ch; }
.door .meta { display:flex; flex-wrap:wrap; gap:8px; margin:.2rem 0 1rem; }
.door .meta span { font-weight:500; font-size:.92rem; background:rgba(255,255,255,.75); padding:.35em .8em .4em; border-radius:var(--pill); }
.door .ph { min-height:clamp(200px, 20vw, 260px); }
/* elk teken beweegt zoals de dienst: maan komt op, letters ploppen, dobbelsteen rolt, handje zwaait */
.door .svc svg { transform-origin:50% 80%; }
.door.in .svc-chill svg  { animation:maan 1.4s var(--ease-out) .25s both; }
.door.in .svc-leren svg  { animation:plop .9s var(--ease-pop) .25s both; }
.door.in .svc-spelen svg { animation:rol 1.1s var(--ease-pop) .25s both; }
.door.in .svc-doen svg   { animation:zwaai 1.4s ease-in-out .25s both; }
@keyframes maan { from { transform:translateY(9px) rotate(-50deg); opacity:.2; } to { transform:none; opacity:1; } }
@keyframes plop { 0% { transform:scale(0); } 70% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes rol { from { transform:translateX(-26px) rotate(-360deg); } to { transform:none; } }
@keyframes zwaai { 0%,100% { transform:rotate(0); } 20% { transform:rotate(22deg); } 40% { transform:rotate(-14deg); } 60% { transform:rotate(16deg); } 80% { transform:rotate(-6deg); } }
@media (max-width: 860px) { .doors { grid-template-columns:1fr; } }

/* ---------- 5. bewijs: schermbreed groen ---------- */
.band-doen { background:var(--doen-tint); }
.energy-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px, 4vw, 56px); align-items:center; }
.count { font-weight:700; font-size:1.15rem; margin:.8rem 0 .6rem; }
.count .num { font-weight:900; font-size:clamp(2.6rem, 2rem + 2.4vw, 3.8rem); color:var(--doen); letter-spacing:-.03em; }
.energy h2 { font-size:clamp(2rem, 1.3rem + 2.6vw, 3.6rem); max-width:13ch; }
.stepper { position:relative; margin-top:clamp(26px, 3vw, 40px); display:grid; grid-template-columns:repeat(3, 1fr); max-width:520px; }
.rail { position:absolute; left:16.66%; right:16.66%; top:clamp(33px, 3.6vw, 42px); height:16px; background:var(--ink); border-radius:10px; }
.rail-fill { height:100%; width:0; background:var(--doen); border-radius:10px; transition:width .5s var(--ease-pop); }
.knob { background:none; border:0; padding:0; cursor:pointer; display:grid; justify-items:center; gap:12px; font-family:var(--font); color:var(--ink); position:relative; z-index:1; }
.knob-dot { width:clamp(66px, 7.2vw, 84px); aspect-ratio:1; border-radius:var(--pebble); background:#fff; box-shadow:var(--hard); display:flex; gap:5px; justify-content:center; align-items:center; transition:background-color .35s, transform .45s var(--ease-pop); }
.knob-dot i { width:11px; height:11px; border-radius:50%; background:var(--ink); }
.knob-label { font-weight:700; }
.knob:hover .knob-dot { transform:translateY(-4px) rotate(-4deg); }
.knob[aria-checked="true"] .knob-dot { background:var(--doen); transform:scale(1.06); }
.knob[aria-checked="true"] .knob-dot i { background:var(--cream); }
.knob:focus-visible { outline:none; } .knob:focus-visible .knob-dot { outline:4px solid var(--blue); outline-offset:5px; }
.idea { background:#fff; border-radius:calc(var(--r-card) - 8px); padding:clamp(22px, 2.6vw, 34px); min-height:320px; display:flex; flex-direction:column; }
.idea.pop { animation:pop .5s var(--ease-pop); }
@keyframes pop { from { transform:scale(.95) rotate(-1.5deg); opacity:.3; } to { transform:none; opacity:1; } }
.idea-meta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1rem; }
.idea-meta span { font-weight:500; font-size:.92rem; background:var(--doen-tint); padding:.35em .8em .4em; border-radius:var(--pill); }
.idea h3 { font-weight:900; letter-spacing:-.03em; line-height:1; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color:var(--blue); margin:0 0 .7rem; }
.idea .btn { margin-top:auto; align-self:flex-start; }
.more { display:inline-block; margin-top:1.2rem; font-weight:700; text-underline-offset:4px; text-decoration-thickness:2px; }
@media (max-width: 900px) { .energy-grid { grid-template-columns:1fr; } }

/* ---------- 6. onze kijk: afgerond donker blok ---------- */
.view-panel { background:var(--ink); color:var(--cream); border-radius:var(--r-card); padding:clamp(26px, 4.4vw, 64px); }
.view-panel .eyebrow { background:rgba(255,249,241,.14); color:var(--cream); }
.view-panel .h2 { color:var(--cream); max-width:14ch; }
.promises { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:clamp(26px, 3vw, 40px); }
.promise { background:rgba(255,249,241,.08); border-radius:26px; padding:22px 22px 20px; display:flex; flex-direction:column; }
.promise .n { width:50px; height:50px; border-radius:var(--pebble); display:grid; place-items:center; font-weight:900; font-size:1.3rem; background:var(--cream); color:var(--ink); margin-bottom:14px; position:relative; }
.promise h3 { font-weight:900; font-size:1.45rem; letter-spacing:-.02em; margin:0 0 .45rem; }
.promise p { margin:0; font-size:1rem; color:rgba(255,249,241,.88); }
/* 1: rustig tempo ademt langzaam */
.p1 .n { background:var(--mint); }
.motion .in .p1 .n { animation:adem 5s ease-in-out infinite; }
@keyframes adem { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
/* 2: geen trucjes: de ster wordt opgeborgen */
.p2 .n { background:var(--rose); }
.p2 .star { position:absolute; width:26px; height:26px; right:-12px; top:-10px; fill:var(--yellow); opacity:0; }
.motion .in .p2 .star { animation:weg 2.4s var(--ease-out) .6s both; }
@keyframes weg { 0% { opacity:0; transform:scale(.4) rotate(-30deg); } 30% { opacity:1; transform:scale(1.1) rotate(0); } 60% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:translate(28px,-18px) scale(.3) rotate(40deg); } }
/* 3: het mag afgelopen zijn: een balk die gewoon eindigt */
.p3 .n { background:var(--sky); }
.endbar { margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:10px; }
.endbar .track { flex:1; height:10px; border-radius:8px; background:rgba(255,249,241,.18); overflow:hidden; }
.endbar .fill { display:block; height:100%; width:100%; background:var(--mint); border-radius:8px; transform-origin:left; }
.endbar .done { width:30px; height:30px; border-radius:var(--pebble); background:var(--green); display:grid; place-items:center; }
.endbar .done svg { width:60%; height:60%; fill:var(--cream); }
.motion .p3 .fill { transform:scaleX(0); }
.motion .p3 .done { transform:scale(0); }
.motion .in .p3 .fill { animation:vol 3.2s cubic-bezier(.45,.05,.35,1) .5s both; }
.motion .in .p3 .done { animation:plop .7s var(--ease-pop) 3.7s both; }
@keyframes vol { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.view-after { margin-top:clamp(24px, 3vw, 36px); display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.view-after p { margin:0; font-weight:700; font-size:clamp(1.1rem, 1rem + .4vw, 1.35rem); }
@media (max-width: 820px) { .promises { grid-template-columns:1fr; } }

/* ---------- 7. apps: schermbreed, twee helften ---------- */
.apps-band { padding-block:0; }
.apps-head { padding-bottom:clamp(28px, 3vw, 44px); }
.apps-oneliner { font-weight:900; font-size:clamp(1.3rem, 1rem + 1.2vw, 2rem); letter-spacing:-.02em; margin:1rem 0 0; max-width:30ch; line-height:1.1; }
.apps-split { display:grid; grid-template-columns:1fr 1fr; }
.app { padding-block:clamp(40px, 5vw, 80px); display:flex; }
.app-inner { width:100%; max-width:calc(var(--maxw) / 2); padding-inline:var(--gutter); display:flex; flex-direction:column; gap:16px; }
.app-chill { background:var(--chill-tint); justify-content:flex-start; }
.app-world { order:-1; background:var(--blue); color:var(--cream); justify-content:flex-end; }
.app .kind { font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.app h3 { font-weight:900; font-size:clamp(2rem, 1.4rem + 1.8vw, 3rem); letter-spacing:-.03em; line-height:.98; margin:0; }
.app-chill h3 { color:var(--blue); }
.app p { margin:0; max-width:46ch; }
.app ul { margin:0; padding-left:1.1rem; } .app li { margin-bottom:.3rem; }
.app .ph { min-height:clamp(200px, 20vw, 250px); }
.badges { display:flex; flex-wrap:wrap; gap:12px; }
.badges img { height:50px; width:auto; }
.soon { display:inline-block; font-weight:700; background:var(--yellow); color:var(--ink); padding:.4em .9em; border-radius:var(--pill); align-self:flex-start; }
@media (max-width: 860px) { .apps-split { grid-template-columns:1fr; } .app-chill, .app-world { justify-content:stretch; } .app-inner { max-width:none; } }

/* ---------- 8. de Fuzzies: vriendenkaartjes ----------
   Elke Fuzzie op dezelfde manier in beeld (zelfde pose, licht en formaat) op een eigen paletkleur.
   De kaart heeft precies de achtergrondkleur van het beeld, dus beeld en kaart lopen in elkaar over.
   Kaartjes staan een tikje scheef en veren recht bij aanwijzen; de Fuzzie maakt dan een sprongetje. */
.fz-rij { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2.4vw, 30px); margin-top:clamp(28px, 3vw, 44px); padding-block:6px 12px; }
.fz-rij.vrienden { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(18px, 2vw, 26px); }
.fz-kaart { --kaart:var(--sky); --kantel:-1.4deg; position:relative; background:var(--kaart); border-radius:var(--r-card); padding-bottom:clamp(18px, 2vw, 26px); rotate:var(--kantel); transition:rotate .5s var(--ease-pop), translate .5s var(--ease-pop), box-shadow .5s var(--ease-out); }
.fz-rij > .fz-kaart:nth-child(3n+2) { --kantel:1.2deg; }
.fz-rij > .fz-kaart:nth-child(3n) { --kantel:-.5deg; }
.fz-kaart:hover { rotate:0deg; translate:0 -8px; box-shadow:var(--hard-up); }
.motion .fz-kaart[data-reveal] { transition:opacity .8s var(--ease-out), transform .9s var(--ease-pop), rotate .5s var(--ease-pop), translate .5s var(--ease-pop), box-shadow .5s var(--ease-out); }
.fz-kaart .vlak-beeld { margin:0; }
.motion .fz-kaart:hover .vlak-beeld img { animation:fz-hop .75s var(--ease-pop); }
@keyframes fz-hop { 0% { translate:0 0; } 35% { translate:0 -16px; } 100% { translate:0 0; } }
.fz-kaart h3 { position:relative; z-index:3; display:inline-block; margin:-30px 0 0 clamp(14px, 1.6vw, 22px); padding:.16em .55em .24em; background:#fff; color:var(--blue); font-weight:900; font-size:clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing:-.03em; line-height:1; border-radius:var(--pill); box-shadow:var(--hard); rotate:-3deg; transition:rotate .5s var(--ease-pop); }
.fz-kaart:hover h3 { rotate:2deg; }
.fz-kaart p { margin:.9rem clamp(14px, 1.6vw, 22px) 0; max-width:36ch; }
.fz-kaart .fz-waar { display:flex; flex-wrap:wrap; gap:6px; margin-top:.8rem; }
.fz-rij.vrienden .fz-kaart h3 { font-size:clamp(1.15rem, .95rem + .6vw, 1.5rem); margin-top:-22px; }
.fz-rij.vrienden .fz-kaart p { font-size:.9rem; }
.fz-rij.vrienden .svc { font-size:.7rem; }
.fz-sub { font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); color:var(--blue); margin-top:clamp(48px, 6vw, 80px); }
.cast-more { display:inline-block; margin-top:22px; font-weight:700; color:var(--blue); text-underline-offset:4px; }
@keyframes wip { from { transform:translateY(60%) scale(.85); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width: 1000px) { .fz-rij.vrienden { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* telefoon: swipen door de kaartjes */
@media (max-width: 640px) {
  .fz-rij, .fz-rij.vrienden { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:12px var(--gutter) 20px; scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .fz-rij.vrienden { grid-auto-columns:58%; }
  .fz-rij::-webkit-scrollbar { display:none; }
  .fz-rij > .fz-kaart { scroll-snap-align:start; }
}

/* ---------- 9. maker: schermbreed roze ---------- */
.band-rose { background:var(--rose); }
.maker-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.maker-photo { position:relative; max-width:420px; isolation:isolate; }
.maker-photo img { width:100%; aspect-ratio:.85; object-fit:cover; border-radius:44% 56% 50% 50% / 50% 44% 56% 50%; }
.maker-photo::before { content:""; position:absolute; inset:0; transform:translate(14px, 18px); border-radius:44% 56% 50% 50% / 50% 44% 56% 50%; background:var(--blue); z-index:-1; }
.press { margin-top:clamp(40px, 5vw, 70px); display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; border-top:2px solid rgba(41,35,72,.15); padding-top:22px; }
.press b { font-weight:900; font-size:1.6rem; color:var(--blue); letter-spacing:-.02em; }
.press p { margin:0; flex:1 1 360px; }
@media (max-width: 760px) { .maker-grid { grid-template-columns:1fr; } .maker-photo { max-width:300px; } }

/* ---------- 10. vragen: afgerond ---------- */
.faq { display:grid; gap:12px; margin-top:clamp(24px, 3vw, 36px); max-width:880px; }
.faq details { background:#fff; border:2px solid var(--line); border-radius:24px; padding:18px 22px; }
.faq summary { cursor:pointer; font-weight:700; font-size:1.15rem; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:900; color:var(--pink); font-size:1.5rem; line-height:1; transition:transform .3s var(--ease-out); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:.8rem 0 0; max-width:62ch; }
.view-more { color:var(--cream); font-weight:700; text-underline-offset:4px; }

/* =====================================================================
   HOOFDPAGINA'S: app, video's, de Fuzzies, onze kijk, tips, over ons
   Zelfde bouwstenen als de homepage, plus een paar eigen onderdelen.
   ===================================================================== */

/* kleur van een paginakop of band (zelfde tinten als de onderwerpen) */
[data-kleur="sky"]      { --tint:var(--sky);  --tint-diep:#8EC3E6; }
[data-kleur="rose"]     { --tint:var(--rose); --tint-diep:#EA93BA; }
[data-kleur="mint"]     { --tint:var(--mint); --tint-diep:#A4D6C1; }
[data-kleur="lavendel"] { --tint:#E3E0FA; --tint-diep:#BCB6F2; }
[data-kleur="geel"]     { --tint:#FFE3A1; --tint-diep:var(--yellow); }
[data-kleur="oranje"]   { --tint:#FDDFCF; --tint-diep:#F8B192; }
.kleur-band { background:var(--tint); }

/* paginakop met beeld ernaast */
.page-hero.met-beeld .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 4vw, 64px); align-items:center; }
.page-hero.met-beeld .wrap > div:first-child > * { animation:inherit; }
.hero-beeld { position:relative; min-height:clamp(260px, 30vw, 420px); display:grid; place-items:center; }
.hero-beeld .ph { width:100%; min-height:clamp(260px, 30vw, 400px); }
.page-hero .actions { margin-top:1.8rem; }
.sprong { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.sprong a { display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:700; background:#fff; padding:.6em 1em .65em; border-radius:var(--pill); box-shadow:2px 4px 0 var(--shadow); transition:transform .3s var(--ease-pop), box-shadow .3s; }
.sprong a:hover { transform:translate(-1px, -3px); box-shadow:4px 7px 0 var(--shadow); }
.sprong .svc { box-shadow:none; font-size:.7rem; padding:.4em .7em .4em .55em; }
@media (max-width: 860px) { .page-hero.met-beeld .wrap { grid-template-columns:1fr; } }

/* tekst en beeld naast elkaar */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.split.omgekeerd > :first-child { order:2; }
.split .lead + p, .split .lead + ul { margin-top:1.2rem; }
.split > div > p { max-width:52ch; }
@media (max-width: 860px) { .split { grid-template-columns:1fr; } .split.omgekeerd > :first-child { order:0; } }

/* lijst met vinkjes */
.vinkjes { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; }
.vinkjes li { position:relative; padding-left:2.2em; }
.vinkjes li::before { content:""; position:absolute; left:0; top:.1em; width:1.45em; height:1.45em; border-radius:var(--pebble); background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23FFF9F1' d='M12.9 54.9l22 23a8.5 8.5 0 0 0 12.4-.2l40-44a8.5 8.5 0 1 0-12.6-11.4L34.7 66.3h12.4l-22-23a8.5 8.5 0 1 0-12.3 11.6Z'/%3E%3C/svg%3E") center / 62% no-repeat; }
.on-dark .vinkjes li::before { background-color:var(--yellow); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23292348' d='M12.9 54.9l22 23a8.5 8.5 0 0 0 12.4-.2l40-44a8.5 8.5 0 1 0-12.6-11.4L34.7 66.3h12.4l-22-23a8.5 8.5 0 1 0-12.3 11.6Z'/%3E%3C/svg%3E"); }
.vinkjes b { font-weight:700; }

/* telefoons met schermafbeeldingen uit de app */
.telefoons { position:relative; display:flex; justify-content:center; align-items:flex-end; gap:0; padding:10px 0 20px; }
.tel { width:clamp(150px, 17vw, 230px); aspect-ratio:9 / 19.5; border-radius:clamp(26px, 3vw, 38px); border:clamp(6px, .7vw, 9px) solid var(--ink); background:var(--ink); overflow:hidden; box-shadow:0 30px 50px -28px rgba(41,35,72,.55); transition:transform .6s var(--ease-pop); }
.tel img { width:100%; height:100%; object-fit:cover; object-position:top; }
.tel:nth-child(1) { transform:rotate(-5deg) translateY(6px); margin-right:-26px; z-index:1; }
.tel:nth-child(2) { transform:rotate(4deg) translateY(-18px); z-index:2; }
.telefoons:hover .tel:nth-child(1) { transform:rotate(-8deg) translate(-10px, 2px); }
.telefoons:hover .tel:nth-child(2) { transform:rotate(6deg) translate(10px, -26px); }
.telefoons.enkel .tel { transform:rotate(-3deg); margin:0; }

/* stappen: een pad van links naar rechts */
.stappen { list-style:none; counter-reset:stap; padding:0; margin:clamp(28px, 3vw, 44px) 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:clamp(14px, 2vw, 24px); position:relative; }
.stappen > li { counter-increment:stap; position:relative; background:#fff; border-radius:var(--r-mid); padding:22px 22px 24px; display:flex; flex-direction:column; gap:.6rem; }
.stappen > li::before { content:counter(stap); width:52px; height:52px; border-radius:var(--pebble); display:grid; place-items:center; font-weight:900; font-size:1.35rem; background:var(--blue); color:var(--cream); }
.stappen > li:nth-child(2)::before { background:var(--pink); }
.stappen > li:nth-child(3)::before { background:var(--green); }
.stappen > li:nth-child(4)::before { background:var(--orange); color:var(--ink); }
.stappen h3 { font-weight:900; font-size:1.35rem; letter-spacing:-.02em; margin:0; line-height:1.05; color:var(--blue); }
.stappen p { margin:0; font-size:1rem; color:var(--ink-soft); }
.stappen .tel { width:100%; max-width:170px; margin-top:auto; align-self:center; transform:rotate(-2deg); }
.stappen > li:nth-child(2n) .tel { transform:rotate(2deg); }
.kleur-band .stappen > li { background:rgba(255,255,255,.7); }

/* de drie beloftes op een lichte ondergrond */
.promises.licht .promise { background:#fff; }
.promises.licht .promise p { color:var(--ink-soft); }
.promises.licht .endbar .track { background:var(--line); }
.promises.licht .promise h3 { color:var(--blue); }

/* video's: eerst een plaatje, pas bij aanklikken laadt YouTube */
.yt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:clamp(18px, 2.4vw, 30px); margin-top:clamp(26px, 3vw, 40px); }
.yt-kaart { display:flex; flex-direction:column; gap:.7rem; }
.yt-kaart h3 { font-weight:700; font-size:1.1rem; line-height:1.25; margin:0; }
.yt-kaart p { margin:0; font-size:.95rem; color:var(--ink-soft); }

/* leerreeksen */
.reeksen { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2vw, 26px); margin-top:clamp(26px, 3vw, 40px); }
.reeks { background:#fff; border-radius:var(--r-card); padding:clamp(20px, 2.4vw, 30px); display:flex; flex-direction:column; gap:.9rem; }
.reeks h3 { font-weight:900; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); letter-spacing:-.03em; line-height:1; margin:0; color:var(--blue); }
.reeks .ph { min-height:clamp(200px, 20vw, 260px); }
.reeks .meta { display:flex; flex-wrap:wrap; gap:8px; }
.reeks .meta span { font-weight:700; font-size:.82rem; background:var(--cream); border-radius:10px; padding:.3em .7em; }
@media (max-width: 760px) { .reeksen { grid-template-columns:1fr; } }
/* één reeks: tekst links, beeld rechts */
.reeksen.een { grid-template-columns:1fr; }
.reeksen.een .reeks { display:grid; grid-template-columns:1fr minmax(240px, .85fr); grid-template-rows:auto auto 1fr; gap:.9rem clamp(20px, 3vw, 44px); align-items:start; }
.reeksen.een .reeks > :not(figure) { grid-column:1; }
.reeksen.een .reeks > figure { grid-column:2; grid-row:1 / span 3; }
@media (max-width: 760px) { .reeksen.een .reeks { display:flex; } }

/* Beeld dat later komt: een Fuzzie op zijn eigen kleur, met een sticker die zegt wat er komt */
.binnenkort-beeld { position:relative; margin:0; border-radius:var(--r-card); background:#F3B7D2; overflow:hidden; display:flex; justify-content:center; align-items:flex-end; min-height:clamp(220px, 22vw, 300px); padding-top:clamp(56px, 5vw, 68px); }
.binnenkort-beeld img { width:min(60%, 240px); height:auto; display:block; }
.binnenkort-sticker { position:absolute; left:clamp(14px, 1.6vw, 22px); top:clamp(14px, 1.6vw, 22px); margin:0; background:#fff; color:var(--blue); font-weight:900; letter-spacing:-.02em; font-size:clamp(1rem, .92rem + .35vw, 1.22rem); line-height:1.1; padding:.4em .75em .45em; border-radius:var(--pill); rotate:-2.5deg; box-shadow:2px 4px 0 var(--shadow); }

/* één cast, twee verschijningen */
.paren { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:clamp(14px, 2vw, 22px); margin-top:clamp(26px, 3vw, 40px); }
.paar { background:#fff; border-radius:var(--r-mid); padding:16px 16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; align-items:end; }
.paar figure { margin:0; display:grid; justify-items:center; gap:.3rem; }
.paar img { height:clamp(110px, 12vw, 150px); width:auto; transition:transform .5s var(--ease-pop); }
.paar:hover figure:first-child img { transform:translateY(-6px) rotate(-3deg); }
.paar:hover figure:last-child img { transform:translateY(-6px) rotate(3deg); }
.paar figcaption { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.paar b { grid-column:1 / -1; font-weight:900; font-size:1.25rem; color:var(--blue); letter-spacing:-.02em; margin-top:.4rem; }
.paar .speelfiguur { background:var(--spelen-tint); border-radius:18px; padding-top:10px; width:100%; }
.paar .echt { background:var(--sky); border-radius:18px; padding-top:10px; width:100%; }


/* onderzoek in het kort */
.bewijs { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 22px); margin-top:clamp(26px, 3vw, 40px); }
.bewijs article { background:#fff; border-radius:var(--r-mid); padding:22px; }
.bewijs h3 { font-weight:900; font-size:1.3rem; letter-spacing:-.02em; line-height:1.05; margin:0 0 .6rem; color:var(--blue); }
.bewijs p { margin:0; font-size:1rem; color:var(--ink-soft); }
.klein { font-size:.95rem; color:var(--ink-soft); max-width:62ch; }
@media (max-width: 860px) { .bewijs { grid-template-columns:1fr; } }

/* sectiekop */
.kopje { max-width:60ch; }
.kopje .h2 { max-width:18ch; }
.midden { text-align:center; margin-inline:auto; }
.midden .h2, .midden .lead { margin-inline:auto; }
.sectie-eind { padding-bottom:clamp(72px, 9vw, 130px); }

/* beelden in de paginakop */
.hero-foto { width:min(100%, 440px); aspect-ratio:1; object-fit:cover; border-radius:44% 56% 50% 50% / 50% 44% 56% 50%; box-shadow:14px 18px 0 var(--tint-diep); }
/* de-fuzzies: drie vriendenkaartjes als een waaier in de kop */
.fz-waaier { position:relative; margin:0; min-height:clamp(340px, 38vw, 520px); }
.fz-waaier img { position:absolute; top:50%; left:50%; width:clamp(170px, 19vw, 280px); height:auto; border:clamp(6px, .6vw, 9px) solid #fff; border-radius:var(--r-mid); box-shadow:var(--hard); transition:transform .6s var(--ease-pop); }
.fz-waaier .w1 { transform:translate(-122%, -47%) rotate(-11deg); }
.fz-waaier .w2 { transform:translate(22%, -49%) rotate(10deg); }
.fz-waaier .w3 { z-index:2; transform:translate(-50%, -53%) rotate(-2deg); }
.fz-waaier:hover .w1 { transform:translate(-136%, -45%) rotate(-15deg); }
.fz-waaier:hover .w2 { transform:translate(36%, -47%) rotate(14deg); }
.fz-waaier:hover .w3 { transform:translate(-50%, -58%) rotate(1deg); }
.motion .fz-waaier img { animation:fz-zweef 6s ease-in-out infinite; }
.motion .fz-waaier .w1 { animation-delay:-2s; } .motion .fz-waaier .w2 { animation-delay:-4s; }
@keyframes fz-zweef { 0%, 100% { translate:0 0; } 50% { translate:0 -8px; } }
@media (max-width: 860px) { .hero-beeld { min-height:0; } .fz-waaier { min-height:280px; } .fz-waaier img { width:clamp(130px, 30vw, 190px); } }

/* speelfiguren op een rij */
.speelrij { display:flex; flex-wrap:wrap; gap:clamp(8px, 1.4vw, 18px); align-items:flex-end; margin-top:1.4rem; }
.speelrij img { height:clamp(90px, 10vw, 140px); width:auto; transition:transform .5s var(--ease-pop); }
.speelrij img:hover { transform:translateY(-10px) rotate(-4deg); }
.motion .speelrij.in img { animation:wip .9s var(--ease-pop) both; }
.motion .speelrij.in img:nth-child(2) { animation-delay:.08s; } .motion .speelrij.in img:nth-child(3) { animation-delay:.16s; }
.motion .speelrij.in img:nth-child(4) { animation-delay:.24s; } .motion .speelrij.in img:nth-child(5) { animation-delay:.32s; }
.motion .speelrij.in img:nth-child(6) { animation-delay:.4s; } .motion .speelrij.in img:nth-child(7) { animation-delay:.48s; }

/* ingangen met een naambordje (waar kom je ze tegen, klein beginnen) */
.stappen.waar { counter-reset:none; }
.stappen.waar > li::before { display:none; }
.stappen.waar .svc { align-self:flex-start; }
.stappen.waar .mega-all { margin-top:auto; padding-top:.4rem; }

/* Adem mee als kaart met een ademende cirkel */
.adem-kaart { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; text-decoration:none; background:var(--chill-tint); border-radius:var(--r-card); padding:clamp(24px, 3vw, 40px); min-height:280px; transition:transform .45s var(--ease-pop), box-shadow .45s; }
.adem-kaart:hover { transform:translateY(-5px) rotate(-.6deg); box-shadow:var(--hard); }
.adem-kaart b { font-weight:900; font-size:clamp(2rem, 1.5rem + 1.6vw, 3rem); letter-spacing:-.03em; line-height:1; color:var(--blue); }
.adem-kaart span:not(.svc):not(.adem-cirkel) { max-width:30ch; }
.adem-cirkel { position:absolute; z-index:-1; right:-40px; bottom:-40px; width:220px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(123,114,230,.55), rgba(123,114,230,.12) 62%, transparent 70%); }
.motion .adem-cirkel { animation:inuit 8s ease-in-out infinite; }
@keyframes inuit { 0%, 100% { transform:scale(.8); } 50% { transform:scale(1.15); } }

/* tips-overzicht: per onderwerp een afgerond blok in de onderwerpkleur */
.tips-blok { margin:clamp(20px, 3vw, 36px) clamp(8px, 1.4vw, 18px) 0; border-radius:var(--r-card); background:var(--tint); padding:clamp(34px, 4.5vw, 64px) 0; }
.tips-blok .h2 { font-size:clamp(2rem, 1.3rem + 2.4vw, 3.4rem); max-width:20ch; }
.tips-blok .lead { margin-bottom:0; }
.tips-kop { display:grid; grid-template-columns:minmax(0, 1fr) clamp(170px, 26vw, 340px); gap:clamp(16px, 3vw, 40px); align-items:center; }
.tips-beeld { margin:clamp(-56px, -4vw, -24px) 0 clamp(-40px, -3vw, -16px); }
.tips-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; margin-top:clamp(20px, 2.4vw, 30px); }
.tip-kaart { display:flex; flex-direction:column; gap:.35rem; text-decoration:none; background:#fff; border-radius:22px; padding:18px 20px 20px; transition:transform .35s var(--ease-pop), box-shadow .35s; }
.tip-kaart:hover { transform:translate(-2px, -4px); box-shadow:var(--hard); }

/* lijstjes met doe-ideeën: elk lijstje een eigen kleur en symbool */
.lijst-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:clamp(16px, 2vw, 24px); margin-top:clamp(20px, 2.4vw, 30px); }
.lijst-kaart { display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:var(--ink); background:var(--tint); border-radius:var(--r-mid); padding:clamp(20px, 2.2vw, 28px); transition:transform .4s var(--ease-pop), box-shadow .4s var(--ease-out); }
.lijst-kaart:hover { transform:translate(-2px, -4px) rotate(-.6deg); box-shadow:var(--hard); }
.lijst-ico { width:56px; height:56px; margin-bottom:.4rem; border-radius:var(--pebble); background:#fff; display:grid; place-items:center; box-shadow:2px 4px 0 var(--shadow); }
.lijst-ico svg { width:30px; height:30px; fill:var(--blue); }
.lijst-kaart b { font-weight:900; font-size:clamp(1.35rem, 1.1rem + .7vw, 1.7rem); letter-spacing:-.025em; line-height:1.05; color:var(--blue); }
.lijst-sub { font-weight:700; }
.lijst-tekst { font-size:.95rem; line-height:1.5; color:var(--ink-soft); }
.lijst-meer { margin-top:auto; padding-top:.6rem; font-weight:700; color:var(--blue); }

/* tweede route in de Doen-deur: de lijstjes, zonder account */
.door-meer { display:block; margin-top:14px; font-weight:700; color:var(--blue); text-underline-offset:4px; }
.tip-kaart b { font-weight:700; font-size:1.12rem; line-height:1.2; color:var(--blue); }
.tip-kaart span { font-size:.95rem; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tip-kaart.hub { background:var(--blue); }
.tip-kaart.hub b { color:var(--cream); } .tip-kaart.hub span { color:rgba(255,249,241,.85); }
.tips-sub { font-weight:900; font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing:-.025em; color:var(--blue); margin:clamp(28px, 3vw, 40px) 0 0; }

/* schermbrede blauwe band met lichte letters */
.vlak-blauw { background:var(--blue); color:var(--cream); }
.vlak-blauw .h2, .vlak-blauw .cast-more, .vlak-blauw a:not(.btn) { color:var(--cream); }
.vlak-blauw .eyebrow { background:rgba(255,249,241,.14); color:var(--cream); }

/* onderzoek: bevindingen met een bewijslabel */
.onderzoek .finding { background:#fff; border-radius:var(--r-mid); padding:clamp(22px, 2.6vw, 34px); margin:0 0 18px; }
.onderzoek .finding h2 { margin-top:.6rem; font-size:clamp(1.45rem, 1.15rem + 1vw, 2rem); }
.onderzoek .finding > p:last-child { margin-bottom:0; }
.badge { display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:.4em .85em .45em; border-radius:var(--pill); }
.badge::before { content:""; width:.7em; height:.7em; border-radius:var(--pebble); background:currentColor; }
.badge.sterk { background:var(--mint); color:#00704F; }
.badge.redelijk { background:#FFE9B8; color:#7A5500; }
.badge.gemengd { background:#FDDFCF; color:#A3410F; }
.onderzoek .src { font-size:.88rem; color:var(--ink-soft); border-top:2px dashed var(--line); padding-top:.8rem; margin-top:1rem; }
.onderzoek .honest-block { background:var(--sky); border-radius:var(--r-mid); padding:clamp(22px, 2.6vw, 34px); margin:2.6rem 0 0; }
.onderzoek .honest-block h2 { margin-top:0; }
.onderzoek .honest-block ul > li::before { background:var(--blue); }
.onderzoek .apply-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; max-width:none; }
.onderzoek .apply-card { display:flex; flex-direction:column; gap:.3rem; text-decoration:none; background:#fff; border-radius:22px; padding:18px 18px 20px; transition:transform .35s var(--ease-pop), box-shadow .35s; }
.onderzoek .apply-card:hover { transform:translate(-2px, -4px); box-shadow:var(--hard); background:#fff; }
.onderzoek .apply-card h3 { margin:0; color:var(--blue); font-weight:900; }
.onderzoek .apply-card p { margin:0; font-size:.95rem; color:var(--ink-soft); }
.onderzoek .sources { margin-top:3rem; }
.onderzoek .sources ol > li { font-size:.95rem; }
.onderzoek .sources a { word-break:break-word; }
@media (max-width: 760px) { .onderzoek .apply-grid { grid-template-columns:1fr; } }

/* gratis materialen: drie downloads */
.downloads { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 26px); }
.download { background:#fff; border-radius:var(--r-card); padding:clamp(20px, 2.4vw, 30px); display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.download h2 { font-weight:900; font-size:clamp(1.4rem, 1.15rem + .8vw, 1.9rem); line-height:1.02; letter-spacing:-.03em; color:var(--blue); margin:0; }
.download p { margin:0; font-size:1rem; }
.download .dl-soort { font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.download .dl-meta { font-size:.9rem; color:var(--ink-soft); margin-top:auto; padding-top:.4rem; }
.download .btn { margin-top:.6rem; font-size:1rem; }
/* een A4-vel dat op hover even optilt */
.dl-vorm { width:92px; aspect-ratio:1 / 1.414; border-radius:10px; display:grid; place-items:end start; padding:8px 10px; font-weight:900; font-size:.8rem; color:var(--ink); margin-bottom:.4rem; transform:rotate(-4deg); transition:transform .5s var(--ease-pop); box-shadow:4px 6px 0 var(--shadow); }
.download:hover .dl-vorm { transform:rotate(3deg) translateY(-6px); }
.dl-1 { background:linear-gradient(var(--mint) 0 0) 10px 10px / 30px 30px no-repeat, linear-gradient(var(--mint) 0 0) 48px 10px / 30px 30px no-repeat, linear-gradient(var(--mint) 0 0) 10px 48px / 30px 30px no-repeat, linear-gradient(var(--mint) 0 0) 48px 48px / 30px 30px no-repeat, #fff; border:2px solid var(--line); }
.dl-2 { background:linear-gradient(var(--sky) 0 0) 10px 12px / 70px 10px no-repeat, linear-gradient(var(--sky) 0 0) 10px 30px / 70px 10px no-repeat, linear-gradient(var(--sky) 0 0) 10px 48px / 70px 10px no-repeat, linear-gradient(var(--sky) 0 0) 10px 66px / 70px 10px no-repeat, #fff; border:2px solid var(--line); }
.dl-3 { background:linear-gradient(var(--orange) 0 0) 10px 12px / 70px 44px no-repeat, #fff; border:2px solid var(--line); }
@media (max-width: 900px) { .downloads { grid-template-columns:1fr; } }

/* foto's met een zachte steenvorm en een gekleurd plaatje erachter */
.foto-steen { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--r-card); box-shadow:14px 18px 0 var(--tint-diep, var(--line)); }
.page-hero .maker-photo { margin-inline:auto; }
.st-label { align-self:flex-start; margin-top:auto; font-weight:700; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; padding:.3em .7em; border-radius:9px; background:var(--cream); }
.st-label.nu { background:var(--green); color:var(--cream); }

/* pers */
.infographic { width:min(100%, 440px); justify-self:center; border-radius:var(--r-mid); box-shadow:14px 18px 0 var(--tint-diep); }
.citaten { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 22px); margin-top:clamp(24px, 3vw, 40px); }
.citaten blockquote { margin:0; background:#fff; border-radius:var(--r-mid); padding:24px 24px 22px; position:relative; }
.citaten blockquote::before { content:"\201C"; position:absolute; top:-18px; left:18px; font-weight:900; font-size:4.4rem; line-height:1; color:var(--pink); }
.citaten p { margin:0; font-weight:500; font-size:1.08rem; line-height:1.45; }
.citaten cite { display:block; margin-top:.8rem; font-style:normal; font-size:.88rem; color:var(--ink-soft); }
.pers-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(24px, 3vw, 40px); }
.pers-beeld { display:grid; gap:.5rem; text-decoration:none; font-weight:700; font-size:.95rem; }
.pers-beeld img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--r-mid); transition:transform .45s var(--ease-pop), box-shadow .45s; }
.pers-beeld:hover img { transform:translate(-2px, -4px) rotate(-.6deg); box-shadow:var(--hard); }
@media (max-width: 860px) { .citaten { grid-template-columns:1fr; } .pers-grid { grid-template-columns:1fr 1fr; } }

/* =====================================================================
   DE TWEE APPS: elk een eigen gezicht
   Fuzzie Chill licht (lucht en paars), Fuzzie Friends World donkerblauw.
   ===================================================================== */
[data-kleur="chill"] { --tint:var(--chill-tint); --tint-diep:#9D96EF; }
[data-kleur="world"] { --tint:var(--blue); --tint-diep:#2F4BEA; }
.page-hero[data-kleur="world"] { color:var(--cream); }
.page-hero[data-kleur="world"] h1, .page-hero[data-kleur="world"] .lead { color:var(--cream); }
.page-hero[data-kleur="world"]::before, .page-hero[data-kleur="world"]::after { opacity:.6; }
.page-hero[data-kleur="world"] .kruimel a { background:rgba(255,249,241,.14); color:var(--cream); }
.page-hero[data-kleur="world"] .kruimel .sep { fill:var(--cream); }
.page-hero[data-kleur="world"] :focus-visible { outline-color:var(--cream); }
.kruimel-hier .svc { box-shadow:none; font-size:.72rem; padding:.45em .8em .45em .6em; }
.app-ondertitel { font-weight:900; font-size:clamp(1.3rem, 1rem + 1.2vw, 2rem); letter-spacing:-.025em; line-height:1.05; margin:.6rem 0 0; color:var(--purple); }
.page-hero[data-kleur="world"] .app-ondertitel { color:var(--yellow); }
.app-feiten { display:flex; flex-wrap:wrap; gap:8px; margin:1.4rem 0 0; }
.app-feiten span { font-weight:700; font-size:.85rem; background:#fff; color:var(--ink); padding:.35em .8em; border-radius:10px; }
.page-hero[data-kleur="world"] .app-feiten span { background:rgba(255,249,241,.14); color:var(--cream); }
.page-hero[data-kleur="world"] .app-feiten .soon, .app-feiten .soon { background:var(--yellow); color:var(--ink); margin:0; }
.page-hero .badges { margin-top:0; }

/* drie momenten */
.momenten { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 22px); margin-top:clamp(24px, 3vw, 40px); }
.moment { border-radius:var(--r-card); padding:clamp(22px, 2.6vw, 32px); display:flex; flex-direction:column; gap:.5rem; }
.moment h3 { font-weight:900; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing:-.03em; line-height:1; margin:.4rem 0 0; }
.moment p { margin:0; }
.moment-mark { width:62px; height:62px; border-radius:var(--pebble); display:grid; place-items:center; }
.moment-mark svg { width:55%; height:55%; fill:currentColor; }
.m-slapen { background:var(--ink); color:var(--cream); } .m-slapen .moment-mark { background:var(--purple); color:var(--cream); }
.m-school { background:var(--sky); } .m-school .moment-mark { background:var(--blue); color:var(--cream); } .m-school h3 { color:var(--blue); }
.m-rustig { background:var(--mint); } .m-rustig .moment-mark { background:var(--green); color:var(--cream); } .m-rustig h3 { color:var(--blue); }
.motion .m-slapen.in .moment-mark svg { animation:steen 7s ease-in-out infinite; }
@media (max-width: 860px) { .momenten { grid-template-columns:1fr; } }

/* de eilanden */
.eilanden { display:grid; grid-template-columns:1fr; gap:clamp(16px, 2vw, 26px); margin-top:clamp(24px, 3vw, 40px); }
.eiland { border-radius:var(--r-card); padding:clamp(22px, 2.6vw, 32px); background:#fff; }
.eiland header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin-bottom:.5rem; }
.eiland h3 { font-weight:900; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing:-.03em; line-height:1; margin:0; color:var(--blue); }
.eiland > p { margin:0 0 1rem; color:var(--ink-soft); }
.eiland .st-label { margin:0; }
.e-hoofd { background:var(--spelen-tint); }
.e-puzzel { background:var(--sky); }
.e-dorp { background:var(--doen-tint); }
.e-doe { background:#fff; border:2.5px dashed var(--line); }
.e-doe .st-label { background:var(--yellow); }
.plekken { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.plekken li { display:grid; grid-template-columns:minmax(0, 11em) 1fr; gap:4px 12px; align-items:baseline; background:rgba(255,255,255,.7); border-radius:14px; padding:.55rem .8rem; transition:transform .35s var(--ease-pop), background-color .2s; }
.plekken li:hover { transform:translateX(4px); background:#fff; }
.plekken b { font-weight:900; color:var(--blue); }
.plekken span { font-size:.95rem; color:var(--ink-soft); }
/* per spel een kaartje met het beeld uit de spelintro van de app */
.plekken-beeld { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 16px); }
@media (max-width: 900px) { .plekken-beeld { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plekken-beeld { grid-template-columns:repeat(2, minmax(0, 1fr)); } .plekken-beeld b { font-size:1rem; } .eiland { padding:20px 14px; } }
.plekken-beeld li { display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding:12px 14px 16px; border-radius:22px; }
.plekken-beeld li:hover { transform:translateY(-4px) rotate(-.6deg); background:#fff; box-shadow:var(--hard); }
/* het originele beeld met zijn eigen crèmekleurige achtergrond; het vlak heeft dezelfde kleur, zodat het naadloos is */
.plek-beeld { align-self:stretch; display:grid; place-items:center; aspect-ratio:1; margin-bottom:.4rem; border-radius:16px; overflow:hidden; background:#FFF9EE; }
.plek-beeld img { width:auto; height:100%; max-width:100%; object-fit:contain; }
.motion .plekken-beeld li:hover .plek-beeld img { animation:fz-hop .75s var(--ease-pop); }
.plekken-beeld b { font-size:1.1rem; line-height:1.15; hyphens:auto; overflow-wrap:anywhere; max-width:100%; }
.plekken-beeld .plek-tekst { font-size:.92rem; line-height:1.45; color:var(--ink-soft); }
/* Fuzziedorp: de dorpskaart uit de app naast de plekken, tot er beelden per plek zijn */
/* Fuzziedorp heeft vijf plekken: vijf naast elkaar, of drie en twee */
@media (min-width: 1100px) { .e-dorp .plekken-beeld { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1099px) { .e-dorp .plekken-beeld { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .plekken li { grid-template-columns:1fr; } }
.speelrij.groot img { height:clamp(110px, 13vw, 190px); }

/* door naar de andere app */
.andere-app { position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"svc titel pijl" "svc tekst pijl"; gap:4px 20px; align-items:center; text-decoration:none; border-radius:var(--r-card); padding:clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px); transition:transform .45s var(--ease-pop), box-shadow .45s; }
.andere-app:hover { transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--hard); }
.andere-app .svc { grid-area:svc; }
.andere-app b { grid-area:titel; font-weight:900; font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing:-.025em; line-height:1.05; }
.andere-app > span:not(.svc):not(.pijl) { grid-area:tekst; }
.andere-app .pijl { grid-area:pijl; width:54px; height:54px; border-radius:var(--pebble); display:grid; place-items:center; background:var(--pink); transition:transform .4s var(--ease-pop); }
.andere-app:hover .pijl { transform:translateX(5px) rotate(-8deg); }
.andere-app .pijl svg { width:50%; height:50%; fill:var(--cream); }
.andere-app.world { background:var(--blue); color:var(--cream); }
.andere-app.chill { background:var(--chill-tint); }
.andere-app.chill b { color:var(--blue); }
@media (max-width: 640px) { .andere-app { grid-template-columns:1fr auto; grid-template-areas:"svc pijl" "titel titel" "tekst tekst"; } .andere-app .svc { justify-self:start; } }

/* keuzepagina: twee deuren */
.app-deuren { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.2vw, 28px); }
.app-deur { position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-rows:1fr auto; text-decoration:none; border-radius:var(--r-card); min-height:clamp(520px, 50vw, 640px); transition:transform .5s var(--ease-pop), box-shadow .5s; }
.app-deur:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:var(--hard-up); }
.app-deur:nth-child(2):hover { transform:translateY(-6px) rotate(.5deg); }
.deur-tekst { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; padding:clamp(24px, 3vw, 40px); position:relative; z-index:1; }
.deur-apparaat { font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.app-deur h2 { font-weight:900; font-size:clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); letter-spacing:-.035em; line-height:.95; margin:0; }
.deur-sub { font-weight:900; font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing:-.02em; margin:0; }
.app-deur p { margin:0; max-width:36ch; }
.deur-feiten { display:flex; flex-wrap:wrap; gap:6px; margin:.4rem 0 .6rem; }
.deur-feiten span { font-weight:700; font-size:.8rem; padding:.3em .7em; border-radius:9px; background:#fff; color:var(--ink); }
.deur-feiten .nu { background:var(--green); color:var(--cream); }
.deur-feiten .soon { background:var(--yellow); color:var(--ink); margin:0; }
.deur-chill { background:var(--chill-tint); color:var(--ink); }
.deur-chill h2 { color:var(--blue); } .deur-chill .deur-sub { color:var(--purple); }
.deur-world { background:var(--blue); color:var(--cream); }
.deur-world .deur-sub { color:var(--yellow); }
.deur-world .deur-feiten span:not(.soon) { background:rgba(255,249,241,.14); color:var(--cream); }
.deur-beeld { position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:180px; }
.deur-chill .telefoons { padding:0; margin-bottom:-60px; }
.deur-chill .tel { width:clamp(150px, 16vw, 210px); transform:rotate(-4deg); transition:transform .6s var(--ease-pop); }
.deur-chill:hover .tel { transform:rotate(-8deg) translateY(-14px); }
/* drie vriendenkaartjes als een klein waaiertje, zoals op /de-fuzzies */
.deur-figuren { gap:0; padding-bottom:22px; }
.deur-figuren img { width:clamp(120px, 12.5vw, 180px); height:auto; margin:0 -16px; border:clamp(5px, .5vw, 7px) solid #fff; border-radius:var(--r-mid); box-shadow:var(--hard); transition:transform .5s var(--ease-pop); }
.deur-figuren img:nth-child(1) { rotate:-9deg; }
.deur-figuren img:nth-child(2) { width:clamp(140px, 14.5vw, 210px); z-index:1; rotate:-1deg; }
.deur-figuren img:nth-child(3) { rotate:8deg; }
.deur-world:hover .deur-figuren img:nth-child(1) { transform:translateY(-8px) rotate(-6deg); }
.deur-world:hover .deur-figuren img:nth-child(2) { transform:translateY(-14px); }
.deur-world:hover .deur-figuren img:nth-child(3) { transform:translateY(-8px) rotate(6deg); }
.app-deur .btn { pointer-events:none; }
.app-deur:hover .btn { transform:rotate(var(--tilt)) translate(-2px, -4px); box-shadow:var(--hard-up); }
@media (max-width: 860px) { .app-deuren { grid-template-columns:1fr; } .app-deur { min-height:0; } }

/* vergelijkingstabel */
.vergelijk { margin-top:clamp(24px, 3vw, 40px); overflow-x:auto; border-radius:var(--r-card); background:#fff; }
.vergelijk table { width:100%; border-collapse:collapse; min-width:560px; }
.vergelijk th, .vergelijk td { text-align:left; vertical-align:top; padding:1rem 1.2rem; border-bottom:2px solid var(--line); }
.vergelijk tbody tr:last-child th, .vergelijk tbody tr:last-child td { border-bottom:0; }
.vergelijk thead th { vertical-align:bottom; }
.vergelijk thead th .svc { font-size:.68rem; box-shadow:none; }
.vergelijk .th-naam { display:block; margin-top:.6rem; font-weight:900; font-size:1.3rem; letter-spacing:-.02em; color:var(--blue); line-height:1.05; }
.vergelijk tbody th { font-weight:700; color:var(--ink-soft); width:22%; }
.vergelijk td:nth-child(2) { background:color-mix(in srgb, var(--chill-tint) 35%, transparent); }
.vergelijk td:nth-child(3) { background:color-mix(in srgb, var(--spelen-tint) 35%, transparent); }
.vergelijk .st-label { margin:0; }
.app-meer { font-weight:700; color:var(--blue); text-underline-offset:4px; align-self:flex-start; }
.app-world .app-meer { color:var(--cream); }
@media (max-width: 620px) {
  .vergelijk table { min-width:0; font-size:.9rem; }
  .vergelijk th, .vergelijk td { padding:.75rem .6rem; }
  .vergelijk .th-naam { font-size:1.05rem; }
  .vergelijk tbody th { width:28%; }
}
.app-verbs { display:flex; flex-wrap:wrap; gap:8px 10px; margin:1.4rem 0 0; }
.app-verbs .svc { font-size:.7rem; }
.stappen.vijf { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }

/* iPad-pagina: een kijkje op de eilanden, een rij die je opzij schuift */
.kijkje { background:var(--cream); }
.kijkje-rij { display:flex; gap:clamp(18px, 2.4vw, 34px); overflow-x:auto; scroll-snap-type:x mandatory; padding:clamp(30px, 4vw, 60px) var(--gutter) 30px; scroll-padding-inline:var(--gutter); scrollbar-width:thin; }
.kijkje-rij:focus-visible { outline-offset:-6px; }
.kijkje-item { flex:0 0 clamp(230px, 24vw, 330px); scroll-snap-align:start; display:grid; gap:14px; justify-items:center; }
.kijkje-item:nth-child(even) { margin-top:clamp(20px, 3vw, 48px); }
.kijkje-item .beeld { width:100%; aspect-ratio:1; }
.kijkje-item .beeld-onderwerp { width:94%; }
.kijkje-naam { margin:0; display:grid; justify-items:center; gap:.35rem; text-align:center; }
.kijkje-naam .svc { font-size:.66rem; }
.kijkje-naam b { font-weight:900; font-size:1.3rem; letter-spacing:-.02em; color:var(--blue); line-height:1; }
.kijkje-eiland { font-size:.85rem; color:var(--ink-soft); }

/* echte Fuzzies in een vlek op de algemene pagina's */
.deur-beeld { width:100%; max-width:500px; justify-self:center; }
.deur-beeld .beeld-onderwerp { width:82%; }

/* ---------- beelden met een eigen effen vlak (zie .vlak-beeld in site.css) ---------- */
.door .deur-vlak { width:100%; max-width:500px; justify-self:center; margin-bottom:calc(clamp(20px, 2.4vw, 32px) * -1); }
.app .app-vlak { --vorm:.75; width:calc(100% + var(--gutter) * 1.4); max-width:none; margin:14px calc(var(--gutter) * -.7) 30px; }
.world-vlak { width:min(100%, 660px); justify-self:center; margin-block:calc(clamp(34px, 5vw, 76px) * -.8) calc(clamp(40px, 5.5vw, 84px) * -.8); }
.page-hero.met-vlak .wrap { grid-template-columns:.9fr 1.1fr; }
@media (max-width: 860px) { .page-hero.met-vlak .wrap { grid-template-columns:1fr; } .world-vlak { width:min(100%, 480px); } }
.page-hero.met-vlak::before, .page-hero.met-vlak::after { display:none; }

/* ---------- World: aanbod, gegevens en de links naar de eigen documenten ---------- */
.world-info { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.2vw, 28px); margin-top:clamp(24px, 3vw, 40px); }
.world-kaart { background:#fff; border:2px solid var(--line); border-radius:var(--r-card); padding:clamp(22px, 2.8vw, 36px); }
.world-kaart h3 { font-weight:900; font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing:-.025em; color:var(--blue); margin:0 0 .4rem; }
.world-kaart .vinkjes { margin-top:.8rem; }
.world-kaart .klein { margin-top:1rem; }
.world-links { display:flex; flex-wrap:wrap; gap:10px; margin:1.2rem 0 0; }
.world-links a { display:inline-flex; align-items:center; font-weight:700; text-decoration:none; color:var(--blue); background:var(--sky); padding:.55em 1em .6em; border-radius:var(--pill); transition:transform .3s var(--ease-pop), box-shadow .3s; }
.world-links a:hover { transform:translate(-1px, -3px); box-shadow:3px 5px 0 var(--shadow); }
.world-links.groot { justify-content:center; margin:0; }
.world-links.groot a { font-size:1.05rem; }
@media (max-width: 860px) { .world-info { grid-template-columns:1fr; } }

/* ---------- echte schermen uit World, in een iPad-lijst ---------- */
.ipad { position:relative; margin:0; background:#1F1D2B; padding:clamp(7px, .9vw, 13px); border-radius:clamp(18px, 2.2vw, 30px); box-shadow:0 18px 40px rgba(41,35,72,.2); }
.ipad img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:clamp(11px, 1.3vw, 18px); }
.ipad figcaption { position:absolute; left:50%; bottom:-14px; translate:-50% 0; white-space:nowrap; background:#fff; color:var(--blue); font-weight:700; font-size:.9rem; padding:.35em .9em .4em; border-radius:var(--pill); box-shadow:var(--hard); }
.kijkje-item.scherm { flex-basis:clamp(280px, 38vw, 520px); }
.kijkje-item.scherm .ipad { width:100%; }
.kijkje-item.scherm:nth-child(even) { margin-top:clamp(14px, 2vw, 30px); }
.ouders-scherm { max-width:640px; margin:clamp(30px, 4vw, 54px) auto 14px; rotate:-1deg; }
.samen-schermen { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px); margin:clamp(36px, 5vw, 64px) auto 0; max-width:1100px; }
.samen-schermen .ipad:nth-child(1) { rotate:-2deg; } .samen-schermen .ipad:nth-child(3) { rotate:2deg; }
.samen-meer { text-align:center; margin:clamp(40px, 5vw, 60px) 0 0; }
@media (max-width: 760px) { .samen-schermen { grid-template-columns:1fr; max-width:420px; gap:34px; } }