/* VPinzicht · publieke website (vpinzicht.nl).
   Statisch, geen JavaScript, geen cookies, geen externe bronnen.
   Tokens 1:1 uit design_platform/tokens.css; alleen licht thema.
   Inter komt uit public/jaarverslag/fonts (de enige gecommitte kopie). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/jaarverslag/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/jaarverslag/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/jaarverslag/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/jaarverslag/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --font-sans: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --bg: #F1F2F5;
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --border: #E7E8EC;
  --border-strong: #D6D8DE;
  --text: #17181C;
  --text-secondary: #6B6E78;
  --brand-blue: #1E5BB8;
  --brand-indigo: #44389A;
  --brand-violet: #6B4C9A;
  --primary: #2F58D6;
  --primary-hover: #2547BC;
  --primary-soft: #EAEFFC;
  --success: #1F9D57;
  --success-soft: #E4F4EA;
  --on-brand: #FFFFFF;
  --on-brand-soft: rgba(255, 255, 255, 0.88);
  --on-brand-fill: rgba(255, 255, 255, 0.15);
  --gradient-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-indigo) 56%, var(--brand-violet) 100%);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-sans);
  font-feature-settings: "cv01" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.grad :focus-visible { outline-color: var(--on-brand); }

.ico { width: 1em; height: 1em; flex: none; display: block; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- logo ---------- */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.lockup .mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 19px; flex: none; }
.lockup .naam { display: block; font: 700 16px/20px var(--font-sans); letter-spacing: -0.02em; }
.lockup .sub { display: block; font: 400 11px/14px var(--font-sans); letter-spacing: 0.02em; }
.lockup.wit .mark { background: var(--on-brand-fill); color: var(--on-brand); }
.lockup.wit .naam, .lockup.wit:hover { color: var(--on-brand); }
.lockup.wit .sub { color: var(--on-brand-soft); }
.lockup.licht .mark { background: var(--gradient-brand); color: var(--on-brand); }
.lockup.licht .naam { color: var(--text); }
.lockup.licht .sub { color: var(--text-secondary); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 9999px;
  font: 600 16px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.knop .ico { font-size: 18px; }
.knop-wit { background: var(--surface); color: var(--brand-indigo); box-shadow: var(--shadow-pop); }
.knop-wit:hover { background: var(--primary-soft); color: var(--brand-indigo); }
.knop-rand { border: 1.5px solid rgba(255, 255, 255, 0.55); color: var(--on-brand); }
.knop-rand:hover { border-color: var(--on-brand); background: var(--on-brand-fill); color: var(--on-brand); }
.knop-primair { background: var(--gradient-brand); color: var(--on-brand); }
.knop-primair:hover { color: var(--on-brand); filter: brightness(1.08); }
.knop-licht { border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); }
.knop-licht:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- held (verloop) ---------- */
.grad { position: relative; overflow: hidden; background: var(--gradient-brand); color: var(--on-brand); }
.grad::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 90% 0%, rgba(255, 255, 255, 0.18), transparent 60%); }
.grad > * { position: relative; }

.held { padding-bottom: 132px; }
.balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
.inlog {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 9999px;
  color: var(--on-brand); font: 500 15px/1 var(--font-sans); text-decoration: none;
}
.inlog:hover { background: var(--on-brand-fill); color: var(--on-brand); }
.inlog .ico { font-size: 17px; }

.held-tekst { padding-top: 20px; max-width: 720px; }
.eyebrow { font: 600 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-brand-soft); }
.held h1 { margin: 10px 0 14px; font: 700 34px/38px var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.lead { font: 400 17px/26px var(--font-sans); color: var(--on-brand-soft); max-width: 60ch; }
.acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.acties .knop { flex: 1 1 auto; }

.vannaar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 28px 0 0; padding: 0; }
.vannaar .groep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vannaar .lbl { margin-right: 2px; font: 600 11px/14px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-brand-soft); }
.vannaar .chip { padding: 6px 12px; border-radius: 9999px; font: 500 13px/16px var(--font-sans); }
.vannaar .oud .chip { background: var(--on-brand-fill); color: var(--on-brand-soft); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.6); }
.vannaar .nieuw .chip { background: var(--surface); color: var(--brand-indigo); font-weight: 600; }
.vannaar .pijl { font-size: 18px; color: var(--on-brand); }

/* ---------- productbeeld (voorbeelddata) ---------- */
.beeld { position: relative; z-index: 1; margin: -104px 0 0; }
.shot {
  border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-pop); overflow: hidden;
  display: grid; grid-template-columns: 1fr; border: 1px solid var(--border);
}
.shot .zij { display: none; }
.shot .hoofd { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.shot .titel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shot .titel b { font: 600 17px/22px var(--font-sans); }
.shot .titel span { font: 600 12px/1 var(--font-sans); color: var(--on-brand); background: var(--gradient-brand); border-radius: 9999px; padding: 7px 12px; white-space: nowrap; }
.shot .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shot .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-card); min-width: 0; }
.shot .kpi span { display: block; font: 500 11px/14px var(--font-sans); color: var(--text-secondary); }
.shot .kpi b { display: block; font: 700 22px/28px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.shot .tabel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.shot .rij { display: grid; grid-template-columns: 1.7fr 0.8fr 1fr; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--border); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.shot .rij:first-child { border-top: 0; font: 600 11px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-2); }
.shot .rij b { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot .rij .sector { display: none; }
.shot .badge { justify-self: start; font: 600 11px/1 var(--font-sans); padding: 4px 7px; border-radius: 6px; background: var(--success-soft); color: #17784A; }
.shot .badge.open { background: var(--primary-soft); color: var(--brand-indigo); }
.beeld figcaption { margin-top: 8px; text-align: right; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }

/* ---------- secties ---------- */
.sectie { padding-block: 56px; }
.sectie h2 { font: 700 26px/32px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.sectie .intro { margin-top: 10px; color: var(--text-secondary); max-width: 60ch; }

.kenmerken { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.kenmerk { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--brand-indigo); font-size: 22px; }
.kenmerk h3 { margin-top: 2px; font: 600 17px/24px var(--font-sans); }
.kenmerk p { margin-top: 4px; font-size: 15px; line-height: 23px; color: var(--text-secondary); }

.vertrouwelijk { border-radius: var(--radius-xl); padding: 28px 20px; }
.vertrouwelijk h2 { display: flex; align-items: center; gap: 12px; }
.vertrouwelijk h2 .ico { font-size: 28px; }
.vertrouwelijk .intro { color: var(--on-brand-soft); }
.punten { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.punt { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; padding: 16px; border-radius: var(--radius-lg); background: var(--on-brand-fill); }
.punt .tile { width: 40px; height: 40px; font-size: 20px; background: var(--surface); }
.punt h3 { font: 600 16px/22px var(--font-sans); }
.punt p { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--on-brand-soft); }

.demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 20px; box-shadow: var(--shadow-card); }
.demo .acties { margin-top: 20px; }
.contact { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--text-secondary); font-size: 15px; }
.contact a { font-weight: 600; }

/* ---------- voet ---------- */
.voet { padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; }
.voet .wrap { display: flex; flex-direction: column; gap: 16px; }
.voet nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.voet nav a { display: inline-block; padding-block: 8px; color: var(--text); font-weight: 500; text-decoration: none; }
.voet nav a:hover { color: var(--primary); text-decoration: underline; }
.voet .product { margin: 0; line-height: 1.6; }
.voet .product strong { color: var(--text); font-weight: 600; }

/* ---------- tekstpagina (privacy) ---------- */
.tekstkop { padding-bottom: 40px; }
.tekstkop h1 { margin-top: 24px; font: 700 30px/36px var(--font-sans); letter-spacing: -0.02em; }
.tekst { max-width: 720px; padding-block: 40px 56px; }
.tekst h2 { margin-top: 32px; font: 600 20px/28px var(--font-sans); }
.tekst p, .tekst ul { margin-top: 12px; }
.tekst li + li { margin-top: 6px; }
.let-op { padding: 16px 18px; border-radius: var(--radius-lg); background: #FFF6E5; border: 1px solid #F2D6A2; color: #6B4A00; }

/* ---------- breder ---------- */
@media (min-width: 640px) {
  .held h1 { font-size: 44px; line-height: 48px; }
  .lead { font-size: 18px; line-height: 28px; }
  .acties .knop { flex: 0 0 auto; }
  .shot .rij { grid-template-columns: 1.6fr 0.9fr 0.7fr 1fr; }
  .shot .rij .sector { display: block; }
  .kenmerken, .punten { grid-template-columns: 1fr 1fr; }
  .vertrouwelijk, .demo { padding: 40px; }
  .sectie h2 { font-size: 30px; line-height: 36px; }
}
@media (min-width: 900px) {
  .held { padding-bottom: 168px; }
  .held-tekst { padding-top: 48px; }
  .held h1 { font-size: 56px; line-height: 60px; }
  .beeld { margin-top: -136px; }
  .shot { grid-template-columns: 220px 1fr; }
  .shot .zij { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border); }
  .shot .zij .lockup { margin-bottom: 14px; gap: 10px; }
  .shot .zij .lockup .mark { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
  .shot .zij .lockup .naam { font-size: 14px; line-height: 18px; }
  .shot .nav-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font: 500 13px/18px var(--font-sans); color: var(--text-secondary); }
  .shot .nav-i .ico { font-size: 16px; }
  .shot .nav-i.aan { background: var(--primary-soft); color: var(--brand-indigo); font-weight: 600; }
  .shot .hoofd { padding: 24px; gap: 16px; }
  .shot .titel b { font-size: 21px; line-height: 28px; }
  .shot .kpi { padding: 14px 16px; }
  .shot .kpi b { font-size: 28px; line-height: 34px; }
  .shot .kpi span { font-size: 12px; }
  .kenmerken { grid-template-columns: repeat(4, 1fr); }
  .kenmerk { grid-template-columns: 1fr; row-gap: 14px; padding: 22px; }
  .punten { grid-template-columns: repeat(3, 1fr); }
  .punt { grid-template-columns: 1fr; row-gap: 12px; padding: 20px; }
  .demo { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 40px; align-items: center; }
  .demo .acties { margin-top: 0; justify-content: flex-end; }
  .voet .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
}