/* ============================================================
   Build by Max — stylesheet
   Neo-brutalist: papier, 2px inkt-randen, harde slagschaduwen.
   Tokens zijn 1-op-1 overgenomen uit het design system.
   ============================================================ */

/* ---------- Fonts (self-hosted; geen Google Fonts = geen AVG-gedoe) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* base */
  --paper: #FAF5EC;
  --paper-2: #FFFFFF;
  --ink: #1B1B1F;
  --ink-2: #4A4A52;
  --ink-3: #7C7C86;
  --amber: #FFC940;
  --amber-strong: #F5B300;
  --violet: #7A6FF0;
  --violet-soft: #E4E0FC;
  --coral: #F0665C;
  --coral-soft: #FDE4E2;
  --mint: #BFE8D2;
  --mint-deep: #1E7A4E;
  --lemon: #FBF3B9;

  /* semantic */
  --surface-page: var(--paper);
  --surface-card: var(--paper-2);
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-subtle: var(--ink-3);
  --action-primary: var(--amber);
  --action-primary-hover: var(--amber-strong);
  --danger: #C6362C;

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --leading-display: 1.05;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;

  /* space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --content-max: 1120px;

  /* shape */
  --border: 2px solid var(--ink);
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-pill: 999px;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-lg: 6px 6px 0 var(--ink);

  /* motion */
  --ease-spring: cubic-bezier(.2,.8,.3,1.1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--violet-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  font-weight: 800;
  margin: 0;
}
p { margin: 0; }
a { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: opacity var(--dur-fast); }
a:hover { text-decoration-color: var(--amber-strong); text-decoration-thickness: 3px; opacity: .8; }
ul { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--ink); border: var(--border);
  padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 700;
}
.skip:focus { left: 16px; top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.shell {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: var(--surface-page);
  border-left: var(--border);
  border-right: var(--border);
}
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px);
}
.section { padding: clamp(56px, 9vw, 96px) 0; }
.section--bordered {
  background: var(--paper-2);
  border-top: var(--border);
  border-bottom: var(--border);
}
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3 { color: var(--paper); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
/* De hero wil zijn twee kolommen gecentreerd; de vragen-sectie niet —
   daar hoort de kop op één lijn met de eerste vraag te staan. */
#vragen .grid-2 { align-items: start; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.lead { font-size: 18px; color: var(--text-muted); }
.fineprint { font-size: 14px; color: var(--text-subtle); }
.h-xl { font-size: clamp(38px, 7.5vw, 64px); }
.h-lg { font-size: clamp(30px, 6vw, 48px); }
.accent { color: var(--amber-strong); white-space: nowrap; }

/* ---------- Decoratieve wolken ---------- */
.cloud { position: fixed; z-index: 0; will-change: transform; pointer-events: none; }
@media (max-width: 1340px) { .cloud { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 64px;
}
.brand {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: var(--tracking-display); white-space: nowrap;
  text-decoration: none;
}
.brand span { color: var(--amber-strong); }
.nav__links { display: flex; gap: 28px; font-weight: 500; font-size: 15px; }
.nav__links a { text-decoration: none; }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber-strong); text-decoration-thickness: 3px; }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ---------- Button ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border: var(--border); border-radius: var(--radius-pill);
  padding: 12px 26px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper-2); color: var(--ink);
  box-shadow: var(--shadow-hard);
  transition: all var(--dur-fast) var(--ease-spring);
  text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow-hard-lg); transform: translate(-2px, -2px); opacity: 1; }
.btn:active { box-shadow: none; transform: translate(2px, 2px); }
.btn[disabled] { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.btn--primary { background: var(--action-primary); }
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn--ghost:hover { box-shadow: none; transform: none; text-decoration: underline; text-decoration-color: var(--amber-strong); text-decoration-thickness: 3px; }
.btn--sm { padding: 8px 18px; font-size: 14px; }
.btn--lg { padding: 16px 34px; font-size: 18px; }
.btn--block { width: 100%; }

/* ---------- Badge / Tag ---------- */
.badge {
  display: inline-block; background: var(--amber); color: var(--ink);
  border: var(--border); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.badge--violet { background: var(--violet-soft); }
.badge--mint { background: var(--mint); }

.taglist { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; justify-content: center; list-style: none; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-2); border: var(--border);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 14px; font-weight: 500;
}

/* ---------- Card ---------- */
.card {
  background: var(--paper-2); color: var(--ink);
  border: var(--border); border-radius: var(--radius-card);
  padding: var(--space-5); box-shadow: var(--shadow-hard);
  transition: all var(--dur-base) var(--ease-spring);
}
.card--cream { background: var(--paper); }
.card--hover:hover { box-shadow: var(--shadow-hard-lg); transform: translate(-2px, -2px); }
.card--pad { padding: 32px; }

.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--amber); border: var(--border);
  border-radius: var(--radius-pill); margin-bottom: 16px;
}
.card h3 { font-size: 22px; margin: 0 0 8px; }
.card p { font-size: 15px; color: var(--text-muted); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
/* padding-block, NIET het shorthand: dat zette de horizontale padding
   van .wrap op 0 en plakte de hero tegen de linkerrand op mobiel. */
.hero__inner { padding-block: clamp(56px, 9vw, 96px); }
.hero h1 { margin: 20px 0 0; }
.hero__lead { max-width: 480px; margin: 20px 0 32px; }
.hero__acts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.mock {
  background: var(--violet); border: var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-hard-lg);
  aspect-ratio: 4 / 3.4; display: grid; place-items: center;
  padding: clamp(20px, 3vw, 36px); position: relative; overflow: hidden;
}
.mock__deco { position: absolute; }
.mock__deco--cloud { top: 18px; left: 16px; }
.mock__deco--star { top: 24px; right: 22px; }
.mock__window {
  background: var(--paper-2); border: var(--border); border-radius: 12px;
  box-shadow: var(--shadow-hard); width: 88%; transform: rotate(-2deg);
}
.mock__bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: var(--border); }
.mock__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.mock__url { margin-left: 8px; flex: 1; height: 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; }
.mock__body { padding: 18px 16px; display: grid; gap: 10px; }
.mock__title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: var(--tracking-display); }
.mock__line { height: 10px; background: var(--violet-soft); border: 2px solid var(--ink); border-radius: 999px; }
.mock__pills { display: flex; gap: 8px; margin-top: 4px; }
.mock__pill { border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 700; background: var(--paper-2); }
.mock__pill--amber { background: var(--amber); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Pricing ---------- */
.prices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; align-items: stretch; list-style: none;
}
.price {
  background: var(--paper-2); color: var(--ink);
  border: var(--border); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--shadow-hard);
  display: flex; flex-direction: column; gap: 16px; position: relative;
}
.price--featured { background: var(--violet); color: #fff; box-shadow: var(--shadow-hard-lg); }
.price__badge { position: absolute; top: -16px; left: 24px; }
.price__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.price__amount { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: var(--tracking-display); }
.price__period { font-size: 14px; opacity: .75; }
.price__desc { font-size: 15px; opacity: .9; line-height: 1.55; }
.price__features { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.price__features li { display: flex; gap: 8px; align-items: baseline; }
.price__features li::before { content: "\2713"; font-weight: 700; color: var(--mint-deep); }
.price--featured .price__features li::before { color: var(--amber); }
.price__cta { margin-top: auto; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; list-style: none; }
.step {
  border: 2px solid var(--paper); border-radius: var(--radius-card);
  padding: 28px; box-shadow: 4px 4px 0 var(--amber);
}
.step__n { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--amber); }
.step h3 { font-size: 22px; margin: 10px 0 8px; }
.step p { font-size: 15px; opacity: .8; }

/* ---------- Accordion (details/summary — werkt zonder JS) ---------- */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--paper-2); border: var(--border);
  border-radius: var(--radius-card); transition: box-shadow var(--dur-fast);
}
.faq__item[open] { box-shadow: var(--shadow-hard); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; width: 100%; padding: 16px 20px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; font-family: var(--font-body); font-weight: 700; font-size: 20px;
  transition: transform var(--dur-fast); flex-shrink: 0;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
/* display:grid wint anders van het hidden-attribuut, en dan blijft het formulier na verzenden staan */
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  padding: 12px 16px; background: var(--paper-2);
  border: var(--border); border-radius: var(--radius-input);
  outline: none; color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 4px 4px 0 var(--amber); }
.field--select { position: relative; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; }
.field__chevron { position: absolute; right: 14px; bottom: 16px; pointer-events: none; }
.field__hint { font-size: 13px; font-weight: 400; color: var(--text-subtle); }

.toast {
  background: var(--mint); border: var(--border); border-radius: var(--radius-card);
  padding: 16px 20px; font-weight: 600; box-shadow: var(--shadow-hard);
}
.toast--error { background: var(--coral-soft); }

/* na verzenden: wat kun je verwachten */
#form-bedankt:focus { outline: none; }
.card .verwacht__kop { font-size: 22px; margin: 28px 0 20px; }
.verwacht { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: center; }
.verwacht__pijl { line-height: 0; color: var(--ink); }
.verwacht__stap {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  background: var(--paper-2); border: var(--border); border-radius: var(--radius-card);
  box-shadow: 3px 3px 0 var(--ink); padding: 14px 16px;
}
.verwacht__nr {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--amber); border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.verwacht__stap p { margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------- Recent werk: browservensters ---------- */
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.demo {
  display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  background: var(--paper-2); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring);
}
.demo:hover, .demo:focus-visible { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.demo:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.demo__venster { border-bottom: var(--border); background: var(--ink); }
.demo__balk {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--paper); border-bottom: var(--border);
}
.demo__stip { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--coral); }
.demo__stip:nth-child(2) { background: var(--amber); }
.demo__stip:nth-child(3) { background: var(--mint); }
.demo__adres {
  flex: 1; margin-left: 10px; padding: 3px 12px; min-width: 0;
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: var(--radius-pill);
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo picture { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.demo__beeld { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--ease-spring); }
.demo:hover .demo__beeld { transform: scale(1.04); }
.demo__tekst { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.demo__tekst h3 { font-size: 24px; margin: 0; }
.demo__tekst p { margin: 0; color: var(--text-muted); font-size: 15px; }
.demo__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }
.demo__tags .tag { font-size: 13px; padding: 3px 10px; }
.demo__link {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.demo:hover .demo__link svg { transform: translate(2px, -2px); }
.demo__link svg { transition: transform var(--dur-fast) ease; }
@media (prefers-reduced-motion: reduce) {
  .demo, .demo__beeld, .demo__link svg { transition: none; }
  .demo:hover .demo__beeld { transform: none; }
}

/* alleen voor schermlezers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); }
.footer__inner {
  padding: 48px clamp(20px, 5vw, 32px);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
  max-width: var(--content-max); margin: 0 auto;
}
.footer .brand { color: var(--paper); font-size: 20px; }
.footer .brand span { color: var(--amber); }
.footer__links { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; list-style: none; }
.footer__links a { color: var(--paper); opacity: .8; }
.footer__meta { font-size: 13px; opacity: .6; }
/* zonder deze regel erven de mail- en telefoonlink de globale ink-kleur:
   donkere tekst op een donkere voet, alleen het amber streepje bleef zichtbaar. */
.footer__meta a { color: var(--paper); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 14px; color: var(--text-muted); padding-top: 24px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-subtle); }

/* ---------- Prose (voor tekstpagina's) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(26px, 4vw, 34px); margin: 48px 0 12px; }
.prose h3 { font-size: 22px; margin: 32px 0 8px; }
.prose p { margin: 0 0 16px; color: var(--text-muted); font-size: 17px; }
.prose ul { margin: 0 0 16px 20px; }
.prose li { margin-bottom: 8px; color: var(--text-muted); }

/* ============================================================
   Beweging — teruggehaald uit de oude site (2026-08-28).
   Alles hieronder is decoratief. De klassen .reveal / .pop
   worden door app.js gezet, dus zonder JavaScript blijft
   niets onzichtbaar. Met "beperk beweging" aan valt het
   allemaal stil (zie het blok onderaan dit bestand).
   ============================================================ */

/* ---- Wolken: drijven zachtjes heen en weer ---- */
@keyframes drift {
  from { transform: translateX(-8px); }
  to   { transform: translateX(10px); }
}
@keyframes sparkle {
  0%, 100% { transform: scale(.92) rotate(0);    opacity: .55; }
  50%      { transform: scale(1)   rotate(8deg); opacity: 1;   }
}
.cloud path:not(.spark)     { animation: drift 9s ease-in-out infinite alternate; }
.cloud:nth-of-type(2n) path:not(.spark) { animation-duration: 12s; animation-delay: -4s; }
.cloud:nth-of-type(3n) path:not(.spark) { animation-duration: 15s; animation-delay: -7s; }
.cloud .spark { transform-origin: 113px 23.5px; animation: sparkle 2.4s ease-in-out infinite; }

/* ---- Knoppen: even schudden ---- */
@keyframes shake {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -1.3deg; }
  50%      { rotate: 1.3deg; }
  75%      { rotate: -0.8deg; }
}
@keyframes shakeLoop {
  0%, 23%, 100% { rotate: 0deg; }
  5.75%         { rotate: -1.3deg; }
  11.5%         { rotate: 1.3deg; }
  17.25%        { rotate: -0.8deg; }
}
.btn:hover           { animation: shake .45s ease-in-out 1; }
.cta-loop .btn, .btn.cta-loop             { animation: shakeLoop 1.95s ease-in-out infinite; }
.cta-loop .btn:hover, .btn.cta-loop:hover { animation: shake .45s ease-in-out infinite; }

/* ---- Ster in de mockup: zachte twinkel ---- */
@keyframes twinkle {
  0%, 100% { transform: scale(1)    rotate(0);    opacity: .65; }
  50%      { transform: scale(1.06) rotate(6deg); opacity: 1;   }
}
.mock__deco--star path { transform-origin: 50% 50%; animation: twinkle 2.8s ease-in-out infinite; }

/* ---- Invaren bij scrollen (klassen komen uit app.js) ---- */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}
.js .reveal.in { opacity: 1; transform: none; }

@keyframes pop {
  0%   { opacity: 0; transform: scale(.88) translateY(18px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
.js .pop     { opacity: 0; }
.js .pop.in  { animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ---------- Werkgebied ---------- */
.regio {
  display: grid; grid-template-columns: 1.3fr 1fr;
  border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard-lg); background: var(--paper-2);
  overflow: hidden;
}
.regio__tekst { padding: clamp(28px, 5vw, 44px); }
.regio__tekst h2 { margin: 16px 0; font-size: clamp(26px, 4vw, 36px); }
.regio__tekst p { margin: 0 0 14px; font-size: 17px; color: var(--text-muted); max-width: 46ch; }
.regio__tekst p:last-child { margin-bottom: 0; }
.regio__kaart {
  background: var(--violet-soft); border-left: var(--border);
  padding: clamp(28px, 5vw, 44px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.regio__plaatsen { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.regio__plaats {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-2); border: var(--border); border-radius: var(--radius-pill);
  padding: 6px 13px; font-size: 14.5px; font-weight: 600;
  box-shadow: 2px 2px 0 var(--ink);
}
.regio__plaats svg { flex: none; color: var(--coral); }
.regio__voet { margin: 0; font-size: 14.5px; color: var(--text-muted); }

/* ---------- Icoontjes (footer en elders) ---------- */
.ico {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink);
}
.ico--amber { background: var(--amber); }
.ico--mint  { background: var(--mint); }
.ico--coral { background: var(--coral-soft); }
.footer .ico { border-color: var(--paper); }

.footer__contact { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__contact a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--paper); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.footer__contact a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.footer__fine { margin: 0; opacity: .6; font-size: 13px; line-height: 1.7; }

/* ---------- Pakketkaarten (prijzenpagina) ---------- */
.card__icon--mint  { background: var(--mint); }
.card__icon--coral { background: var(--coral-soft); }
/* .card p is een klasse + element, dus specifieker dan een losse klasse:
   deze twee moeten binnen .card genest worden of ze verliezen het. */
.card .pakket__prijs {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--ink); margin: -2px 0 10px;
}
.card .pakket__voor {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ink-3);
  font-size: 14px;
}

/* ---------- Uitlegblokken: icoon links, tekst rechts ---------- */
.uitleg { display: grid; gap: 20px; }
.uitleg__item {
  display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start;
  background: var(--paper-2); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard); padding: var(--space-5);
  transition: all var(--dur-base) var(--ease-spring);
}
.uitleg__item:hover { box-shadow: var(--shadow-hard-lg); transform: translate(-2px, -2px); }
.uitleg__item h3 { font-size: 20px; margin: 0 0 8px; }
.uitleg__item p { margin: 0; font-size: 16px; color: var(--text-muted); max-width: 70ch; }
.uitleg__cta { margin-top: 40px; text-align: center; }

.ico--lg { width: 44px; height: 44px; }

@media (max-width: 560px) {
  .uitleg__item { grid-template-columns: 1fr; gap: 14px; }

  /* Knoppen onder elkaar en over de volle breedte. De ghost-knop heeft geen
     achtergrond of rand, dus naast een gele knop leek zijn tekst ingesprongen
     (allebei 34px padding, maar bij de ene zie je de doos en bij de andere niet). */
  .hero__acts { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__acts .btn { width: 100%; }

  /* Footer netjes onder elkaar; de linkjes in twee kolommen zodat er geen
     losse "Contact" op een eigen regel overblijft. */
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; }
}

/* ---------- 404-pagina ----------
   Hetzelfde browservenster als in de hero van de homepage, maar dan
   "kapot": de cijfers vallen erin, het onderste regeltje hangt los en
   een vergrootglas zoekt naar de verdwenen pagina. */
.oeps__kop {
  margin: 40px 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle);
}
.oeps__links { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; }
.oeps__links .tag {
  text-decoration: none; box-shadow: 2px 2px 0 var(--ink);
  transition: all var(--dur-fast) var(--ease-spring);
}
.oeps__links .tag:hover { box-shadow: var(--shadow-hard); transform: translate(-2px, -2px); background: var(--lemon); opacity: 1; }

.oeps__url {
  height: auto; min-width: 0; padding: 1px 10px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oeps__url::after { content: "|"; margin-left: 1px; animation: knipper 1s steps(1) infinite; }

.oeps__body { gap: 12px; padding-bottom: 26px; }
.oeps__cijfers { display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 14px); margin: 4px 0 6px; }
/* valIn gebruikt transform, dobber translate en wiebel rotate: drie losse
   eigenschappen, dus de animaties zitten elkaar niet in de weg. */
.oeps__cijfer {
  width: clamp(54px, 7.5vw, 82px); aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1; letter-spacing: var(--tracking-display);
  background: var(--paper-2); border: var(--border); border-radius: 10px;
  box-shadow: var(--shadow-hard);
  animation: valIn .75s cubic-bezier(.3, 1.5, .5, 1) .1s both, dobber 2.6s ease-in-out .9s infinite alternate;
}
.oeps__cijfer:last-child {
  background: var(--coral-soft);
  animation-delay: .4s, 1.7s;
}
.oeps__cijfer--nul {
  background: var(--amber);
  animation: valIn .75s cubic-bezier(.3, 1.5, .5, 1) .25s both,
             dobber 2.6s ease-in-out 1.3s infinite alternate,
             wiebel 3.2s ease-in-out 1.4s infinite;
}

/* onderste regeltje: scharniert aan de linkerkant en hangt scheef */
.oeps__los {
  transform-origin: 6px 50%; rotate: 11deg;
  animation: losLaten 1s cubic-bezier(.3, 1.6, .5, 1) 1.1s both, bungel 2.4s ease-in-out 2.1s infinite alternate;
}

.oeps__loep {
  position: absolute; right: 9%; bottom: 10%; z-index: 2;
  filter: drop-shadow(3px 3px 0 var(--ink));
  animation: zoeken 7s ease-in-out 1s infinite;
}
.oeps__wolk path { animation: drift 9s ease-in-out infinite alternate; }

@keyframes valIn {
  0%   { opacity: 0; transform: translateY(-140%) rotate(-14deg); }
  60%  { opacity: 1; transform: translateY(6%) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes dobber {
  from { translate: 0 0; }
  to   { translate: 0 -7px; }
}
@keyframes wiebel {
  0%, 60%, 100% { rotate: 0deg; }
  70%           { rotate: -9deg; }
  80%           { rotate: 7deg; }
  90%           { rotate: -3deg; }
}
@keyframes losLaten {
  0%   { rotate: 0deg; }
  55%  { rotate: 17deg; }
  100% { rotate: 11deg; }
}
@keyframes bungel {
  from { rotate: 11deg; }
  to   { rotate: 15deg; }
}
@keyframes zoeken {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(-90px, -30px) rotate(-8deg); }
  40%      { transform: translate(-150px, -100px) rotate(4deg); }
  55%      { transform: translate(-150px, -100px) rotate(4deg) scale(1.08); }
  75%      { transform: translate(-40px, -120px) rotate(10deg); }
}
@keyframes knipper { 50% { opacity: 0; } }

/* ---------- WhatsApp-knop (alleen mobiel) ---------- */
.wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 9px;
  background: #25D366; color: var(--ink);
  border: var(--border); border-radius: var(--radius-pill);
  padding: 11px 18px 11px 13px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  text-decoration: none; box-shadow: var(--shadow-hard);
}
.wa:active { box-shadow: none; transform: translate(2px, 2px); }

/* ---------- Mobiel ---------- */
@media (max-width: 760px) {
  .regio { grid-template-columns: 1fr; }
  .regio__kaart { border-left: 0; border-top: var(--border); }
  .wa { display: inline-flex; }
  .footer { padding-bottom: 76px; }   /* ruimte onder de zwevende knop */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .cloud { display: none; }
  .cloud path, .cloud .spark, .mock__deco--star path { animation: none !important; }
  .btn:hover, .cta-loop .btn, .btn.cta-loop, .cta-loop .btn:hover, .btn.cta-loop:hover { animation: none !important; }
  .oeps__cijfer, .oeps__los, .oeps__loep, .oeps__wolk path, .oeps__url::after { animation: none !important; }
  .js .reveal, .js .pop { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}