/* Contentmaat · huisstijl "Maatje": crème, koraal, lila en mint; Bricolage Grotesque voor koppen, Geist voor tekst.
   Lettertypen: Bricolage Grotesque (© The Bricolage Grotesque Project Authors) en Geist (© Vercel),
   beide onder de SIL Open Font License 1.1 (https://openfontlicense.org). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream: #fff6ec;
  --cream-2: #fcecd9;
  --paper: #fffdf9;
  --ink: #1a1423;
  --muted: #5f5768;
  --line: #f0e2d2;
  --coral: #ff5b3a;
  --coral-strong: #d9381c;
  --coral-press: #b8301a;
  --lilac: #e9e1ff;
  --lilac-line: #d8ccff;
  --sun: #ffc93c;
  --mint: #cdefe3;
  --mint-line: #b4e3d2;
  --mint-ink: #155a45;
  --wrap: 1180px;
  --gutter: 28px;
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Kop */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 246, 236, .88); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.top.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; line-height: 1; }
.logo b { background: var(--coral); color: #fff; border-radius: 14px 14px 14px 4px; padding: 3px 10px 6px; font-weight: 800; }
.logo-sm { font-size: 21px; }
.logo-sm b { border-radius: 11px 11px 11px 3px; padding: 2px 8px 5px; }
.links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--muted); }
.links a { text-decoration: none; }
.links a:hover { color: var(--ink); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; padding: 15px 24px; font: 650 15.5px/1.2 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn-primary { background: var(--coral-strong); color: #fff; box-shadow: 0 4px 0 var(--coral-press); }
.btn-primary:hover { background: #cf3519; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-press); }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; border-radius: 13px; box-shadow: 0 3px 0 var(--coral-press); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* Hero */
.hero { padding: 36px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.eyebrow { display: inline-block; background: var(--mint); color: var(--mint-ink); border-radius: 999px; padding: 7px 14px; font-weight: 650; font-size: 14px; margin-bottom: 22px; }
h1 { font-weight: 800; font-size: clamp(42px, 6.2vw, 84px); line-height: .98; letter-spacing: -.045em; }
/* De kop belooft wat je krijgt; de tweede zin (gemarkeerd) begint op een eigen regel. */
.hero h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; }
.h1-belofte { display: block; }
.hl { background: linear-gradient(transparent 58%, var(--sun) 58% 92%, transparent 92%); padding: 0 4px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sub { margin: 26px 0 34px; font-size: clamp(17.5px, 1.6vw, 19.5px); color: var(--muted); max-width: 34rem; text-wrap: pretty; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.chips li { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 550; }

.visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Chat in de hero: typ-wolkje en bericht delen één plek, zodat er niets verspringt. */
.slot { display: grid; align-items: end; }
.slot > * { grid-area: 1 / 1; }
.slot-in { align-self: flex-start; margin-left: 10%; justify-items: start; }
.slot-out { align-self: flex-end; margin-right: 8%; justify-items: end; }
.bubble { background: var(--lilac); border-radius: 22px 22px 22px 6px; padding: 12px 18px; font-weight: 600; font-size: 15px; }
.bubble.me { background: var(--coral-strong); color: #fff; border-radius: 22px 22px 6px 22px; }
.typing { display: inline-flex; align-items: center; gap: 5px; height: 46px; padding: 0 18px; border-radius: 22px 22px 22px 6px; background: var(--lilac); color: var(--ink); opacity: 0; }
.typing.t2 { background: var(--coral-strong); color: #fff; border-radius: 22px 22px 6px 22px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; animation: cm-dot .6s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .1s; }
.typing i:nth-child(3) { animation-delay: .2s; }
.post { width: min(330px, 100%); background: #fff; border-radius: 26px; padding: 14px; box-shadow: 0 6px 0 var(--line), 0 26px 50px rgba(26, 20, 35, .12); transform: rotate(1.5deg); }
.acct { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14.5px; padding: 2px 4px 12px; }
.av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: block; background: #35574a; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral); }
.acct-name { display: grid; line-height: 1.15; }
.acct-name b { font-weight: 700; font-size: 14.5px; }
.acct-name small { font-size: 12px; font-weight: 500; color: var(--muted); }
.tag { margin-left: auto; background: var(--mint); color: var(--mint-ink); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 650; }
.img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--cream-2); }
.post-actions { display: flex; gap: 14px; padding: 12px 4px 2px; }
.post-actions svg { width: 23px; height: 23px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.post-actions .save { margin-left: auto; }
.cap { font-size: 14px; line-height: 1.45; padding: 8px 4px 0; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cap b { font-weight: 700; margin-right: 4px; }
.when { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 0 4px 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf7f; }
/* Desktop: de hele chat (bericht, post en antwoord) past in het eerste scherm, ook op een laptop. De post schaalt mee
   met de schermhoogte: 300px vanaf ±790px hoog, kleiner op lagere schermen, nooit kleiner dan 240px. */
@media (min-width: 961px) {
  .hero .post { width: clamp(240px, calc(80vh - 330px), 300px); }
}

/* Volgorde: puntjes → eerste bericht → de post (met stempel "Gekeurd") → puntjes → antwoord. Eén keer, zodra de chat
   in beeld is (site.js); zonder JavaScript of met "minder beweging" staat alles meteen klaar. */
@keyframes cm-typing { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 14%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.94); } }
@keyframes cm-pop { 0% { opacity: 0; transform: translateY(14px) scale(.92); } 65% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes cm-post { 0% { opacity: 0; transform: translateY(32px) rotate(-2deg) scale(.95); } 100% { opacity: 1; transform: rotate(1.5deg); } }
@keyframes cm-stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-10deg); } 60% { opacity: 1; transform: scale(.92) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes cm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cm-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat.run .t1 { animation: cm-typing .8s ease .2s both; }
.chat.run .b1 { animation: cm-pop .4s cubic-bezier(.2, .8, .3, 1) 1s both; }
.chat.run .post { animation: cm-post .55s cubic-bezier(.2, .8, .3, 1) 1.3s both; }
.chat.run .tag { animation: cm-stamp .4s ease-out 1.9s both; }
.chat.run .when { animation: cm-fade .35s ease 2.05s both; }
.chat.run .t2 { animation: cm-typing .8s ease 2.3s both; }
.chat.run .b2 { animation: cm-pop .4s cubic-bezier(.2, .8, .3, 1) 3.1s both; }
.chat.wait .b1, .chat.wait .b2, .chat.wait .post, .chat.wait .tag, .chat.wait .when { opacity: 0; }

/* Secties */
.section { padding: 96px 0; }
.kicker { font-weight: 650; font-size: 14px; color: var(--coral-strong); margin-bottom: 12px; letter-spacing: .01em; }
h2 { font-weight: 800; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.04em; max-width: 20ch; }
h3 { font-weight: 750; font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); margin-top: 18px; max-width: 36rem; text-wrap: pretty; }

/* Voor wie: één regel met een draaiend woord in het koraal wolkje van het logo ("Voor [makelaars]"). site.js laat de
   letters van onder naar boven wisselen; zonder JavaScript of met "minder beweging" blijft het eerste woord staan.
   Schermlezers horen de hele lijst (sr-only). */
.who { padding: 64px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.who-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px 56px; align-items: center; }
.who-title { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .26em; max-width: none; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.1; }
.rotate { display: inline-flex; overflow: hidden; white-space: nowrap; background: var(--coral); color: #fff; border-radius: .26em .26em .26em .08em; padding: .02em .26em .1em; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.rotate-word { display: inline-flex; }
.rotate-char { display: inline-block; }
.rotate-word.in .rotate-char { animation: rot-in .5s cubic-bezier(.2, .9, .3, 1.12) both; }
.rotate-word.out .rotate-char { animation: rot-out .26s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes rot-in { from { transform: translateY(115%); } to { transform: none; } }
@keyframes rot-out { from { transform: none; opacity: 1; } to { transform: translateY(-125%); opacity: 0; } }
.who-sub { color: var(--muted); font-size: clamp(16.5px, 1.4vw, 18px); max-width: 32rem; text-wrap: pretty; }
.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; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; counter-reset: none; }
.step { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: 0 5px 0 var(--line); }
.step:nth-child(2) { background: var(--lilac); border-color: var(--lilac-line); box-shadow: 0 5px 0 var(--lilac-line); }
.step:nth-child(3) { background: var(--mint); border-color: var(--mint-line); box-shadow: 0 5px 0 var(--mint-line); }
.num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; background: var(--ink); color: #fff; font: 800 17px/1 var(--display); margin-bottom: 16px; }
.step p { margin-top: 8px; color: #3a3343; font-size: 15.5px; }

/* De start: een tijdlijn met stippen op één lijn (op telefoon en tablet onder elkaar). */
.start { margin-top: 48px; }
.start h3 { font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -.03em; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.timeline::before { content: ""; position: absolute; left: 8px; right: 0; top: 7px; height: 2px; background: var(--line); }
.timeline li { position: relative; padding-top: 28px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--cream); }
.timeline b { display: block; font: 750 17px/1.2 var(--display); letter-spacing: -.01em; }
.timeline span { display: block; margin-top: 4px; color: #3a3343; font-size: 15px; }

.ai { background: var(--ink); color: var(--cream); }
.ai .kicker { color: var(--sun); }
.ai .lead { color: #cfc6d8; }
.ai-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 30px; }
.gets li { position: relative; padding-left: 30px; color: #cfc6d8; font-size: 15px; line-height: 1.5; }
.gets b { display: block; color: var(--cream); font-weight: 650; font-size: 15.5px; }
.gets li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px 6px 6px 2px; background: var(--sun); }
.gets li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 4px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }

/* Wat je krijgt: een voorbeeld van het eigen overzicht van de klant (bloemenzaak studiostengel, verzonnen), als telefoon. */
.peek { margin: 0; display: grid; justify-items: center; gap: 14px; }
.phone { width: min(320px, 100%); background: var(--cream); color: var(--ink); border: 7px solid #2c2337; border-radius: 38px; padding: 20px 16px 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.phone-top { display: flex; align-items: center; gap: 11px; }
.phone-top img { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral); }
.phone-top span { display: grid; line-height: 1.15; }
.phone-top small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.phone-top b { font: 800 19px/1.1 var(--display); letter-spacing: -.02em; }
.phone-tabs { display: flex; gap: 6px; margin: 14px 0 12px; }
.phone-tabs span { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1.5px solid var(--line); }
.phone-tabs .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.phone-quota { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px 12px; }
.phone-quota p { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.phone-quota b { font: 800 18px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.phone-quota b small { font: 500 12px/1 var(--body); color: var(--muted); letter-spacing: 0; }
.phone-quota .bar { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: var(--cream-2); overflow: hidden; }
.phone-quota .bar i { display: block; width: 54%; height: 100%; border-radius: inherit; background: var(--ink); }
.phone-list { display: grid; gap: 8px; margin-top: 10px; }
.phone-list li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 11px; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 8px; }
.phone-list img { grid-row: span 2; width: 50px; height: 50px; border-radius: 11px; object-fit: cover; }
.phone-list span { display: grid; min-width: 0; line-height: 1.25; }
.phone-list b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-list small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-list em { justify-self: start; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: 99px; }
.st-in { background: var(--mint); color: var(--mint-ink); }
.st-klaar { background: var(--lilac); color: #4b2fb0; }
.st-maak { background: #fff1cc; color: #6b4d00; }
.peek figcaption { font-size: 14px; color: #cfc6d8; }

.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; margin-top: 44px; align-items: stretch; }
.pack { position: relative; background: #fff; border-radius: 26px; padding: 28px; box-shadow: 0 5px 0 var(--line); border: 1.5px solid var(--line); display: flex; flex-direction: column; }
.pack-lilac { background: var(--lilac); border-color: var(--lilac-line); box-shadow: 0 5px 0 var(--lilac-line); }
.pack-mint { background: var(--mint); border-color: var(--mint-line); box-shadow: 0 5px 0 var(--mint-line); }
.pack-sub { color: #3a3343; font-size: 15.5px; }
.pack ul { margin-top: 18px; display: grid; gap: 10px; }
.pack li { position: relative; padding-left: 28px; font-size: 15.5px; }
.pack li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px 6px 6px 2px; background: var(--ink); }
.pack li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.pack ul { margin-bottom: 26px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 14px; font: 800 42px/1 var(--display); letter-spacing: -.035em; }
.price small { font: 500 14px/1.3 var(--body); letter-spacing: 0; color: var(--muted); }
.pack-lilac .price small, .pack-mint .price small { color: #4a4255; }
/* Het label ligt half over de bovenrand, zodat de kaarten gelijk blijven lopen. */
.badge { position: absolute; top: -15px; left: 26px; background: var(--coral-strong); color: #fff; border-radius: 999px; padding: 6px 13px; font-weight: 700; font-size: 13.5px; line-height: 1.2; box-shadow: 0 3px 0 var(--coral-press); }
.pack-ask { margin: -8px 0 26px; font-size: 15.5px; color: #3a3343; }
.pack-ask strong { color: var(--ink); }
.pack-cta { margin-top: auto; }
.always { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 30px; }
.always-title { font-weight: 700; font-size: 15px; }
.always .chips { margin-top: 0; }
/* De voorwaarden staan gewoon leesbaar onder de pakketten, niet als kleine lettertjes. */
.terms { margin-top: 22px; font-size: 15.5px; color: #3a3343; max-width: 52rem; }
.terms strong { color: var(--ink); }
.terms a { color: var(--ink); font-weight: 600; }


/* Zelf doen, een bureau of Contentmaat: een compacte tabel; de kolom van Contentmaat is donker en loopt door. */
.vgl-sec { padding: 80px 0; background: var(--paper); border-top: 1px solid var(--line); }
.vgl { width: 100%; max-width: 980px; margin-top: 30px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vgl th, .vgl td { text-align: left; vertical-align: top; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.vgl thead th { font: 750 18px/1.2 var(--display); letter-spacing: -.02em; padding-top: 18px; }
.vgl thead td { border-bottom-color: transparent; width: 20%; }
.vgl tbody th { font-size: 14px; font-weight: 650; color: var(--muted); }
.vgl td { font-weight: 550; }
.vgl .ours { background: var(--ink); color: var(--cream); border-bottom-color: #3a2f47; }
.vgl thead .ours { border-radius: 20px 20px 0 0; }
.vgl tbody tr:last-child th, .vgl tbody tr:last-child td { border-bottom: 0; }
.vgl tbody tr:last-child .ours { border-radius: 0 0 20px 20px; }

.about { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
/* Foto in lagen (achtergrond, Milan, wolkje) voor het parallax-effect; site.js laat ze bewegen. Zonder JavaScript of met
   "minder beweging" liggen de lagen precies op elkaar en is het gewoon de foto. */
.portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 30px 30px 30px 8px; box-shadow: 0 6px 0 var(--line), 0 26px 50px rgba(26, 20, 35, .12); background: #dde4ea; isolation: isolate; }
.px-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; transform: scale(1.15); will-change: transform; backface-visibility: hidden; pointer-events: none; }
/* Het logo komt uit Milans telefoon. Het anker heeft dezelfde diepte en schaal als de laag met Milan, dus het beweegt
   precies mee met de telefoon en blijft in beeld. Plek in % van het kader, omgerekend vanuit de foto (cover,
   object-position 52% 50%): de punt van het wolkje (18,5% van links, onderaan) staat net boven de telefoon. */
.px-anker { position: absolute; inset: 0; z-index: 2; transform: scale(1.15); will-change: transform; backface-visibility: hidden; pointer-events: none; }
.px-logo { position: absolute; left: 58.5%; top: 37.1%; width: 16%; height: auto; transform-origin: 18.5% 100%; filter: drop-shadow(0 8px 14px rgba(26, 20, 35, .25)); }
.portrait.wacht .px-logo { opacity: 0; }
.portrait.in .px-logo { animation: cm-pop .55s cubic-bezier(.2, .8, .3, 1) .35s both; }
.about p + p { margin-top: 14px; font-size: 17px; color: #3a3343; max-width: 36rem; }

.faq { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.faq-col { display: grid; gap: 12px; }
.faq-more-wrap { margin-top: 22px; }
.faq details { background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 0 22px; box-shadow: 0 4px 0 var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative; font-weight: 650; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-52%); font: 700 24px/1 var(--display); color: var(--coral-strong); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; color: #3a3343; font-size: 16px; }

/* Scan */
.scan { background: var(--cream-2); }
.scan-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.ticks { margin-top: 24px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-weight: 550; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 4px; border-left: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(-45deg); }
.card { background: #fff; border-radius: 26px; padding: 28px; border: 1.5px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 24px 50px rgba(26, 20, 35, .08); }
.form { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.field em { font-style: normal; font-weight: 450; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 14px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.field input[aria-invalid="true"] { border-color: var(--coral-strong); }
/* Meer socials: knopjes die een veld tevoorschijn halen (site.js). */
.more-socials { display: grid; gap: 10px; }
.more-socials-label { font-size: 14.5px; font-weight: 600; }
.social-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.social-toggles[hidden] + .social-fields .field { display: grid; }
.social-toggle { font: 600 14px/1 var(--body); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.social-toggle::before { content: "+ "; font-weight: 800; color: var(--coral-strong); }
.social-toggle:hover { border-color: var(--ink); }
.social-toggle[aria-pressed="true"] { background: var(--mint); border-color: var(--mint-line); }
.social-toggle[aria-pressed="true"]::before { content: "✓ "; color: var(--mint-ink); }
.social-fields:not(:has(.field:not([hidden]))) { display: none; }
.field textarea { resize: vertical; min-height: 90px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { background: #ffe6df; color: #8a2412; border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 550; }
.fine { font-size: 13.5px; color: var(--muted); }
.scan-alt { margin-top: 28px; padding-top: 20px; border-top: 1.5px solid #ecd9c2; font-size: 15.5px; color: #3a3343; max-width: 30rem; }
.scan-alt strong { color: var(--ink); }
.scan-alt a { color: var(--ink); font-weight: 600; }
.done { text-align: center; padding: 48px 28px; }
.done-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 22px 22px 22px 6px; background: var(--mint); color: var(--mint-ink); display: grid; place-items: center; font: 800 30px/1 var(--display); }
.done p { color: var(--muted); margin-top: 8px; }


.foot { background: var(--ink); color: #cfc6d8; padding: 40px 0; font-size: 14.5px; }
.foot-grid { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.foot .logo { color: var(--cream); }
.foot a { color: var(--cream); }
/* Voet van de beginpagina: merk en slogan, menu, en daaronder de gegevens van het bedrijf. */
.foot-cols { display: grid; grid-template-columns: auto 1fr; gap: 22px 40px; align-items: center; }
.foot-brand { display: grid; justify-items: start; gap: 10px; }
.foot-slogan { font: 700 15.5px/1.3 var(--display); color: var(--cream); letter-spacing: -.01em; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.foot-links a { font-weight: 550; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #3a2f47; font-size: 13.5px; }

/* Privacypagina en 404 */
.doc { padding: 56px 0 96px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); }
.doc h2 { font-size: 26px; margin-top: 40px; max-width: none; }
.doc p, .doc li { color: #3a3343; margin-top: 12px; max-width: 44rem; }
.doc ul { list-style: disc; padding-left: 22px; }
.doc .lead { margin-top: 16px; }

@media (max-width: 960px) {
  .links { display: none; }
  .hero-grid, .ai-grid, .scan-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .packs { grid-template-columns: 1fr; max-width: 560px; }
  .about-grid { justify-items: start; }
  .portrait { max-width: 460px; }
  .who-inner { grid-template-columns: 1fr; }
  .peek { justify-self: center; }
  .faq { grid-template-columns: 1fr; }
  /* Tijdlijn onder elkaar, met de lijn links. */
  .timeline { grid-template-columns: 1fr; gap: 18px; }
  .timeline::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .timeline li { padding: 0 0 0 34px; }
  .timeline li::before { top: 3px; }
  /* Hero op telefoon en tablet: kop, dan meteen de chat (die direct in beeld is en afspeelt), dan uitleg en knoppen. */
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; justify-self: start; }
  .hero-copy h1 { order: 2; }
  .hero .visual { order: 3; margin: 30px 0 6px; }
  .hero-copy .sub { order: 4; }
  .hero-copy .ctas { order: 5; }
  .hero-copy .chips { order: 6; }
}
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .hero { padding: 16px 0 64px; }
  .section { padding: 68px 0; }
  .field-row { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .slot-in { margin-left: 2%; }
  .slot-out { margin-right: 2%; }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero .visual { margin-top: 24px; gap: 12px; }
  .hero .post { width: min(300px, 88%); }
  .hero .img { aspect-ratio: 1 / 1; }
  .hero .bubble { font-size: 14px; padding: 10px 16px; }
  .hero .sub { margin: 22px 0 26px; }
  .nav .btn-sm { padding: 9px 13px; font-size: 14px; }
  .logo { font-size: 23px; }
  .who { padding: 44px 0; }
  .gets { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .vgl-sec { padding: 60px 0; }
  /* Smal scherm: de koppen en de witruimte krimpen, zodat "Contentmaat" in zijn kolom past (ook op 375 px). */
  .vgl th, .vgl td { padding: 9px 5px; font-size: 13px; }
  .vgl thead th { font-size: 12px; padding-top: 14px; }
  .vgl thead td { width: 21%; }
  .vgl tbody th { font-size: 12px; padding-left: 0; }
  .vgl thead .ours { border-radius: 14px 14px 0 0; }
  .vgl tbody tr:last-child .ours { border-radius: 0 0 14px 14px; }
  /* Hoe het werkt: de vier stappen als veegrij (de volgende kaart piept erachter vandaan). */
  .steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 82%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .start { margin-top: 36px; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .chat.run *, .typing i, .portrait.in .px-logo, .rotate-char { animation: none !important; }
  .rotate { transition: none; }
  .typing { display: none; }
}