/* Systeemfonts: geen webfont-download, dus geen render-vertraging en
   geen extra herkomst in de CSP. */
:root {
  --bg:      #f7f8fa;
  --surface: #ffffff;
  --ink:     #14171c;
  --muted:   #5a6270;
  --accent:  #1d4ed8;
  --line:    #e3e6ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0e1116;
    --surface: #151a21;
    --ink:     #eef1f5;
    --muted:   #9aa4b2;
    --accent:  #8ab0ff;
    --line:    #232a34;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;

  /* 100vh is op een telefoon de hoogte ZONDER de adresbalk, dus de pagina
     wordt daarmee hoger dan wat je ziet en krijg je een scrollbalk.
     100dvh volgt de werkelijk zichtbare hoogte. De 100vh erboven blijft
     staan als terugval voor oudere browsers. */
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Meeschalend, zodat de inhoud ook op een kleine telefoon binnen
     het scherm blijft in plaats van er net overheen te lopen. */
  gap: clamp(1.5rem, 6vh, 3rem);
  padding: clamp(1rem, 4vh, 2rem) 1.5rem;

  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

main {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto clamp(0.75rem, 2.5vh, 1.25rem);
}

.mark {
  margin: 0 0 clamp(1.25rem, 5vh, 2.5rem);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 clamp(0.75rem, 2.5vh, 1.25rem);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lead {
  margin: 0 auto clamp(1.25rem, 5vh, 2.5rem);
  max-width: 26rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.contact {
  margin: 0;
  padding-top: clamp(1rem, 4vh, 2rem);
  border-top: 1px solid var(--line);
}

.contact a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--ink);
}

footer {
  color: var(--muted);
  font-size: 0.8125rem;
}
footer p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 120ms ease; }
}