/* inki-pdf - website. Huisstijl uit het ontwerpboek "inki paars v2": violet
   voor de hoofdactie, mango voor een korte boodschap, druif als tekstkleur,
   ivoor als ondergrond, lavendel voor panelen. DM Sans voor de tekst,
   Bricolage Grotesque 800 voor de koppen. Knoppen 12 px rond, panelen 18 px.
   Ritme: 4 px-raster; hoofdruimtes 16, 24, 32 en 48 px. Beweging kort, en
   uit bij prefers-reduced-motion. */

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --violet: #6042C8; --mango: #FFC95B; --druif: #2D2145; --ivoor: #FFF8ED; --lavendel: #F0EAFE; --wit: #fff;
  --zacht: #6E6485; --rand: #E6E0F3;
  --r-knop: 12px; --r-paneel: 18px;
  --kop: "Bricolage Grotesque", "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.6 "DM Sans", "Segoe UI", system-ui, sans-serif; color: var(--druif); background: var(--ivoor); }
img { max-width: 100%; height: auto; }
a { color: var(--violet); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--druif); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--kop); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 16px; }
h3 { font-size: 1.5rem; margin-bottom: 8px; }
p { margin: 0 0 16px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 5; background: rgba(255, 248, 237, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand); }
.kop .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.kop .logo { width: 132px; flex: none; }
.kop nav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.kop nav a { color: var(--druif); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500; }
.kop nav a:hover { background: var(--lavendel); color: var(--violet); }
.kop nav a.pil { background: var(--lavendel); color: var(--violet); font-weight: 600; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 2px solid transparent; border-radius: var(--r-knop); font: 600 16px/1.4 "DM Sans", sans-serif; color: var(--wit); background: var(--violet); text-decoration: none; cursor: pointer; }
.knop:hover { text-decoration: underline; }
.knop.tweede { color: var(--druif); background: var(--mango); }
.knop.stil { color: var(--violet); background: none; }
.knop.stil:hover { background: var(--lavendel); text-decoration: none; }

/* Held: de homepage uit het ontwerpboek */
.held { padding: 48px 0 32px; }
.held .kaart { background: var(--wit); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; box-shadow: 0 1px 0 var(--rand); }
.held .pil { display: inline-block; background: var(--lavendel); color: var(--violet); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; border-radius: 12px; margin-bottom: 24px; }
.held h1 em { font-style: normal; color: var(--violet); }
.held .tekst { font-size: 18px; max-width: 46ch; margin: 24px 0 32px; }
.held .acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pijlers { display: grid; gap: 16px; }
.pijler { border-radius: var(--r-paneel); padding: 24px; }
.pijler.een { background: var(--lavendel); }
.pijler.twee { background: var(--ivoor); }
.pijler .nr { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); margin-bottom: 12px; }
.pijler p { margin: 0; color: var(--zacht); }
.pijler a { display: inline-block; margin-top: 10px; font-weight: 600; }

/* Secties */
section { padding: 48px 0; scroll-margin-top: 80px; }   /* de vaste kop niet over de titel */
.sub { color: var(--zacht); font-size: 18px; max-width: 60ch; margin-bottom: 32px; }
.rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vak { background: var(--wit); border-radius: var(--r-paneel); padding: 24px; }
.vak h3 { font-size: 1.25rem; }
.vak p { margin: 0; color: var(--zacht); }
.vak .icoon { width: 40px; height: 40px; border-radius: 12px; background: var(--lavendel); color: var(--violet); display: grid; place-items: center; margin-bottom: 16px; }
.vak .icoon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Beeld van de bewerker */
.schermvak { background: var(--wit); border-radius: 28px; padding: 16px; margin-top: 32px; box-shadow: 0 24px 60px rgba(45, 33, 69, .10); }
.schermvak img { display: block; border-radius: 14px; width: 100%; border: 1px solid var(--rand); }
.schermvak figcaption { text-align: center; color: var(--zacht); font-size: 14px; padding: 12px 0 0; }

/* Stappen */
.stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stap { background: var(--wit); border-radius: var(--r-paneel); padding: 24px; position: relative; }
.stap::before { counter-increment: stap; content: "0" counter(stap); display: block; font: 800 28px/1 var(--kop); color: var(--violet); margin-bottom: 12px; }
.stap h3 { font-size: 1.15rem; }
.stap p { margin: 0; color: var(--zacht); }

/* Vertrouwen */
.vertrouwen { background: var(--druif); color: var(--ivoor); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.vertrouwen h2 { color: var(--wit); }
.vertrouwen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.vertrouwen li { padding-left: 28px; position: relative; }
.vertrouwen li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 8px; border-left: 2.5px solid var(--mango); border-bottom: 2.5px solid var(--mango); transform: rotate(-45deg); }
.vertrouwen .mascotte { width: 180px; justify-self: center; }

/* Aan de slag */
.start .kaart { background: var(--wit); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.start ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.start code { font-size: 14px; background: var(--lavendel); padding: 2px 6px; border-radius: 6px; }

/* Voet */
footer { padding: 32px 0 48px; color: var(--zacht); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
footer .logo { width: 96px; }
footer .regel { font: 800 18px/1.2 var(--kop); color: var(--druif); letter-spacing: -.02em; }
footer nav { margin-left: auto; display: flex; gap: 16px; }
footer a { color: var(--zacht); }

@media (max-width: 820px) {
  .held .kaart, .vertrouwen, .start .kaart { grid-template-columns: 1fr; }
  .vertrouwen .mascotte { width: 120px; }
  .kop .wrap { gap: 12px; }
  .kop nav a:not(.pil) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}