/* Alleen de reviewpagina's: rustige kleuren en heldere informatieblokken. */
body {
  --bg: #0d1214;
  --panel: #151d20;
  --panel2: #1b272b;
  --line: #314045;
  --green: #99c9a2;
  --blue: #95bfde;
  --orange: #e0af7c;
  --white: #eef2f1;
  --muted: #acb9bb;
  background: var(--bg);
}
header { background: #0d1214f2; }
.navcta, .button { color: #101b18; }
.navcta:hover, .button:hover { background: #b1d0b2; }
main { counter-reset: review-section; }
.review-wrap { max-width: 1060px; margin: auto; padding: 0 28px; }
.crumb { padding-top: 22px; font-size: .86rem; color: var(--muted); }
.crumb a { color: var(--blue); }
.crumb span { padding: 0 9px; color: #73898d; }
.review-hero {
  padding: 52px 0 54px;
  background: radial-gradient(circle at 88% 5%, #1b3031 0, transparent 45%), #101719;
  border-bottom: 1px solid var(--line);
}
.review-hero h1 {
  max-width: 850px;
  margin: 0 0 15px;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.review-hero .lead { max-width: 740px; margin: 0; font-size: 1.08rem; color: #c4d0ce; }
.review-hero .stamp, .review-section .num {
  color: var(--green); font-size: .76rem; font-weight: 750;
  letter-spacing: .11em; text-transform: uppercase;
}
.review-hero .fine { margin-top: 23px !important; color: var(--muted); }
.review-section { counter-increment: review-section; scroll-margin-top: 76px; padding: 63px 0 70px; border-top: 1px solid var(--line); }
.review-section:first-of-type { border-top: 0; }
.review-section.alt { background: #11191c; }
.review-section h2 {
  display: flex; gap: 16px; align-items: baseline;
  margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.2; letter-spacing: -.035em;
}
.review-section h2::before {
  content: counter(review-section, decimal-leading-zero);
  flex: none; color: var(--orange); font-size: .8rem;
  letter-spacing: .08em; font-weight: 750;
}
.review-section h3 { font-size: 1.15rem; line-height: 1.3; }
.review-section p { color: #c4cecc; }
.review-section .intro {
  max-width: 820px; margin: 0 0 27px; padding-left: 16px;
  border-left: 2px solid #6f91a5; font-size: 1.02rem;
}
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin: 29px 0 0; }
.kpi { padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: #172023; }
.kpi b { display: block; color: var(--green); font-size: 1.42rem; line-height: 1.13; }
.kpi:nth-child(3n+2) b { color: var(--blue); }
.kpi:nth-child(3n+3) b { color: var(--orange); }
.kpi span { display: block; margin-top: 8px; color: #bdc9c8; font-size: .83rem; }
.jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line);
}
.jump::before { content: 'Direct naar'; margin-right: 4px; color: var(--muted); font-size: .83rem; }
.jump a {
  padding: 7px 11px; border: 1px solid #45565a; border-radius: 7px;
  color: #d3e0df; background: #192226; font-size: .86rem;
}
.jump a:hover, .jump a:focus-visible { border-color: var(--blue); color: var(--blue); }
.jump a:focus-visible, .filter-row button:focus-visible, .model-card a:focus-visible, .source-details summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.model-grid, .chart-grid, .result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.model-card, .chart, .result { min-width: 0; padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.model-card { display: flex; flex-direction: column; gap: 6px; }
.model-card:hover { border-color: #67877d; }
.model-card h3 { margin: 2px 0 4px; font-size: 1.44rem; }
.model-card p { margin: 4px 0; }
.model-card small { color: var(--muted) !important; }
.model-card .go { margin-top: auto; padding-top: 13px; color: var(--blue); font-weight: 700; }
.badge-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 13px; }
.badge { padding: 4px 9px; border: 1px solid #4d6263; border-radius: 99px; color: #c9d9d7; font-size: .77rem; }
.badge:nth-child(3n+2) { border-color: #5a7185; color: #c5d8e7; }
.badge:nth-child(3n+3) { border-color: #806b58; color: #e0c8ac; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.filter-row button { padding: 8px 13px; background: #1a2528; color: #cbd8d6; border: 1px solid #4b5d61; border-radius: 99px; }
.filter-row button[aria-pressed=true] { background: #284440; color: #eff5f2; border-color: #83b1a1; font-weight: 750; }
.empty-filter { display: none; color: var(--muted); }
.chart h3 { margin: 0 0 8px; }
.chart svg { display: block; width: 100%; height: auto; margin: 12px 0 0; }
.chart figcaption { margin-top: 12px; color: #afbdbe; font-size: .86rem; line-height: 1.55; }
.table-scroll { margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.review-table { width: 100%; border-collapse: collapse; min-width: 580px; }
.review-table th, .review-table td { padding: 12px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.review-table th { background: #203035; color: #dfebea; font-size: .86rem; }
.review-table tr:last-child td { border-bottom: 0; }
.review-table tbody tr:nth-child(even) { background: #192226; }
.review-table td { color: #c8d4d1; }
.review-table td strong { color: var(--white); }
.result-grid { margin-top: 23px; }
.result h3 { margin: 8px 0 10px; }
.result p { margin: 0; }
.result:nth-child(3n+2) .num { color: var(--blue); }
.result:nth-child(3n+3) .num { color: var(--orange); }
.note { margin: 26px 0; padding: 16px 19px; border-left: 3px solid var(--orange); background: #25241f; color: #dcd2c5; }
.note strong { color: #f2e3ce; }
.review-list { max-width: 900px; padding-left: 20px; color: #c8d6d3; }
.review-list li { margin: 10px 0; }
.source-list { padding-left: 20px; color: #afbdbe; font-size: .87rem; }
.source-list li { margin: 8px 0; }
.source-details { max-width: 900px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: #172124; }
.source-details summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.source-details p { margin-bottom: 10px; }
.method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.method-grid article { padding-top: 15px; border-top: 2px solid #536f77; }
.method-grid article:nth-child(3n+2) { border-color: #6c8e72; }
.method-grid article:nth-child(3n+3) { border-color: #9e8063; }
.method-grid strong { color: var(--blue); }
.method-grid article:nth-child(3n+2) strong { color: var(--green); }
.method-grid article:nth-child(3n+3) strong { color: var(--orange); }
.method-grid p { margin: 7px 0 0; }
.summary-table { max-width: 950px; }
.review-section a.textlink { color: var(--blue); }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .review-wrap { padding: 0 19px; }
  .review-hero { padding: 38px 0 42px; }
  .review-section { padding: 47px 0 53px; }
  .review-section h2 { gap: 12px; }
  .model-grid, .result-grid, .method-grid { grid-template-columns: 1fr; }
  .chart { overflow-x: auto; }
  .chart svg { width: 590px; max-width: none; }
  .kpi { padding: 14px; }
}
@media (max-width: 420px) {
  .kpis { gap: 8px; }
  .kpi b { font-size: 1.25rem; }
  .jump::before { flex-basis: 100%; }
}