/* Advaiz — designsysteem
   Licht thema als basis, automatisch donker via prefers-color-scheme (light-dark()).
   Geen framework: moderne CSS met progressive enhancement. */

@layer reset, tokens, base, layout, components, sections, motion;

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-wght.woff2?v=a30ddcd349") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    --brand: #16b4f0;
    --brand-ink: light-dark(#0667a0, #5cc9f5);
    --bg: light-dark(#f7f9fb, #0a1420);
    --surface: light-dark(#ffffff, #0f1c2c);
    --surface-2: light-dark(#eef3f7, #142438);
    --border: light-dark(#dfe6ed, #1f3247);
    --ink: light-dark(#0b1b2b, #f1f5f9);
    --text: light-dark(#2c3a4a, #c8d3df);
    --muted: light-dark(#5a6878, #93a3b5);
    --tint: light-dark(#e4f5fd, #0c2940);
    --band-bg: light-dark(#0b1b2b, #0f1f33);
    --band-text: #c8d3df;
    --band-ink: #ffffff;
    --button-bg: light-dark(#0667a0, #16b4f0);
    --button-fg: light-dark(#ffffff, #04121f);
    --button-bg-hover: light-dark(#05578a, #4cc6f4);
    --focus: light-dark(#0667a0, #7dd6f8);
    --success: light-dark(#0f7a4f, #4ad295);
    --danger: light-dark(#b42318, #f97066);

    --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.925rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
    --step-3: clamp(1.9rem, 1.45rem + 2.2vw, 3.1rem);
    --step-4: clamp(2.5rem, 1.6rem + 4.4vw, 4.9rem);

    --radius-lg: 1.75rem;
    --radius: 1.25rem;
    --radius-sm: 0.75rem;
    --shadow: 0 1px 2px rgb(11 27 43 / 0.05), 0 12px 32px -12px rgb(11 27 43 / 0.18);
    --shadow-lift: 0 2px 4px rgb(11 27 43 / 0.06), 0 24px 48px -16px rgb(11 27 43 / 0.24);

    --container: 74rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ---------- base ---------- */
@layer base {
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-padding-top: 6rem;
    hanging-punctuation: first last;
  }
  body {
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 750;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
  h2 { font-size: var(--step-3); }
  h3, .h3 { font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.25; }
  p { text-wrap: pretty; }
  a { color: var(--brand-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  strong { color: var(--ink); font-weight: 700; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: color-mix(in oklab, var(--brand) 30%, transparent); }
}

/* ---------- layout ---------- */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .section-tight { padding-block: calc(var(--section) * 0.6); }
  .stack > * + * { margin-top: var(--stack, 1.25rem); }
  .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .section-head p { margin-top: 1.25rem; font-size: var(--step-1); color: var(--muted); line-height: 1.55; }
  .section-head.center { margin-inline: auto; text-align: center; }
}

/* ---------- components ---------- */
@layer components {
  .skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    background: var(--button-bg); color: var(--button-fg); font-weight: 700;
  }
  .skip-link:focus { top: 1rem; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brand-ink); margin-bottom: 1.1rem;
  }
  .eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--brand); }

  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 3rem; padding: 0.8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
    background: var(--button-bg); color: var(--button-fg);
    font-weight: 700; font-size: var(--step-0); line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .button:hover { background: var(--button-bg-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
  .button:active { transform: translateY(0); }
  .button svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--ease); }
  .button:hover svg { translate: 3px 0; }
  .button-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
  .button-ghost:hover { background: var(--surface); border-color: var(--brand-ink); }
  .button-small { min-height: 2.5rem; padding: 0.5rem 1.15rem; font-size: var(--step--1); }

  .text-link {
    display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none;
    color: var(--brand-ink);
  }
  .text-link::after { content: "→"; transition: translate 0.3s var(--ease); }
  .text-link:hover::after, a:hover .text-link::after { translate: 4px 0; }

  .card {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  }
  a.card, .card:has(> a.card-link) { text-decoration: none; color: inherit; }
  a.card:hover, .card:has(.card-link:hover) { border-color: color-mix(in oklab, var(--brand) 55%, var(--border)); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
  .card-link { color: inherit; text-decoration: none; }
  .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card:has(.card-link:hover) .text-link::after { translate: 4px 0; }

  .icon {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.9rem;
    background: var(--tint); color: var(--brand-ink); margin-bottom: 1.25rem;
  }
  .icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip {
    padding: 0.35rem 0.8rem; border-radius: 999px; font-size: var(--step--1); font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
  }
  .tag { font-size: var(--step--1); font-weight: 700; color: var(--brand-ink); letter-spacing: 0.02em; }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
  }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
  .brand img { width: auto; height: 2.4rem; }
  .site-nav ul { display: flex; gap: 0.25rem; }
  .site-nav a:not(.button) {
    display: block; padding: 0.55rem 0.9rem; border-radius: 999px;
    color: var(--text); font-weight: 600; text-decoration: none; transition: background-color 0.2s, color 0.2s;
  }
  .site-nav a:not(.button):hover { background: var(--surface-2); color: var(--ink); }
  .site-nav a[aria-current="page"]:not(.button) { color: var(--ink); background: var(--tint); }

  .menu-button {
    display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  }
  .menu-button svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

  @media (width < 60rem) {
    .menu-button { display: grid; }
    .site-nav[popover] {
      position: fixed; inset: 5rem var(--gutter) auto; width: auto; margin: 0;
      padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--text); box-shadow: var(--shadow-lift);
      opacity: 0; translate: 0 -0.5rem;
      transition: opacity 0.25s, translate 0.35s var(--ease), display 0.35s allow-discrete, overlay 0.35s allow-discrete;
    }
    .site-nav[popover]:popover-open { opacity: 1; translate: 0 0; }
    .site-nav[popover]::backdrop { background: rgb(4 18 31 / 0.25); }
    .site-nav ul { flex-direction: column; }
    .site-nav a:not(.button) { padding: 0.85rem 1rem; font-size: var(--step-1); }
    .site-nav .button { width: 100%; margin-top: 0.5rem; min-height: 3rem; font-size: var(--step-0); }
  }
  @starting-style {
    .site-nav[popover]:popover-open { opacity: 0; translate: 0 -0.5rem; }
  }
  @media (width >= 60rem) {
    .site-nav[popover] {
      display: flex; align-items: center; gap: 1rem;
      position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
      border: 0; background: none; color: inherit; overflow: visible;
    }
  }

  /* ---------- footer ---------- */
  .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
  .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
  @media (width >= 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .footer-brand img { width: 12.5rem; margin-bottom: 1rem; }
  .footer-brand p { color: var(--muted); max-width: 22rem; }
  .footer-nav h2 { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
  .footer-nav li + li { margin-top: 0.5rem; }
  .footer-nav a { color: var(--text); text-decoration: none; }
  .footer-nav a:hover { color: var(--brand-ink); text-decoration: underline; }
  .footer-legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
    margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid var(--border);
    font-size: var(--step--1); color: var(--muted);
  }
  .footer-legal a { color: var(--muted); }

  /* ---------- formulier ---------- */
  .form { display: grid; gap: 1.1rem; }
  .form-row { display: grid; gap: 1.1rem; }
  @container form (width >= 30rem) { .form-row { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: 0.4rem; }
  .field label { font-weight: 650; color: var(--ink); font-size: var(--step--1); }
  .field .optional { font-weight: 500; color: var(--muted); }
  .field input, .field select, .field textarea {
    width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--bg); color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .field textarea { min-height: 9rem; resize: vertical; field-sizing: content; }
  .field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
  .field :is(input, select, textarea):focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent); }
  .field :is(input, select, textarea):user-invalid { border-color: var(--danger); }
  .form-note { font-size: var(--step--1); color: var(--muted); }
  .form-status { font-weight: 650; }
  .form-status[data-state="success"] { color: var(--success); }
  .form-status[data-state="error"] { color: var(--danger); }
  .hp { display: none; }
}

/* ---------- sections ---------- */
@layer sections {
  /* hero */
  .hero { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--section); }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
      radial-gradient(60rem 30rem at 85% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%),
      radial-gradient(40rem 24rem at 0% 100%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 70%);
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
    background-image: radial-gradient(color-mix(in oklab, var(--muted) 35%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 65%);
  }
  .hero-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; }
  @media (width >= 60rem) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } }
  .hero h1 .accent { color: var(--brand-ink); display: block; }
  .hero-lead { margin-top: 1.75rem; font-size: var(--step-1); line-height: 1.55; max-width: 38rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
  .proof {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 2.75rem; padding-top: 1.75rem;
    border-top: 1px solid var(--border); font-size: var(--step--1); font-weight: 600; color: var(--muted);
  }
  .proof li { display: flex; align-items: center; gap: 0.5rem; }
  .proof svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--brand-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  .portrait { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; }
  .portrait-frame {
    border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 812 / 800;
    box-shadow: var(--shadow-lift); border: 1px solid var(--border); background: var(--surface-2);
  }
  .portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
  .portrait-quote {
    position: absolute; left: clamp(-2.5rem, -3vw, -1rem); bottom: 2rem; max-width: 17rem;
    padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-lift);
    font-weight: 750; color: var(--ink); line-height: 1.3; font-size: var(--step-0); text-wrap: balance;
  }
  .portrait-quote span { display: block; margin-top: 0.4rem; font-size: var(--step--1); font-weight: 600; color: var(--muted); }
  .portrait-arrow { position: absolute; right: -1.25rem; top: -1.75rem; width: 7rem; color: var(--brand); }
  .portrait-arrow path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
  @media (width < 36rem) { .portrait-quote { left: 0.75rem; bottom: 0.75rem; } .portrait-arrow { right: 0; width: 5rem; } }

  /* herkenning */
  .pain-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .pain { padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .pain h3 { font-size: var(--step-0); margin-bottom: 0.5rem; }
  .pain p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
  .pain .icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; margin-bottom: 1rem; }
  .pain .icon svg { width: 1.25rem; height: 1.25rem; }

  /* manifest */
  .band { background: var(--band-bg); color: var(--band-text); position: relative; overflow: clip; }
  .band h2, .band strong { color: var(--band-ink); }
  .band .eyebrow { color: #7dd6f8; }
  .manifest { display: grid; gap: 2.5rem; }
  @media (width >= 60rem) { .manifest { grid-template-columns: 1.4fr 1fr; align-items: end; } }
  .manifest blockquote p { font-size: var(--step-3); font-weight: 750; line-height: 1.12; letter-spacing: -0.03em; color: var(--band-ink); text-wrap: balance; }
  .manifest blockquote p .dim { color: #7f93a8; }
  .manifest blockquote p .hl { color: var(--brand); }
  .manifest-copy p { font-size: var(--step-1); line-height: 1.6; }
  .band-line { position: absolute; right: -4rem; bottom: -2rem; width: min(60vw, 38rem); color: var(--brand); opacity: 0.18; pointer-events: none; }
  .band-line path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

  /* diensten (bento) */
  .bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (width >= 40rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 64rem) {
    .bento { grid-template-columns: repeat(3, 1fr); }
    .bento .feature { grid-column: span 2; grid-row: span 2; }
  }
  .service :is(h3, .h3) { margin-bottom: 0.6rem; }
  .service .checks { margin-top: 1rem; }
  .card .fine { margin-top: 0.75rem; }
  .service p { color: var(--muted); }
  .service .text-link { margin-top: 1.25rem; }
  .service.feature { display: flex; flex-direction: column; background: linear-gradient(160deg, var(--tint), var(--surface) 55%); container-type: inline-size; }
  .service.feature :is(h3, .h3) { font-size: var(--step-2); }
  .service.feature p { font-size: var(--step-1); max-width: 34rem; color: var(--text); }
  .mini-dash { margin-top: auto; padding-top: 2rem; }
  .mini-dash svg { width: 100%; height: auto; }
  .mini-dash .d-panel { fill: var(--surface); stroke: var(--border); }
  .mini-dash .d-muted { fill: var(--surface-2); }
  .mini-dash .d-bar { fill: color-mix(in oklab, var(--brand) 35%, var(--surface)); }
  .mini-dash .d-bar-strong { fill: var(--brand); }
  .mini-dash .d-line { fill: none; stroke: var(--brand-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .mini-dash .d-area { fill: color-mix(in oklab, var(--brand) 14%, transparent); }
  .mini-dash .d-text { fill: var(--ink); font: 800 22px var(--font); }
  .mini-dash .d-label { fill: var(--muted); font: 600 11px var(--font); letter-spacing: 0.04em; }
  .mini-dash .d-up { fill: var(--success); font: 700 11px var(--font); }

  /* aanpak */
  .phases { display: grid; gap: 1rem; counter-reset: phase; }
  @media (width >= 48rem) { .phases { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 72rem) { .phases { grid-template-columns: repeat(4, 1fr); } }
  .phase { position: relative; padding: 1.75rem 1.5rem 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .phase-num {
    display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; margin-bottom: 1.25rem;
    font-weight: 800; color: var(--button-fg); background: var(--button-bg); font-size: var(--step--1);
  }
  .phase h3 { margin-bottom: 0.5rem; }
  .phase p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
  .phase-bar { height: 4px; border-radius: 4px; margin-top: 1.5rem; background: var(--surface-2); overflow: hidden; }
  .phase-bar::after { content: ""; display: block; height: 100%; width: var(--fill, 25%); background: var(--brand); border-radius: inherit; }
  .phase:nth-child(2) .phase-bar { --fill: 50%; }
  .phase:nth-child(3) .phase-bar { --fill: 75%; }
  .phase:nth-child(4) .phase-bar { --fill: 100%; }

  .role {
    display: grid; gap: 2rem; margin-top: 1rem; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  }
  @media (width >= 60rem) { .role { grid-template-columns: 1fr 1.1fr; align-items: center; } }
  .role h3 { font-size: var(--step-2); margin-bottom: 0.75rem; }
  .role > div > p { color: var(--muted); }
  .checks li { display: flex; gap: 0.75rem; align-items: flex-start; padding-block: 0.7rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--ink); }
  .checks li:last-child { border-bottom: 0; }
  .checks svg { width: 1.35rem; height: 1.35rem; flex: none; margin-top: 0.15rem; fill: none; stroke: var(--brand-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* cases */
  .cases { display: grid; gap: 1rem; }
  @media (width >= 60rem) { .cases { grid-template-columns: 1fr 1fr; } }
  .case { display: flex; flex-direction: column; }
  .case h3 { font-size: var(--step-2); margin-block: 0.6rem 0.9rem; }
  .case > p { color: var(--muted); }
  .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: auto; padding-top: 1.75rem; }
  .metric { padding: 1rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
  .metric strong { display: block; font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--brand-ink); }
  .metric span { display: block; margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.4; color: var(--muted); font-weight: 600; }
  @media (width < 30rem) { .metrics { grid-template-columns: 1fr; } }
  .case-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
  .fine { font-size: 0.8rem; color: var(--muted); }

  .refs { display: grid; gap: 1rem; margin-top: 2.5rem; }
  @media (width >= 48rem) { .refs { grid-template-columns: repeat(3, 1fr); } }
  .ref { padding: 1.25rem 1.4rem; border-radius: var(--radius); border: 1px dashed var(--border); }
  .ref strong { display: block; margin-bottom: 0.3rem; font-size: var(--step--1); }
  .ref p { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }

  /* over mij */
  .about { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
  @media (width >= 60rem) { .about { grid-template-columns: 1.2fr 1fr; align-items: start; } }
  .about-copy p { font-size: var(--step-1); line-height: 1.6; }
  .facts { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .fact strong { display: block; font-size: var(--step-3); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--brand-ink); }
  .fact span { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: var(--muted); font-weight: 600; line-height: 1.45; }
  .fact.wide { grid-column: 1 / -1; }

  /* inzichten */
  .insights { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .insight { display: flex; flex-direction: column; }
  .insight h3 { margin-block: 0.75rem 0.75rem; }
  .insight p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
  .insight .text-link { margin-top: auto; padding-top: 1.5rem; }
  .insight-art { height: 7rem; margin: -0.5rem -0.5rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
  .insight-art svg { width: 70%; height: 80%; }
  .insight-art .a-stroke { fill: none; stroke: var(--brand-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .insight-art .a-fill { fill: color-mix(in oklab, var(--brand) 30%, var(--surface)); }
  .insight-art .a-strong { fill: var(--brand); }
  .insight-art .a-muted { fill: var(--surface); stroke: var(--border); stroke-width: 2; }

  /* contact */
  .contact { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
  @media (width >= 60rem) { .contact { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
  .contact-steps { margin-top: 2rem; display: grid; gap: 1rem; counter-reset: step; }
  .contact-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
  .contact-steps li::before {
    counter-increment: step; content: counter(step);
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 999px;
    background: var(--tint); color: var(--brand-ink); font-weight: 800; font-size: var(--step--1);
  }
  .contact-steps strong { display: block; }
  .contact-steps span { color: var(--muted); font-size: var(--step--1); }
  .form-card { container: form / inline-size; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
}

/* ---------- motion ---------- */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    @supports (animation-timeline: view()) {
      .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
    @supports (animation-timeline: scroll()) {
      .site-header { animation: header-on-scroll linear both; animation-timeline: scroll(); animation-range: 0 8rem; }
    }
    .hero .reveal-load { animation: rise 0.9s var(--ease) both; }
    .hero .reveal-load:nth-child(2) { animation-delay: 0.08s; }
    .hero .reveal-load:nth-child(3) { animation-delay: 0.16s; }
    .hero .reveal-load:nth-child(4) { animation-delay: 0.24s; }
    .hero .reveal-load:nth-child(5) { animation-delay: 0.32s; }
    .portrait { animation: rise 1.1s 0.15s var(--ease) both; }
    .portrait-arrow path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.4s 0.6s var(--ease) forwards; }
  }
  @keyframes reveal { from { opacity: 0; translate: 0 2rem; } }
  @keyframes rise { from { opacity: 0; translate: 0 1.25rem; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes header-on-scroll { to { border-bottom-color: var(--border); background: color-mix(in oklab, var(--bg) 92%, transparent); } }
}

/* =====================================================================
   Dynamiek: 3D-veld, scrollscène, kanteling, marquee
   ===================================================================== */
@layer components {
  /* 3D-deeltjesveld (field.js). color = onderste tint, border-color = bovenste tint */
  .particles {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
    color: light-dark(#7fcdf2, #1b6d99); border: 0 solid light-dark(#0667a0, #5cc9f5);
    opacity: 0; transition: opacity 1.2s var(--ease);
  }
  .particles.is-ready { opacity: 1; }
  .hero .particles {
    z-index: -1; --field-opacity: 0.9;
    mask-image: linear-gradient(to right, transparent 12%, #000 55%);
  }
  .hero:has(.particles.is-ready)::after { opacity: 0; }
  @media (width < 60rem) {
    .hero .particles { --field-opacity: 0.6; mask-image: linear-gradient(to bottom, transparent 30%, #000 75%); }
  }

  /* Kanteling met lichtvlek */
  [data-tilt] {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease);
  }
  [data-tilt]:hover { transition: transform 0.12s linear, border-color 0.3s, box-shadow 0.4s var(--ease); }
  .card[data-tilt]:hover, .card[data-tilt]:has(.card-link:hover) {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  }
  .card[data-tilt]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%);
    transition: opacity 0.3s;
  }
  .card[data-tilt]:hover::before { opacity: 1; }

  /* Portret in 3D: de quote en de pijl zweven op een andere diepte */
  .portrait { transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s var(--ease); }
  .portrait-quote { transform: translateZ(70px); }
  .portrait-arrow { transform: translateZ(40px); }

  /* Marquee met domeinen en systemen */
  .marquee {
    overflow: hidden; border-block: 1px solid var(--border); background: var(--surface); padding-block: 1.1rem;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track { display: flex; width: max-content; }
  .marquee ul { display: flex; flex: none; gap: 0; }
  .marquee li {
    display: flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem;
    font-weight: 700; font-size: var(--step-1); color: var(--muted); white-space: nowrap; letter-spacing: -0.01em;
  }
  .marquee li::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--brand); rotate: 45deg; opacity: 0.7; }

  /* Scrollscène (overtuiging) */
  .scene { position: relative; }
  .js .scene.js-scene { height: 260vh; }
  .scene-sticky { position: relative; overflow: clip; }
  .js .js-scene .scene-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; }
  .scene .particles { --field-opacity: 1; color: #2f93c9; border-color: #8fe0ff; z-index: 0; }
  @media (width >= 60rem) { .scene .particles { mask-image: linear-gradient(to right, transparent 25%, #000 60%); } }
  @media (width < 60rem) { .scene .particles { mask-image: linear-gradient(to bottom, transparent 62%, #000 88%); } }
  .scene .container { position: relative; z-index: 1; }
  .scene-lines { display: grid; gap: 0.4rem; max-width: 40rem; }
  .scene-lines p { font-size: var(--step-3); font-weight: 750; line-height: 1.12; letter-spacing: -0.03em; color: var(--band-ink); text-wrap: balance; }
  .scene-lines .hl { color: var(--brand); }
  .js-scene .word { color: #2a3c52; transition: color 0.35s; }
  .js-scene .word.lit { color: var(--band-ink); }
  .js-scene .hl .word.lit { color: var(--brand); }
  .scene-copy { max-width: 34rem; margin-top: 2.5rem; font-size: var(--step-1); line-height: 1.6; }
  .js-scene [data-after] { opacity: 0; translate: 0 1rem; transition: opacity 0.6s, translate 0.8s var(--ease); }
  .js-scene [data-after].shown { opacity: 1; translate: 0 0; }
  .scene-hint { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; font-size: var(--step--1); color: #7f93a8; letter-spacing: 0.1em; text-transform: uppercase; }
  .js-scene .scene-hint.shown { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    .js .scene.js-scene { height: auto; }
    .js .js-scene .scene-sticky { position: relative; height: auto; padding-block: var(--section); }
    .scene-hint { display: none; }
  }
}

/* =====================================================================
   Componenten voor de binnenpagina's
   ===================================================================== */
@layer components {
  .page-hero { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(50rem 24rem at 90% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 70%);
  }
  .page-hero h1 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4.2rem); max-width: 18ch; }
  .page-hero .hero-lead { max-width: 44rem; }
  .breadcrumb { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.25rem; }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--border); }
  .breadcrumb a { color: var(--muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }

  .grid-2, .grid-3 { display: grid; gap: 1rem; }
  @media (width >= 48rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 64rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
  .feature h3 { margin-bottom: 0.5rem; }
  .feature p, .feature li { color: var(--muted); }
  .feature ul { padding-left: 1.1rem; margin-top: 0.5rem; }
  .feature li + li { margin-top: 0.3rem; }

  .split { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
  @media (width >= 60rem) { .split { grid-template-columns: 1fr 1.25fr; align-items: start; } .split-sticky { position: sticky; top: 7rem; } }

  .steps { display: grid; gap: 0; counter-reset: step; }
  .steps > li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-bottom: 2rem; }
  .steps > li::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px;
    background: var(--surface); border: 1.5px solid var(--border); color: var(--brand-ink); font-weight: 800; font-size: var(--step--1);
    position: relative; z-index: 1;
  }
  .steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 2px; translate: -1px 0; background: linear-gradient(var(--brand), var(--border)); }
  .steps h3 { margin-top: 0.6rem; margin-bottom: 0.35rem; }
  .steps p { color: var(--muted); }

  .callout {
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--tint), var(--surface) 70%); border: 1px solid var(--border);
  }
  .callout h2, .callout h3 { margin-bottom: 0.75rem; }
  .callout p + p { margin-top: 0.9rem; }

  .pull-quote { border-left: 3px solid var(--brand); padding: 0.25rem 0 0.25rem 1.5rem; margin-block: 2rem; }
  .pull-quote p { font-size: var(--step-2); font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
  .pull-quote footer { margin-top: 0.6rem; color: var(--muted); font-size: var(--step--1); font-weight: 600; }

  .faq { display: grid; gap: 0.75rem; }
  .faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .faq summary {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center; cursor: pointer; list-style: none;
    padding: 1.2rem 1.4rem; font-weight: 700; color: var(--ink);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--brand-ink); transition: rotate 0.3s var(--ease); }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details > div { padding: 0 1.4rem 1.3rem; color: var(--muted); }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }

  .cta-band {
    position: relative; overflow: clip; display: grid; gap: 1.5rem; align-items: center;
    padding: clamp(2rem, 1.5rem + 3vw, 3.75rem); border-radius: var(--radius-lg);
    background: var(--band-bg); color: var(--band-text);
  }
  @media (width >= 48rem) { .cta-band { grid-template-columns: 1fr auto; } }
  .cta-band h2 { color: var(--band-ink); font-size: var(--step-3); }
  .cta-band p { margin-top: 0.75rem; font-size: var(--step-1); max-width: 36rem; }
  .cta-band .button { background: var(--brand); color: #04121f; }
  .cta-band .button:hover { background: #4cc6f4; }
  .cta-band::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%); pointer-events: none; }

  /* Artikels */
  .prose { max-width: 42rem; font-size: var(--step-0); }
  .prose > * + * { margin-top: 1.25rem; }
  .prose h2 { font-size: var(--step-2); margin-top: 3rem; }
  .prose h3 { margin-top: 2rem; }
  .prose ul, .prose ol { padding-left: 1.25rem; }
  .prose li + li { margin-top: 0.5rem; }
  .prose li::marker { color: var(--brand-ink); font-weight: 700; }
  .prose .lead { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }
  .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; font-size: var(--step--1); color: var(--muted); font-weight: 600; }
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
  th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { color: var(--ink); font-weight: 700; background: var(--surface-2); }
  tr:last-child td { border-bottom: 0; }

  /* Vijf niveaus (AI-maturiteit) */
  .levels { display: grid; gap: 0.75rem; align-items: end; }
  @media (width >= 48rem) { .levels { grid-template-columns: repeat(5, 1fr); } }
  .level { padding: 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  @media (width >= 48rem) {
    .level:nth-child(1) { min-height: 11rem; } .level:nth-child(2) { min-height: 13rem; } .level:nth-child(3) { min-height: 15rem; }
    .level:nth-child(4) { min-height: 17rem; } .level:nth-child(5) { min-height: 19rem; }
  }
  .level b { display: block; font-size: var(--step-2); color: var(--brand-ink); font-weight: 800; }
  .level h3 { font-size: var(--step-0); margin-block: 0.4rem; }
  .level p { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
  .level.is-key { background: linear-gradient(160deg, var(--tint), var(--surface)); border-color: color-mix(in oklab, var(--brand) 50%, var(--border)); }

  /* Anatomie van een AI-agent */
  .anatomy { display: grid; gap: 1rem; }
  @media (width >= 48rem) { .anatomy { grid-template-columns: repeat(4, 1fr); } }
  .organ { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
  .organ span { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .organ h3 { margin-block: 0.3rem 0.4rem; }
  .organ p { font-size: var(--step--1); color: var(--muted); }
  .organ.own { border-color: color-mix(in oklab, var(--brand) 55%, var(--border)); background: linear-gradient(160deg, var(--tint), var(--surface)); }
  .organ em { display: inline-block; margin-top: 0.75rem; font-style: normal; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--text); }
  .organ.own em { background: var(--button-bg); color: var(--button-fg); }

  /* Kosten per stap */
  .cost-steps { display: grid; gap: 1rem; }
  @media (width >= 48rem) { .cost-steps { grid-template-columns: repeat(3, 1fr); } }
  .cost-step { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .cost-step strong { display: block; font-size: var(--step-2); color: var(--brand-ink); letter-spacing: 0.05em; }

  /* Case in detail */
  .case-detail { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--border); }
  @media (width >= 60rem) { .case-detail { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
  .case-detail h2 { font-size: var(--step-3); margin-block: 0.75rem 1rem; }
  .case-detail h3 { font-size: var(--step-1); margin-top: 2rem; margin-bottom: 0.6rem; }
  .case-detail h3:first-child { margin-top: 0; }
  .case-detail ul { padding-left: 1.2rem; }
  .case-detail li + li { margin-top: 0.4rem; }
  .case-detail li::marker { color: var(--brand-ink); }
  .case-detail .metrics { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; padding-top: 0; }
  .case-detail .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .report-list { display: grid; gap: 1rem; }
  @media (width >= 48rem) { .report-list { grid-template-columns: repeat(2, 1fr); } }
  .report { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .report .icon { margin: 0; }
  .report h3 { font-size: var(--step-0); margin-bottom: 0.3rem; }
  .report p { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }

  .portrait-static { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
  .contact-card { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: var(--step--1); color: var(--muted); margin-top: 2rem; }
  .contact-card strong { display: block; margin-bottom: 0.35rem; }
}

/* =====================================================================
   Scrollgedreven details
   ===================================================================== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .marquee-track { animation: marquee 45s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }

    @supports (animation-timeline: view()) {
      .mini-dash { view-timeline-name: --dash; }
      .mini-dash .d-bar, .mini-dash .d-bar-strong {
        transform-box: fill-box; transform-origin: 50% 100%;
        animation: bar-grow linear both; animation-timeline: --dash; animation-range: entry 20% cover 45%;
      }
      .mini-dash rect:nth-of-type(n+8) { animation-range: entry 25% cover 50%; }
      .mini-dash rect:nth-of-type(n+12) { animation-range: entry 30% cover 55%; }
      .mini-dash .d-line { stroke-dasharray: 620; animation: line-draw linear both; animation-timeline: --dash; animation-range: entry 30% cover 55%; }
      .mini-dash .d-area { animation: fade-in linear both; animation-timeline: --dash; animation-range: entry 40% cover 55%; }

      .phase-bar::after { transform-origin: left; animation: grow-x linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
      .steps > li:not(:last-child)::after { transform-origin: top; animation: grow-y linear both; animation-timeline: view(); animation-range: entry 60% cover 60%; }
    }
  }
  @keyframes marquee { to { translate: -50% 0; } }
  @keyframes bar-grow { from { scale: 1 0.04; } }
  @keyframes line-draw { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes grow-x { from { scale: 0 1; } }
  @keyframes grow-y { from { scale: 1 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { flex-wrap: wrap; width: auto; }
  .marquee ul[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   Peliqan-pagina: 3D-lagen in de hero en het interactieve dashboardvoorbeeld
   ===================================================================== */
@layer components {
  /* --- 3D-lagen: je software → datawarehouse → dashboards --- */
  .stack3d { --tx: 0deg; --ty: 0deg; position: relative; display: grid; place-items: center; min-height: 30rem; margin: 0; perspective: 1600px; }
  .stack3d-scene {
    position: relative; width: min(22rem, 72vw); aspect-ratio: 4 / 3; margin-top: 6rem; transform-style: preserve-3d;
    transform: rotateX(calc(56deg + var(--ty))) rotateZ(calc(-38deg + var(--tx)));
    transition: transform 0.7s var(--ease);
  }
  .plate {
    position: absolute; inset: 0; padding: 1rem; border-radius: 1.25rem; transform-style: preserve-3d;
    border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 82%, transparent);
    box-shadow: 0 30px 50px -28px rgb(11 27 43 / 0.5); transition: transform 0.9s var(--ease);
  }
  .plate-dwh { transform: translateZ(5rem); background: color-mix(in oklab, var(--tint) 80%, transparent); }
  .plate-dash { transform: translateZ(10rem); border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
  .stack3d:hover .plate-dwh { transform: translateZ(7rem); }
  .stack3d:hover .plate-dash { transform: translateZ(14rem); }
  /* laagnamen als bordjes die rechtop naar de kijker staan (inverse van de scènerotatie) */
  .plate-label {
    position: absolute; left: -0.5rem; bottom: 100%; margin-bottom: -0.4rem; transform-origin: 0 100%;
    transform: rotateZ(38deg) rotateX(-56deg); white-space: nowrap;
    padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink);
  }
  .plate-dash .plate-label { background: var(--button-bg); color: var(--button-fg); border-color: transparent; }
  .plate-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; list-style: none; }
  .plate-chips li { padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--surface-2); font-size: 0.7rem; font-weight: 700; color: var(--text); }
  .plate-tables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .plate-tables i { height: 2.3rem; border-radius: 0.4rem; border: 1px solid var(--border); background: repeating-linear-gradient(var(--surface) 0 0.35rem, var(--surface-2) 0.35rem 0.45rem); }
  .plate-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .plate-tiles b { height: 1.3rem; border-radius: 0.4rem; background: var(--tint); border: 1px solid var(--border); }
  .plate-bars { display: flex; align-items: flex-end; gap: 0.35rem; height: 4.2rem; margin-top: 0.5rem; }
  .plate-bars i { flex: 1; border-radius: 0.25rem 0.25rem 0 0; background: var(--brand); height: 40%; }
  .plate-bars i:nth-child(2) { height: 55%; } .plate-bars i:nth-child(3) { height: 48%; } .plate-bars i:nth-child(4) { height: 68%; }
  .plate-bars i:nth-child(5) { height: 62%; } .plate-bars i:nth-child(6) { height: 82%; } .plate-bars i:nth-child(7) { height: 96%; }
  .packet {
    position: absolute; width: 0.55rem; height: 0.55rem; border-radius: 50%; opacity: 0;
    background: var(--brand); box-shadow: 0 0 14px 2px var(--brand);
  }
  .packet:nth-of-type(1) { left: 22%; top: 30%; } .packet:nth-of-type(2) { left: 62%; top: 24%; } .packet:nth-of-type(3) { left: 40%; top: 62%; }
  .packet:nth-of-type(4) { left: 78%; top: 58%; } .packet:nth-of-type(5) { left: 30%; top: 78%; } .packet:nth-of-type(6) { left: 55%; top: 44%; }
  .stack3d-caption { margin-top: 0.5rem; font-size: var(--step--1); font-weight: 700; color: var(--muted); text-align: center; }
  @media (width < 36rem) { .stack3d { min-height: 24rem; } .stack3d-scene { width: 15rem; margin-top: 5rem; } }

  /* --- showcase: app-venster dat uit een 3D-kanteling rechttrekt --- */
  .showcase-section { background: radial-gradient(60rem 30rem at 50% 30%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%); }
  .showcase { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; perspective: 1800px; }
  .showcase::before {
    content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 3rem; filter: blur(60px);
    background: radial-gradient(color-mix(in oklab, var(--brand) 38%, transparent), transparent 70%);
  }
  .showcase-note {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
    font-size: var(--step--1); font-weight: 700; color: var(--ink);
  }
  .showcase-note::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent); }
  .showcase-frame {
    position: relative; flex: 1 1 100%; margin-top: 0.75rem; border-radius: 1.25rem; overflow: clip;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 50px 100px -40px rgb(11 27 43 / 0.45), 0 0 0 1px color-mix(in oklab, var(--brand) 12%, transparent);
    transform-origin: 50% 100%;
  }
  .showcase-fallback { padding: 1.5rem; }
  .showcase-caption { margin-top: 2.5rem; text-align: center; font-size: var(--step--1); color: var(--muted); }
  @media (width >= 72rem) {
    .showcase { display: block; }
    .showcase-frame { margin-top: 0; }
    .showcase-note { position: absolute; z-index: 2; transform: translateZ(90px); }
    /* op de rand van het venster, zodat ze niets van het dashboard afdekken */
    .note-1 { left: 30%; top: -1.3rem; } .note-2 { left: 56%; top: -1.3rem; }
    .note-3 { left: 10%; bottom: -1.3rem; } .note-4 { left: 60%; bottom: -1.3rem; }
  }

  /* --- de app zelf --- */
  .app { display: grid; }
  .app-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
  .app-dots { display: flex; gap: 0.35rem; }
  .app-dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--border); }
  .app-dots i:first-child { background: #f87171; } .app-dots i:nth-child(2) { background: #fbbf24; } .app-dots i:nth-child(3) { background: #34d399; }
  .app-title { color: var(--ink); font-size: var(--step-0); }
  .app-sector { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--tint); color: var(--brand-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; }
  .app-meta { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
  .app-tabs { display: flex; gap: 0.25rem; padding: 0.6rem 1rem 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
  .app-tab {
    flex: none; padding: 0.6rem 0.95rem; border: 0; border-bottom: 2.5px solid transparent; background: none; cursor: pointer;
    font-weight: 700; font-size: var(--step--1); color: var(--muted); border-radius: 0.5rem 0.5rem 0 0;
  }
  .app-tab:hover { color: var(--ink); background: var(--surface-2); }
  .app-tab[aria-selected="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
  .app-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.8rem 1.2rem 0; }
  .app-filter { padding: 0.3rem 0.7rem; border-radius: 0.5rem; border: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--muted); }
  .app-panel { display: grid; gap: 1rem; padding: 1rem 1.2rem 1.4rem; min-height: 30rem; opacity: 0; translate: 0 0.5rem; transition: opacity 0.35s, translate 0.5s var(--ease); }
  .app-panel.is-in { opacity: 1; translate: 0 0; }
  .app-panel:focus-visible { outline-offset: -3px; }

  .dk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr)); gap: 0.6rem; }
  @media (width < 36rem) { .dk { padding: 0.7rem 0.75rem; } .dk-label { font-size: 0.66rem; } .app-panel { padding-inline: 0.8rem; } }
  .dk { display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--bg); }
  .dk-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .dk-value { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .dk-delta { font-size: 0.78rem; font-weight: 700; }
  .dk-delta.is-good { color: var(--success); } .dk-delta.is-bad { color: var(--danger); }
  .dk-note { font-size: 0.75rem; color: var(--muted); }

  .dgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (width >= 56rem) {
    .dgrid { grid-template-columns: repeat(5, 1fr); }
    .dgrid > .dcard { grid-column: span 2; }
    .dgrid > .dcard.is-wide { grid-column: span 3; }
    .dgrid > .dcard:nth-child(3):last-child { grid-column: 1 / -1; }
  }
  .dcard { display: grid; align-content: start; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--bg); min-width: 0; }
  .dcard-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
  .dcard h4 { font-size: 0.9rem; color: var(--ink); letter-spacing: -0.01em; }
  .dcard-text { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: 0.6rem; }

  .seg { display: inline-flex; padding: 0.2rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
  .seg-btn { border: 0; background: none; cursor: pointer; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
  .seg-btn[aria-checked="true"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow); }

  .dc { width: 100%; height: auto; overflow: visible; }
  .dc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
  .dc-zero { stroke: var(--border); stroke-width: 1.5; }
  .dc-bar { fill: var(--brand); transform-box: fill-box; transform-origin: 50% 100%; cursor: pointer; transition: fill 0.2s; }
  .dc-bar:hover { fill: var(--brand-ink); }
  .dc-bar.is-neg { fill: color-mix(in oklab, var(--danger) 65%, var(--surface)); transform-origin: 50% 0; }
  .dc-empty { fill: var(--surface-2); }
  .dc-axis { fill: var(--muted); font: 600 11px var(--font); }
  .dc-target { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.55; }

  .hb { display: grid; gap: 0.55rem; }
  .hb-row { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) 1fr 4.2rem; align-items: center; gap: 0.6rem; font-size: 0.82rem; cursor: default; }
  .hb-label { font-weight: 600; color: var(--text); line-height: 1.3; }
  .hb-track { position: relative; height: 0.7rem; border-radius: 999px; background: var(--surface-2); }
  .hb-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--brand); }
  .hb-fill.is-good { background: var(--success); } .hb-fill.is-warn { background: #eda100; } .hb-fill.is-bad { background: var(--danger); }
  .hb-marker { position: absolute; top: -0.3rem; bottom: -0.3rem; left: var(--m); width: 2px; background: var(--ink); border-radius: 2px; }
  .hb-value { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

  .gauge { display: grid; justify-items: center; text-align: center; gap: 0.15rem; }
  .gauge svg { width: min(100%, 15rem); height: auto; }
  .gauge-bg, .gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; }
  .gauge-bg { stroke: var(--surface-2); }
  .gauge-fill { stroke: var(--brand); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); }
  .gauge-marker { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
  .gauge-value { margin-top: -2.2rem; font-size: 1.8rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
  .gauge-note { font-size: 0.78rem; color: var(--muted); }

  .funnel { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .funnel-step { display: grid; grid-template-columns: 1fr 3rem; align-items: center; gap: 0.6rem; }
  .funnel-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-width: max-content; width: var(--w);
    padding: 0.55rem 0.8rem; border-radius: 0.6rem; color: #fff; font-size: 0.82rem; font-weight: 700;
    background: linear-gradient(90deg, var(--button-bg), var(--brand));
  }
  .funnel-bar strong { color: inherit; font-variant-numeric: tabular-nums; }
  .funnel-conv { font-size: 0.78rem; font-weight: 800; color: var(--brand-ink); text-align: right; }

  .stack-bar { display: flex; height: 1.4rem; border-radius: 0.5rem; overflow: hidden; gap: 2px; }
  .stack-seg { width: var(--w); cursor: default; }
  .tone-0 { background: var(--success); } .tone-1 { background: var(--brand); } .tone-2 { background: #eda100; }
  .tone-3 { background: #eb6834; } .tone-4 { background: var(--danger); }
  .stack-legend { display: grid; gap: 0.35rem; margin-top: 0.9rem; padding: 0; list-style: none; font-size: 0.82rem; }
  .stack-legend li { display: grid; grid-template-columns: 0.7rem 1fr auto; align-items: center; gap: 0.6rem; }
  .stack-legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; }
  .stack-legend strong { font-variant-numeric: tabular-nums; }

  .dtable-wrap { overflow-x: auto; }
  .dtable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
  .dtable th { text-align: left; padding: 0.45rem 0.5rem; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); background: none; }
  .dtable td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
  .dtable tr:hover td { background: var(--surface-2); }
  .dtable .is-action { color: var(--brand-ink); font-weight: 700; text-align: right; }

  .dash-tip {
    position: absolute; left: var(--x, 0); top: var(--y, 0); z-index: 5; pointer-events: none;
    translate: -50% calc(-100% - 12px); padding: 0.35rem 0.65rem; border-radius: 0.5rem;
    background: var(--ink); color: var(--bg); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    opacity: 0; transition: opacity 0.15s;
  }
  .dash-tip.is-on { opacity: 1; }

  .trust-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px dashed var(--border); }
  .trust-strip p { font-size: var(--step--1); }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .stack3d-scene { animation: stack-bob 7s ease-in-out infinite alternate; }
    .packet { animation: packet-up 3.4s linear infinite; }
    .packet:nth-of-type(2) { animation-delay: 0.6s; } .packet:nth-of-type(3) { animation-delay: 1.2s; }
    .packet:nth-of-type(4) { animation-delay: 1.8s; } .packet:nth-of-type(5) { animation-delay: 2.4s; } .packet:nth-of-type(6) { animation-delay: 3s; }
    .showcase-note { animation: note-float 5s ease-in-out infinite alternate; }
    .note-2 { animation-delay: -1.2s; } .note-3 { animation-delay: -2.4s; } .note-4 { animation-delay: -3.6s; }

    /* enkel op brede schermen: op een gsm is het venster te hoog en blijft het te lang gekanteld */
    @media (width >= 60rem) {
      @supports (animation-timeline: view()) {
        .showcase-frame { animation: frame-in linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
      }
    }
    .app-panel.is-in .dc-bar { animation: dc-grow 0.7s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
    .app-panel.is-in .dc-target { stroke-dasharray: 5 5; animation: fade-in 0.8s 0.3s both; }
    .app-panel.is-in .hb-fill { animation: grow-x 0.9s var(--ease) both; transform-origin: left; animation-delay: calc(var(--i) * 60ms); }
    .app-panel.is-in .funnel-bar { animation: grow-x 0.9s var(--ease) both; transform-origin: left; animation-delay: calc(var(--i) * 90ms); }
    .app-panel.is-in .stack-seg { animation: fade-in 0.6s both; animation-delay: calc(var(--i) * 90ms); }
    .app-panel.is-in .gauge-fill { animation: gauge-fill 1.2s var(--ease) both; }
  }
  @keyframes stack-bob { from { translate: 0 0.4rem; } to { translate: 0 -0.6rem; } }
  @keyframes packet-up {
    0% { transform: translateZ(0.3rem); opacity: 0; } 12% { opacity: 1; }
    85% { opacity: 1; } 100% { transform: translateZ(10.5rem); opacity: 0; }
  }
  @keyframes note-float { from { translate: 0 0; } to { translate: 0 -0.6rem; } }
  @keyframes frame-in { from { transform: rotateX(34deg) scale(0.86) translateY(4rem); opacity: 0.35; } }
  @keyframes dc-grow { from { transform: scaleY(0.02); } }
  @keyframes gauge-fill { from { stroke-dashoffset: 100; } }
}

/* =====================================================================
   Visuals op de dienstenpagina's (service-visuals.js)
   ===================================================================== */
@layer components {
  .viz {
    position: relative; padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .viz-fallback { color: var(--muted); }
  .viz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; margin-bottom: 1rem; }
  .viz-title { font-size: var(--step-1); }
  .viz-sub { margin-top: 0.25rem; font-size: var(--step--1); color: var(--muted); }
  .viz .dash-tip { z-index: 5; }

  /* netwerkschema */
  .net-wrap { overflow-x: auto; margin-inline: -0.25rem; }
  .net { display: block; width: 100%; min-width: 30rem; height: auto; }
  .net .nd { transition: transform 0.9s var(--ease), opacity 0.45s; }
  .net .nd.is-gone { opacity: 0; }
  .nd-box { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
  .nd-text { fill: var(--ink); font: 650 12px var(--font); }
  .nd.tone-brand .nd-box { fill: var(--button-bg); stroke: none; }
  .nd.tone-brand .nd-text { fill: var(--button-fg); font-weight: 800; }
  .nd.tone-good .nd-box { fill: color-mix(in oklab, var(--success) 9%, var(--surface)); stroke: color-mix(in oklab, var(--success) 55%, var(--border)); }
  .nd.tone-bad .nd-box { fill: color-mix(in oklab, var(--danger) 8%, var(--surface)); stroke: var(--danger); stroke-dasharray: 4 3; }
  .nd.tone-muted .nd-box { stroke: var(--muted); stroke-dasharray: 4 4; }
  .nd.tone-muted .nd-text { fill: var(--muted); }
  .net-edges { opacity: 0; transition: opacity 0.45s; }
  .net-edges.is-in { opacity: 1; }
  .edge { stroke: var(--border); stroke-width: 1.5; }
  .edge.is-bad { stroke: var(--danger); stroke-dasharray: 5 5; opacity: 0.75; }
  .edge.is-good { stroke: var(--brand); stroke-width: 2; }
  .edge.is-muted { stroke: var(--muted); stroke-dasharray: 4 4; }
  .net-lane { fill: var(--surface-2); }
  .net-lane.is-alt { fill: color-mix(in oklab, var(--surface-2) 55%, var(--surface)); }
  .net-lane-label { fill: var(--muted); font: 700 11px var(--font); letter-spacing: 0.04em; }
  .net-caption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--muted); }
  .net-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); gap: 0.6rem; margin-top: 1rem; }
  @media (width < 36rem) { .net-stat { padding: 0.6rem; } .net-stat strong { font-size: 1.05rem; } .net-stat span { font-size: 0.72rem; } }
  .net-stat { padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
  .net-stat strong { display: block; font-size: var(--step-1); font-weight: 800; color: var(--brand-ink); letter-spacing: -0.02em; }
  .net-stat span { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

  /* OKR-bord */
  .okr-list { display: grid; gap: 0.6rem; }
  .okr-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: clip; }
  .okr-item.is-open { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
  .okr-head {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem 0.8rem; width: 100%;
    padding: 0.85rem 1rem; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
  }
  .okr-code { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: var(--tint); color: var(--brand-ink); font-weight: 800; font-size: 0.85rem; grid-row: span 2; }
  .okr-title { font-weight: 750; }
  .okr-team { grid-column: 2; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
  .okr-count { grid-column: 3; grid-row: 1 / span 2; font-size: 0.78rem; font-weight: 700; color: var(--brand-ink); white-space: nowrap; }
  .okr-count::after { content: " +"; }
  .okr-item.is-open .okr-count::after { content: " −"; }
  .okr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
  .okr-item.is-open .okr-body { grid-template-rows: 1fr; }
  .okr-inner { overflow: hidden; }
  .kr { display: grid; gap: 0.4rem; padding: 0.75rem 1rem; border-top: 1px dashed var(--border); }
  .kr-title { font-size: 0.88rem; color: var(--ink); }
  .kr-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
  .kr-from { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
  .kr-arrow { color: var(--brand-ink); font-weight: 800; }
  .kr-to { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--tint); color: var(--brand-ink); font-weight: 700; }

  /* Selectie: gewogen scorecard */
  .sel-wrap { overflow-x: auto; }
  .sel-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.82rem; }
  .sel-table th, .sel-table td { padding: 0.5rem 0.45rem; border-bottom: 1px solid var(--border); text-align: left; background: none; vertical-align: middle; }
  .sel-table thead th { color: var(--muted); font-weight: 700; font-size: 0.75rem; }
  .sel-table th.sel-cand { text-align: center; }
  .sel-table tbody th { color: var(--ink); font-weight: 650; }
  .sel-cell { text-align: center; }
  .sel-weight .seg-btn { padding: 0.2rem 0.5rem; }
  .sym { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; }
  .sym.is-yes { background: color-mix(in oklab, var(--success) 16%, var(--surface)); color: var(--success); }
  .sym.is-part { background: color-mix(in oklab, #eda100 20%, var(--surface)); color: #a36b00; }
  .sym.is-no { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
  .sel-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); }
  .sel-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .sel-legend .sym { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; }
  .rank { display: grid; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
  .rank-head { font-size: 0.9rem; color: var(--ink); margin-bottom: 0.25rem; }
  .rank-row { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr 3.5rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
  .rank-label { font-weight: 650; }
  .rank-track { height: 0.85rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .rank-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--brand); transition: width 0.6s var(--ease), background-color 0.3s; }
  .rank-row.is-best .rank-fill { background: var(--success); }
  .rank-row.is-best .rank-label, .rank-row.is-best .rank-value { color: var(--success); }
  .rank-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* Totale kost over vijf jaar */
  .tco { display: grid; gap: 0.7rem; }
  .tco-row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 5rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
  .tco-label { font-weight: 650; }
  .tco-track { display: flex; gap: 2px; height: 1.3rem; border-radius: 0.4rem; overflow: hidden; background: var(--surface-2); }
  .tco-part { width: var(--w, 0%); transition: width 0.7s var(--ease); }
  .tco-part.is-once, .hb-legend .tone-once { background: var(--button-bg); }
  .tco-part.is-rec, .hb-legend .tone-rec { background: color-mix(in oklab, var(--brand) 45%, var(--surface)); }
  .tco-value { text-align: right; font-variant-numeric: tabular-nums; }

  /* legende en gesplitste balk */
  .hb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--muted); }
  .hb-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; margin-left: 0.4rem; }
  .hb-legend i:first-child { margin-left: 0; }
  .hb-track.is-split { display: flex; gap: 2px; overflow: hidden; }
  .hb-part { height: 100%; width: var(--w); }
  .tone-a { background: var(--brand); }
  .tone-b { background: color-mix(in oklab, var(--muted) 45%, var(--surface)); }
  .gauge-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .gauge-pair .gauge-value { font-size: 1.35rem; margin-top: -1.8rem; }

  /* Procesmonitor */
  .proc { display: grid; gap: 0.55rem; }
  .proc-row { display: grid; grid-template-columns: minmax(8rem, 11rem) 7.5rem 1fr minmax(8rem, 11rem); align-items: center; gap: 0.7rem; font-size: 0.84rem; }
  @media (width < 48rem) { .proc-row { grid-template-columns: 1fr auto; } .proc-row .hb-track { grid-column: 1 / -1; } .proc-meta { grid-column: 1 / -1; } }
  .proc-name { font-weight: 650; color: var(--ink); }
  .proc-status { justify-self: start; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 750; }
  .proc-status.is-done { background: color-mix(in oklab, var(--success) 14%, var(--surface)); color: var(--success); }
  .proc-status.is-prep { background: color-mix(in oklab, #eda100 20%, var(--surface)); color: #a36b00; }
  .proc-status.is-todo { background: var(--surface-2); color: var(--muted); }
  .proc-meta { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* AI: complexiteit × timing */
  [data-visual="aimatrix"] .ai-scroll, .ai-grid { overflow-x: auto; }
  .ai-grid { display: grid; grid-template-columns: 9rem repeat(3, minmax(10rem, 1fr)); gap: 0.5rem; }
  .ai-col, .ai-row { font-size: 0.75rem; font-weight: 750; color: var(--muted); letter-spacing: 0.03em; }
  .ai-col { text-align: center; padding-bottom: 0.25rem; }
  .ai-row { display: flex; align-items: center; }
  .ai-cell { display: grid; align-content: start; gap: 0.4rem; min-height: 4.5rem; padding: 0.5rem; border-radius: var(--radius-sm); border: 1px dashed var(--border); }
  .ai-case {
    padding: 0.5rem 0.65rem; border-radius: 0.6rem; border: 1px solid transparent; cursor: pointer; text-align: left;
    font-size: 0.8rem; font-weight: 700; line-height: 1.3; transition: transform 0.25s var(--ease), box-shadow 0.25s;
  }
  .ai-case:hover, .ai-case:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
  .ai-case.is-c0 { background: color-mix(in oklab, var(--success) 13%, var(--surface)); color: var(--success); }
  .ai-case.is-c1 { background: color-mix(in oklab, #eda100 18%, var(--surface)); color: #8a5a00; }
  .ai-case.is-c2 { background: color-mix(in oklab, var(--danger) 11%, var(--surface)); color: var(--danger); }
  .ai-detail { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.88rem; min-height: 3.5rem; }

  /* AI: vier fases */
  .stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .step-btn {
    position: relative; display: grid; justify-items: start; gap: 0.4rem; width: 100%; height: 100%; padding: 0.9rem; cursor: pointer; text-align: left;
    border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  }
  .step-btn[aria-pressed="true"] { border-color: var(--brand-ink); background: var(--tint); }
  .step-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--button-bg); color: var(--button-fg); font-weight: 800; font-size: 0.85rem; }
  .step-name { font-weight: 750; font-size: 0.88rem; }
  .step-now { position: absolute; top: 0.7rem; right: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--success); color: #fff; font-size: 0.68rem; font-weight: 800; }
  .phase-detail { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
  .phase-detail h4 { font-size: 0.95rem; }
  .phase-detail .checks li { padding-block: 0.45rem; font-size: 0.88rem; }
  .phase-detail .checks li::before { content: "→"; color: var(--brand-ink); font-weight: 800; }

  /* Statusbord */
  .kanban { display: grid; gap: 0.75rem; }
  @media (width >= 48rem) { .kanban { grid-template-columns: repeat(3, 1fr); } }
  .kanban-col { padding: 0.8rem; border-radius: var(--radius); background: var(--surface-2); }
  .kanban-col h4 { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-bottom: 0.6rem; }
  .kanban-count { display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--surface); font-size: 0.75rem; }
  .kanban-col ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .kanban-card { padding: 0.65rem 0.75rem; border-radius: 0.6rem; background: var(--surface); border-left: 3px solid var(--border); font-size: 0.82rem; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 2px rgb(11 27 43 / 0.06); }
  .kanban-col.is-done .kanban-card { border-left-color: var(--success); }
  .kanban-col.is-prep .kanban-card { border-left-color: #eda100; }
  .kanban-col.is-todo .kanban-card { border-left-color: var(--muted); }

  /* Rekenwijze (Peliqan) */
  .calc-body { display: grid; gap: 1rem; align-items: center; }
  @media (width >= 48rem) { .calc-body { grid-template-columns: 1fr 1.6fr; } }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .proc.is-in .hb-fill { animation: grow-x 0.8s var(--ease) both; transform-origin: left; animation-delay: calc(var(--i) * 70ms); }
    .viz .hb-fill { animation: grow-x 0.8s var(--ease) both; transform-origin: left; animation-delay: calc(var(--i) * 60ms); }
    .kanban-card { animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
    .phase-detail > * { animation: rise 0.5s var(--ease) both; }
  }
}

@layer components {
  .viz-stack { display: grid; gap: 1.25rem; }
  .viz-stack > *, .split > * { min-width: 0; }
  .split > .viz { align-self: start; }
  .viz { min-width: 0; }
}

@layer components {
  /* op smalle schermen schuiven brede schema's opzij; de vervaagde rand toont dat er meer is */
  @media (width < 36rem) {
    .net-wrap, .sel-wrap, .ai-grid { mask-image: linear-gradient(to right, #000 82%, transparent); }
  }
}