/* Neo Code — huisstijl uit het logo: zwart vlak, gouden beeldmerk, witte wordmark.
   Mono voor structuur (het beeldmerk is geometrisch en bracket-gebaseerd),
   humanist sans voor lopende tekst — de bedrijfsomschrijving is lang en moet leesbaar zijn. */

:root {
  --ink: #000000;
  --ink-soft: #0b0b0a;
  --gold: #d9b23c;
  --gold-deep: #a8842a;
  --paper: #f7f7f5;
  --mute: #8a8a85;
  --line: #232320;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --stack: clamp(3.5rem, 9vw, 7rem);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Eén lange URL of een breed blok mag de hele pagina niet zijwaarts laten schuiven. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

/* ---------- Binaire regen op de achtergrond (canvas, zie rain.js) ----------
   Vast in beeld, achter alles, en niet aanklikbaar. De dekking staat laag: het
   is sfeer, de tekst blijft de hoofdzaak. */
.rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Over de volle hoogte even sterk: dit is de achtergrond van de hele pagina,
     geen accent bovenin. De leesbaarheid komt van de dekking hieronder en van
     de zachte donkere ondergrond achter de tekstblokken. */
  opacity: 0.45;
}
/* Donkere baan door het midden, naar de zijkanten uitlopend in niets. Daar staat
   de tekst, dus daar wordt de regen gedempt; aan de randen blijft hij op sterkte.
   Ligt tussen het canvas en de inhoud in: als ::after van body wordt hij ná het
   canvas getekend, en de inhoud staat er met z-index 1 weer overheen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.38) 13%,
    rgba(0, 0, 0, 0.62) 30%,
    rgba(0, 0, 0, 0.62) 70%,
    rgba(0, 0, 0, 0.38) 87%,
    transparent 100%
  );
}

/* De inhoud valt over de regen heen. Zonder dit zou het canvas eroverheen liggen. */
body > header,
body > main,
body > footer { position: relative; z-index: 1; }

/* Zwarte gloed rond de letters in plaats van een kader eromheen: de tekst blijft
   scherp boven bewegende tekens, zonder dat er zichtbare blokken op de
   achtergrond verschijnen. */
.hero-text,
.prose p,
.ledger .what,
.foot,
.facts span { text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--paper); }
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Kop ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 2rem;
}
.top img { display: block; width: 84px; height: 84px; }
.top nav {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Aanraakvlak van ~44px hoog; de tekst zelf is te klein om met een duim te raken.
   Padding alleen verticaal: horizontale padding duwde de laatste link voorbij de
   paginamarge, waardoor hij op een telefoon half buiten beeld viel. */
.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Sectiemarkering: het beeldmerk als structuur ----------
   In code bakent een bracket een scope af. Hier bakent hij een sectie af. */

.marker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.marker::before { content: "["; color: var(--gold-deep); }
.marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- Openingsscherm ----------
   Het beeldmerk krijgt ruimte en de kop komt eronder binnen. Eén geluid bij het
   laden: logo stijgt op, lijn trekt zich open, tekst volgt. Verder stil. */

.hero {
  min-height: 58vh;
  min-height: 58svh;
  display: flex;
  padding: 1rem 0 var(--stack);
}
/* Verticaal centreren met auto-marges in plaats van align-items: center.
   Bij align-items zou de bovenkant buiten beeld vallen zodra de inhoud hoger is
   dan het scherm, en dáár kun je niet naartoe scrollen. Met auto-marges groeit
   de sectie gewoon mee. Op een kleine telefoon is die inhoud écht te hoog. */
.hero-inner { width: 100%; margin-block: auto; }

.hero h1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2rem, 1.1rem + 4.1vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 19ch;
}
.hero h1 em { font-style: normal; color: var(--gold); }

.hero-rule {
  display: block;
  height: 1px;
  background: var(--gold-deep);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  max-width: 34rem;
}

.hero-text {
  margin: 0;
  max-width: 54ch;
  color: var(--mute);
}

.hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: clamp(2rem, 6vw, 4rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.hero-cue:hover { color: var(--gold); }
.hero-cue svg { flex: none; }

/* Binnenpagina's: bovenaan uitlijnen in plaats van centreren, zodat de titel op
   dezelfde hoogte staat als op de homepage. Daar is de inhoud hoger dan het
   scherm, dus daar doen de auto-marges niets — hier zouden ze de kop omlaag duwen. */
.hero--top .hero-inner { margin-block: 0 auto; }
/* Op de homepage maakt de scheidingslijn de ruimte onder de titel; hier niet. */
.hero--top h1 { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }

/* Onderstreping die zich bij het laden opentrekt, onder de titel van een
   binnenpagina. Neemt de rol over van de lange scheidingslijn op de homepage:
   bij een titel van één woord zouden allebei samen te druk zijn. */
.title-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.18em;
}
.title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Meeschalen met de kop: 3px is bij 4rem tekst nauwelijks zichtbaar. */
  height: max(3px, 0.055em);
  background: var(--gold);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .title-underline::after {
    animation: rule-open 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
  }
}

/* Meelopende onderstreping op links in lopende tekst: er ligt altijd een matte
   lijn (zodat een link ook zonder kleur herkenbaar blijft) en daar wist bij
   hover een heldere overheen. */
.prose a,
.hero-text a,
.facts a {
  text-decoration: none;
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold-deep), var(--gold-deep));
  background-size: 0 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.prose a:hover,
.prose a:focus-visible,
.hero-text a:hover,
.hero-text a:focus-visible,
.facts a:hover,
.facts a:focus-visible { background-size: 100% 2px, 100% 1px; }

@media (prefers-reduced-motion: no-preference) {
  /* De kop opent nu de reeks; het grote beeldmerk is eruit. */
  .hero h1 { animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .hero-rule { animation: rule-open 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards; }
  .hero-text { animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards; }
  .hero .facts { animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.34s backwards; }
  .hero-cue { animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.48s backwards; }
  .hero-cue svg { animation: nudge 2.6s ease-in-out 1.6s infinite; }

  @keyframes rule-open {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes nudge {
    0%, 72%, 100% { transform: translateY(0); }
    82%           { transform: translateY(3px); }
  }
}
.hero-rule { transform-origin: left center; }

/* ---------- Kop van een binnenpagina ---------- */

.lede { padding-block: clamp(2rem, 6vw, 4.5rem) var(--stack); }
.lede h1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
.lede h1 em {
  font-style: normal;
  color: var(--gold);
}
.lede p {
  margin: 0;
  max-width: 56ch;
  color: var(--mute);
  font-size: 1.0625rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.facts span {
  border: 1px solid var(--line);
  padding: 0.45rem 0.85rem;
  color: var(--mute);
}
.facts b { color: var(--paper); font-weight: 500; }

/* ---------- Het register: domein links, merk rechts ---------- */

.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ledger li { border-bottom: 1px solid var(--line); }
.ledger a {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  align-items: baseline;
  padding: 0.95rem 0.35rem;
  text-decoration: none;
  color: var(--paper);
  /* transform i.p.v. padding: verschuiven zonder de rij opnieuw te laten opmeten. */
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.ledger a:hover,
.ledger a:focus-visible { background: var(--ink-soft); transform: translateX(0.55rem); }
.ledger .host {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--gold);
  word-break: break-all;
}
.ledger a:hover .host { color: var(--paper); }
.ledger .what { color: var(--mute); font-size: 0.9375rem; }
.ledger .what b { color: var(--paper); font-weight: 600; }

@media (max-width: 34rem) {
  /* Eén kolom: merk boven, domein eronder. De merknaam is waar je op zoekt,
     het domein bevestigt. Naast elkaar past het hier niet zonder afbreken. */
  .ledger a { grid-template-columns: 1fr; row-gap: 0.2rem; }
  .ledger .what { order: 1; }
  .ledger .host { order: 2; font-size: 0.875rem; }
}

/* ---------- Telefoon ---------- */

@media (max-width: 48rem) {
  .top { padding-block: 1.5rem; }
  .top img { width: 60px; height: 60px; }

  .ledger a { padding: 1rem 0.25rem; }
  /* Verschuiven bij hover heeft geen betekenis zonder muis; alleen de kleur blijft. */
  .ledger a:hover,
  .ledger a:focus-visible { transform: none; }

  .hero { padding-top: 1rem; }
  .hero-rule { margin: 1.5rem 0; }

  /* Op één regel past het hier toch niet: de twee groepen onder elkaar met lucht
     ertussen, in plaats van tegen elkaar aan geduwd door space-between. */
  .foot {
    padding-block: 2.25rem 3rem;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Liggende telefoon: nauwelijks hoogte, dus het openingsscherm niet forceren. */
@media (max-height: 34rem) and (orientation: landscape) {
  .hero { min-height: auto; padding: 1rem 0 3rem; }
  .hero-cue { display: none; }
}

/* Rijen komen bij het laden gefaseerd binnen — één beweging, verder niets. */
@media (prefers-reduced-motion: no-preference) {
  .ledger li { animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
  }
}

/* ---------- Lopende tekst ---------- */

/* Voor losse technische termen in lopende tekst (adressen, hostnamen). */
.mono { font-family: var(--mono); font-size: 0.95em; }

.prose { max-width: 62ch; }
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--paper); font-weight: 600; }

/* Opsomming binnen een tekstblok. Geen bolletje maar hetzelfde haakje-motief als
   .marker, zodat een lijst niet als een vreemd element in de pagina valt. */
.prose .uitleg { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.prose .uitleg li {
  position: relative;
  padding-left: 1.15rem;
  margin: 0 0 0.55rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
}
.prose .uitleg li::before { content: "›"; position: absolute; left: 0; color: var(--gold-deep); }
.prose .uitleg b { color: var(--paper); font-weight: 600; }

.section { padding-bottom: var(--stack); }

/* ---------- Voet ---------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.75rem 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--mute);
  letter-spacing: 0.02em;
}
.foot a { color: var(--mute); }
.foot a:hover { color: var(--gold); }
.foot .legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
/* Ook hier een aanraakvlak van 44px: dit zijn de kleinste links van de pagina. */
.foot .legal a { display: inline-flex; align-items: center; min-height: 44px; }