/* Waar zijn mijn spullen?
   Eén stylesheet voor de hele site. De achtergrond is het glas-thema van
   Uitgeleend: een nachtlucht met daarover drie lagen zacht blauw licht die
   elk in hun eigen tempo drijven. De lichtvlekken komen uit dezelfde
   toevalsgenerator met dezelfde seed als Scripts/GenerateBackground.swift in
   de app, dus de compositie is er letterlijk dezelfde.
   Mijn Spullen houdt op zijn eigen kaart het dennengroen, zodat de twee apps
   uit elkaar te houden zijn. */

/* Nunito, zelf gehost — één variabel bestand voor alle gewichten. Zelf hosten
   en niet via Google's servers: dat zou bezoekersgegevens naar een derde partij
   sturen en de privacyverklaring tegenspreken. */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #9db6e8;
  --navy-soft: #22335c;
  --green: #6fc9a6;
  --green-soft: #1a3a33;
  --pin: #e6a06b;

  /* De nachtlucht, stop voor stop overgenomen uit de app. */
  --sky-1: #040714;
  --sky-2: #0a1232;
  --sky-3: #111f54;
  --sky-4: #172a63;
  --sky-5: #1c336e;

  --ink: #f4f7fc;
  --ink-soft: #a8b6d6;
  --page: #16274a;
  --surface: rgba(27, 44, 82, 0.66);
  --card: rgba(27, 44, 82, 0.72);
  --line: #2c3d66;

  /* Glas, zoals in de app: een waas met een lichte witte gloed erover en een
     dunne witte rand eromheen. */
  --glass: rgba(255, 255, 255, 0.09);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px) saturate(150%);
  /* Glas dat dempt in plaats van oppept: nauwelijks vervaging, ingehouden
     verzadiging, en donkerder dan wat eronder ligt. */
  /* De balk boven en onder: de tint van de kaarten, maar losser opgezet
     zodat de lucht er doorheen blijft schijnen. */
  --bar: rgba(27, 44, 82, 0.4);

  --glass-fill: rgba(4, 7, 20, 0.08);
  --glass-filter: blur(3px) saturate(135%) brightness(0.82);
  /* De randlichten die het glas zijn dikte geven: twee tegenoverliggende
     zijden, zoals licht dat door een lens buigt. */
  --glass-edge:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 2px 2px 3px -2px rgba(255, 255, 255, 0.65),
    inset -2px -2.5px 4px -2px rgba(255, 255, 255, 0.32);

  --radius: 16px;
  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 32px);

  /* Safari kent ui-rounded en levert dan SF Pro Rounded: exact het lettertype
     van de apps, zonder dat er iets gedownload hoeft te worden. Elke andere
     browser slaat die twee over en krijgt Nunito, dat er dicht bij komt. */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
  margin: 0;
  background: linear-gradient(
    to bottom,
    var(--sky-1) 0%,
    var(--sky-2) 32%,
    var(--sky-3) 58%,
    var(--sky-4) 82%,
    var(--sky-5) 100%
  );
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

a {
  color: inherit;
}

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

.container {
  width: min(100% - calc(var(--gutter) * 2), 1080px);
  margin-inline: auto;
}

.narrow {
  max-width: 720px;
}

section {
  padding-block: clamp(48px, 9vw, 88px);
}

/* ── De nachtlucht ───────────────────────────────────────────────── */

/* Drie lagen licht boven het verloop op de body. Ze verschillen in tempo en
   richting; dat verschil in snelheid is wat het oog als diepte leest. De
   maten en tijden komen uit AppBackground in de app. */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sky-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: transform;
}

.sky-far {
  transform: scale(1.1) translate(16px, -16px);
  animation: drift-far 78s ease-in-out infinite alternate;
}

.sky-mid {
  transform: scale(1.16) translate(-32px, 32px);
  animation: drift-mid 58s ease-in-out infinite alternate;
}

.sky-near {
  transform: scale(1.24) translate(52px, -52px);
  animation: drift-near 41s ease-in-out infinite alternate;
}

@keyframes drift-far {
  to {
    transform: scale(1.1) translate(-16px, 16px);
  }
}

@keyframes drift-mid {
  to {
    transform: scale(1.16) translate(32px, -32px);
  }
}

@keyframes drift-near {
  to {
    transform: scale(1.24) translate(-52px, 52px);
  }
}

/* Een fijne korrel over het geheel, zodat de verlopen niet in banden
   uiteenvallen. */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Wie liever geen beweging ziet, krijgt dezelfde lucht — stil. */
@media (prefers-reduced-motion: reduce) {
  .sky-layer {
    animation: none;
  }
}

.sky-far {
  background-image:
    radial-gradient(ellipse 33.92% 33.92% at 31.00% 2.77%,rgba(158,209,255,0.184) 0%,rgba(158,209,255,0.101) 42%,rgba(158,209,255,0.029) 74%,rgba(158,209,255,0) 100%),
    radial-gradient(ellipse 24.77% 24.77% at 31.50% 84.44%,rgba(140,235,250,0.206) 0%,rgba(140,235,250,0.113) 42%,rgba(140,235,250,0.033) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 20.28% 20.28% at 36.43% 102.58%,rgba(158,209,255,0.170) 0%,rgba(158,209,255,0.093) 42%,rgba(158,209,255,0.027) 74%,rgba(158,209,255,0) 100%),
    radial-gradient(ellipse 34.46% 34.46% at 3.66% 88.46%,rgba(204,230,255,0.141) 0%,rgba(204,230,255,0.077) 42%,rgba(204,230,255,0.022) 74%,rgba(204,230,255,0) 100%),
    radial-gradient(ellipse 38.16% 38.16% at 37.64% 30.92%,rgba(204,230,255,0.187) 0%,rgba(204,230,255,0.103) 42%,rgba(204,230,255,0.030) 74%,rgba(204,230,255,0) 100%),
    radial-gradient(ellipse 33.25% 33.25% at 25.38% 60.67%,rgba(140,235,250,0.129) 0%,rgba(140,235,250,0.071) 42%,rgba(140,235,250,0.021) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 33.46% 33.46% at -11.10% 10.09%,rgba(178,189,255,0.145) 0%,rgba(178,189,255,0.080) 42%,rgba(178,189,255,0.023) 74%,rgba(178,189,255,0) 100%);
}

.sky-mid {
  background-image:
    radial-gradient(ellipse 7.19% 7.19% at 81.97% 96.41%,rgba(107,168,255,0.225) 0%,rgba(107,168,255,0.124) 42%,rgba(107,168,255,0.036) 74%,rgba(107,168,255,0) 100%),
    radial-gradient(ellipse 10.17% 10.17% at 11.03% 92.17%,rgba(140,235,250,0.213) 0%,rgba(140,235,250,0.117) 42%,rgba(140,235,250,0.034) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 7.08% 7.08% at 20.57% -6.59%,rgba(140,235,250,0.194) 0%,rgba(140,235,250,0.107) 42%,rgba(140,235,250,0.031) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 9.49% 9.49% at 38.53% 30.06%,rgba(204,230,255,0.132) 0%,rgba(204,230,255,0.072) 42%,rgba(204,230,255,0.021) 74%,rgba(204,230,255,0) 100%),
    radial-gradient(ellipse 9.46% 9.46% at 98.42% 105.90%,rgba(140,235,250,0.160) 0%,rgba(140,235,250,0.088) 42%,rgba(140,235,250,0.026) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 9.72% 9.72% at 42.53% 28.28%,rgba(158,209,255,0.146) 0%,rgba(158,209,255,0.080) 42%,rgba(158,209,255,0.023) 74%,rgba(158,209,255,0) 100%),
    radial-gradient(ellipse 10.66% 10.66% at 79.56% 104.23%,rgba(140,235,250,0.194) 0%,rgba(140,235,250,0.107) 42%,rgba(140,235,250,0.031) 74%,rgba(140,235,250,0) 100%),
    radial-gradient(ellipse 11.92% 11.92% at 81.04% 13.37%,rgba(178,189,255,0.231) 0%,rgba(178,189,255,0.127) 42%,rgba(178,189,255,0.037) 74%,rgba(178,189,255,0) 100%),
    radial-gradient(ellipse 10.04% 10.04% at 90.04% 45.30%,rgba(107,168,255,0.133) 0%,rgba(107,168,255,0.073) 42%,rgba(107,168,255,0.021) 74%,rgba(107,168,255,0) 100%),
    radial-gradient(ellipse 5.58% 5.58% at 26.26% 105.01%,rgba(107,168,255,0.146) 0%,rgba(107,168,255,0.080) 42%,rgba(107,168,255,0.023) 74%,rgba(107,168,255,0) 100%),
    radial-gradient(ellipse 11.75% 11.75% at 34.90% 35.03%,rgba(178,189,255,0.151) 0%,rgba(178,189,255,0.083) 42%,rgba(178,189,255,0.024) 74%,rgba(178,189,255,0) 100%),
    radial-gradient(ellipse 10.73% 10.73% at 107.05% 78.47%,rgba(158,209,255,0.250) 0%,rgba(158,209,255,0.138) 42%,rgba(158,209,255,0.040) 74%,rgba(158,209,255,0) 100%),
    radial-gradient(ellipse 8.13% 8.13% at 40.28% 44.42%,rgba(140,235,250,0.252) 0%,rgba(140,235,250,0.138) 42%,rgba(140,235,250,0.040) 74%,rgba(140,235,250,0) 100%);
}

.sky-near {
  background-image:
    radial-gradient(circle 4.22px at -7.27% 15.52%,rgba(204,230,255,0.397) 0%,rgba(204,230,255,0.397) 16%,rgba(204,230,255,0.035) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 8.63px at 105.88% 14.77%,rgba(204,230,255,0.490) 0%,rgba(204,230,255,0.490) 16%,rgba(204,230,255,0.043) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 5.95px at 78.06% 98.02%,rgba(178,189,255,0.515) 0%,rgba(178,189,255,0.515) 16%,rgba(178,189,255,0.045) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.81px at 102.04% 50.82%,rgba(107,168,255,0.403) 0%,rgba(107,168,255,0.403) 16%,rgba(107,168,255,0.035) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 7.10px at -5.62% 60.42%,rgba(140,235,250,0.321) 0%,rgba(140,235,250,0.321) 16%,rgba(140,235,250,0.028) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 3.65px at -1.40% 16.09%,rgba(158,209,255,0.393) 0%,rgba(158,209,255,0.393) 16%,rgba(158,209,255,0.035) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 4.44px at 25.38% 3.07%,rgba(204,230,255,0.530) 0%,rgba(204,230,255,0.530) 16%,rgba(204,230,255,0.047) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 7.06px at 86.93% 76.53%,rgba(158,209,255,0.308) 0%,rgba(158,209,255,0.308) 16%,rgba(158,209,255,0.027) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 7.30px at 59.62% 32.59%,rgba(107,168,255,0.369) 0%,rgba(107,168,255,0.369) 16%,rgba(107,168,255,0.032) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 3.26px at 85.72% 61.11%,rgba(158,209,255,0.211) 0%,rgba(158,209,255,0.211) 16%,rgba(158,209,255,0.019) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 4.66px at -7.66% 56.60%,rgba(204,230,255,0.233) 0%,rgba(204,230,255,0.233) 16%,rgba(204,230,255,0.021) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.91px at 41.39% 33.64%,rgba(158,209,255,0.465) 0%,rgba(158,209,255,0.465) 16%,rgba(158,209,255,0.041) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 3.54px at 9.67% 2.91%,rgba(107,168,255,0.470) 0%,rgba(107,168,255,0.470) 16%,rgba(107,168,255,0.041) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 7.18px at 84.81% 47.88%,rgba(204,230,255,0.252) 0%,rgba(204,230,255,0.252) 16%,rgba(204,230,255,0.022) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 3.32px at 39.14% 4.39%,rgba(107,168,255,0.349) 0%,rgba(107,168,255,0.349) 16%,rgba(107,168,255,0.031) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 4.13px at 63.43% 56.24%,rgba(178,189,255,0.528) 0%,rgba(178,189,255,0.528) 16%,rgba(178,189,255,0.046) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 3.13px at 76.76% 59.36%,rgba(158,209,255,0.538) 0%,rgba(158,209,255,0.538) 16%,rgba(158,209,255,0.047) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 3.71px at 36.71% 71.11%,rgba(140,235,250,0.454) 0%,rgba(140,235,250,0.454) 16%,rgba(140,235,250,0.040) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 4.18px at 25.44% 20.37%,rgba(107,168,255,0.252) 0%,rgba(107,168,255,0.252) 16%,rgba(107,168,255,0.022) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 7.91px at 106.55% 91.03%,rgba(178,189,255,0.284) 0%,rgba(178,189,255,0.284) 16%,rgba(178,189,255,0.025) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.94px at -1.22% 10.76%,rgba(107,168,255,0.481) 0%,rgba(107,168,255,0.481) 16%,rgba(107,168,255,0.042) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 5.74px at 12.62% 44.92%,rgba(204,230,255,0.213) 0%,rgba(204,230,255,0.213) 16%,rgba(204,230,255,0.019) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 6.05px at 52.85% 90.63%,rgba(140,235,250,0.240) 0%,rgba(140,235,250,0.240) 16%,rgba(140,235,250,0.021) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 6.71px at 58.00% 48.94%,rgba(140,235,250,0.230) 0%,rgba(140,235,250,0.230) 16%,rgba(140,235,250,0.020) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 3.66px at 64.28% 18.05%,rgba(204,230,255,0.503) 0%,rgba(204,230,255,0.503) 16%,rgba(204,230,255,0.044) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.06px at 21.54% 81.66%,rgba(107,168,255,0.494) 0%,rgba(107,168,255,0.494) 16%,rgba(107,168,255,0.043) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 5.20px at 60.99% 23.60%,rgba(158,209,255,0.266) 0%,rgba(158,209,255,0.266) 16%,rgba(158,209,255,0.023) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 6.18px at 40.68% 57.09%,rgba(140,235,250,0.383) 0%,rgba(140,235,250,0.383) 16%,rgba(140,235,250,0.034) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 3.79px at 24.38% 10.45%,rgba(178,189,255,0.549) 0%,rgba(178,189,255,0.549) 16%,rgba(178,189,255,0.048) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.08px at 12.81% 74.44%,rgba(140,235,250,0.246) 0%,rgba(140,235,250,0.246) 16%,rgba(140,235,250,0.022) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 5.55px at -3.29% 95.03%,rgba(158,209,255,0.281) 0%,rgba(158,209,255,0.281) 16%,rgba(158,209,255,0.025) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 6.82px at 34.06% 52.07%,rgba(158,209,255,0.239) 0%,rgba(158,209,255,0.239) 16%,rgba(158,209,255,0.021) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 6.37px at 24.18% 76.24%,rgba(178,189,255,0.324) 0%,rgba(178,189,255,0.324) 16%,rgba(178,189,255,0.028) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 8.47px at -3.85% 57.90%,rgba(204,230,255,0.407) 0%,rgba(204,230,255,0.407) 16%,rgba(204,230,255,0.036) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.78px at 52.85% 41.34%,rgba(178,189,255,0.385) 0%,rgba(178,189,255,0.385) 16%,rgba(178,189,255,0.034) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 3.70px at 16.41% 93.67%,rgba(107,168,255,0.243) 0%,rgba(107,168,255,0.243) 16%,rgba(107,168,255,0.021) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 5.41px at 55.30% 87.52%,rgba(204,230,255,0.212) 0%,rgba(204,230,255,0.212) 16%,rgba(204,230,255,0.019) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.48px at 102.69% 24.24%,rgba(178,189,255,0.399) 0%,rgba(178,189,255,0.399) 16%,rgba(178,189,255,0.035) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 5.25px at 43.01% 78.06%,rgba(178,189,255,0.448) 0%,rgba(178,189,255,0.448) 16%,rgba(178,189,255,0.039) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 3.97px at 72.85% 99.70%,rgba(107,168,255,0.426) 0%,rgba(107,168,255,0.426) 16%,rgba(107,168,255,0.037) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 3.42px at 28.28% 18.13%,rgba(140,235,250,0.227) 0%,rgba(140,235,250,0.227) 16%,rgba(140,235,250,0.020) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 8.45px at 10.28% 36.25%,rgba(158,209,255,0.343) 0%,rgba(158,209,255,0.343) 16%,rgba(158,209,255,0.030) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 4.68px at 101.43% 4.89%,rgba(158,209,255,0.366) 0%,rgba(158,209,255,0.366) 16%,rgba(158,209,255,0.032) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 3.73px at 104.05% 16.60%,rgba(204,230,255,0.287) 0%,rgba(204,230,255,0.287) 16%,rgba(204,230,255,0.025) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 3.96px at 5.91% 71.06%,rgba(204,230,255,0.317) 0%,rgba(204,230,255,0.317) 16%,rgba(204,230,255,0.028) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 8.53px at 20.81% -4.28%,rgba(140,235,250,0.409) 0%,rgba(140,235,250,0.409) 16%,rgba(140,235,250,0.036) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 6.16px at 61.53% 14.25%,rgba(107,168,255,0.510) 0%,rgba(107,168,255,0.510) 16%,rgba(107,168,255,0.045) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 5.85px at 81.73% 5.15%,rgba(107,168,255,0.377) 0%,rgba(107,168,255,0.377) 16%,rgba(107,168,255,0.033) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 7.82px at -7.31% 8.67%,rgba(178,189,255,0.257) 0%,rgba(178,189,255,0.257) 16%,rgba(178,189,255,0.023) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.80px at 71.86% 106.80%,rgba(204,230,255,0.459) 0%,rgba(204,230,255,0.459) 16%,rgba(204,230,255,0.040) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.49px at 102.51% 71.11%,rgba(204,230,255,0.371) 0%,rgba(204,230,255,0.371) 16%,rgba(204,230,255,0.033) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 7.00px at 59.15% 53.33%,rgba(204,230,255,0.477) 0%,rgba(204,230,255,0.477) 16%,rgba(204,230,255,0.042) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 5.86px at 102.09% 0.27%,rgba(140,235,250,0.312) 0%,rgba(140,235,250,0.312) 16%,rgba(140,235,250,0.027) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 5.30px at -4.36% 20.28%,rgba(204,230,255,0.324) 0%,rgba(204,230,255,0.324) 16%,rgba(204,230,255,0.028) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.66px at 94.44% 102.05%,rgba(140,235,250,0.300) 0%,rgba(140,235,250,0.300) 16%,rgba(140,235,250,0.026) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 3.34px at 96.45% -0.04%,rgba(107,168,255,0.520) 0%,rgba(107,168,255,0.520) 16%,rgba(107,168,255,0.046) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 5.24px at 73.48% 2.67%,rgba(178,189,255,0.511) 0%,rgba(178,189,255,0.511) 16%,rgba(178,189,255,0.045) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.91px at 78.57% 93.14%,rgba(158,209,255,0.546) 0%,rgba(158,209,255,0.546) 16%,rgba(158,209,255,0.048) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 6.60px at 67.71% 38.61%,rgba(140,235,250,0.520) 0%,rgba(140,235,250,0.520) 16%,rgba(140,235,250,0.046) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 6.29px at 46.08% 80.27%,rgba(140,235,250,0.252) 0%,rgba(140,235,250,0.252) 16%,rgba(140,235,250,0.022) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 5.35px at 9.19% 50.67%,rgba(158,209,255,0.522) 0%,rgba(158,209,255,0.522) 16%,rgba(158,209,255,0.046) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 7.28px at 34.25% 35.81%,rgba(204,230,255,0.459) 0%,rgba(204,230,255,0.459) 16%,rgba(204,230,255,0.040) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 4.00px at 20.55% 12.02%,rgba(158,209,255,0.368) 0%,rgba(158,209,255,0.368) 16%,rgba(158,209,255,0.032) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 6.66px at -7.00% 38.56%,rgba(178,189,255,0.510) 0%,rgba(178,189,255,0.510) 16%,rgba(178,189,255,0.045) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 4.70px at 0.57% 21.25%,rgba(107,168,255,0.485) 0%,rgba(107,168,255,0.485) 16%,rgba(107,168,255,0.043) 45%,rgba(107,168,255,0) 100%),
    radial-gradient(circle 4.75px at 86.59% 73.99%,rgba(204,230,255,0.346) 0%,rgba(204,230,255,0.346) 16%,rgba(204,230,255,0.030) 45%,rgba(204,230,255,0) 100%),
    radial-gradient(circle 5.44px at 15.85% 11.41%,rgba(140,235,250,0.264) 0%,rgba(140,235,250,0.264) 16%,rgba(140,235,250,0.023) 45%,rgba(140,235,250,0) 100%),
    radial-gradient(circle 4.60px at 2.56% 53.70%,rgba(158,209,255,0.510) 0%,rgba(158,209,255,0.510) 16%,rgba(158,209,255,0.045) 45%,rgba(158,209,255,0) 100%),
    radial-gradient(circle 5.45px at 11.03% 51.77%,rgba(178,189,255,0.310) 0%,rgba(178,189,255,0.310) 16%,rgba(178,189,255,0.027) 45%,rgba(178,189,255,0) 100%),
    radial-gradient(circle 5.85px at 73.91% 26.09%,rgba(158,209,255,0.262) 0%,rgba(158,209,255,0.262) 16%,rgba(158,209,255,0.023) 45%,rgba(158,209,255,0) 100%);
}

/* ── Icoontjes ───────────────────────────────────────────────────── */

/* Eén set lijnicoontjes in de vormtaal van de apps: dunne lijnen,
   ronde uiteinden. Ze erven hun kleur van de tekst eromheen. */

.sprite {
  display: none;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}

/* ── Kop ─────────────────────────────────────────────────────────── */

.site-header {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  /* Zonder wrap duwen de merken en de navigatie samen de pagina breder dan
     een telefoonscherm, en scrollt de hele site opzij. */
  flex-wrap: wrap;
}

/* ── Het menu op een telefoon ────────────────────────────────────── */

/* Een knop zonder JavaScript: het is een selectievakje dat zichzelf als cirkel
   met drie puntjes tekent. Aan- en uitzetten doet de browser zelf, dus het
   werkt ook met een toetsenbord — en de site houdt script-src 'none'. */

.menu-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 0;
  background-color: var(--glass);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 2.5px at 13px 20px, #fff 100%, transparent 0),
    radial-gradient(circle 2.5px at 20px 20px, #fff 100%, transparent 0),
    radial-gradient(circle 2.5px at 27px 20px, #fff 100%, transparent 0),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, 0.07) 100%
    );
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-edge),
    0 6px 16px rgba(4, 7, 20, 0.3);
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:checked {
  background-color: var(--glass-strong);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--pin);
  outline-offset: 3px;
}

.app-marks {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  text-decoration: none;
}

.app-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-mark img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
}

/* Het icoon van Uitgeleend ligt qua kleur dicht bij de balk; een randje leest
   daar als een kader om het logo. Gekozen op bestandsnaam, zodat het blijft
   kloppen als de volgorde van de twee merken wisselt. */
.app-mark img[src*="uitgeleend"] {
  border-color: transparent;
}

/* Op een telefoon zakt de navigatie onder de merken; de namen blijven staan,
   alleen wat compacter. Pas op een heel smal scherm gaan ze eraf en blijven de
   icoontjes over. */


.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.95rem;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.site-nav a:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .app-marks {
    gap: 14px;
  }

  .app-mark {
    gap: 8px;
    font-size: 0.92rem;
  }

  .app-mark img {
    width: 38px;
    height: 38px;
  }

  .menu-toggle {
    display: block;
  }

  /* De links verdwijnen in het menu en klappen eronder uit als een glazen
     paneel, rechts uitgelijnd onder de knop. */
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: rgba(10, 18, 50, 0.72);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 18px 40px rgba(4, 7, 20, 0.45);
  }

  .menu-toggle:checked ~ .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 11px 14px;
    border-radius: 9px;
    color: var(--ink);
  }

  .site-nav a:hover {
    background: var(--glass);
  }
}

@media (max-width: 360px) {
  .app-mark span {
    display: none;
  }
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(28px, 5vw, 52px);
  padding-bottom: clamp(40px, 7vw, 72px);
}

/* De sectie die op het heroblok volgt brengt zijn eigen bovenruimte mee; samen
   met de onderkant van de hero werd dat een gat. De hero bepaalt de afstand. */
.hero + section {
  padding-top: 0;
}

/* Op de tekstpagina's staat de kop direct onder de balk; daar hoort dezelfde
   krappere bovenruimte als in het heroblok. */
main > section:first-child:not(.hero) {
  padding-top: clamp(28px, 5vw, 52px);
}

.hero p.lead {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--ink-soft);
}

.pin-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pin-line svg {
  color: var(--pin);
  flex: none;
}

/* ── Appkaarten ──────────────────────────────────────────────────── */

.apps {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.app-card {
  --accent: var(--navy);
  --accent-soft: var(--navy-soft);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Bewust geen backdrop-filter: dat maakt van de kaart een eigen
     achtergrondlaag, en dan heeft het glas erop niets meer om te breken. */
  background: var(--card);
}

.app-card.mijn-spullen {
  --accent: var(--green);
  --accent-soft: var(--green-soft);
}

.app-card img {
  width: 76px;
  border-radius: 18px;
  margin-bottom: 18px;
}

.app-card h2 {
  color: var(--accent);
  font-size: 1.5rem;
}

.app-card .claim {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.7em;
}

.app-card ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}

.app-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.app-card li .icon {
  width: 19px;
  height: 19px;
  margin-top: 4px;
  color: var(--accent);
}

/* Liquid glass, zo dicht als het web komt.
   Wat het effect maakt is niet de vervaging maar het licht in de rand: een
   lens breekt het aan twee tegenoverliggende zijden, niet alleen bovenaan.
   Daarom twee tegengestelde binnenlichten, een saturatie die de kleuren
   eronder oppept, en maar een klein beetje blur — glas breekt, het vervaagt
   nauwelijks. */
.badge {
  position: relative;
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--glass-fill);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow:
    var(--glass-edge),
    0 5px 18px rgba(4, 7, 20, 0.45);
}

/* Het lichtje dat over de bolling loopt. */
.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

/* ── Uitleg in drie stappen ──────────────────────────────────────── */

.band {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.steps {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 34px;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(4, 7, 20, 0.45);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pin);
  flex: none;
}

.step-head .icon {
  color: var(--pin);
}

.steps p {
  color: var(--ink-soft);
  margin: 0;
}

/* ── Belofte ─────────────────────────────────────────────────────── */

.promise {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 30px;
}

.promise .icon {
  color: var(--pin);
  margin-bottom: 12px;
}

.promise h3 {
  margin-bottom: 0.3em;
}

.promise p {
  color: var(--ink-soft);
  margin: 0;
}

/* ── Tekstpagina's ───────────────────────────────────────────────── */

.page-body h2 {
  margin-top: 1.8em;
}

.page-body ul {
  max-width: var(--measure);
  color: var(--ink-soft);
  padding-left: 22px;
}

.page-body li {
  margin-bottom: 8px;
}

.page-body a {
  color: var(--pin);
}

.updated {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ── Tekstpagina's in kaarten ────────────────────────────────────── */

/* Privacy is veel tekst achter elkaar; in losse glazen blokken met een icoon
   per onderwerp wordt het te scannen in plaats van te lezen. */

.prose-cards {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

.prose-card {
  padding: clamp(22px, 3.5vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.prose-card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0.6em;
  font-size: 1.2rem;
}

.prose-card h2 .icon {
  color: var(--pin);
}

.prose-card > :last-child {
  margin-bottom: 0;
}

.prose-card p,
.prose-card ul {
  color: var(--ink-soft);
}

.prose-card ul {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.prose-card li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

.prose-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pin);
}

/* Het blok dat de kern samenvat mag eruit springen. */
.prose-card.lead-card {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border-color: var(--glass-line);
}

.prose-card.lead-card p {
  color: var(--ink);
  font-size: 1.05rem;
}

/* ── Contactformulier ────────────────────────────────────────────── */

.form-veld {
  display: block;
  margin-bottom: 18px;
}

.form-veld > span {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.95rem;
}

.form-veld input,
.form-veld textarea {
  display: block;
  width: 100%;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(4, 7, 20, 0.28);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.form-veld textarea {
  min-height: 160px;
  resize: vertical;
}

.form-veld input:focus,
.form-veld textarea:focus {
  outline: 2px solid var(--pin);
  outline-offset: 1px;
  border-color: transparent;
}

.form-veld input::placeholder,
.form-veld textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

/* Het lokvakje voor bots. Buiten beeld in plaats van display:none, zodat een
   bot die alleen op zichtbaarheid let er alsnog intrapt. */
.lokvak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-knop {
  display: inline-block;
  margin-top: 4px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--glass-fill);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.04) 100%
  );
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow:
    var(--glass-edge),
    0 5px 18px rgba(4, 7, 20, 0.45);
}

.form-knop:hover {
  background-color: rgba(4, 7, 20, 0.02);
}

.form-toelichting {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ── Voet ────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 32px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  background: var(--bar);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
}