/* ==========================================================================
   Base — reset, basistypografie, .u-* hulpklassen, keyframes
   Bron: designsysteem tokens/base.css (ongewijzigd overgenomen)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--lh-head); margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-brand-600); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-brand-700); outline-offset: 2px; border-radius: var(--radius-sm); }
small { font-size: var(--fs-small); }
.u-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.u-measure { max-width: var(--measure); }
.u-label { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.u-num { font-variant-numeric: tabular-nums; }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes u-spin { to { transform: rotate(360deg); } }
@keyframes u-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes u-gold-flash { 0% { filter: none; } 40% { filter: brightness(1.6) saturate(1.2); } 100% { filter: none; } }

/* --- Aanvullende layout-hulpklassen (productie) --- */
.u-stack > * + * { margin-top: var(--space-4); }
.u-stack-sm > * + * { margin-top: var(--space-2); }
.u-stack-lg > * + * { margin-top: var(--space-6); }
.u-row { display: flex; align-items: center; gap: var(--space-3); }
.u-row--between { justify-content: space-between; }
.u-row--wrap { flex-wrap: wrap; }
.u-grid { display: grid; gap: var(--gutter); }
.u-grid--2 { grid-template-columns: 1fr; }
.u-grid--3 { grid-template-columns: 1fr; }
.u-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .u-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .u-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .u-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.u-spacer { height: var(--space-6); }
.u-muted { color: var(--text-muted); }
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-hide { display: none !important; }
@media (max-width: 899px) { .u-hide-mobile { display: none !important; } }
@media (min-width: 900px) { .u-only-mobile { display: none !important; } }