/*
 * "Normvast in één beeld" (/features): infographic in de kleuren van variant C
 * "Aards & rijk" (terracotta, olijf, oker en blauwgroen op crème).
 * Alles hangt onder .nvi met nvi-klassen, zodat niets botst met Tailwind.
 * De infographic is altijd licht; in dark mode staat hij als lichte kaart op
 * de donkere pagina.
 * Het podium is 16:10,5 en schaalt mee via --u (1/1600 van de breedte). De
 * breekpunten zijn container queries, want de breedte hangt af van de sidebar.
 */
.nvi {
  color-scheme: light;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pill-fg: oklch(20% 0.02 50);

  --hero-pill-bg: oklch(97.5% 0.02 85 / .15);
  --hero-pill-fg: oklch(97.5% 0.02 85);
  --hero-key-bg: oklch(97.5% 0.02 85 / .93);
  --hero-key-fg: oklch(40% 0.12 38);
  --ground: oklch(95% 0.018 85);
  --tile: oklch(98.6% 0.009 85);
  --tile-soft: oklch(91.5% 0.022 80);
  --ink: oklch(22% 0.025 50);
  --muted: oklch(44% 0.03 55);
  --faint: oklch(65% 0.03 60);
  --line: oklch(86% 0.025 75);
  --sage: oklch(56% 0.09 125);
  --ochre: oklch(72% 0.13 78);
  --clay: oklch(57% 0.13 40);
  --slate: oklch(46% 0.07 205);
  --tint-1: oklch(91% 0.05 85);
  --tint-2: oklch(91% 0.045 125);
  --tint-3: oklch(90.5% 0.04 45);
  --tint-4: oklch(91% 0.03 200);
  --hero-surface:
    radial-gradient(48% 58% at 92% 8%, oklch(64% 0.14 65), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, oklch(38% 0.09 30), transparent 70%),
    linear-gradient(140deg, oklch(51% 0.13 42), oklch(44% 0.12 34));
  --hero-fg: oklch(97.5% 0.02 85);
  --hero-muted: oklch(90% 0.035 75);
  --hero-chip-bg: oklch(97.5% 0.02 85);
  --hero-chip-fg: oklch(42% 0.12 38);
  --caac-bg: linear-gradient(140deg, oklch(41% 0.07 205), oklch(37% 0.06 220));
  --caac-fg: oklch(97% 0.015 85);
  --caac-muted: oklch(87% 0.03 190);
  --mcp-bg: linear-gradient(140deg, oklch(45% 0.085 125), oklch(40% 0.07 135));
  --mcp-fg: oklch(97% 0.02 90);
  --mcp-muted: oklch(88% 0.04 110);
  --aud-bg: oklch(79% 0.12 80);
  --aud-fg: oklch(22% 0.03 60);
  --aud-muted: oklch(34% 0.04 60);

  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  border-radius: 28px;
  padding: 20px 16px 24px;
}
.nvi *, .nvi *::before, .nvi *::after { box-sizing: border-box; }
.nvi h1, .nvi h2, .nvi p, .nvi ul { margin: 0; }
.nvi-inner { max-width: 1600px; margin: 0 auto; }

.nvi-stage { container: nvi / inline-size; }
.nvi-grid {
  --u: calc(100cqw / 1600);
  --gap: calc(14 * var(--u));
  display: grid;
  aspect-ratio: 16 / 10.5;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  grid-template-areas:
    "soa  soa  soa  caac caac caac vote vote dark ready ready ready"
    "soa  soa  soa  hero hero hero hero hero hero ready ready ready"
    "risk risk sso  hero hero hero hero hero hero people people people"
    "rev  rev  rev  hero hero hero hero hero hero adv adv aud"
    "audit audit audit hero hero hero hero hero hero int int int"
    "audit audit audit mcp mcp mcp find find find ai ai org";
}
.nvi-t-soa{grid-area:soa} .nvi-t-caac{grid-area:caac} .nvi-t-vote{grid-area:vote} .nvi-t-dark{grid-area:dark}
.nvi-t-ready{grid-area:ready} .nvi-t-hero{grid-area:hero} .nvi-t-risk{grid-area:risk} .nvi-t-sso{grid-area:sso}
.nvi-t-people{grid-area:people} .nvi-t-rev{grid-area:rev} .nvi-t-adv{grid-area:adv} .nvi-t-aud{grid-area:aud}
.nvi-t-audit{grid-area:audit} .nvi-t-mcp{grid-area:mcp} .nvi-t-find{grid-area:find} .nvi-t-int{grid-area:int}
.nvi-t-org{grid-area:org} .nvi-t-ai{grid-area:ai}

.nvi-tile {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--tile);
  border-radius: calc(26 * var(--u));
  padding: calc(22 * var(--u));
  display: flex; flex-direction: column;
  gap: calc(10 * var(--u));
  animation: nvi-rise .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.nvi-tile.nvi-soft { background: var(--tile-soft); }
.nvi-tile.nvi-t-sso, .nvi-tile.nvi-t-org { background: var(--tint-1); }
.nvi-tile.nvi-t-adv { background: var(--tint-2); }
.nvi-tile.nvi-t-int { background: var(--tint-3); }
.nvi-tile.nvi-t-dark { background: var(--tint-4); }
.nvi-t-caac { --inv-bg: var(--caac-bg); --inv-fg: var(--caac-fg); --inv-muted: var(--caac-muted); }
.nvi-t-mcp { --inv-bg: var(--mcp-bg); --inv-fg: var(--mcp-fg); --inv-muted: var(--mcp-muted); }
.nvi-t-aud { --inv-bg: var(--aud-bg); --inv-fg: var(--aud-fg); --inv-muted: var(--aud-muted); }
.nvi-tile.nvi-inv { background: var(--inv-bg); color: var(--inv-fg); }
.nvi-tile.nvi-inv .nvi-sub, .nvi-tile.nvi-inv .nvi-eyebrow { color: var(--inv-muted); }
.nvi-tile.nvi-center { align-items: center; justify-content: center; text-align: center; }
@keyframes nvi-rise { from { transform: translateY(6px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nvi-tile { animation: none; } }

.nvi-eyebrow {
  font-size: max(10px, calc(13 * var(--u)));
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.nvi-h {
  font-weight: 600;
  font-size: max(13px, calc(24 * var(--u)));
  line-height: 1.12; letter-spacing: -0.015em;
  text-wrap: balance;
}
.nvi-h.nvi-lg { font-size: max(16px, calc(34 * var(--u))); letter-spacing: -0.025em; }
.nvi-h.nvi-sm { font-size: max(12px, calc(17 * var(--u))); }
.nvi-sub {
  font-size: max(11px, calc(15 * var(--u)));
  line-height: 1.35; color: var(--muted); text-wrap: pretty;
}
.nvi-push { margin-top: auto; }
.nvi-row { display: flex; gap: calc(14 * var(--u)); align-items: center; height: 100%; }
.nvi-col { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }

/* Bijlage A: 93 stippen */
.nvi-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: calc(5 * var(--u)); margin-top: auto; }
.nvi-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.nvi-legend { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(14 * var(--u)); font-size: max(10px, calc(13 * var(--u))); color: var(--muted); font-variant-numeric: tabular-nums; }
.nvi-legend b { color: var(--ink); font-weight: 600; }
.nvi-legend span::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--c); margin-right: .4em; }

/* Risico-heatmap */
.nvi-heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(3 * var(--u)); width: calc(92 * var(--u)); flex: none; margin-left: auto; }
.nvi-heat i { aspect-ratio: 1; border-radius: calc(4 * var(--u)); background: var(--c); opacity: var(--o, 1); }

/* OTP */
.nvi-otp { font-family: var(--font-mono); font-size: max(13px, calc(18 * var(--u))); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Checklist */
.nvi-check { list-style: none; padding: 0; display: grid; gap: calc(7 * var(--u)); font-size: max(11px, calc(15 * var(--u))); }
.nvi-check li { display: flex; gap: .55em; align-items: center; }
.nvi-check svg { width: 1.15em; height: 1.15em; flex: none; }
.nvi-check .nvi-todo { color: var(--muted); }

/* Jaarstrook */
.nvi-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(5 * var(--u)); margin-top: auto; }
.nvi-months div { display: grid; gap: calc(6 * var(--u)); justify-items: center; font-size: max(9px, calc(12 * var(--u))); color: var(--muted); font-weight: 500; }
.nvi-months span { width: 100%; height: calc(56 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--tile-soft); position: relative; overflow: hidden; }
.nvi-months span::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--h, 0%); background: var(--c, var(--line)); }
.nvi-audit-kinds { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: max(10px, calc(13 * var(--u))); color: var(--muted); }
.nvi-audit-kinds span::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 2px; background: var(--c); margin-right: .4em; }

/* Terminal */
.nvi-term { font-family: var(--font-mono); font-size: max(10px, calc(14 * var(--u))); line-height: 1.6; color: var(--inv-muted); }
.nvi-term .nvi-cmd { color: var(--inv-fg); }
.nvi-pill { display: inline-block; font-family: var(--font-mono); font-size: .82em; padding: .05em .55em; border-radius: 99px; color: var(--pill-fg); background: color-mix(in oklab, var(--c) 42%, white); margin-right: .35em; font-weight: 500; }

/* Stemmen */
.nvi-votes { display: flex; gap: calc(4 * var(--u)); height: calc(12 * var(--u)); min-height: 6px; }
.nvi-votes i { flex: 1; border-radius: 99px; background: var(--c); }
.nvi-vote-k { display: flex; justify-content: space-between; font-size: max(10px, calc(13 * var(--u))); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Audittrail */
.nvi-trail { width: calc(60 * var(--u)); min-width: 30px; }
.nvi-trail line { stroke: var(--slate); }
.nvi-trail circle { fill: var(--slate); }
.nvi-trail circle.nvi-now { fill: var(--clay); }

/* Ring */
.nvi-ring { width: 62%; max-width: calc(250 * var(--u)); min-width: 110px; margin: 0 auto; }
.nvi-ring text { fill: var(--ink); }
.nvi-weights { display: grid; grid-template-columns: auto 1fr; gap: calc(4 * var(--u)) calc(10 * var(--u)); font-size: max(10px, calc(13.5 * var(--u))); color: var(--muted); font-variant-numeric: tabular-nums; }
.nvi-weights b { color: var(--ink); font-weight: 600; text-align: right; }
.nvi-weights b::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--c); margin-right: .45em; vertical-align: .05em; }

/* Hero */
.nvi-t-hero {
  background: var(--hero-surface); color: var(--hero-fg);
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  gap: calc(8 * var(--u));
  isolation: isolate;
}
.nvi-t-hero .nvi-eyebrow { color: var(--hero-muted); }
.nvi-wordmark { font-family: var(--font-display); font-weight: 400; font-size: max(40px, calc(62 * var(--u))); line-height: .9; letter-spacing: -0.03em; }
.nvi-tagline { font-family: var(--font-display); font-style: italic; font-size: max(17px, calc(24 * var(--u))); line-height: 1.1; color: var(--hero-fg); opacity: .9; }
.nvi-norms { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.nvi-norms span { font-size: max(10px, calc(13.5 * var(--u))); font-weight: 500; padding: .3em .8em; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--hero-fg) 28%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nvi-norms span.nvi-on { background: var(--hero-chip-bg); color: var(--hero-chip-fg); border-color: var(--hero-chip-bg); }
.nvi-hero-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--u)) calc(22 * var(--u)); }
.nvi-wall-wrap { margin-top: auto; display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.nvi-wall-label { display: flex; align-items: center; gap: .5em; font-size: max(10px, calc(12 * var(--u))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hero-muted); }
.nvi-wall-dot { width: .8em; height: .8em; border-radius: 99px; background: var(--hero-key-bg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--hero-key-fg) 25%, transparent); }
.nvi-wall { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: calc(4.5 * var(--u)); font-size: max(10px, calc(13 * var(--u))); line-height: 1.2; }
.nvi-wall li { white-space: nowrap; padding: .28em .72em; border-radius: 99px; background: var(--hero-pill-bg); color: var(--hero-pill-fg); font-weight: 500; }
.nvi-wall li.nvi-br { flex-basis: 100%; height: 0; padding: 0; background: none; }
.nvi-wall li.nvi-k { background: var(--hero-key-bg); color: var(--hero-key-fg); font-weight: 600; }

/* MCP */
.nvi-big-num { font-family: var(--font-display); font-size: max(64px, calc(112 * var(--u))); line-height: .8; flex: none; letter-spacing: -0.04em; }
.nvi-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.nvi-tags span { font-size: max(10px, calc(13 * var(--u))); padding: .25em .7em; border-radius: 99px; background: var(--tile-soft); color: var(--ink); white-space: nowrap; font-weight: 500; }
.nvi-soft .nvi-tags span { background: var(--tile); }

/* Flow */
.nvi-flow { display: flex; align-items: center; gap: calc(8 * var(--u)); flex-wrap: wrap; font-size: max(10px, calc(14 * var(--u))); font-weight: 500; }
.nvi-flow span { padding: .35em .8em; border-radius: 99px; background: var(--tile-soft); white-space: nowrap; }
.nvi-flow span.nvi-done { background: color-mix(in oklab, var(--sage) 45%, white); color: var(--pill-fg); }
.nvi-flow svg { width: 1em; height: 1em; color: var(--faint); flex: none; }

.nvi-org { width: 78%; max-width: calc(110 * var(--u)); min-width: 56px; }
.nvi-org rect { fill: var(--tile); stroke: var(--line); }
.nvi-org rect.nvi-top { fill: var(--clay); stroke: var(--clay); }
.nvi-org path { stroke: var(--faint); fill: none; }

.nvi-ai-word { font-family: var(--font-display); font-size: max(30px, calc(58 * var(--u))); line-height: .95; letter-spacing: -0.02em; }
.nvi-t-ai { background: linear-gradient(135deg, color-mix(in oklab, var(--slate) 22%, var(--tile)), color-mix(in oklab, var(--ochre) 20%, var(--tile))); }

.nvi-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.nvi-caption b { color: var(--ink); font-weight: 600; }

/* Smaller podium: 6 kolommen, vrije hoogte */
@container nvi (max-width: 1059px) {
  .nvi-grid {
    --u: 1px;
    aspect-ratio: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(150px, auto);
    grid-template-areas: none;
    grid-auto-flow: row dense;
    gap: 12px;
  }
  .nvi-tile { grid-area: auto; grid-column: span var(--t, 3); grid-row: span var(--r, 1); padding: 20px; border-radius: 22px; }
  .nvi-t-hero { padding: 32px; }
  .nvi-wordmark { font-size: 68px; }
  .nvi-big-num { font-size: 96px; }
  .nvi-ring { width: 150px; }
}
/* Telefoon: 2 kolommen */
@container nvi (max-width: 599px) {
  .nvi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(132px, auto); gap: 10px; }
  .nvi-tile { grid-column: span var(--p, 2); padding: 16px; border-radius: 20px; }
  .nvi-t-hero { padding: 24px 20px; }
  .nvi-wordmark { font-size: 52px; }
  .nvi-tagline { font-size: 20px; }
  .nvi-big-num { font-size: 80px; }
  .nvi-heat { width: 84px; }
  .nvi-row.nvi-wrap-sm { flex-wrap: wrap; }
}