/* Layout: donkere nevel als vaste achtergrond, linksgeplaatste hero, open secties met glazen vlakken alleen waar tekst leesbaarheid nodig heeft.
     Kleur: de logo-kleuren (koraal, turquoise, marine) op een nachtblauwe basis. Type: Zen Dots voor koppen, Nunito Sans voor tekst. */
  :root {
    --bg: #070B1A;
    --ink: #F4F6FB;
    --muted: #B3BCD6;
    --coral: #FF6B5A;
    --teal: #2EC4B6;
    --navy: #14213D;
    --glass: rgba(9, 14, 34, 0.62);
    --line: rgba(255, 255, 255, 0.16);
    --font-display: 'Zen Dots', 'Arial Black', Impact, sans-serif;
    --font-body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --gutter: clamp(16px, 4vw, 32px);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
  }
  .sky {
    position: fixed; inset: 0; z-index: -2;
    background: var(--bg) url("/nevel.jpg") center / cover no-repeat;
  }
  .veil {
    position: fixed; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgba(7,11,26,.25) 0%, rgba(7,11,26,.62) 38%, rgba(7,11,26,.86) 70%, rgba(7,11,26,.94) 100%);
  }
  .in {
    width: min(1120px, 100%);
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

  /* Header */
  header .in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; flex-wrap: wrap; }
  .mark { font-family: var(--font-display); font-size: 28px; letter-spacing: -1px; text-decoration: none; line-height: 1; }
  .mark .a { color: var(--coral); } .mark .b { color: var(--teal); } .mark .c { color: #fff; }
  nav { display: flex; gap: clamp(14px, 3vw, 30px); font-weight: 700; font-size: 15px; flex-wrap: wrap; }
  nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
  nav a:hover { color: #fff; }

  /* Hero */
  .hero .in { padding-block: clamp(56px, 12vw, 150px) clamp(48px, 9vw, 110px); }
  .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 22px; }
  h1 {
    font-family: var(--font-display); font-weight: 400; margin: 0;
    font-size: clamp(2.5rem, 9.5vw, 6.4rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
  }
  h1 span { display: block; }
  h1 .w1 { color: var(--coral); } h1 .w2 { color: var(--teal); } h1 .w3 { color: #fff; }
  .lead { max-width: 40rem; font-size: clamp(18px, 2.4vw, 22px); color: #E3E8F6; margin: 30px 0 0; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
  .btn {
    display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 16px;
    text-decoration: none; border: 2px solid transparent; transition: transform .2s, background .2s, border-color .2s;
  }
  .btn-main { background: var(--coral); color: #1a0b09; }
  .btn-main:hover { transform: translateY(-2px); background: #ff8071; }
  .btn-ghost { border-color: var(--line); color: #fff; background: rgba(9,14,34,.35); }
  .btn-ghost:hover { border-color: var(--teal); }

  /* Secties */
  section { scroll-margin-top: 12px; }
  .block .in { padding-block: clamp(44px, 8vw, 96px); }
  h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.12; margin: 0 0 18px; letter-spacing: -.01em; text-wrap: balance; max-width: 22ch; }
  .intro { max-width: 40rem; color: var(--muted); margin: 0 0 40px; }

  .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
  .pillar {
    background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 28px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 0;
  }
  .pillar h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 0 0 6px; }
  .pillar .tag { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
  .pillar p { margin: 0 0 16px; color: #DDE3F3; }
  .pillar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .pillar li { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; }
  .p1 h3 { color: var(--coral); } .p2 h3 { color: var(--teal); } .p3 h3 { color: #fff; }

  /* Vindbaarheid */
  .find { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
  .find > div { padding: 26px 26px 26px 0; min-width: 0; }
  .find > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
  .find h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 4px; color: var(--teal); }
  .find .sub { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
  .find p { margin: 0; color: #DDE3F3; }
  @media (max-width: 700px) {
    .find > div, .find > div + div { padding: 22px 0; border-left: 0; }
    .find > div + div { border-top: 1px solid var(--line); }
  }

  /* Werkwijze */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px; counter-reset: s; }
  .steps li { counter-increment: s; padding-top: 18px; border-top: 3px solid var(--coral); min-width: 0; }
  .steps li:nth-child(2) { border-top-color: var(--teal); }
  .steps li:nth-child(3) { border-top-color: #fff; }
  .steps li:nth-child(4) { border-top-color: var(--line); }
  .steps h3 { font-size: 1.15rem; margin: 0 0 8px; font-weight: 800; }
  .steps h3::before { content: counter(s) ". "; color: var(--muted); }
  .steps p { margin: 0; color: #DDE3F3; font-size: 16px; }

  /* Over */
  .about { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 5vw, 52px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .about p { max-width: 44rem; margin: 0 0 14px; color: #E3E8F6; font-size: 18px; }
  .about p:last-child { margin-bottom: 0; }

  /* Contact */
  .contact .in { padding-block: clamp(48px, 9vw, 110px) clamp(40px, 7vw, 80px); }
  .mailrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
  .mail { font-family: var(--font-display); font-size: clamp(1.05rem, 3.6vw, 1.7rem); color: var(--teal); user-select: all; overflow-wrap: anywhere; }
  .copy { font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; padding: 9px 18px; border-radius: 999px; border: 2px solid var(--line); background: rgba(9,14,34,.45); color: #fff; }
  .copy:hover { border-color: var(--teal); }
  .note { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--muted); }

  /* Banden over de volle breedte, afwisselend met de nevel */
  .band-navy { background: var(--navy); }
  .band-navy .pillar { background: rgba(255,255,255,.05); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .band-light { background: #F2F4FA; color: #1B2540; }
  .band-light h2 { color: var(--navy); }
  .band-light .intro { color: #4A5675; }
  .band-light .steps li { border-top-color: var(--coral); }
  .band-light .steps li:nth-child(2) { border-top-color: #1A9E92; }
  .band-light .steps li:nth-child(3) { border-top-color: var(--navy); }
  .band-light .steps li:nth-child(4) { border-top-color: #B9C0D6; }
  .band-light .steps h3 { color: var(--navy); }
  .band-light .steps h3::before { color: #6B7694; }
  .band-light .steps p { color: #3B4560; }

  .band-coral { background: var(--coral); color: var(--navy); }
  .band-coral h2 { color: var(--navy); }
  .band-coral .intro { color: #2B1411; }
  .band-coral .mail { color: var(--navy); }
  .band-coral .copy { border-color: var(--navy); background: transparent; color: var(--navy); }
  .band-coral .copy:hover { background: var(--navy); color: #fff; }
  .band-coral .note { color: #2B1411; }
  .band-coral :focus-visible { outline-color: var(--navy); }

  footer { background: var(--bg); }
  footer .in { padding-block: 28px calc(28px); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, nav a { transition: none; }
  }

/* Subpagina's */
.pillar li a { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.pillar li a:hover { color: var(--teal); }
.crumb { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 22px; }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: #fff; }
.page-h1 { font-size: clamp(2.2rem, 8vw, 5rem); }
.pillars-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.intro a { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; font-weight: 700; white-space: nowrap; }
.intro a:hover { color: #fff; }