/* ============================================================
   VvEMaat — marketingsite
   ============================================================

   ── De gedachte ──────────────────────────────────────────

   Een vereniging van eigenaars gaat over één ding: een gebouw. Niet over
   dashboards, niet over workflows — over stenen, een dak, een lift en de
   mensen die er wonen.

   Vandaar de blauwdruk. De hele site is opgebouwd als technisch tekenwerk:
   maatlijnen, hulplijnen, coördinaten, een gevelaanzicht dat meeschuift. Dat
   is eerlijker dan de gebruikelijke SaaS-esthetiek met abstracte vormen, en
   het is meteen herkenbaar voor wie een splitsingsakte heeft opengeslagen.

   ── Kleur ────────────────────────────────────────────────

   Diep inktblauw met een groene ondertoon — het leiblauw van de applicatie,
   maar dan een paar tinten dieper zodat de lijnen kunnen oplichten. Drie
   accenten voor de drie merken, elk met een eigen temperatuur:

     VvEMaat   cyaan-groen   weten
     VvEdeal   amber         kiezen
     Budomatch koraal        doen

   ── Typografie ───────────────────────────────────────────

   Instrument Serif voor de koppen: een serif in software is ongebruikelijk en
   precies daarom onthoudt men hem. Archivo voor de tekst — technisch genoeg
   voor cijfers, warm genoeg voor een alinea. JetBrains Mono voor maatvoering
   en alles wat naar een tekening ruikt.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Blauwdruk */
  --inkt-950-rgb: 7, 12, 20;
  --inkt-950: rgb(var(--inkt-950-rgb));
  --inkt-900: #0b1220;
  --inkt-850: #101a2c;
  --inkt-800: #16233a;
  --inkt-700: #1e3050;
  --inkt-600: #2a4166;

  /* De kanalen apart, zodat een merk ze kan vervangen zonder elke
     doorzichtigheid opnieuw op te schrijven. De kleuren hieronder zijn
     daarvan afgeleid; wie alleen --lijn-rgb zet, krijgt alle drie mee. */
  --lijn-rgb:  126, 196, 214;
  --lijn:      rgba(var(--lijn-rgb), .16);
  --lijn-fel:  rgba(var(--lijn-rgb), .38);
  --lijn-zacht:rgba(var(--lijn-rgb), .07);

  --tekst:     #e6eef5;
  --tekst-mat: #93a8bd;
  --tekst-flauw: #5f748c;

  /* ── De drie merken ──────────────────────────────────────────────────
     Budomatch bestaat al en is goud; die kleur staat vast. VvEdeal schikt zich
     daarom naar koraal — twee gouden merken naast elkaar zijn niet van elkaar
     te onderscheiden, en van de drie is Budomatch degene met een gedrukt logo. */
  --maat-rgb: 79, 209, 197;
  --maat:  rgb(var(--maat-rgb));   /* cyaan-groen — weten */
  --deal-rgb: 246, 120, 92;
  --deal:  rgb(var(--deal-rgb));   /* koraal — kiezen */
  --budo-rgb: 212, 163, 38;
  --budo:  rgb(var(--budo-rgb));   /* goud — doen, de kleur van het bestaande merk */

  --maat-diep: #1a6f68;
  --deal-diep: #9c3f2c;
  --budo-diep: #8a6a15;

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Archivo', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', monospace;

  --maat-eenheid: 8px;
}

/* ── Grondslag ───────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body.mk {
  background: var(--inkt-950);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Het ruitjespapier waarop alles staat. Twee rasters over elkaar: een fijn
   raster van 8px en een grover van 80px, zoals op millimeterpapier. */
body.mk::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--lijn-zacht) 1px, transparent 1px),
    linear-gradient(90deg, var(--lijn-zacht) 1px, transparent 1px),
    linear-gradient(var(--lijn-zacht) 1px, transparent 1px),
    linear-gradient(90deg, var(--lijn-zacht) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 75%);
}

/* Korrel: zonder dit ziet een donker vlak er digitaal-glad uit, en dat past
   niet bij tekenpapier. */
body.mk::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.mk-vlak { position: relative; z-index: 2; }

.binnen {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* ── Typografie ──────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; }

h1 {
  font-size: clamp(46px, 7.5vw, 92px);
  letter-spacing: -.02em;
}
h2 {
  font-size: clamp(32px, 4.4vw, 54px);
  letter-spacing: -.015em;
}
h3 { font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -.01em; }

.cursief { font-style: italic; }

.maatlabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-flauw);
}

p { color: var(--tekst-mat); }
.leidend { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: var(--tekst-mat); }

a { color: inherit; }

/* ── Maatlijn: het herkenbaarste element van een bouwtekening ── */

.maatlijn {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--tekst-flauw); text-transform: uppercase;
}
.maatlijn::before, .maatlijn::after {
  content: ''; height: 1px; background: var(--lijn); flex: 1;
}
.maatlijn.links::before { display: none; }
.maatlijn.links::after { max-width: 200px; }

.hulplijn {
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--lijn) 0 6px, transparent 6px 12px);
}

/* ── Knoppen ─────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s;
  position: relative;
}

.knop.vol {
  background: var(--maat); color: var(--inkt-950);
  box-shadow: 0 0 0 0 rgba(var(--maat-rgb), .4);
}
.knop.vol:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(var(--maat-rgb), .5);
}

.knop.leeg {
  border-color: var(--lijn-fel); color: var(--tekst);
  background: rgba(255,255,255,.02);
}
.knop.leeg:hover { border-color: var(--maat); background: rgba(var(--maat-rgb), .07); }

.knop svg { width: 15px; height: 15px; }

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

.mk-balk {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(var(--inkt-950-rgb), .72);
  border-bottom: 1px solid var(--lijn);
}
.mk-balk .binnen {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.mk-merk {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--tekst);
}
.mk-merk strong {
  font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -.01em;
}
.mk-balk nav { display: flex; align-items: center; gap: 26px; }
.mk-balk nav a {
  font-size: 14px; color: var(--tekst-mat); text-decoration: none;
  transition: color .15s;
}
.mk-balk nav a:hover { color: var(--tekst); }

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

.held {
  position: relative;
  padding: clamp(52px, 7vw, 92px) 0 clamp(48px, 6vw, 84px);
  overflow: hidden;
}

.held-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}

.held-pil {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--lijn); border-radius: 100px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-mat);
  margin-bottom: 26px;
  background: rgba(255,255,255,.02);
}
.held-pil .stip {
  width: 6px; height: 6px; border-radius: 50%; background: var(--maat);
  box-shadow: 0 0 0 3px rgba(var(--maat-rgb), .18);
  animation: pols 2.4s ease-in-out infinite;
}
@keyframes pols {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--maat-rgb), .18); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--maat-rgb), .05); }
}

.held h1 { margin-bottom: 22px; }
.held h1 .accent { color: var(--maat); font-style: italic; }

.held .leidend { max-width: 52ch; margin-bottom: 34px; }

.held-acties { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 36px; }

.adresbalk {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--lijn); border-radius: 3px;
  background: rgba(255,255,255,.025);
  font-family: var(--mono); font-size: 12.5px; color: var(--tekst-mat);
}
.adresbalk svg { width: 13px; height: 13px; color: var(--maat); opacity: .8; }
.adresbalk strong { color: var(--tekst); font-weight: 500; }

/* ── Het gebouw ──────────────────────────────────────────── */

.gebouw-vak {
  position: relative;
  /* Iets buiten de kolom laten steken: de tekening is het onderwerp, niet een
     illustratie ernaast. */
  margin-right: -3%;
}
.gebouw-vak svg { width: 100%; height: auto; display: block; }

/* De tekening wordt opgebouwd alsof iemand hem uittekent. */
.trek {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: trekken 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes trekken { to { stroke-dashoffset: 0; } }

.vul { opacity: 0; animation: opdoemen .7s ease forwards; }
@keyframes opdoemen { to { opacity: 1; } }

/* ── Secties ─────────────────────────────────────────────── */

.sectie { padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.sectie + .sectie { border-top: 1px solid var(--lijn); }

.sectiekop { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 64px); }
.sectiekop .maatlabel { display: block; margin-bottom: 16px; }
.sectiekop h2 { margin-bottom: 18px; }

/* ── Het probleem: drie losse werelden ───────────────────── */

.rommel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--lijn);
  border: 1px solid var(--lijn);
}
.rommel-vak {
  background: var(--inkt-950); padding: 30px 26px;
  position: relative;
}
.rommel-vak .nr {
  font-family: var(--mono); font-size: 11px; color: var(--tekst-flauw);
  letter-spacing: .1em; margin-bottom: 14px; display: block;
}
.rommel-vak h3 { font-size: 20px; margin-bottom: 10px; }
.rommel-vak p { font-size: 14.5px; }

/* ── TRIO ────────────────────────────────────────────────── */

.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  position: relative;
}

/* De verbindende lijn: de drie merken zijn één keten, geen drie producten. */
/* De keten zichtbaar maken: de lijn loopt over de kaarten heen door de
   tussenruimte. Achter de kaarten zou hij nergens te zien zijn, en dan is het
   verband tussen de drie merken alleen een bewering in de tekst. */
.trio::before {
  content: '';
  position: absolute; top: 53px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--maat) 8%, var(--maat) 28%,
    var(--deal) 46%, var(--deal) 54%,
    var(--budo) 72%, var(--budo) 92%, transparent 100%);
  opacity: .55;
  /* Achter de kaarten. Lag hij ervoor, dan liep de lijn dwars door de tekst —
     zichtbaar zodra de kaart oplichtte bij hover. Nu is hij alleen te zien in
     de tussenruimte, wat precies de bedoeling is: de kaarten zijn de knopen,
     de lijn is wat ze verbindt. */
  z-index: 0; pointer-events: none;
}

/* Pijlpunten op de lijn: de keten heeft een richting. */
.trio::after {
  content: '';
  position: absolute; top: 47px; left: 8%; right: 8%; height: 14px;
  z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(135deg, transparent 45%, var(--deal) 45%, var(--deal) 55%, transparent 55%),
    linear-gradient(45deg, transparent 45%, var(--deal) 45%, var(--deal) 55%, transparent 55%);
  background-size: 8px 8px;
  background-position: 33.5% 3px, 33.5% 8px;
  background-repeat: no-repeat;
  opacity: .7;
}

.trio-kaart {
  position: relative; z-index: 1;
  border: 1px solid var(--lijn);
  /* Dekkend, met de gradient erover: anders schijnt de verbindingslijn door de
     kaart heen en leest de tekst er slecht op. */
  background:
    linear-gradient(170deg, rgba(255,255,255,.035), transparent 60%),
    var(--inkt-950);
  padding: 30px 26px 28px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s;
  text-decoration: none; display: block;
}
.trio-kaart:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(170deg, rgba(255,255,255,.06), transparent 60%),
    var(--inkt-900);
}

.trio-kaart[data-merk="maat"]:hover { border-color: var(--maat); }
.trio-kaart[data-merk="deal"]:hover { border-color: var(--deal); }
.trio-kaart[data-merk="budo"]:hover { border-color: var(--budo); }

.trio-nr {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  background: var(--inkt-950);
  margin-bottom: 22px;
  /* Boven de verbindingslijn, zodat die er netjes achter verdwijnt en het
     nummer als knooppunt in de keten leest. */
  position: relative; z-index: 4;
}
.trio-kaart[data-merk="maat"] .trio-nr { border: 1px solid var(--maat); color: var(--maat); }
.trio-kaart[data-merk="deal"] .trio-nr { border: 1px solid var(--deal); color: var(--deal); }
.trio-kaart[data-merk="budo"] .trio-nr { border: 1px solid var(--budo); color: var(--budo); }

.trio-fase {
  font-family: var(--serif); font-size: 15px; font-style: italic;
  margin-bottom: 6px; display: block;
}
.trio-kaart[data-merk="maat"] .trio-fase { color: var(--maat); }
.trio-kaart[data-merk="deal"] .trio-fase { color: var(--deal); }
.trio-kaart[data-merk="budo"] .trio-fase { color: var(--budo); }

.trio-kaart h3 { margin-bottom: 12px; }
.trio-kaart p { font-size: 14.5px; margin-bottom: 18px; }

.trio-lijst { list-style: none; }
.trio-lijst li {
  font-size: 13.5px; color: var(--tekst-mat);
  padding: 7px 0 7px 20px; position: relative;
  border-top: 1px solid var(--lijn-zacht);
}
.trio-lijst li::before {
  content: '—'; position: absolute; left: 0; color: var(--tekst-flauw);
  font-family: var(--mono);
}

/* ── Schermen ────────────────────────────────────────────── */

.scherm-vak {
  border: 1px solid var(--lijn);
  background: var(--inkt-900);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.scherm-balk {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--lijn);
  background: var(--inkt-850);
}
.scherm-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--inkt-600); }
.scherm-adres {
  margin-left: 10px; font-family: var(--mono); font-size: 11px;
  color: var(--tekst-flauw);
}
.scherm-lijf { padding: 0; }

/* ── Cijfers ─────────────────────────────────────────────── */

.cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--lijn); border: 1px solid var(--lijn);
}
.cijfer { background: var(--inkt-950); padding: 28px 24px; }
.cijfer .waarde {
  font-family: var(--serif); font-size: clamp(34px, 4vw, 46px);
  line-height: 1; margin-bottom: 8px; color: var(--tekst);
}
.cijfer .waarde em { font-style: italic; color: var(--maat); }
.cijfer .bij { font-size: 13.5px; color: var(--tekst-mat); }

/* ── Prijs ───────────────────────────────────────────────── */

.prijsraster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: start;
}
.prijskaart {
  border: 1px solid var(--lijn); padding: 30px 28px;
  background: rgba(255,255,255,.02);
}
.prijskaart.onze {
  border-color: var(--maat);
  background: linear-gradient(165deg, rgba(var(--maat-rgb), .09), rgba(var(--maat-rgb), .02));
  position: relative;
}
.prijskaart .wie {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-flauw); margin-bottom: 12px;
}
.prijskaart.onze .wie { color: var(--maat); }
.prijskaart .bedrag {
  font-family: var(--serif); font-size: 52px; line-height: 1; margin-bottom: 4px;
}
.prijskaart .bedrag span { font-size: 17px; font-family: var(--sans); color: var(--tekst-mat); }
.prijsregels { list-style: none; margin-top: 22px; }
.prijsregels li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--lijn-zacht);
  font-size: 14px; color: var(--tekst-mat);
}
.prijsregels li strong { color: var(--tekst); font-weight: 500; }
.prijsregels .inbegrepen { color: var(--maat); font-size: 13px; }

.prijsvoet {
  margin-top: 26px; padding: 20px 24px;
  border: 1px solid var(--maat); background: rgba(var(--maat-rgb), .06);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.prijsvoet .groot {
  font-family: var(--serif); font-size: 27px; color: var(--tekst);
}

/* ── Staffel ─────────────────────────────────────────────── */

.staffel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--lijn); border: 1px solid var(--lijn);
  margin-top: 26px;
}
.staffel-vak { background: var(--inkt-950); padding: 20px 18px; text-align: center; }
.staffel-vak .naam { font-size: 13px; color: var(--tekst-mat); margin-bottom: 6px; }
.staffel-vak .prijs {
  font-family: var(--serif); font-size: 26px; color: var(--tekst); margin-bottom: 3px;
}
.staffel-vak .aantal { font-family: var(--mono); font-size: 11px; color: var(--tekst-flauw); }

/* ── Slot ────────────────────────────────────────────────── */

.slot {
  padding: clamp(80px, 11vw, 150px) 0;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--lijn);
}
.slot h2 { margin-bottom: 20px; }
.slot .leidend { max-width: 54ch; margin: 0 auto 34px; }

.mk-voet {
  border-top: 1px solid var(--lijn);
  padding: 44px 0 60px;
  font-size: 13.5px; color: var(--tekst-flauw);
}
.mk-voet .binnen {
  display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.mk-voet a { color: var(--tekst-mat); text-decoration: none; }
.mk-voet a:hover { color: var(--tekst); }
.voet-kolom { display: flex; flex-direction: column; gap: 9px; }
.voet-kop {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-flauw); margin-bottom: 4px;
}


/* ── Merknaam met het gedeelde deel in kleur ──────────────────────────────
   VvEMaat, VvEdeal, Budomatch. De eerste twee delen "VvE"; door dat deel de
   kleur van het merk te geven, leest de naam als onderdeel van een familie in
   plaats van als los product. Budomatch heeft dat voorvoegsel niet en krijgt
   daarom de "match" in kleur — dat is wat hij met de andere twee gemeen heeft. */

.merknaam { font-family: var(--serif); letter-spacing: -.01em; }
.merknaam .deel { transition: color .2s; }
.merknaam[data-merk="maat"] .deel { color: var(--maat); }
.merknaam[data-merk="deal"] .deel { color: var(--deal); }
.merknaam[data-merk="budo"] .deel { color: var(--budo); }

/* ── Formulier ────────────────────────────────────────────────────────────
   Dezelfde blauwdruktaal: velden als invulvakken op een tekening. */

.mk-kaart {
  border: 1px solid var(--lijn);
  background: linear-gradient(170deg, rgba(255,255,255,.035), transparent 70%);
  padding: clamp(26px, 3.4vw, 40px);
}

.veld { margin-bottom: 18px; }
.veld label {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-flauw);
}
.veld input, .veld select, .veld textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--lijn); border-radius: 2px;
  color: var(--tekst); font-family: var(--sans); font-size: 15px;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--maat);
  background: rgba(var(--maat-rgb), .05);
}
.veld input::placeholder { color: var(--tekst-flauw); }
.veld .hint { font-size: 12.5px; color: var(--tekst-flauw); margin-top: 6px; line-height: 1.5; }

.veld-rij { display: flex; gap: 16px; flex-wrap: wrap; }
.veld-rij > .veld { flex: 1; min-width: 180px; }

.knop.breed { width: 100%; justify-content: center; }

.melding {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 20px;
  border-left: 2px solid var(--lijn-fel);
  background: rgba(255,255,255,.03);
  font-size: 14px; color: var(--tekst-mat);
}
.melding.fout { border-left-color: var(--budo); background: rgba(246,120,92,.07); }
.melding.goed { border-left-color: var(--maat); background: rgba(var(--maat-rgb), .07); }
.melding svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.stapel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── De keten uitgeschreven ───────────────────────────────────────────── */

.keten { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
.keten-stap {
  background: var(--inkt-950); padding: 22px 26px;
  display: grid; grid-template-columns: 128px 1fr; gap: 24px; align-items: start;
}
.keten-wanneer {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--tekst-flauw); padding-top: 2px;
}
.keten-wanneer strong { display: block; color: var(--tekst-mat); font-weight: 500; }
.keten-merk {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 7px;
}
.keten-stap[data-merk="maat"] .keten-merk { color: var(--maat); }
.keten-stap[data-merk="deal"] .keten-merk { color: var(--deal); }
.keten-stap[data-merk="budo"] .keten-merk { color: var(--budo); }
.keten-stap[data-merk="vve"] .keten-merk { color: var(--tekst-mat); }
.keten-stap p { font-size: 14.5px; color: var(--tekst); line-height: 1.6; }
.keten-stap .gevolg {
  font-size: 13px; color: var(--tekst-mat); margin-top: 8px;
  padding-left: 14px; border-left: 1px solid var(--lijn);
}

@media (max-width: 700px) {
  .keten-stap { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Beweging bij binnenkomst ────────────────────────────── */

.komt-op { opacity: 0; transform: translateY(18px); }
.komt-op.zichtbaar {
  animation: omhoog .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes omhoog { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .komt-op, .komt-op.zichtbaar { opacity: 1; transform: none; animation: none; }
  .trek { stroke-dashoffset: 0; animation: none; }
  .vul { opacity: 1; animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Smaller scherm ──────────────────────────────────────── */

@media (max-width: 900px) {
  .held-raster { grid-template-columns: 1fr; }
  .gebouw-vak { max-width: 460px; margin: 0 auto; }
  .trio { grid-template-columns: 1fr; }
  .trio::before { display: none; }
  .prijsraster { grid-template-columns: 1fr; }
  .mk-balk nav a:not(.knop) { display: none; }
}

/* ── Woordmerk ────────────────────────────────────────────────────────────
   VvE in de drie kleuren van de familie: één letter per dienst. Het
   achtervoegsel blijft neutraal, zodat hetzelfde merk werkt voor Maat, deal en
   wat er verder bij komt. */

.woordmerk { letter-spacing: -.015em; white-space: nowrap; }
.wm-v { color: var(--maat); }
.wm-w { color: var(--deal); }
.wm-e { color: var(--budo); }
.wm-staart { color: var(--tekst); }

/* ── Honeypot ─────────────────────────────────────────────────────────────
   Een lokvakje voor bots: onzichtbaar voor mensen, wél leesbaar voor een
   script dat blind elk veld invult. Deze regel stond alleen in het stijlblad
   van de applicatie; op de marketingsite stond het veld dus gewoon in beeld —
   verwarrend voor de bezoeker en nutteloos als val, want een bot ziet nu dat
   het een val is. */

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ── Juridische tekst ─────────────────────────────────────────────────────
   Voorwaarden worden niet gelezen omdat ze niet te lezen zijn: één blok grijze
   tekst in acht punts. Deze opmaak geeft de lezer een kans — genummerde koppen,
   ruimte tussen de leden, en een regellengte waar het oog niet in verdwaalt. */

.jur { max-width: 68ch; }
.jur h3 {
  font-size: 21px; margin: 38px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--lijn);
}
.jur h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.jur h4 {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  margin: 20px 0 7px; color: var(--tekst);
}
.jur p { font-size: 15px; line-height: 1.72; margin-bottom: 14px; }
.jur ul, .jur ol { margin: 0 0 16px 0; padding-left: 22px; }
.jur li { font-size: 15px; line-height: 1.68; color: var(--tekst-mat); margin-bottom: 7px; }
.jur strong { color: var(--tekst); font-weight: 600; }
.jur a { color: var(--maat); text-decoration: underline; text-underline-offset: 2px; }

/* Een tabel met vier kolommen past niet op een telefoon. In plaats van hem te
   laten overlopen — waardoor de hele pagina zijwaarts schuift — krijgt hij een
   eigen scrollgebied met een randje dat aangeeft dat er meer is. */
.jur .tabelvak {
  overflow-x: auto; margin: 16px 0 22px;
  border: 1px solid var(--lijn); border-radius: 3px;
  -webkit-overflow-scrolling: touch;
}
.jur table {
  width: 100%; min-width: 460px;
  border-collapse: collapse; font-size: 14px;
}
.jur th, .jur td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.jur th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-flauw); font-weight: 400;
}
.jur td { color: var(--tekst-mat); }

.jur .nadruk {
  border-left: 2px solid var(--maat); padding: 14px 18px; margin: 20px 0;
  background: rgba(var(--maat-rgb), .06); font-size: 14.5px;
}
.jur .nadruk p:last-child { margin-bottom: 0; }