/* ==========================================================================
   Losse pagina's (systeem, nieuwsletter, contact).
   Dezelfde koppen, ondergronden en ritmes als de rest van de site; alleen
   het paginakopblok is hier eigen. Deze pagina's worden later uitgebouwd.
   ========================================================================== */

.page{background:var(--surface-page);color:var(--text-primary)}

/* Kop op inkt, zoals de dienstpagina's, maar zonder de beacon-scène. */
.page-head{position:relative;background:var(--surface-dark);color:var(--text-on-dark);overflow:hidden}
.page-head__wash{position:absolute;inset:0;background:radial-gradient(46% 52% at 78% 26%,rgba(11,73,245,.28),transparent 70%)}
.page-head__body{position:relative;z-index:10;padding:clamp(56px,9vw,120px) var(--gutter) clamp(64px,8vw,104px)}
.page-head__title{margin:0;max-width:18em;font-size:clamp(38px,5.4vw,74px);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);font-weight:var(--weight-regular)}
.page-head__lead{margin:28px 0 0;max-width:32em;font-size:clamp(16px,1.3vw,19.5px);line-height:var(--lh-body-tight);
  color:var(--text-on-dark-secondary);text-wrap:pretty}

.page-section{padding:var(--section-y) var(--gutter)}
.page-section--ruled{border-bottom:1px solid var(--border-hairline)}
.page-lede{margin:22px 0 0;max-width:34em;font-size:var(--body-lg);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}

/* Eenvoudige hairline-lijst, hergebruikt op alle drie de pagina's. */
.page-list{margin-top:var(--stack-gap);border-top:1px solid var(--border-rule)}
.page-row{display:grid;grid-template-columns:64px minmax(160px,1fr) minmax(220px,1.6fr);gap:24px;
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--border-rule)}
.page-row__k{font-family:var(--font-mono);font-size:var(--mono-label);letter-spacing:.14em;color:var(--accent)}
.page-row__t{font-size:var(--title-lg);font-weight:var(--weight-medium);letter-spacing:var(--ls-title)}
.page-row__b{margin:0;font-size:var(--body);line-height:var(--lh-body-tight);color:var(--text-tertiary)}

/* Werk-in-uitvoering: eerlijk zichtbaar in plaats van een lege pagina. */
.page-soon{margin-top:var(--stack-gap);padding:clamp(28px,4vw,44px);border:1px dashed var(--border-strong);
  background:var(--hatch);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.page-soon__k{font-family:var(--font-mono);font-size:var(--mono-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.page-soon__b{margin:0;max-width:34em;font-size:var(--body);line-height:var(--lh-body-tight);color:var(--text-tertiary)}

@media (max-width:640px){
  .page-row{grid-template-columns:44px 1fr;gap:6px 16px}
  .page-row__b{grid-column:2}
}