:root {
  --grond: #f4f5f7;
  --vlak: #ffffff;
  --vlak-2: #eef1f5;
  --rand: #d7dce3;
  --tekst: #1b2330;
  --zacht: #5b6676;
  --accent: #1f4e79;
  --accent-tekst: #ffffff;
  --accent-zacht: #e3ecf6;
  --focus: #2f7bd8;
  --straal: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grond: #12161c;
    --vlak: #1a2029;
    --vlak-2: #212935;
    --rand: #333d4b;
    --tekst: #e6eaf0;
    --zacht: #9aa5b4;
    --accent: #7fb1e6;
    --accent-tekst: #0e1724;
    --accent-zacht: #1f2f45;
    --focus: #8cc0ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--grond);
  color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.hub {
  width: min(28rem, 100%);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: 0 8px 28px rgba(27, 35, 48, 0.06);
}

.hub-kop {
  text-align: center;
  margin-bottom: 1.75rem;
}

.merk-teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: #1f4e79;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

h1 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.ondertitel {
  margin: 0.35rem 0 0;
  color: var(--zacht);
  font-size: 0.95rem;
}

.apps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-knop {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--straal);
  background: var(--accent);
  color: var(--accent-tekst);
  border: 1px solid var(--accent);
  transition: filter 0.12s ease, background 0.12s ease;
}

.app-knop:hover {
  filter: brightness(1.08);
}

.app-knop:active {
  filter: brightness(0.96);
}

@media (min-width: 640px) {
  .hub { padding: 2.4rem 2rem 2rem; }
  .app-knop { font-size: 1.15rem; padding: 1.1rem 1.4rem; }
}