/* ============================================================
   CLOCKIX — De Urenkaart
   Concept: elk uur wordt een stempel op een kaart. Strikt
   monochroom wit/zwart, exact het palet en lettertype van het
   Clockix-product zelf (dashboard + account), geen kleur op de
   achtergrond, één spaarzame accentkleur voor uitzonderingen.
   Inter voor alles — stem en werk. Bewegingsregels: nooit
   scale(0), custom easing, korte UI-duraties, alleen
   transform/opacity animeren.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300..900;1,400..700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Wit/zwart — zelfde palet als het product (dashboard, account) */
  --papier:     #ffffff;
  --papier-2:   #fafafa;
  --papier-3:   #f4f4f4;
  --inkt:       #0a0a0a;
  --inkt-2:     #4a4a4a;
  --inkt-3:     #9a9a9a;
  --lijn:       rgba(10,10,10,.08);
  --lijn-2:     rgba(10,10,10,.14);
  --nacht:      #0a0a0a;
  --nacht-2:    #161616;
  --nacht-lijn: rgba(255,255,255,.1);
  --nacht-inkt: #f5f5f5;
  --nacht-inkt-2: #9a9a9a;

  /* Accent — overgenomen uit het product: de Pro-badge in de zijbalk van
     het dashboard. Zelfde hoek, zelfde twee kleuren. */
  --accent:      #7c3aed;
  --accent-2:    #2563eb;
  --accent-verloop: linear-gradient(135deg, #7c3aed, #2563eb);

  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Emil Kowalski — sterkere custom easing i.p.v. de standaard CSS-curves */
  --uit:        cubic-bezier(.23,1,.32,1);   /* ease-out: binnenkomst, interactie */
  --heen-terug: cubic-bezier(.77,0,.175,1);  /* ease-in-out: beweging op het scherm */
  --stempel-ease: cubic-bezier(.2,1.35,.4,1); /* lichte overshoot: alleen bij "neerslaan"-momenten */

  /* Zijmarge van de volle-breedte-opmaak: schaalt mee met het venster */
  --rand: clamp(20px, 3.5vw, 76px);
  /* Bovengrens voor de inhoudsraster, zodat kolommen op zeer brede schermen
     niet uit elkaar vallen. Ruim genoeg om vol te blijven ogen. */
  --inhoud: 1720px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 20px;

  color-scheme: light;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.tab-cijfers { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ══════════════════════════════════════════
   LICHT / DONKER RITME
   Een donkere sectie klapt de tokens om; alle onderdelen erin volgen
   automatisch. Oppervlakken die juist wit moeten blijven (kaarten, het
   browservenster, het kasboek) klappen ze weer terug naar licht.
═══════════════════════════════════════════ */
/* Een donkere sectie begint licht en dipt naar zwart zodra hij in beeld
   komt — de omslag is het effect, niet de eindstand. */
[data-donker] {
  background-color: #ffffff; color: var(--inkt);
  transition: background-color 1.1s var(--uit);
}
[data-donker].donker-aan {
  --papier:   #0a0a0a;
  --papier-2: #171717;
  --papier-3: #1f1f1f;
  --inkt:     #f5f5f5;
  --inkt-2:   #a8a8a8;
  --inkt-3:   #6e6e6e;
  --lijn:     rgba(255,255,255,.10);
  --lijn-2:   rgba(255,255,255,.18);
  background-color: #0a0a0a;
}

/* De tekst kleurt mee, maar met vertraging: eerst wordt het vlak donker,
   daarna slaat de inkt om. Gelijktijdig zou halverwege grijs op grijs geven. */
[data-donker] h2, [data-donker] h3, [data-donker] p,
[data-donker] .kicker, [data-donker] .kicker .gaatje,
[data-donker] .sectoren-titel, [data-donker] .stempel-titel, [data-donker] .stempel-sub,
[data-donker] .week-totaal, [data-donker] .week-totaal-cijfer, [data-donker] .week-totaal-sub {
  transition: color .4s var(--uit) .3s, border-color .4s var(--uit) .3s;
}

@media (prefers-reduced-motion: reduce) {
  [data-donker] { transition: none; }
}

[data-donker] [data-licht],
[data-donker] .sector-kaart,
[data-donker] .venster,
[data-donker] .boek,
[data-donker] .urenkaart,
[data-donker] .illustratie-kaart,
[data-donker] .prijs-raster,
[data-donker] .vh-kaart {
  --papier:   #ffffff;
  --papier-2: #fafafa;
  --papier-3: #f4f4f4;
  --inkt:     #0a0a0a;
  --inkt-2:   #4a4a4a;
  --inkt-3:   #9a9a9a;
  --lijn:     rgba(10,10,10,.08);
  --lijn-2:   rgba(10,10,10,.14);
  color: var(--inkt);
}

[data-donker] .plek-notitie {
  --papier:   #ffffff;
  --papier-2: #fafafa;
  --papier-3: #f4f4f4;
  --inkt:     #0a0a0a;
  --inkt-2:   #4a4a4a;
  --inkt-3:   #9a9a9a;
  --lijn:     rgba(10,10,10,.08);
  --lijn-2:   rgba(10,10,10,.14);
  color: var(--inkt);
}

/* Zachte overgang tussen twee lichte secties, zodat het ritme
   niet alleen uit wit-zwart bestaat. */
[data-tint] { background: var(--papier-2); }

/* ══════════════════════════════════════════
   SECTIEACHTERGRONDEN — elk vlak krijgt een eigen tijdmotief.
   Op wit vermenigvuldigt het patroon (wit valt weg, lijnen tekenen).
   Op zwart wordt het omgekeerd en opgelicht, zodat het zwart niet
   wordt afgedekt. Het patroon komt daardoor pas op als de sectie dipt.
═══════════════════════════════════════════ */
[data-vlak] { position: relative; isolation: isolate; }
[data-vlak]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--vlak) center / cover no-repeat;
  opacity: .5; mix-blend-mode: multiply;
}
[data-vlak][data-donker]::before {
  filter: invert(1); mix-blend-mode: screen; opacity: .42;
}

.sectoren      { --vlak: url('../assets/images/achtergrond-wijzerplaat.webp'); }
.verhaal-plak  { --vlak: url('../assets/images/achtergrond-tijdlijn.webp'); }
.week          { --vlak: url('../assets/images/achtergrond-stroming.webp'); }
.beveiliging   { --vlak: url('../assets/images/achtergrond-wijzerplaat.webp'); }
.geen-install  { --vlak: url('../assets/images/achtergrond-tijdlijn.webp'); }
.prijzen       { --vlak: url('../assets/images/achtergrond-stroming.webp'); }
.cta           { --vlak: url('../assets/images/achtergrond-radar.webp'); }

/* Twee secties delen een motief; spiegelen en inzoomen houdt het herhaalde
   patroon uit het oog. Inzoomen gebeurt met background-size, niet met een
   transform: een geschaalde transform loopt buiten de sectie en legt dan een
   halfdoorzichtig laagje over het vlak ernaast. Spiegelen mag wel — dat
   verandert de box niet. */
.beveiliging::before { transform: scaleX(-1); background-size: 150% auto; }
.prijzen::before     { transform: scaleY(-1); }
.geen-install::before{ background-size: 165% auto; }

/* De tijdlijn tekent een stuk zwaarder dan de andere drie; die krijgt
   minder sterkte zodat alle vlakken even luid zijn. */
.verhaal-plak::before { opacity: .3; }
/* Even zwaar wegen als [data-vlak][data-donker], anders wint die regel. */
.geen-install[data-vlak]::before { opacity: .26; }

.container { width: 100%; max-width: var(--inhoud); margin: 0 auto; padding: 0 var(--rand); }

a { color: inherit; text-decoration: none; }
svg { display: block; }
img, video { max-width: 100%; display: block; }

::selection { background: var(--inkt); color: var(--papier); }

/* ══════════════════════════════════════════
   TYPOGRAFIE
═══════════════════════════════════════════ */
h1, h2, h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; color: var(--inkt); }

h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; text-wrap: balance; }
/* Koppen met een handmatige <br> mogen niet nog eens herverdeeld worden —
   balance maakt daar een losse laatste regel van. */
h2:has(br) { text-wrap: initial; }
h2 em, h1 em { font-style: normal; font-weight: 500; color: var(--inkt-2); }

p { max-width: 62ch; color: var(--inkt-2); }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--inkt-3);
  margin-bottom: 18px;
}
.kicker .gaatje { width: 6px; height: 6px; border-radius: 50%; border: 1.4px solid var(--inkt-3); flex-shrink: 0; }
[data-donker] .kicker { color: var(--inkt-2); }
[data-donker] .kicker .gaatje { border-color: var(--inkt-2); }

.label-lijn { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.label-lijn::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }

/* ══════════════════════════════════════════
   KNOPPEN — druk voelbaar, nooit vanuit scale(0)
═══════════════════════════════════════════ */
.knop {
  /* Verplaatsing en indruk apart, zodat het meeleunen naar de cursor en
     de klikreactie elkaar niet overschrijven. */
  --kx: 0px; --ky: 0px; --kdruk: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 13px 24px; border-radius: 999px; border: 1.4px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transform: translate(var(--kx), var(--ky)) scale(var(--kdruk));
  transition: transform 260ms var(--uit), background 180ms var(--uit), border-color 180ms var(--uit), color 180ms var(--uit), opacity 180ms var(--uit);
}
.knop:active { --kdruk: .965; }
.knop.inkt   { background: var(--inkt); color: var(--papier); position: relative; isolation: isolate; }

/* Bij hover komt het verloop van de Pro-badge uit het dashboard tevoorschijn:
   zelfde hoek, zelfde kleuren, met dezelfde glansveeg eroverheen.

   De eigen achtergrondkleur van de knop blijft zwart; het verloop zit
   uitsluitend in deze laag. Zou de knop zelf ook paars worden, dan zie je
   die kale kleur zodra het verloop wegvaagt. Even lang als de tekstkleur,
   anders lopen ze uit de pas.

   De negatieve inzet van 1.4px is de randbreedte: een absoluut kind begint
   normaal binnen de rand, waardoor er een kale ring omheen bleef staan.
   Daarom ook geen overflow: hidden meer — dat knipte de laag daar weer af.
   De lagen zijn zelf pilvormig, dus de glans blijft netjes binnen de vorm. */
.knop.inkt::before {
  content: ''; position: absolute; inset: -1.4px; z-index: -2; border-radius: inherit;
  background: var(--accent-verloop);
  opacity: 0; transition: opacity 180ms var(--uit);
}
.knop.inkt::after {
  content: ''; position: absolute; inset: -1.4px; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 0 0 / 250% 100% no-repeat;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .knop.inkt:hover { color: #fff; --kdruk: 1.03; }
  .knop.inkt:hover::before { opacity: 1; }
  .knop.inkt:hover::after  { opacity: 1; animation: glansLoop 3s ease-in-out infinite; }
}
@keyframes glansLoop {
  0%        { background-position: -160% 0; }
  55%, 100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .knop.inkt:hover::after { animation: none; opacity: 0; }
}
.knop.lijn   { background: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop.lijn:hover   { background: var(--papier-2); }
.knop.klein  { padding: 9px 16px; font-size: 13px; }
/* Pas omklappen zodra de sectie ook echt donker is — anders staat er
   even een witte knop op een wit vlak. */
.donker-aan .knop.lijn { color: var(--nacht-inkt); border-color: var(--nacht-lijn); }
.donker-aan .knop.lijn:hover { background: rgba(255,255,255,.06); }
.donker-aan .knop.inkt { background: var(--nacht-inkt); color: var(--nacht); }
.donker-aan .knop { transition: transform 260ms var(--uit), background .4s var(--uit) .3s, color .4s var(--uit) .3s, border-color .4s var(--uit) .3s; }
/* Op een donker vlak is de knop wit met donkere tekst; bij hover komt het
   verloop eronder vandaan, dus moet de tekst wit worden. En zonder de
   vertraging van de sectie-omslag — hover hoort meteen te reageren. */
@media (hover: hover) and (pointer: fine) {
  .donker-aan .knop.inkt:hover {
    color: #fff;
    transition: transform 260ms var(--uit), color 180ms var(--uit);
  }
}

@media (hover: hover) and (pointer: fine) {
  .knop svg { transition: transform 200ms var(--uit); }
  .knop:hover svg { transform: translateX(3px); }
}

/* ══════════════════════════════════════════
   ZICHTBAAR-BIJ-SCROLL
═══════════════════════════════════════════ */
/* Alles komt scherp in beeld in plaats van alleen op te schuiven — dat
   is het verschil tussen "iets fadet" en "iets komt aan". */
.op {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(7px);
  transition: opacity .7s var(--uit), transform .7s var(--uit), filter .7s var(--uit);
}
.op.zichtbaar { opacity: 1; transform: translateY(0) scale(1); filter: none; }
.op-vertraag-1 { transition-delay: .08s; }
.op-vertraag-2 { transition-delay: .16s; }
.op-vertraag-3 { transition-delay: .24s; }

/* Een rij die zichzelf uitdeelt: de kinderen komen één voor één op.
   Zo hoeft er geen vertraag-klasse per element in de HTML. De rij zelf
   beweegt niet mee — anders fade je twee lagen over elkaar. */
.op.op-reeks { opacity: 1; transform: none; filter: none; }
.op-reeks > * { opacity: 0; transform: translateY(14px); filter: blur(5px); transition: opacity .6s var(--uit), transform .6s var(--uit), filter .6s var(--uit); }
.op-reeks.zichtbaar > * { opacity: 1; transform: none; filter: none; }
.op-reeks.zichtbaar > *:nth-child(1) { transition-delay: .04s; }
.op-reeks.zichtbaar > *:nth-child(2) { transition-delay: .12s; }
.op-reeks.zichtbaar > *:nth-child(3) { transition-delay: .20s; }
.op-reeks.zichtbaar > *:nth-child(4) { transition-delay: .28s; }
.op-reeks.zichtbaar > *:nth-child(5) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .op { transition: opacity .3s ease; transform: none !important; filter: none !important; }
  .op-reeks > * { transition: opacity .3s ease; transform: none !important; filter: none !important; }
}

/* ══════════════════════════════════════════
   NAVIGATIE
═══════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 20px 0;
  transition: padding 260ms var(--uit), background 260ms var(--uit), border-color 260ms var(--uit), box-shadow 260ms var(--uit);
}
#nav.gekrompen {
  padding: 12px 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--lijn);
}

/* Boven een donkere sectie klapt de balk mee om. De tokens doen het werk,
   dus logo, links en knoppen volgen zonder eigen regels. */
#nav.op-donker {
  --papier: #0a0a0a; --papier-2: #171717;
  --inkt: #f5f5f5; --inkt-2: #a8a8a8; --inkt-3: #6e6e6e;
  --lijn: rgba(255,255,255,.10); --lijn-2: rgba(255,255,255,.22);
  color: var(--inkt);
}
#nav.op-donker.gekrompen { background: rgba(10,10,10,.78); }

/* Leesvoortgang: haarlijn onderaan de balk die met de pagina meeloopt. */
#nav-voortgang {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--inkt); transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: opacity 300ms var(--uit);
}
#nav.gekrompen #nav-voortgang { opacity: .55; }
#nav .nav-logo-tekst, #nav .nav-links a, #nav .knop {
  transition: color 260ms var(--uit), background 260ms var(--uit), border-color 260ms var(--uit);
}

.nav-binnenste {
  width: 100%; max-width: var(--inhoud); margin: 0 auto; padding: 0 var(--rand);
  display: flex; align-items: center; gap: 36px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Het merkteken zelf, niet in een tegel: zo staat het zwart op wit en
   klapt het via de tokens vanzelf naar wit op de donkere vlakken. */
.nav-logo-merk {
  width: 30px; height: 30px; color: var(--inkt); flex-shrink: 0;
  transition: color 260ms var(--uit);
}
.nav-logo-tekst { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0 auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--inkt-2);
  position: relative; padding: 4px 0; transition: color 160ms var(--uit);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1.4px;
  background: var(--inkt); transition: right 240ms var(--uit);
}
.nav-links a:hover { color: var(--inkt); }
.nav-links a:hover::after { right: 0; }
/* De link van de sectie waar je bent blijft onderstreept. */
.nav-links a.actief { color: var(--inkt); }
.nav-links a.actief::after { right: 0; }

.nav-acties { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-mobiel-knop { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--inkt); }

.mobiel-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); z-index: 600;
  background: var(--papier); border-left: 1px solid var(--lijn);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform 340ms var(--uit);
  box-shadow: -30px 0 60px rgba(10,10,10,.12);
}
.mobiel-menu.open { transform: translateX(0); }
.mobiel-menu a { padding: 13px 4px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--lijn); }
/* De regels schuiven na het paneel naar binnen. */
.mobiel-menu a { opacity: 0; transform: translateX(16px); transition: opacity .35s var(--uit), transform .35s var(--uit); }
.mobiel-menu.open a { opacity: 1; transform: none; }
.mobiel-menu.open a:nth-child(1) { transition-delay: .12s; }
.mobiel-menu.open a:nth-child(2) { transition-delay: .17s; }
.mobiel-menu.open a:nth-child(3) { transition-delay: .22s; }
.mobiel-menu.open a:nth-child(4) { transition-delay: .27s; }
.mobiel-menu.open a:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .mobiel-menu a { opacity: 1; transform: none; }
}
.mobiel-menu-cta { margin-top: 14px; text-align: center; background: var(--inkt); color: var(--papier); border-radius: 999px; border-bottom: none !important; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-mobiel-knop { display: block; }
  .nav-acties .knop.lijn { display: none; }
}

/* ══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position: relative; z-index: 1;
  padding: 140px var(--rand) 90px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(40px, 5vw, 88px); align-items: center;
  width: 100%; max-width: var(--inhoud); margin: 0 auto;
  overflow: hidden;
}
/* Achtergrond: radarringen en hoogtelijnen op een fijn raster — verwijst naar
   de locatiecontrole. Ligt over de volle hero, uitgevaagd naar de randen zodat
   de tekst links op schoon wit staat. */
.hero-ambient {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 68% 48%, black 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 82% at 68% 48%, black 18%, transparent 76%);
}
.hero-ambient::before {
  content: ''; position: absolute; inset: -6%;
  background: url('../assets/images/achtergrond-radar.webp') center / cover no-repeat;
  opacity: .85;
  animation: radar-drift 64s ease-in-out infinite alternate;
}
@keyframes radar-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.4%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient::before { animation: none; }
}

.hero-kicker { margin-bottom: 22px; }
.hero-titel {
  font-family: var(--serif); font-weight: 800; letter-spacing: -.032em;
  font-size: clamp(46px, 5.6vw, 88px); line-height: .96; color: var(--inkt);
  margin-bottom: 28px;
}
/* De regel maskeert de opkomende tekst, maar met een regelhoogte onder 1 vallen
   de staarten van de g en p buiten die maskerbox. Extra ruimte onderaan, weer
   weggehaald met een negatieve marge, zodat de regels net zo strak blijven staan. */
.hero-titel .regel { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.hero-titel .regel > span { display: inline-block; will-change: transform; }
.hero-titel .dun { font-weight: 800; color: #8e8e8e; }

.hero-sub { font-size: 18.5px; line-height: 1.6; color: var(--inkt-2); margin-bottom: 36px; max-width: 44ch; }
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-voetnoot { font-family: var(--mono); font-size: 12px; color: var(--inkt-3); letter-spacing: .02em; }

/* ── Illustratie-kaart: gegenereerde monochrome scenes, overal herbruikt ── */
.illustratie-kaart {
  border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--lijn-2);
  box-shadow: 0 30px 60px -26px rgba(10,10,10,.22); background: #ffffff;
}
.illustratie-kaart img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero-visual: illustratie + de urenkaart als klein, afgestempeld inzetje ── */
.hero-visueel { position: relative; padding: 8px 0 26px; }
.hero-illustratie { aspect-ratio: 1 / 1; width: 100%; rotate: .6deg; }
.hero-illustratie.op { transition: opacity .8s var(--uit), transform .8s var(--uit); }

.uk-wrap { position: absolute; left: -19%; bottom: -30px; width: 224px; z-index: 2; }
.urenkaart {
  position: relative; width: 100%;
  background: #ffffff; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  box-shadow: 0 2px 0 rgba(10,10,10,.04), 0 30px 60px -24px rgba(10,10,10,.3);
  padding: 20px 18px 17px;
  transform: rotate(-2.6deg);
}
.urenkaart .uk-naam { font-size: 16px; margin-bottom: 12px; }
.urenkaart .uk-voet-waarde { font-size: 19px; }
/* geponste rand bovenaan */
.uk-perforatie {
  position: absolute; top: -1px; left: 14px; right: 14px; height: 12px;
  background-image: radial-gradient(circle 4.5px at 12px 0, transparent 4.5px, #ffffff 4.6px);
  background-size: 24px 12px; background-repeat: repeat-x;
}
.uk-kop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; padding-top: 8px; }
.uk-kop-titel { font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--inkt-3); }
.uk-kop-week { font-family: var(--mono); font-size: 10.5px; color: var(--inkt-3); }
.uk-naam { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 16px; }

.uk-rijen { border-top: 1px solid var(--lijn); }
.uk-rij {
  display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--lijn);
  opacity: 0; transform: translateY(6px);
}
.uk-rij.zichtbaar { opacity: 1; transform: translateY(0); transition: opacity .5s var(--uit), transform .5s var(--uit); }
.uk-rij-dag { font-family: var(--mono); font-size: 11px; color: var(--inkt-3); }
.uk-rij-punt { width: 6px; height: 6px; border-radius: 50%; background: var(--inkt); justify-self: start; }
.uk-rij-plaats { font-size: 13px; font-weight: 500; color: var(--inkt-2); }
.uk-rij-uur { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--inkt); }

.uk-voet { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--lijn); }
.uk-voet-label { font-size: 11px; color: var(--inkt-3); }
.uk-voet-waarde { font-family: var(--mono); font-size: 22px; font-weight: 700; }

/* ── De stempel: valt neer, met een kleine overshoot ── */
.uk-stempel {
  position: absolute; top: -10%; right: -16%; width: 108px; height: 108px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--inkt); border-radius: 50%;
  color: var(--inkt); background: rgba(255,255,255,.4);
  transform: translateY(-110px) rotate(-32deg) scale(1.3);
  opacity: 0;
  mix-blend-mode: multiply;
}
.uk-stempel.geland {
  transition: transform .62s var(--stempel-ease), opacity .3s var(--uit);
  transform: translateY(0) rotate(-11deg) scale(1);
  opacity: .92;
}
.uk-stempel-tekst {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-align: center; line-height: 1.3;
}
.uk-stempel-ring { position: absolute; inset: 9px; border: 1px solid var(--inkt); border-radius: 50%; opacity: .55; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 132px; text-align: left; }
  .hero-visueel { margin-top: 26px; padding-bottom: 60px; }
  .uk-wrap { width: 210px; left: 4%; bottom: -40px; }
}

/* ══════════════════════════════════════════
   DAGREGEL — vandaag, live, als een strook aan de rand van het papier
═══════════════════════════════════════════ */
.dagregel {
  position: relative; z-index: 1; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  background: var(--papier-2);
}
.dagregel-binnen { width: 100%; max-width: var(--inhoud); margin: 0 auto; padding: 13px var(--rand); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dagregel-label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--inkt-2); flex-shrink: 0; }
.dagregel-label b { color: var(--inkt); font-weight: 600; }
.status-stip { width: 6px; height: 6px; border-radius: 50%; background: #4a7a4a; display: inline-block; animation: puls 2s ease-in-out infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.dagregel-spoor { position: relative; flex: 1; min-width: 160px; height: 3px; background: var(--lijn); border-radius: 2px; }
.dagregel-vul { position: absolute; inset: 0; transform-origin: left; background: var(--inkt-3); border-radius: 2px; transform: scaleX(0); transition: transform 1s var(--heen-terug); }
.dagregel-nu { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--inkt); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--papier-2); }

/* ══════════════════════════════════════════
   SECTOREN — horizontale, oneindig schuivende strook
   met de vakgebieden waarvoor Clockix wordt gebruikt
═══════════════════════════════════════════ */
.sectoren { position: relative; z-index: 1; padding: 84px 0 90px; border-bottom: 1px solid var(--lijn); overflow: hidden; }
.sectoren-kop { text-align: center; max-width: 560px; margin: 0 auto 46px; }
.sectoren-kop .kicker { justify-content: center; }
.sectoren-titel { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 12px; }
.sectoren-kop p { font-size: 15px; margin: 0 auto; }

.sectoren-sleep {
  display: flex; width: 100%;
  /* Het masker knipt op de rand van dit kader. Zonder speling verdwijnt bij
     hover de opgetilde bovenkant van een kaart en de slagschaduw eronder.
     Ruimte erbij, met een negatieve marge weer uit de opmaak gehaald. */
  padding: 16px 0 30px; margin: -16px 0 -30px;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.sectoren-track {
  display: flex; gap: 18px; flex-shrink: 0; padding: 0 9px; align-items: stretch;
  animation: sectoren-schuif 58s linear infinite;
}
.sectoren-sleep:hover .sectoren-track { animation-play-state: paused; }

@keyframes sectoren-schuif { to { transform: translateX(-100%); } }

.sector-kaart {
  width: 196px; flex-shrink: 0; overflow: hidden; text-align: center;
  border: 1px solid var(--lijn-2); border-radius: var(--r-l); background: var(--papier);
  padding-bottom: 15px;
  transition: border-color 180ms var(--uit), transform 180ms var(--uit), box-shadow 180ms var(--uit);
}
.sector-kaart:hover { border-color: var(--inkt); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(10,10,10,.35); }
.sector-beeld { aspect-ratio: 1 / 1; background: var(--papier-2); overflow: hidden; }
.sector-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms var(--uit); }
@media (hover: hover) and (pointer: fine) {
  .sector-kaart:hover .sector-beeld img { transform: scale(1.05); }
}
.sector-naam { display: block; font-size: 13.5px; font-weight: 600; color: var(--inkt); padding: 13px 12px 0; }

@media (max-width: 640px) {
  .sector-kaart { width: 156px; padding-bottom: 12px; }
  .sector-naam { font-size: 12.5px; padding-top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sectoren-track { animation: none; }
  .sectoren-sleep { overflow-x: auto; }
}

/* ══════════════════════════════════════════
   SCROLLVERHAAL — de kaart vult zich, stap voor stap
═══════════════════════════════════════════ */
.verhaal { position: relative; z-index: 1; height: 460vh; }
.verhaal-plak { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.verhaal-binnen {
  margin: 0 auto; padding: 0 var(--rand); width: 100%; max-width: 1400px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(60px, 6vw, 110px); align-items: center;
}
.verhaal-intro h2 { margin-bottom: 30px; }
.verhaal-stappen { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.verhaal-stap {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline;
  padding: 11px 0 11px 2px; opacity: .38; transition: opacity 340ms var(--uit);
}
.verhaal-stap::before {
  content: ''; position: absolute; left: -18px; top: 0; bottom: 0; width: 2px; background: var(--lijn);
}
.verhaal-stap .vulling {
  position: absolute; left: -18px; top: 0; width: 2px; background: var(--inkt); height: 0%;
  transition: height 200ms linear;
}
.verhaal-stap.actief { opacity: 1; }
.verhaal-stap-nr { font-family: var(--mono); font-size: 12px; color: var(--inkt-3); }
.verhaal-stap.actief .verhaal-stap-nr { color: var(--inkt); }
.verhaal-stap-tekst { font-size: 15.5px; font-weight: 500; }

.verhaal-toneel { position: relative; height: 460px; }
.vh-laag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; will-change: opacity, transform;
}
.vh-kaart {
  width: 100%; max-width: 380px; background: #ffffff; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  box-shadow: 0 24px 50px -22px rgba(10,10,10,.22);
  padding: 26px 26px 22px;
}
.vh-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--inkt-3); margin-bottom: 14px; }
.vh-rij { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--lijn); font-size: 13.5px; }
.vh-rij:last-child { border-bottom: none; }
.vh-rij .l { color: var(--inkt-3); }
.vh-rij .w { font-family: var(--mono); font-weight: 600; }

.vh-inklok-tijd { font-family: var(--mono); font-size: 46px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; }
.vh-inklok-datum { font-size: 12.5px; color: var(--inkt-3); margin-bottom: 20px; }
.vh-inklok-knop {
  display: flex; align-items: center; gap: 9px; width: 100%; justify-content: center;
  background: var(--inkt); color: var(--papier); border: none; border-radius: 10px;
  padding: 13px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: default;
  transition: transform 160ms var(--uit);
}
.vh-inklok-naam { margin-top: 14px; font-size: 12px; color: var(--inkt-3); text-align: center; }

.vh-gps-vlak { position: relative; height: 176px; border-radius: 8px; background: var(--papier-2); overflow: hidden; margin-bottom: 14px; }
.vh-gps-weg { position: absolute; background: var(--lijn-2); }
.vh-gps-cirkel { position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%); border: 1.5px dashed var(--inkt-3); border-radius: 50%; }
.vh-gps-pin { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -100%); opacity: 0; }
.vh-gps-voet { display: flex; justify-content: space-between; font-size: 12.5px; }
.vh-gps-voet .p { color: var(--inkt-2); font-weight: 500; }
.vh-gps-voet .precisie { font-family: var(--mono); color: var(--inkt-3); }

.vh-foto-kader { position: relative; height: 176px; border-radius: 8px; background: var(--papier-2); border: 1.5px dashed var(--lijn-2); margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.vh-foto-flits { position: absolute; inset: 0; background: var(--inkt); opacity: 0; }
.vh-foto-hoek { position: absolute; width: 16px; height: 16px; border-color: var(--inkt-3); }
.vh-foto-hoek.lb { left: 8px; top: 8px; border-top: 2px solid; border-left: 2px solid; }
.vh-foto-hoek.rb { right: 8px; top: 8px; border-top: 2px solid; border-right: 2px solid; }
.vh-foto-hoek.lo { left: 8px; bottom: 8px; border-bottom: 2px solid; border-left: 2px solid; }
.vh-foto-hoek.ro { right: 8px; bottom: 8px; border-bottom: 2px solid; border-right: 2px solid; }
.vh-foto-voet { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--inkt-2); }
.vh-check { width: 17px; height: 17px; border-radius: 50%; background: var(--inkt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vh-check svg path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .25s var(--uit); }

.vh-uren-label { font-size: 12px; color: var(--inkt-3); margin-bottom: 4px; }
.vh-uren-tijd { font-family: var(--mono); font-size: 42px; font-weight: 700; margin-bottom: 16px; }

.vh-mgr-rij { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px dashed var(--lijn); }
.vh-mgr-rij:last-child { border-bottom: none; }
.vh-mgr-rij.nieuw { opacity: 0; transform: translateY(14px); }
.vh-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--papier-2); border: 1px solid var(--lijn-2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.vh-mgr-naam { font-size: 13px; font-weight: 600; }
.vh-mgr-sub { font-size: 11.5px; color: var(--inkt-3); }
.vh-mgr-status { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--inkt-3); display: flex; align-items: center; gap: 6px; }

.vh-loon-totaal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--lijn); font-family: var(--serif); font-size: 22px; font-weight: 700; }
.vh-loon-stempel {
  position: absolute; top: -14px; right: -14px; border: 2.5px solid var(--inkt); border-radius: 50%;
  width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--inkt); transform: rotate(9deg) scale(1.6); opacity: 0; mix-blend-mode: multiply; text-align: center;
}

@media (max-width: 900px) {
  .verhaal { height: auto; }
  .verhaal-plak { position: static; height: auto; padding: 90px 0; }
  .verhaal-binnen { grid-template-columns: 1fr; gap: 40px; }
  .verhaal-toneel { height: 420px; }
  .vh-laag { position: static; opacity: 1 !important; transform: none !important; display: none; }
  .vh-laag[data-fase="0"] { display: flex; }
}

/* ══════════════════════════════════════════
   WEEKUREN — het opengeslagen kasboek
═══════════════════════════════════════════ */
.week { position: relative; z-index: 1; padding: 130px 0; }
.week-binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(48px, 5vw, 90px); align-items: center; max-width: 1400px; margin: 0 auto; }
.week h2 { margin-bottom: 16px; }
.week p { margin-bottom: 26px; }
.week-totaal { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.week-totaal-cijfer { font-family: var(--mono); font-size: 44px; font-weight: 700; }
.week-totaal-sub { font-size: 12.5px; color: var(--inkt-3); line-height: 1.4; }

.boek {
  background: #ffffff; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  box-shadow: 0 30px 60px -26px rgba(10,10,10,.2);
  padding: 26px 28px 24px; transform: rotate(.7deg);
}
.boek-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.boek-titel { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.boek-meta { font-family: var(--mono); font-size: 11px; color: var(--inkt-3); }
.boek-staven { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; border-bottom: 1px solid var(--lijn); padding-bottom: 12px; margin-bottom: 10px; }
.boek-kolom { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 8px; }
.boek-waarde { font-family: var(--mono); font-size: 10.5px; color: var(--inkt-3); opacity: 0; transition: opacity 220ms var(--uit); }
.boek-kolom.gegroeid .boek-waarde { opacity: 1; }
.boek-staaf { width: 100%; max-width: 22px; background: var(--inkt); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; }
.boek-staaf.licht { background: var(--lijn-2); }
.boek-dag { font-family: var(--mono); font-size: 10.5px; color: var(--inkt-3); }

@media (max-width: 900px) {
  .week-binnen { grid-template-columns: 1fr; gap: 40px; }
}

/* ══════════════════════════════════════════
   BEVEILIGING — drie stempels; werkt licht én donker via de tokens
═══════════════════════════════════════════ */
.beveiliging { position: relative; z-index: 1; padding: 130px 0; }
.beveiliging-kop { max-width: 640px; margin: 0 auto 70px; text-align: center; }
.beveiliging-kop .label-lijn { justify-content: center; }
.beveiliging-kop .label-lijn::after { display: none; }
.beveiliging-kop p { margin: 18px auto 0; color: var(--inkt-2); text-align: center; }

.beveiliging-illustratie { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 0 auto 64px; rotate: -1deg; }

.stempel-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 56px); max-width: 1180px; margin: 0 auto; }
.stempel-kaart { text-align: center; padding: 8px; }
.stempel-cirkel {
  width: 128px; height: 128px; margin: 0 auto 22px; border-radius: 50%;
  border: 2.5px solid var(--inkt); display: flex; align-items: center; justify-content: center;
  position: relative; opacity: 0; transform: rotate(-18deg) scale(1.5) translateY(-24px);
}
.stempel-cirkel.geland { transition: transform .6s var(--stempel-ease), opacity .3s var(--uit); transform: rotate(-6deg) scale(1); opacity: 1; }
/* De tekst komt na de stempel, alsof hij eronder wordt bijgeschreven. */
.stempel-kaart .stempel-titel, .stempel-kaart .stempel-sub {
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--uit), transform .5s var(--uit);
}
.stempel-kaart:has(.geland) .stempel-titel { opacity: 1; transform: none; transition-delay: .18s; }
.stempel-kaart:has(.geland) .stempel-sub   { opacity: 1; transform: none; transition-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .stempel-kaart .stempel-titel, .stempel-kaart .stempel-sub { opacity: 1; transform: none; }
}
.stempel-nr { position: absolute; top: -9px; right: -4px; font-family: var(--mono); font-size: 10px; background: var(--papier); border: 1.5px solid var(--inkt); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.stempel-titel { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.stempel-sub { font-size: 13.5px; color: var(--inkt-2); line-height: 1.55; }

@media (max-width: 760px) {
  .stempel-rij { grid-template-columns: 1fr; gap: 40px; }
}

/* ══════════════════════════════════════════
   GEEN INSTALLATIE — browservenster
═══════════════════════════════════════════ */
.geen-install { position: relative; z-index: 1; padding: 130px 0; }
.geen-install .kop { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.geen-install .kop .label-lijn { justify-content: center; }
.geen-install .kop .label-lijn::after { display: none; }
.geen-install .kop p { margin: 18px auto 0; text-align: center; }

.geen-install-visueel { position: relative; max-width: 1500px; margin: 0 auto; }
.geen-install-illustratie { position: absolute; width: 172px; aspect-ratio: 1 / 1; top: -62px; right: -58px; z-index: 2; rotate: 3deg; }

.venster { max-width: 1500px; margin: 0 auto; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--lijn-2); box-shadow: 0 40px 80px -34px rgba(10,10,10,.22); background: #ffffff; }
.venster-balk { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--lijn); }
.venster-bollen { display: flex; gap: 6px; }
.venster-bollen i { width: 9px; height: 9px; border-radius: 50%; background: var(--lijn-2); display: block; }
.venster-url { font-family: var(--mono); font-size: 11.5px; color: var(--inkt-3); background: var(--papier-2); border-radius: 6px; padding: 4px 12px; margin: 0 auto; }
.venster-inhoud { display: grid; grid-template-columns: 168px 1fr; min-height: 300px; }
.venster-zij { border-right: 1px solid var(--lijn); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.vz-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: var(--inkt-3); }
.vz-item.actief { background: var(--papier-2); color: var(--inkt); font-weight: 600; }
.vz-punt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.venster-hoofd { padding: 22px 24px; }
.vh-statrij { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
.vh-stat { border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 14px; }
.vh-stat span { display: block; font-size: 10.5px; color: var(--inkt-3); margin-bottom: 5px; }
.vh-stat b { font-family: var(--mono); font-size: 18px; }
.vh-tabel-kop, .vh-tabel-rij { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 10px; padding: 9px 0; align-items: center; }
.vh-tabel-kop { font-size: 10.5px; color: var(--inkt-3); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--lijn); padding-bottom: 8px; }
.vh-tabel-rij { border-bottom: 1px dashed var(--lijn); font-size: 12.5px; }
.vh-mw { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.vh-av { width: 22px; height: 22px; border-radius: 50%; background: var(--papier-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; font-weight: 700; font-style: normal; }
.vh-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--inkt-2); }
.vh-status i { width: 5px; height: 5px; border-radius: 50%; background: #4a7a4a; }
.vh-status.pauze i { background: var(--inkt-3); }

@media (max-width: 720px) {
  .venster-inhoud { grid-template-columns: 1fr; }
  .venster-zij { display: none; }
  .geen-install-illustratie { display: none; }
}

/* ══════════════════════════════════════════
   PRIJZEN — regels op een kasboekpagina
═══════════════════════════════════════════ */
.prijzen { position: relative; z-index: 1; padding: 130px 0; }
.prijzen-kop { max-width: 1000px; margin: 0 auto 56px; text-align: center; }
.prijzen-kop .label-lijn { justify-content: center; }
.prijzen-kop .label-lijn::after { display: none; }
.prijzen-kop p { margin: 18px auto 0; text-align: center; }

.prijs-raster { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--lijn-2); border-radius: var(--r-m); overflow: hidden; background: #ffffff; }
.prijs-kaart {
  padding: 30px 24px; border-right: 1px solid var(--lijn); display: flex; flex-direction: column;
  position: relative; transition: transform 220ms var(--uit), box-shadow 220ms var(--uit), background 220ms var(--uit);
}
@media (hover: hover) and (pointer: fine) {
  .prijs-kaart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(10,10,10,.3); z-index: 2; }
  .prijs-kaart:not(.nadruk):hover { background: var(--papier-2); }
}
.prijs-kaart:last-child { border-right: none; }
.prijs-kaart.nadruk { background: var(--inkt); color: var(--papier); }
.prijs-naam { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.prijs-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 9px; color: #fff; background: var(--accent-verloop); }
.prijs-bedrag { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.prijs-euro { font-family: var(--mono); font-size: 32px; font-weight: 700; }
.prijs-per { font-size: 11.5px; opacity: .6; }
.prijs-omschrijving { font-size: 12.5px; opacity: .72; line-height: 1.55; margin-bottom: 22px; }
.prijs-punten { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; flex: 1; }
.prijs-punten li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.prijs-punten svg { flex-shrink: 0; margin-top: 3px; opacity: .8; }
.prijs-knop {
  width: 100%; padding: 11px; border-radius: 8px; border: 1.4px solid var(--lijn-2); background: transparent; color: var(--inkt);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform 160ms var(--uit), background 160ms var(--uit);
}
.prijs-kaart.nadruk .prijs-knop { border-color: rgba(255,255,255,.3); color: var(--papier); }
.prijs-knop:hover { background: var(--papier-2); }
.prijs-kaart.nadruk .prijs-knop:hover { background: rgba(255,255,255,.1); }
.prijs-knop:active { transform: scale(.97); }

@media (max-width: 900px) {
  .prijs-raster { grid-template-columns: 1fr 1fr; }
  .prijs-kaart:nth-child(2) { border-right: none; }
  .prijs-kaart:nth-child(1), .prijs-kaart:nth-child(2) { border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 560px) {
  .prijs-raster { grid-template-columns: 1fr; }
  .prijs-kaart { border-right: none !important; border-bottom: 1px solid var(--lijn); }
}

/* ══════════════════════════════════════════
   CTA — de laatste, grote stempel
═══════════════════════════════════════════ */
.cta { position: relative; z-index: 1; padding: 160px 0 150px; overflow: hidden; text-align: center; }
/* De losse delen van de transform staan in variabelen, zodat de neerslag-
   animatie en het volgen van de muis elkaar niet overschrijven. */
.cta-groot-stempel {
  --vx: 0px; --vy: 0px;      /* verschuiving richting de cursor */
  --richting: 0deg;          /* hoek waarin geduwd wordt */
  --deuk: 1;                 /* indrukking langs die hoek */
  --groei: 1.5;              /* schaal */
  position: absolute; left: 50%; top: 46%; width: min(64vw, 620px); height: min(64vw, 620px);
  transform: translate(-50%,-50%) translate(var(--vx), var(--vy))
             rotate(var(--richting)) scale(var(--groei)) scaleX(var(--deuk));
  border: 3px solid var(--inkt); border-radius: 50%; opacity: 0; pointer-events: none;
  will-change: transform;
}
.cta-groot-stempel::before { content: ''; position: absolute; inset: 22px; border: 1px solid var(--inkt); border-radius: 50%; }
.cta.zichtbaar .cta-groot-stempel { transition: transform 1.1s var(--stempel-ease), opacity .5s var(--uit); --groei: 1; opacity: .1; }
/* Zodra de stempel geland is neemt de muis het over: kortere veer. */
.cta.zichtbaar .cta-groot-stempel.volgt { transition: transform .4s var(--uit), opacity .4s var(--uit); }
.cta.zichtbaar .cta-groot-stempel.duwt { opacity: .17; }
.cta-binnen { position: relative; max-width: 620px; margin: 0 auto; }
.cta-illustratie { width: 100%; max-width: 170px; aspect-ratio: 1 / 1; margin: 0 auto 32px; rotate: -2deg; }
.cta h2 { margin-bottom: 18px; }
.cta p { margin: 0 auto 36px; }

/* ══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer { position: relative; z-index: 1; padding: 70px 0 34px; border-top: 1px solid var(--lijn); }
.footer-boven { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-merk-tekst { font-size: 13px; color: var(--inkt-3); margin-top: 14px; max-width: 30ch; }
.footer-kolom-titel { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--inkt-3); margin-bottom: 14px; }
.footer-kolom { display: flex; flex-direction: column; gap: 10px; }
.footer-kolom a { font-size: 13.5px; color: var(--inkt-2); transition: color 150ms var(--uit); }
.footer-kolom a:hover { color: var(--inkt); }
.footer-onder { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid var(--lijn); font-size: 12px; color: var(--inkt-3); flex-wrap: wrap; gap: 10px; }
.footer-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }

@media (max-width: 760px) {
  .footer-boven { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ══════════════════════════════════════════
   SUBPAGINA'S — gedeelde bouwstenen voor alle /pages/*.html
═══════════════════════════════════════════ */
.pagina-kop { position: relative; z-index: 1; padding: 168px var(--rand) 70px; text-align: center; max-width: 860px; margin: 0 auto; }
.pagina-kop .kicker { justify-content: center; }
.pagina-kop h1 { font-size: clamp(38px, 5.6vw, 64px); margin-bottom: 18px; }
.pagina-kop p { font-size: 17px; max-width: 52ch; margin: 0 auto; }

.pagina-kop-illustratie { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin: 0 auto 70px; rotate: -1deg; }

.pagina-sectie { position: relative; z-index: 1; padding: 0 0 70px; }
.pagina-sectie.laatste { padding-bottom: 130px; }
.pagina-smal { max-width: 1040px; margin: 0 auto; padding: 0 var(--rand); }
.pagina-breed { max-width: 980px; margin: 0 auto; padding: 0 32px; }

/* Lopende tekst — juridische / documentpagina's */
.proza { font-size: 15px; line-height: 1.75; color: var(--inkt-2); }
.proza h2 { font-size: 22px; margin: 46px 0 14px; }
.proza h2:first-child { margin-top: 0; }
.proza h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--inkt); margin: 26px 0 10px; }
.proza p { margin-bottom: 14px; max-width: none; color: var(--inkt-2); }
.proza ul { margin: 0 0 16px 20px; }
.proza li { margin-bottom: 8px; color: var(--inkt-2); }
.proza a { text-decoration: underline; text-underline-offset: 2px; color: var(--inkt); }
.proza strong { color: var(--inkt); font-weight: 600; }
.proza .bijgewerkt { font-family: var(--mono); font-size: 12px; color: var(--inkt-3); margin-bottom: 40px; display: block; }
.proza table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 13.5px; }
.proza th { text-align: left; padding: 10px 12px; background: var(--papier-2); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt-2); border-bottom: 1.5px solid var(--lijn-2); }
.proza td { padding: 12px; border-bottom: 1px solid var(--lijn); color: var(--inkt-2); vertical-align: top; }
.proza tr:last-child td { border-bottom: none; }
.proza code { font-family: var(--mono); font-size: 12.5px; background: var(--papier-2); padding: 2px 6px; border-radius: 4px; }
.badge-klein { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--lijn-2); color: var(--inkt-2); }
.disclosure-vak { background: var(--papier-2); border: 1px solid var(--lijn-2); border-radius: var(--r-m); padding: 26px 28px; margin: 28px 0; }
.disclosure-vak h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.stap-lijst { list-style: none; counter-reset: stap; margin: 0 0 16px; }
.stap-lijst li { counter-increment: stap; display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--lijn); color: var(--inkt-2); }
.stap-lijst li:last-child { border-bottom: none; }
.stap-lijst li::before { content: counter(stap); min-width: 24px; height: 24px; background: var(--inkt); color: var(--papier); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; flex-shrink: 0; }

.info-kaart-meta { font-family: var(--mono); font-size: 11px; color: var(--inkt-3); margin-bottom: 10px; }

/* FAQ-accordeon */
.faq-lijst { border-top: 1px solid var(--lijn); }
.faq-item { border-bottom: 1px solid var(--lijn); }
.faq-vraag {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 2px; cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--inkt);
}
.faq-vraag svg { flex-shrink: 0; transition: transform 240ms var(--uit); color: var(--inkt-3); }
.faq-item.open .faq-vraag svg { transform: rotate(45deg); }
.faq-antwoord { max-height: 0; overflow: hidden; transition: max-height 300ms var(--uit); }
.faq-antwoord-in { padding: 0 2px 20px; font-size: 14px; line-height: 1.7; color: var(--inkt-2); max-width: 62ch; }
.faq-item.open .faq-antwoord { max-height: 400px; }

/* Statregel — cijfers met label, gebruikt op over-ons/pers */
.stat-regel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 34px 0; }
.stat-item b { display: block; font-family: var(--mono); font-size: 32px; font-weight: 700; margin-bottom: 4px; }
.stat-item span { font-size: 12px; color: var(--inkt-3); }
@media (max-width: 700px) { .stat-regel { grid-template-columns: 1fr 1fr; row-gap: 26px; } }

/* Contactformulier / generieke formuliervelden */
.form-veld { margin-bottom: 18px; }
.form-veld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--inkt-2); margin-bottom: 7px; }
.form-veld input, .form-veld textarea, .form-veld select {
  width: 100%; padding: 12px 14px; border: 1.4px solid var(--lijn-2); border-radius: 8px;
  background: #ffffff; color: var(--inkt); font-family: var(--sans); font-size: 14.5px;
  transition: border-color 160ms var(--uit);
}
.form-veld input:focus, .form-veld textarea:focus, .form-veld select:focus { outline: none; border-color: var(--inkt-3); }
.form-veld textarea { resize: vertical; min-height: 120px; }

/* Vacature- / blogregels */
.regel-lijst { border-top: 1px solid var(--lijn); }
.regel-item {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px; border-bottom: 1px solid var(--lijn); transition: opacity 160ms var(--uit);
}
.regel-item:hover { opacity: .7; }
.regel-titel { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.regel-meta { font-family: var(--mono); font-size: 11.5px; color: var(--inkt-3); }
.regel-pijl { flex-shrink: 0; color: var(--inkt-3); transition: transform 200ms var(--uit); }
.regel-item:hover .regel-pijl { transform: translateX(4px); }

/* Kenmerkenlijst — genummerde ledgerregels i.p.v. het generieke
   icoontje-in-vierkantje-kaartraster. Past bij de urenkaart: elk kenmerk
   is een regel op de lijst, geen losstaande "feature card". */
.kenmerk-lijst { border-top: 1px solid var(--lijn); }
.kenmerk-rij {
  display: grid; grid-template-columns: 52px 1fr; gap: 22px;
  padding: 26px 0; border-bottom: 1px solid var(--lijn);
  transition: padding-left 260ms var(--uit);
}
@media (hover: hover) and (pointer: fine) {
  .kenmerk-rij:hover { padding-left: 10px; }
  .kenmerk-rij:hover .kenmerk-nr { color: var(--inkt); }
}
.kenmerk-nr { transition: color 260ms var(--uit); }
.kenmerk-nr { font-family: var(--serif); font-size: 24px; font-weight: 800; color: var(--inkt-3); line-height: 1.1; }
.kenmerk-titel { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
.kenmerk-tekst { font-size: 13.5px; line-height: 1.65; color: var(--inkt-2); max-width: 58ch; }
@media (max-width: 560px) {
  .kenmerk-rij { grid-template-columns: 34px 1fr; gap: 14px; }
  .kenmerk-nr { font-size: 20px; }
}

/* Twee-koloms variant: om herhaling van één lange lijst te doorbreken */
.kenmerk-raster-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.kenmerk-raster-2 .kenmerk-lijst { border-top: none; }
.kenmerk-raster-2 .kenmerk-rij:first-child { padding-top: 0; }
@media (max-width: 700px) { .kenmerk-raster-2 { grid-template-columns: 1fr; } .kenmerk-raster-2 .kenmerk-lijst:last-child .kenmerk-rij:first-child { padding-top: 26px; } }

/* ══════════════════════════════════════════
   PROFIELMENU (functioneel — login-status)
═══════════════════════════════════════════ */
.nav-profiel-wrap { position: relative; display: none; }
.nav-profiel-wrap.zichtbaar { display: flex; align-items: center; }
.nav-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--inkt); color: var(--papier);
  font-family: var(--mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; border: 2px solid transparent; transition: border-color 150ms var(--uit); flex-shrink: 0;
}
.nav-avatar:hover { border-color: var(--lijn-2); }
.nav-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; background: #ffffff; border: 1px solid var(--lijn-2);
  border-radius: 12px; box-shadow: 0 20px 50px -18px rgba(10,10,10,.28); min-width: 210px; overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity 160ms var(--uit), transform 160ms var(--uit); z-index: 999;
}
.nav-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.nav-dropdown-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--lijn); }
.nav-dropdown-naam { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dropdown-email { font-size: 11px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--inkt-2); cursor: pointer; text-decoration: none; transition: background 100ms var(--uit); }
.nav-dropdown-item:hover { background: var(--papier-2); }
.nav-dropdown-item.rood { color: #b3261e; }
.nav-dropdown-divider { height: 1px; background: var(--lijn); margin: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   PREMIUM LANDING — proof, privacy, flexibele plekken en FAQ
   De nieuwe onderdelen gebruiken hetzelfde rustige ledger-systeem:
   dunne lijnen, veel witruimte en alleen functionele kleur.
   ============================================================ */
.hero-voetnoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-transform: uppercase; }
.hero-voetnoot span { display: inline-flex; align-items: center; gap: 10px; }
.hero-voetnoot span:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; }

.bewijs { position: relative; z-index: 1; padding: 126px 0 132px; background: var(--papier); }
.bewijs-kop { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .6fr); column-gap: clamp(52px, 9vw, 160px); align-items: end; margin-bottom: 58px; }
.bewijs-kop .kicker { grid-column: 1 / -1; }
.bewijs-kop h2 { max-width: 760px; }
.bewijs-kop p { justify-self: end; font-size: 16px; line-height: 1.75; }
.bewijs-raster { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--lijn-2); border-radius: var(--r-l); overflow: hidden; background: var(--papier); box-shadow: 0 28px 70px -48px rgba(10,10,10,.34); }
.bewijs-kaart { position: relative; min-height: 330px; padding: 30px 30px 28px; display: flex; flex-direction: column; border-right: 1px solid var(--lijn); transition: background 220ms var(--uit), transform 220ms var(--uit); }
.bewijs-kaart:last-child { border-right: 0; }
.bewijs-nr { position: absolute; right: 26px; top: 25px; font-size: 11px; color: var(--inkt-3); }
.bewijs-icoon { width: 56px; height: 56px; margin: 34px 0 42px; border: 1px solid var(--lijn-2); border-radius: 50%; display: grid; place-items: center; background: var(--papier-2); }
.bewijs-puls { width: 9px; height: 9px; border-radius: 50%; background: #4a7a4a; box-shadow: 0 0 0 7px rgba(74,122,74,.11); animation: bewijsPuls 2.4s ease-in-out infinite; }
@keyframes bewijsPuls { 50% { box-shadow: 0 0 0 12px rgba(74,122,74,0); } }
.bewijs-icoon-stempel { font-size: 21px; font-weight: 700; border: 2px double var(--inkt-2); transform: rotate(-7deg); }
.bewijs-icoon-lijnen { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; padding: 0 14px; }
.bewijs-icoon-lijnen i { display: block; height: 1px; background: var(--inkt-2); }
.bewijs-icoon-lijnen i:nth-child(2) { width: 70%; }
.bewijs-kaart h3 { font-size: 22px; margin-bottom: 12px; }
.bewijs-kaart p { font-size: 14px; line-height: 1.7; margin-bottom: 30px; }
.bewijs-label { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lijn); font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--inkt-3); }
@media (hover: hover) and (pointer: fine) {
  .bewijs-kaart:hover { background: var(--papier-2); transform: translateY(-3px); }
}

.privacy { position: relative; z-index: 1; padding: 132px 0; background: var(--papier-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); overflow: hidden; }
.privacy::before { content: ''; position: absolute; right: -160px; top: -240px; width: 600px; height: 600px; border: 1px solid var(--lijn); border-radius: 50%; box-shadow: inset 0 0 0 72px var(--papier-2), inset 0 0 0 73px var(--lijn); pointer-events: none; opacity: .7; }
.privacy-binnen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, .75fr); gap: clamp(70px, 10vw, 170px); align-items: center; }
.privacy-tekst h2 { margin-bottom: 24px; }
.privacy-tekst > p { font-size: 16.5px; line-height: 1.78; }
.privacy-acties { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.tekst-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--lijn-2); font-size: 13.5px; font-weight: 650; transition: border-color 180ms var(--uit), gap 180ms var(--uit); }
.tekst-link:hover { border-color: var(--inkt); gap: 11px; }
.privacy-dossier { position: relative; background: var(--papier); border: 1px solid var(--lijn-2); border-radius: var(--r-l); box-shadow: 0 34px 80px -48px rgba(10,10,10,.38); overflow: hidden; }
.privacy-dossier-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--lijn); font-family: var(--mono); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.privacy-status { display: inline-flex; align-items: center; gap: 7px; color: var(--inkt-3); }
.privacy-status i { width: 6px; height: 6px; border-radius: 50%; background: #4a7a4a; }
.privacy-dossier dl { padding: 10px 24px 22px; }
.privacy-dossier dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px dashed var(--lijn); }
.privacy-dossier dl > div:last-child { border-bottom: 0; }
.privacy-dossier dt { font-family: var(--mono); font-size: 11px; color: var(--inkt-3); }
.privacy-dossier dd { font-size: 13px; font-weight: 600; }
.privacy-zegel { position: absolute; right: 22px; bottom: 20px; width: 72px; height: 72px; border: 2px solid rgba(10,10,10,.19); border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 9px; font-weight: 750; line-height: 1.2; letter-spacing: .08em; transform: rotate(-8deg); color: rgba(10,10,10,.42); pointer-events: none; }

.plek-notitie { scroll-margin-top: 92px; margin-top: 20px; display: grid; grid-template-columns: .65fr 1.25fr auto auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: 22px 24px; border: 1px solid var(--lijn-2); border-radius: var(--r-m); background: rgba(255,255,255,.94); box-shadow: 0 18px 45px -38px rgba(10,10,10,.4); }
.plek-notitie-merk { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--inkt-3); }
.plek-notitie-merk .gaatje { width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.plek-notitie-tekst { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.plek-notitie-tekst span { color: var(--inkt-2); }
.plek-notitie-prijs { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.plek-notitie-prijs strong { font-size: 25px; }
.plek-notitie-prijs span { font-size: 10.5px; color: var(--inkt-3); }
.plek-notitie-link { display: inline-flex; align-items: center; gap: 10px; justify-content: center; padding: 11px 15px; border: 1px solid var(--lijn-2); border-radius: var(--r-s); font-size: 12px; font-weight: 650; white-space: nowrap; transition: background 180ms var(--uit), border-color 180ms var(--uit); }
.plek-notitie-link:hover { background: var(--papier-2); border-color: var(--inkt-3); }

.faq { position: relative; z-index: 1; padding: 132px 0 142px; background: var(--papier); }
.faq-binnen { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(70px, 10vw, 170px); align-items: start; }
.faq-kop { position: sticky; top: 116px; }
.faq-kop h2 { margin-bottom: 22px; }
.faq-kop p { margin-bottom: 30px; }
.faq-lijst { border-top: 1px solid var(--lijn-2); }
.faq-lijst details { border-bottom: 1px solid var(--lijn-2); }
.faq-lijst summary { list-style: none; display: grid; grid-template-columns: 36px 1fr 28px; gap: 14px; align-items: center; min-height: 76px; padding: 18px 0; cursor: pointer; font-size: 15px; font-weight: 680; }
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-nr { font-size: 10.5px; color: var(--inkt-3); }
.faq-plus { justify-self: end; position: relative; width: 24px; height: 24px; border: 1px solid var(--lijn-2); border-radius: 50%; transition: transform 240ms var(--uit), background 180ms var(--uit); }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1px; background: var(--inkt); transform: translate(-50%,-50%); }
.faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform 220ms var(--uit); }
.faq-lijst details[open] .faq-plus { transform: rotate(180deg); background: var(--inkt); }
.faq-lijst details[open] .faq-plus::before, .faq-lijst details[open] .faq-plus::after { background: var(--papier); }
.faq-lijst details[open] .faq-plus::after { transform: translate(-50%,-50%) rotate(0); }
.faq-lijst details > p { margin: -5px 42px 24px 50px; font-size: 14px; line-height: 1.72; }

.cta-binnen { max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.cta-kicker { margin-bottom: 22px; }
.cta-zegel { width: 108px; height: 108px; margin: 0 auto 32px; border: 2px solid currentColor; border-radius: 50%; display: grid; grid-template-rows: auto 1fr auto; align-items: center; padding: 18px 0 14px; transform: rotate(-5deg); box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 8px currentColor; opacity: .86; }
.cta-zegel span { font-family: var(--mono); font-size: 8.5px; font-weight: 750; letter-spacing: .16em; }
.cta-zegel strong { font-size: 29px; line-height: 1; }
.cta h2 { font-size: clamp(40px, 5vw, 70px); margin-bottom: 22px; }
.cta p { max-width: 52ch; font-size: 16.5px; line-height: 1.7; }
.cta-acties { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-garanties { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; width: min(100%, 690px); border-top: 1px solid var(--lijn); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--inkt-2); }
.cta-garanties span { display: inline-flex; align-items: center; gap: 7px; }
.cta-garanties i { width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-style: normal; }

@media (max-width: 980px) {
  .bewijs-kop { grid-template-columns: 1fr; }
  .bewijs-kop p { justify-self: start; margin-top: 24px; }
  .privacy-binnen, .faq-binnen { grid-template-columns: 1fr; gap: 54px; }
  .privacy-tekst { max-width: 720px; }
  .privacy-dossier { width: min(100%, 680px); }
  .faq-kop { position: static; max-width: 660px; }
  .plek-notitie { grid-template-columns: 1fr 1fr; }
  .plek-notitie-merk { grid-column: 1 / -1; }
  .plek-notitie-link { justify-self: end; }
}

@media (max-width: 760px) {
  .bewijs, .privacy, .faq { padding: 88px 0; }
  .bewijs-kop { margin-bottom: 38px; }
  .bewijs-raster { grid-template-columns: 1fr; }
  .bewijs-kaart { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .bewijs-kaart:last-child { border-bottom: 0; }
  .bewijs-icoon { margin: 24px 0 30px; }
  .privacy-binnen, .faq-binnen { gap: 42px; }
  .privacy-dossier dl > div { grid-template-columns: 86px 1fr; gap: 16px; }
  .plek-notitie { grid-template-columns: 1fr; align-items: start; }
  .plek-notitie-merk { grid-column: auto; }
  .plek-notitie-link { justify-self: stretch; }
  .cta { padding: 105px 0 100px; }
  .cta-garanties { gap: 15px 20px; }
}

@media (max-width: 520px) {
  .hero-voetnoot { gap: 6px 8px; font-size: 9.5px; }
  .hero-voetnoot span { gap: 8px; }
  .bewijs-kaart { padding: 25px 22px 24px; }
  .privacy-dossier-kop, .privacy-dossier dl { padding-left: 18px; padding-right: 18px; }
  .privacy-zegel { display: none; }
  .plek-notitie { padding: 20px; }
  .faq-lijst summary { grid-template-columns: 28px 1fr 25px; gap: 10px; font-size: 14px; }
  .faq-lijst details > p { margin: -3px 35px 22px 38px; }
  .cta-zegel { width: 92px; height: 92px; padding: 15px 0 12px; }
  .cta-zegel strong { font-size: 24px; }
  .cta-acties { width: 100%; }
  .cta-acties .knop { width: 100%; }
  .cta-garanties { flex-direction: column; align-items: flex-start; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bewijs-puls { animation: none; }
}