/* Campaigo huisstijl. Waarden uit het Campaigo design system (tokens.json, v1, 6-11-2026).
   Pagina's gebruiken alleen de variabelen hieronder, nooit losse kleurcodes. */

@font-face { font-family: "Outfit"; src: url("/merk/fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/merk/fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/merk/fonts/DMSans-Variable-Italic.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }

:root {
  --veer: cubic-bezier(.34, 1.56, .64, 1); /* speelse overshoot voor beweging */
  color-scheme: light;
  --surface: #fffcfa; --surface-warm: #fff9f4; --surface-raised: #ffffff;
  --line: #ede5ed; --line-strong: #e7dffd;
  --ink: #35255e; --ink-soft: #61566b; --ink-muted: #70677c;
  --purple: #7958f5; --purple-hover: #6440e8; --purple-strong: #6440e8; --purple-deep: #4e318d;
  --purple-soft: #ede4ff; --purple-wash: #f5f0ff; --on-purple: #ffffff;
  --coral: #ff7895; --coral-strong: #b8365f; --coral-soft: #ffe8e6;
  --mint: #75dccc; --mint-strong: #1f7560; --mint-soft: #ddf8ef;
  --sun: #ffd66b; --sun-strong: #8a5f10; --sun-soft: #fff0c2;
  --on-accent: #35255e;
  --danger: #b4232f; --danger-soft: #fde7ea; --on-danger: #ffffff; --wordmark-go: #7958f5;
  --focus: #6440e8;

  --font-display: "Outfit", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-section-sm: 72px; --space-section: 104px;

  --radius-tail: 4px; --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-pill: 999px;

  --shadow-xs: 0 7px 22px rgba(87,65,200,0.06);
  --shadow-sm: 0 10px 28px rgba(62,45,105,0.14);
  --shadow-md: 0 14px 40px rgba(90,65,126,0.10);
  --shadow-lg: 0 24px 70px rgba(78,49,141,0.12);
  --shadow-xl: 0 25px 60px rgba(71,49,111,0.16);
  --shadow-cta: 0 12px 28px rgba(121,88,245,0.24);

  --gradient-glow: linear-gradient(130deg, #e1d8ff 5%, #ffd5db 51%, #fff0bc 100%);
  --gradient-cta: linear-gradient(105deg, #7958f5 0%, #9c55c8 55%, #b04f92 100%);
  --gradient-post-warm: linear-gradient(150deg, #ffcfb1 0%, #f1a9b8 62%, #be96df 100%);
  --gradient-post-fresh: linear-gradient(155deg, #a7eae1 0%, #cde5a4 100%);

  --container-max: 1210px; --gutter-sm: 20px; --measure: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #161028; --surface-warm: #1c1533; --surface-raised: #241b3f;
    --line: #362c57; --line-strong: #4a3d78;
    --ink: #f6f1ff; --ink-soft: #cfc6e2; --ink-muted: #ada3c2;
    --purple-hover: #6644ee; --purple-strong: #b9a6ff; --purple-deep: #d6cbff;
    --purple-soft: #2e2459; --purple-wash: #2a2150;
    --coral-strong: #ff9db2; --coral-soft: #3b1e36;
    --mint-strong: #86e6d4; --mint-soft: #143430;
    --sun-strong: #ffd66b; --sun-soft: #372c14;
    --danger: #ff7a86; --danger-soft: #3a161e; --on-danger: #35255e; --wordmark-go: #b9a6ff;
    --focus: #b9a6ff;
    --shadow-xs: 0 7px 22px rgba(0,0,0,0.30);
    --shadow-sm: 0 10px 28px rgba(0,0,0,0.40);
    --shadow-md: 0 14px 40px rgba(0,0,0,0.40);
    --shadow-lg: 0 24px 70px rgba(0,0,0,0.45);
    --shadow-xl: 0 25px 60px rgba(0,0,0,0.50);
    --shadow-cta: 0 12px 28px rgba(121,88,245,0.35);
  }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.66; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: var(--purple-strong); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img, video { max-width: 100%; }
strong { font-weight: 800; }
code { font-size: 0.92em; background: var(--purple-wash); color: var(--purple-deep); padding: 0.1rem 0.4rem; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(34px, 6vw, 44px); line-height: 1.08; letter-spacing: -0.055em; margin: 0 0 var(--space-4); }
h2 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.04em; margin: 0 0 var(--space-3); }
h3 { font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; margin: var(--space-6) 0 var(--space-1); }
p { margin: 0 0 var(--space-4); }
ol, ul { padding-left: 1.3rem; margin: 0 0 var(--space-4); }
ol li, ul li { margin-bottom: var(--space-2); }
li::marker { color: var(--purple-strong); font-weight: 800; }
ul.kaal { list-style: none; padding: 0; }

/* ---------- Kop en voet ---------- */
.kop { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.kop__binnen { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-7); height: 69px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kop nav { display: flex; align-items: center; gap: var(--space-2); }
.kop nav a { font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: var(--radius-pill); }
.kop nav a:hover { background: var(--purple-wash); }
.kop nav a.knop { color: var(--on-purple); padding: 11px 18px; font-size: 13px; margin: 0 0 0 var(--space-2); }

.cg-wordmark { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.055em; line-height: 1; white-space: nowrap; color: var(--ink); text-decoration: none; display: inline-block; padding-right: 0.055em; font-size: 28px; }
.cg-wordmark:hover { text-decoration: none; }
.cg-wordmark__go { color: var(--wordmark-go); }
.cg-wordmark__dot { color: var(--coral); display: inline-block; }
.cg-wordmark--white, .cg-wordmark--white .cg-wordmark__go { color: var(--on-purple); }
.cg-wordmark--white .cg-wordmark__dot { color: var(--sun); }

.voet { border-top: 1px solid var(--line); background: var(--surface-warm); margin-top: var(--space-16); }
.voet__binnen { max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-muted); }
.voet nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.voet a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.voet a:hover { color: var(--purple-strong); text-decoration: underline; }
body > main { flex: 1 0 auto; width: 100%; }
.voet .cg-wordmark { font-size: 24px; color: var(--ink); text-decoration: none; }

/* ---------- Appvlak (studio, aanmelden, inloggen) ---------- */
.vlak { max-width: 44rem; margin: 0 auto; padding: var(--space-12) var(--space-7) 0; }
.vlak > h1:first-child, .vlak > p:first-child + h1 { margin-top: 0; }
.vlak > h2, .vlak form > h2 { margin-top: var(--space-10); }
.klein { font-size: 14px; color: var(--ink-muted); }
.en { color: var(--ink-muted); font-size: 13px; border-top: 1px solid var(--line); margin-top: var(--space-8); padding-top: var(--space-4); }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; }

section { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-5) 0; }
section > :last-child { margin-bottom: 0; }
section h2 { margin-top: 0; }

/* Meldingen: altijd woord plus kleur, nooit kleur alleen */
.fout, .let-op, .gelukt { position: relative; border-radius: var(--radius-md); padding: 14px 18px 14px 40px; margin: var(--space-4) 0; color: var(--ink); }
.fout::before, .let-op::before, .gelukt::before { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 11px/1 var(--font-sans); }
.fout { background: var(--danger-soft); }
.fout::before { content: "!"; background: var(--danger); color: var(--on-danger); }
.let-op { background: var(--sun-soft); }
.let-op::before { content: "!"; background: var(--sun); color: var(--on-accent); }
.gelukt { background: var(--mint-soft); }
.gelukt::before { content: "\2713"; background: var(--mint); color: var(--on-accent); }
.fout > :last-child, .let-op > :last-child, .gelukt > :last-child { margin-bottom: 0; }
div.let-op p, div.fout p, div.gelukt p { margin: 0 0 var(--space-2); }

/* Knoppen: elke actie is een pil */
button, a.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-5) var(--space-2) 0 0; padding: 14px 24px; border: 0; border-radius: var(--radius-pill); font: 800 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; background: var(--purple); color: var(--on-purple); box-shadow: var(--shadow-cta); transition: transform .2s, box-shadow .2s, background-color .2s, color .2s; }
button:hover, a.knop:hover { background: var(--purple-hover); transform: translateY(-3px); text-decoration: none; }
button:active, a.knop:active { transform: translateY(-1px) scale(.96); }
.pijl { display: inline-block; transition: translate .3s var(--veer); }
.knop:hover .pijl { translate: 3px -3px; }
.knop:hover .pijl--rechts { translate: 5px 0; }
button.nee, a.knop.nee { background: var(--surface-raised); color: var(--purple-strong); box-shadow: inset 0 0 0 2px var(--line-strong); }
button.nee:hover, a.knop.nee:hover { background: var(--purple-soft); }
button.gevaar { background: var(--danger); color: var(--on-danger); box-shadow: none; }
button.gevaar:hover { background: var(--danger); filter: brightness(0.92); }
button[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.knoppen button, .knoppen .knop { margin: 0; }
.knoppen form { margin: 0; }
.knoppen.klein button { padding: 9px 16px; font-size: 13px; }

/* Formulieren */
label { display: block; margin: var(--space-5) 0 var(--space-2); font-weight: 800; font-size: 14px; }
input[type=email], input[type=text], input[type=file], input[type=datetime-local], textarea, select {
  width: 100%; padding: 13px 16px; font: 500 16px/1.4 var(--font-sans); color: var(--ink); background: var(--surface-raised);
  border: 2px solid var(--line-strong); border-radius: var(--radius-md); transition: border-color .2s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input[type=datetime-local] { max-width: 100%; width: auto; }
input[type=file] { padding: 10px; }
input[type=radio], input[type=checkbox] { accent-color: var(--purple); width: 18px; height: 18px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); margin: var(--space-4) 0; padding: var(--space-4) var(--space-5) var(--space-5); background: var(--surface-raised); }
legend { float: left; width: 100%; font-weight: 800; padding: 0; margin: var(--space-2) 0 var(--space-1); line-height: 1.4; }
legend + * { clear: both; }
label.keuze { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 600; margin: var(--space-3) var(--space-5) 0 0; }
label.vink { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; }
label.vink input { margin-top: 0.3rem; flex: none; }
fieldset .uitleg { display: none; margin-top: var(--space-3); }
fieldset .uitleg.toon, fieldset:has(input[value=nee]:checked) .uitleg, fieldset:has(input[value=weetniet]:checked) .uitleg { display: block; }
details.hoe { margin-top: var(--space-2); font-size: 15px; }
details.hoe summary { cursor: pointer; color: var(--purple-strong); font-weight: 700; }
.leeg-laten { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.adres { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.adres input { flex: 1 1 14rem; }
.adres button { margin: 0; }

/* Posts in de studio */
.post { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.post:first-of-type { border-top: 0; }
.media { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 0 0 auto; }
.media.breed { flex: 1 1 100%; }
.voorbeeld { flex: 0 0 72px; width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); background: var(--purple-wash); }
.voorbeeld.video { flex: 0 1 16rem; width: 100%; max-width: 16rem; height: auto; max-height: 24rem; object-fit: contain; background: #161028; }
.instellingen { margin: var(--space-1) 0; padding-left: 1.1rem; }
.post .info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.post p { margin: var(--space-1) 0; }
.post label { margin: var(--space-3) 0 var(--space-1); font-size: 14px; }

/* Badge en kicker (status in de studio, kopjes op de productpagina) */
.cg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); font: 800 12px/1.2 var(--font-sans); white-space: nowrap; background: var(--line); color: var(--ink-soft); }
.cg-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cg-badge--purple { background: var(--purple-soft); color: var(--purple-strong); }
.cg-badge--mint { background: var(--mint-soft); color: var(--mint-strong); }
.cg-badge--mint::before { background: var(--mint); }
.cg-badge--sun { background: var(--sun-soft); color: var(--sun-strong); }
.cg-badge--coral { background: var(--coral-soft); color: var(--coral-strong); }
.cg-badge--danger { background: var(--danger-soft); color: var(--danger); }
.kicker { font: 900 12px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--purple-strong); margin: 0 0 var(--space-3); }

/* ---------- Productpagina en hulp (houder = brede kolom) ---------- */
.houder { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-7); }
.cg-hl { position: relative; display: inline-block; color: var(--purple-strong); z-index: 0; }
.cg-hl::after { content: ""; position: absolute; left: 3%; right: -1%; height: 0.15em; bottom: -0.03em; border-radius: 100% 40% 70% 40%; background: var(--sun); transform: rotate(-2deg); z-index: -1; }
.cg-eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); background: var(--surface-raised); border-radius: var(--radius-pill); color: var(--purple-deep); font: 800 13px/1.2 var(--font-sans); padding: 10px 15px; box-shadow: var(--shadow-xs); }
.cg-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }

.held { position: relative; overflow: hidden; background: var(--surface-warm); padding: var(--space-16) 0 var(--space-section-sm); text-align: center; }
.held__tekst { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 0 var(--space-7); }
.held h1 { font-size: clamp(44px, 7.3vw, 96px); line-height: 1.02; letter-spacing: -0.07em; margin: var(--space-6) 0 var(--space-5); }
.lead { font-size: 19px; line-height: 1.65; color: var(--ink-soft); max-width: var(--measure); margin: 0 auto; }
.held .knoppen { justify-content: center; margin-top: var(--space-7); }
.held .knop { padding: 17px 28px; font-size: 16px; }
.held__beeld { position: relative; height: 360px; max-width: 900px; margin: var(--space-12) auto 0; }
.held__blob { position: absolute; inset: 30px 120px 20px; background: var(--gradient-glow); border-radius: 48% 52% 48% 42% / 51% 47% 53% 49%; transform: rotate(-3deg); }
.held__baan { position: absolute; left: 50%; top: 50%; width: 640px; height: 270px; border: 2px dashed var(--line-strong); border-radius: 50%; transform: translate(-50%, -50%) rotate(-8deg); }
.laag { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.held__vonk { position: absolute; width: 64px; opacity: .8; }
.held__vonk--l { left: 8%; top: 40px; transform: rotate(-14deg); }
.held__vonk--r { right: 8%; top: 20px; transform: scaleX(-1) rotate(-10deg); }

.cg-post { position: absolute; width: 230px; background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-xl); text-align: left; }
.cg-post__kop { display: flex; align-items: center; gap: 7px; margin: 2px 2px 12px; font: 800 12px/1.2 var(--font-sans); color: var(--ink); }
.cg-post__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--sun); }
.cg-post__avatar--mint { background: var(--mint); }
.cg-post__meer { margin-left: auto; color: var(--ink-muted); }
.cg-post__beeld { position: relative; height: 200px; border-radius: var(--radius-md); overflow: hidden; background: var(--gradient-post-warm); }
.cg-post__beeld--fris { background: var(--gradient-post-fresh); }
.cg-post__zon { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--sun); top: 34px; left: 26px; }
.cg-post__beeld--fris .cg-post__zon { background: var(--coral); width: 52px; height: 52px; top: auto; bottom: 34px; left: 30px; }
.cg-post__kopregel { position: absolute; left: 16px; right: 16px; bottom: 18px; font: 900 27px/1 var(--font-display); letter-spacing: -0.05em; color: var(--on-accent); }
.cg-post__beeld--fris .cg-post__kopregel { top: 22px; bottom: auto; text-align: center; font-size: 21px; line-height: 1.06; }
.cg-post__hart { display: inline-block; }
.cg-post__voet { display: flex; justify-content: space-between; margin: 12px 4px 2px; font: 800 12px/1.2 var(--font-sans); color: var(--ink); }
.cg-post--a { left: 70px; top: 40px; transform: rotate(-8deg); }
.cg-post--b { right: 70px; top: 20px; transform: rotate(7deg); }

.cg-prompt { position: absolute; left: 0; right: 0; margin: 0 auto; top: 110px; width: 360px; max-width: 86vw; z-index: 3; transform: rotate(-1deg); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); padding: 20px 22px; text-align: left; }
.cg-prompt__top { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); font: 900 14px/1.2 var(--font-display); letter-spacing: -0.02em; }
.cg-prompt__status { display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1.2 var(--font-sans); color: var(--mint-strong); letter-spacing: 0; }
.cg-prompt__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.cg-prompt__woorden { font-size: 19px; font-weight: 800; line-height: 1.36; letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
.cg-prompt__denkt { display: none; gap: 5px; align-items: center; width: max-content; background: var(--purple-wash); border-radius: var(--radius-sm); padding: 13px 15px; margin: 0; }
.cg-prompt__denkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.cg-prompt__antwoord { background: var(--purple-wash); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 14px; line-height: 1.45; color: var(--purple-deep); margin: 0; }

.cg-sticker { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-pill); padding: 10px 15px 10px 11px; box-shadow: var(--shadow-sm); font: 900 12px/1.2 var(--font-sans); white-space: nowrap; }
.cg-sticker i { display: inline-grid; place-items: center; border-radius: 50%; width: 23px; height: 23px; font-size: 11px; font-style: normal; background: var(--coral); color: var(--on-accent); }
.cg-sticker--mint i { background: var(--mint); }
.cg-sticker--zon i { background: var(--sun); }
.cg-sticker--1 { left: 30px; top: 0; transform: rotate(-8deg); }
.cg-sticker--2 { right: 20px; top: 270px; transform: rotate(8deg); }
.cg-sticker--3 { left: 190px; bottom: 0; transform: rotate(-5deg); }

.lint { background: var(--purple); color: var(--on-purple); overflow: hidden; padding: 15px 0; transform: rotate(-1deg); margin: 0 -20px; }
.lint__binnen { display: flex; width: max-content; white-space: nowrap; font: 800 18px/1.2 var(--font-display); letter-spacing: -0.01em; }
.lint__binnen span { margin-right: 28px; }
.lint__binnen span:nth-child(even) { color: var(--sun); }

.blok { padding: var(--space-section) 0; }
.blok--warm { background: var(--surface-warm); }
.blokkop { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; }
.blokkop h2 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.blokkop p { font-size: 17px; color: var(--ink-soft); margin: 0 auto; max-width: 630px; }
.accent { color: var(--purple-strong); }
.accent--coral { color: var(--coral-strong); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stap { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 29px 27px 27px; min-height: 280px; background: var(--purple-soft); }
.stap--coral { background: var(--coral-soft); }
.stap--mint { background: var(--mint-soft); }
.stap__nr { font: 900 12px/1.2 var(--font-sans); letter-spacing: .1em; color: var(--purple-deep); text-transform: uppercase; }
.stap h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.048em; margin: 6px 0 10px; }
.stap p { font-size: 15px; color: var(--ink-soft); max-width: 260px; margin: 0; }
.stap__teken { position: absolute; right: 26px; bottom: 26px; width: 80px; height: 80px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--surface-raised); box-shadow: var(--shadow-sm); font: 900 36px/1 var(--font-display); color: var(--purple-strong); transform: rotate(9deg); }
.stap--coral .stap__teken { color: var(--coral-strong); transform: rotate(-11deg); }
.stap--mint .stap__teken { color: var(--mint-strong); }

.kaart { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 25px; background: var(--surface-raised); margin: 0; transition: transform .2s, box-shadow .2s; }
.kaart:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.kaart__icoon { width: 54px; height: 54px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 24px; margin-bottom: var(--space-5); background: var(--purple-soft); color: var(--purple-strong); }
.kaart--coral .kaart__icoon { background: var(--coral-soft); color: var(--coral-strong); }
.kaart--mint .kaart__icoon { background: var(--mint-soft); color: var(--mint-strong); }
.kaart--zon .kaart__icoon { background: var(--sun-soft); color: var(--sun-strong); }
.kaart h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.04em; margin: 0 0 7px; }
.kaart p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.lijst-check { list-style: none; padding: 0; }
.lijst-check li { position: relative; padding-left: 34px; margin-bottom: var(--space-3); }
.lijst-check li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-strong); font: 900 12px/1 var(--font-sans); }

.slot { position: relative; overflow: hidden; background: var(--gradient-cta); color: var(--on-purple); border-radius: var(--radius-xl); padding: var(--space-20) var(--space-10); text-align: center; }
.slot h2 { color: var(--on-purple); font-size: clamp(36px, 5.5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.slot p { color: var(--on-purple); font-size: 17px; max-width: 560px; margin: 0 auto; }
.slot .knop { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); margin-top: var(--space-7); }
.slot .knop:hover { background: var(--surface-raised); }
.slot__zon { position: absolute; width: 180px; right: -40px; top: -40px; opacity: .9; }

.titel { font-size: clamp(32px, 4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.held--klein { padding-bottom: var(--space-12); }
.held--klein h1 { font-size: clamp(40px, 6vw, 72px); }
.schermvak { margin: var(--space-5) 0 var(--space-6); min-height: 180px; display: grid; place-items: center; text-align: center; border: 2px dashed var(--line-strong); background: var(--purple-wash); border-radius: var(--radius-lg); padding: var(--space-6); }
.schermvak p { margin: 0; font-size: 14px; color: var(--ink-muted); }
.schermvak strong { display: block; color: var(--purple-strong); margin-bottom: var(--space-1); }
.slot .knoppen { justify-content: center; }
.slot .knoppen .knop { margin-top: var(--space-3); }
.leestekst { max-width: var(--measure); margin: 0 auto; }
.leestekst h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.05em; margin: var(--space-12) 0 var(--space-3); }
.leestekst h3 { margin-top: var(--space-6); }
.leestekst figure { margin: var(--space-5) 0; }
.leestekst figure img { border-radius: var(--radius-md); border: 1px solid var(--line); }
.leestekst figcaption { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-2); }
.vraag { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.vraag summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.vraag summary::after { content: "+"; color: var(--purple-strong); font: 800 22px/1 var(--font-display); }
.vraag[open] summary::after { content: "\2212"; }
.vraag p { margin: var(--space-3) 0 0; color: var(--ink-soft); }

/* ---------- Telefoon ---------- */
@media (max-width: 860px) {
  .raster, .raster--2 { grid-template-columns: 1fr; }
  .held__beeld { height: 330px; }
  .cg-post--a { left: -20px; } .cg-post--b { right: -20px; }
  .cg-sticker--3 { left: 10px; } .cg-sticker--2 { right: 0; }
  .held__baan { width: 92vw; }
  .blok { padding: var(--space-section-sm) 0; }
}
@media (max-width: 630px) {
  .kop__binnen, .houder, .vlak, .voet__binnen, .held__tekst { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  .kop nav a:not(.knop) { display: none; }
  .vlak { padding-top: var(--space-8); }
  section { padding: var(--space-5); }
  .cg-post { width: 170px; } .cg-post__beeld { height: 150px; } .cg-post__kopregel { font-size: 21px; }
  .cg-post--a { top: 70px; } .cg-post--b { top: 60px; }
  .cg-prompt { top: 150px; width: 300px; }
  .held__beeld { height: 410px; }
  .cg-prompt__woorden { font-size: 17px; }
  .cg-sticker--1 { left: 4px; } .cg-sticker--2 { top: 112px; right: 2px; } .cg-sticker--3 { display: none; }
  .held__blob { inset: 40px 10px 20px; }
  .slot { padding: var(--space-12) var(--space-5); border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  button:hover, a.knop:hover, .kaart:hover { transform: none; }
}

/* ---------- Beweging ----------
   Alleen voor wie beweging toestaat: de klasse "beweeg" op <html> zet pagina.ts alleen dan, en alles staat
   ook nog in de media query. Zonder JavaScript of met "minder beweging" is de pagina stil en volledig zichtbaar.
   campaigo.js zet de klassen voor de collage (speelt, denkt, beantwoord, akkoord, online), het onthullen
   bij scrollen (op, zien) en het stilzetten buiten beeld (rust). Alleen transform en opacity, voor soepelheid. */
@media (prefers-reduced-motion: no-preference) {
  /* Kop van de pagina: woord voor woord, daarna trekt de gele streep zich */
  .beweeg .held .cg-eyebrow { animation: cg-val .6s var(--veer) both; }
  .beweeg .held .cg-eyebrow::before, .cg-prompt__status::before { animation: cg-puls 2.2s ease-out 1.2s infinite; }
  .beweeg .held h1 .w { display: inline-block; animation: cg-woord .8s var(--veer) both; animation-delay: calc(.12s + var(--i) * .07s); }
  .beweeg .held .cg-hl::after { transform-origin: left center; animation: cg-streep .55s cubic-bezier(.65, 0, .35, 1) .85s both; }
  .beweeg .held .lead { animation: cg-op .7s ease-out .55s both; }
  .beweeg .held .knoppen { animation: cg-op .7s ease-out .7s both; }

  /* Collage: komt binnen, daarna dobbert alles zachtjes */
  .beweeg .held__blob { animation: cg-groei 1s var(--veer) .35s both, cg-blob 14s ease-in-out 1.4s infinite alternate; }
  .beweeg .held__baan { animation: cg-in .8s ease-out .6s both, cg-baan 18s ease-in-out 1.4s infinite alternate; }
  .beweeg .held__vonk { animation: cg-plop .7s var(--veer) 1.1s both, cg-twinkel 3.4s ease-in-out 1.8s infinite; }
  .beweeg .held__vonk--r { animation-delay: 1.25s, 2.6s; }
  .beweeg .cg-post--a { animation: cg-binnen-l .9s var(--veer) .85s both, cg-dobber 6s ease-in-out 1.8s infinite; }
  .beweeg .cg-post--b { animation: cg-binnen-r .9s var(--veer) 1s both, cg-dobber 7s ease-in-out 2.4s infinite; }
  .beweeg .cg-prompt { animation: cg-plop .7s var(--veer) 1.25s both; }
  .beweeg .cg-sticker { animation: cg-plop .6s var(--veer) both, cg-zweef 5s ease-in-out infinite; }
  .beweeg .cg-sticker--1 { animation-delay: 1.6s, 2.2s; }
  .beweeg .cg-sticker--2 { animation-delay: 1.8s, 2.6s; }
  .beweeg .cg-sticker--3 { animation-delay: 2s, 3s; }

  /* Het verhaal in de collage (campaigo.js): typen, nadenken, antwoorden, akkoord, online */
  .beweeg .speelt .cg-prompt__woorden .t { opacity: 0; }
  .beweeg .speelt .cg-prompt__woorden .t.aan { opacity: 1; }
  .cg-prompt__woorden .t { position: relative; }
  .cg-prompt__woorden .t.cursor::after { content: ""; position: absolute; right: -3px; top: .1em; width: 2px; height: 1.05em; border-radius: 1px; background: var(--purple); animation: cg-knipper .8s steps(1) infinite; }
  .beweeg .speelt:not(.beantwoord) .cg-prompt__antwoord { display: none; }
  .beweeg .denkt .cg-prompt__denkt { display: flex; animation: cg-plop .4s var(--veer) both; }
  .beweeg .denkt .cg-prompt__denkt i { animation: cg-stip 1s ease-in-out infinite; }
  .beweeg .denkt .cg-prompt__denkt i:nth-child(2) { animation-delay: .15s; }
  .beweeg .denkt .cg-prompt__denkt i:nth-child(3) { animation-delay: .3s; }
  .beweeg .beantwoord .cg-prompt__antwoord { transform-origin: left top; animation: cg-plop .5s var(--veer) both; }
  .beweeg .speelt:not(.akkoord) .cg-sticker--2, .beweeg .speelt:not(.online) .cg-sticker--3 { opacity: 0; animation: none; }
  .beweeg .speelt.akkoord .cg-sticker--2, .beweeg .speelt.online .cg-sticker--3 { animation: cg-plop .6s var(--veer) both, cg-zweef 5s ease-in-out .6s infinite; }
  .beweeg .online .cg-post--a .cg-post__hart { color: var(--coral-strong); animation: cg-hart .6s var(--veer) both; }
  .cg-zweefhart { position: absolute; left: 14px; bottom: 26px; color: var(--coral-strong); font-size: 15px; pointer-events: none; animation: cg-hartje 1.6s ease-out both; }

  /* Lint loopt rond; het puntje van het woordmerk stuitert bij aanwijzen */
  .beweeg .lint__binnen { animation: cg-lint 38s linear infinite; }
  .cg-wordmark:hover .cg-wordmark__dot { animation: cg-stuiter .7s var(--veer); }

  /* Onthullen bij scrollen (campaigo.js zet "op" en daarna "zien") */
  .beweeg .op:not(.zien) { opacity: 0; }
  .beweeg .op.zien { animation: cg-omhoog .8s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .beweeg .stap.zien .stap__teken { animation: cg-plop .7s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms + .35s); }
  .beweeg .lijst-check li.zien::before { animation: cg-plop .5s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
  .stap__teken, .kaart__icoon { transition: rotate .45s var(--veer), scale .45s var(--veer); }
  .stap:hover .stap__teken { rotate: -16deg; scale: 1.08; }
  .kaart:hover .kaart__icoon { rotate: -10deg; scale: 1.1; }

  /* Slot: de zon draait, het verloop golft */
  .beweeg .slot { background-size: 180% 180%; animation: cg-verloop 12s ease-in-out infinite alternate; }
  .beweeg .slot.op.zien { animation: cg-omhoog .8s var(--veer) both, cg-verloop 12s ease-in-out .8s infinite alternate; }
  .beweeg .slot__zon { animation: cg-draai 40s linear infinite; }

  /* Studio: een melding dat iets gelukt is, komt vrolijk binnen */
  .beweeg .gelukt { animation: cg-val .6s var(--veer) both; }

  /* Buiten beeld staat alles stil (scheelt rekenwerk op telefoons) */
  .rust, .rust * { animation-play-state: paused !important; }
}

@keyframes cg-woord { from { opacity: 0; translate: 0 .45em; rotate: 7deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-streep { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
@keyframes cg-val { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes cg-op { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes cg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-omhoog { from { opacity: 0; translate: 0 34px; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-groei { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes cg-plop { 0% { opacity: 0; scale: .3; } 100% { opacity: 1; scale: 1; } }
@keyframes cg-binnen-l { from { opacity: 0; translate: -70px 50px; rotate: -14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-binnen-r { from { opacity: 0; translate: 70px 50px; rotate: 14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-dobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes cg-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes cg-twinkel { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.18; rotate: 12deg; } }
@keyframes cg-blob { 0% { border-radius: 48% 52% 48% 42% / 51% 47% 53% 49%; } 50% { border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%; } 100% { border-radius: 55% 45% 42% 58% / 58% 44% 56% 42%; } }
@keyframes cg-baan { from { transform: translate(-50%, -50%) rotate(-8deg); } to { transform: translate(-50%, -50%) rotate(-3deg); } }
@keyframes cg-puls { 0% { box-shadow: 0 0 0 0 rgba(117, 220, 204, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(117, 220, 204, 0); } }
@keyframes cg-knipper { 50% { opacity: 0; } }
@keyframes cg-stip { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }
@keyframes cg-hart { 0% { scale: 1; } 40% { scale: 1.7; } 100% { scale: 1; } }
@keyframes cg-hartje { from { opacity: 1; translate: 0 0; scale: .6; } to { opacity: 0; translate: var(--x, 0px) -90px; scale: 1.3; } }
@keyframes cg-lint { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cg-stuiter { 0%, 100% { translate: 0 0; } 35% { translate: 0 -9px; } 65% { translate: 0 1px; } }
@keyframes cg-verloop { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes cg-draai { to { rotate: 360deg; } }