/* ══════════════════════════════════════════════════════════
   MARQETING — COMPONENTEN
   ══════════════════════════════════════════════════════════
   Hoort na tokens.css. Elke regel gebruikt een token.

   Eén ding om te onthouden bij het uitbreiden: schaduwen krijgen
   altijd een negatieve spread. `0 20px 40px rgba(...)` waaiert
   rond het element heen en leest als een gloed; met `-24px` erbij
   valt hij eronder en leest het als hoogte.
   ══════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-basis);
  font-weight: var(--w-tekst);
  line-height: var(--lh-tekst);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mq-breedte { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); }
.mq-smal    { max-width: 860px; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--gr-700);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ── typografie ─────────────────────────────────────────────
   700 en 800. Niet 500. Dit is de duidelijkste drager van de
   Webgroeiers-taal: koppen die staan. */
.mq-kop-l, .mq-kop-m, .mq-kop-s {
  margin: 0;
  line-height: var(--lh-kop);
  text-wrap: balance;
}
.mq-kop-l { font-size: var(--t-kop-l); font-weight: var(--w-zwaar); letter-spacing: var(--tr-groot); }
.mq-kop-m { font-size: var(--t-kop-m); font-weight: var(--w-vet);   letter-spacing: var(--tr-mid); line-height: 1.12; }
.mq-kop-s { font-size: var(--t-kop-s); font-weight: var(--w-zwaar); letter-spacing: var(--tr-klein); line-height: 1.35; }

/* Een woord in de kop dat het verloop draagt. Spaarzaam: één per
   pagina, hooguit twee. Met een terugval erin, want als
   background-clip niet werkt is de tekst anders onzichtbaar. */
.mq-glans {
  color: var(--gr-700);
}
@supports (-webkit-background-clip: text) {
  .mq-glans {
    /* gr-600 in het midden en niet gr-500: #10B981 haalt op wit
       2,65:1 en dat is ook voor 58px te weinig (3:1). Met gr-600
       haalt het laagste punt 3,77. */
    background: linear-gradient(120deg, var(--gr-700) 0%, var(--gr-600) 44%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.mq-lead  { font-size: var(--t-groot); color: var(--inkt-2); margin: 0; max-width: 54ch; line-height: 1.55; }
.mq-tekst { color: var(--inkt-2); margin: 0; }
.mq-klein { font-size: var(--t-klein); color: var(--inkt-2); }

.mq-label {
  display: inline-block;
  font-size: var(--t-mini);
  font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gr-700);
}
.mq-cijfer { font-variant-numeric: tabular-nums; }

a { color: inherit; }

/* Op een donker vlak wisselt alleen de inkt, niet de opbouw. */
.mq-op-donker { color: var(--op-donker); }
.mq-op-donker .mq-tekst,
.mq-op-donker .mq-lead,
.mq-op-donker .mq-klein { color: var(--op-donker-2); }
/* gr-100 en niet gr-300: op de lichtste plek van --v-diep haalt
   300 maar 3,5 en dit staat op 12,5px. */
.mq-op-donker .mq-label { color: var(--gr-100); }

/* ── het lampje ─────────────────────────────────────────────
   Het beeldmerk van Marqeting: er is iemand, de lijn staat open.
   De ring eromheen pulseert één keer per vier seconden — traag
   genoeg om niet aan je aandacht te trekken, zichtbaar genoeg om
   te zeggen dat het live is. */
.mq-lampje {
  position: relative;
  display: inline-block; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gr-500);
}
.mq-lampje::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gr-500);
  animation: mq-puls 4s var(--soepel) infinite;
}
@keyframes mq-puls {
  0%       { transform: scale(1);   opacity: .7 }
  22%, 100%{ transform: scale(3.2); opacity: 0  }
}

/* ══ KNOPPEN ═══════════════════════════════════════════════
   De pil van webgroeiers.nl: tekst links, een rond vlak rechts
   met een pijl erin. Het ronde vlak schuift bij hover naar
   rechts. Dat is de knop die overal terugkomt.

   Drie versies. Wit staat op een gekleurd of donker vlak, donker
   staat op wit, groen is voor als er twee knoppen naast elkaar
   staan en er één voorop moet lopen. */
.mq-pil {
  display: inline-flex; align-items: center; gap: var(--r-4);
  padding: 7px 7px 7px 22px;
  border: 1px solid transparent;
  border-radius: var(--rond-pil);
  font: inherit; font-size: var(--t-basis); font-weight: var(--w-vet);
  letter-spacing: var(--tr-klein);
  line-height: 1.4;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--duur) var(--veer),
              box-shadow var(--duur) var(--soepel),
              background var(--duur-kort) var(--soepel);
}
.mq-pil__rond {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: transform var(--duur) var(--veer);
}
.mq-pil__rond svg { width: 15px; height: 15px; display: block; }
.mq-pil:hover { transform: translateY(-1px); }
.mq-pil:hover .mq-pil__rond { transform: translateX(4px); }
.mq-pil:active { transform: translateY(0); }

.mq-pil--wit    { background: var(--wit); color: var(--inkt); box-shadow: var(--sch-2); }
.mq-pil--wit    .mq-pil__rond { background: var(--inkt); color: var(--wit); }
.mq-pil--wit:hover { box-shadow: var(--sch-3); }

.mq-pil--donker { background: var(--inkt); color: var(--wit); box-shadow: var(--sch-2); }
.mq-pil--donker .mq-pil__rond { background: var(--gr-400); color: var(--gr-900); }
.mq-pil--donker:hover { background: #16241F; box-shadow: var(--sch-3); }

.mq-pil--groen  { background: var(--gr-700); color: var(--wit); box-shadow: var(--sch-groen); }
.mq-pil--groen  .mq-pil__rond { background: rgba(255,255,255,.16); color: var(--wit); }
.mq-pil--groen:hover { background: var(--gr-800); }

/* Dezelfde vorm zonder vulling, voor de tweede knop van een paar. */
.mq-pil--kaal { background: none; color: var(--inkt); border-color: var(--lijn); box-shadow: none; }
.mq-pil--kaal .mq-pil__rond { background: var(--vlak); color: var(--inkt); }
.mq-pil--kaal:hover { border-color: var(--lijn-groen); background: rgba(255,255,255,.6); }
.mq-op-donker .mq-pil--kaal { color: var(--wit); border-color: var(--lijn-op-donker); }
.mq-op-donker .mq-pil--kaal .mq-pil__rond { background: rgba(255,255,255,.14); color: var(--wit); }
.mq-op-donker .mq-pil--kaal:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

.mq-pil--klein { padding: 5px 5px 5px 16px; font-size: var(--t-klein); gap: var(--r-3); }
.mq-pil--klein .mq-pil__rond { width: 30px; height: 30px; }
.mq-pil--klein .mq-pil__rond svg { width: 13px; height: 13px; }

/* Een tekstlink die vooruit wijst. */
.mq-verder {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-klein); font-weight: var(--w-vet);
  color: var(--gr-700); text-decoration: none;
}
.mq-verder::after { content: "→"; transition: transform var(--duur) var(--veer); }
.mq-verder:hover::after { transform: translateX(4px); }
.mq-op-donker .mq-verder { color: var(--gr-100); }

/* ══ CHIP ══════════════════════════════════════════════════ */
.mq-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: var(--rond-pil);
  background: var(--wit); color: var(--inkt-2);
  border: 1px solid var(--lijn);
  font-size: var(--t-mini); font-weight: var(--w-vet);
  white-space: nowrap;
}
.mq-chip--groen { background: var(--gr-50); color: var(--gr-800); border-color: var(--lijn-groen); }
.mq-chip--glas  { background: rgba(255,255,255,.12); color: var(--op-donker); border-color: var(--lijn-op-donker); backdrop-filter: blur(6px); }

/* ══ KAARTEN ═══════════════════════════════════════════════
   Vier soorten, en het verschil zit in hoeveel kleur ze dragen.
   Wit is de standaard; het verloop is voor de kaart die de
   sectie draagt. Alles op één rij dezelfde soort is saai, alles
   verschillend is rommel — één uitgelichte per rij. */
.mq-kaart {
  position: relative;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: var(--r-8);
  transition: transform var(--duur) var(--veer),
              box-shadow var(--duur) var(--soepel),
              border-color var(--duur) var(--soepel);
}
.mq-kaart--verloop { background: var(--v-kaart); border-color: transparent; }
.mq-kaart--vol     { background: var(--v-kaart-vol); border-color: transparent; }
.mq-kaart--diep    { background: var(--v-diep); border-color: transparent; color: var(--op-donker); }
.mq-kaart--vlak    { background: var(--vlak); border-color: var(--lijn-fijn); }

/* Alleen waar het iets betekent: een kaart waar je op klikt of
   die de aandacht moet trekken. Niet op alles. */
.mq-kaart--tilt:hover {
  transform: translateY(-4px);
  box-shadow: var(--sch-3);
  border-color: var(--lijn-groen);
}

/* Verlooprand zonder kleurvlak: twee lagen achtergrond, waarvan
   de bovenste tot aan de padding-box loopt en de onderste tot de
   border-box. Wat je tussen die twee ziet is de rand. */
.mq-kaart--rand {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--wit), var(--wit)) padding-box,
    var(--v-rand) border-box;
}

/* ══ VLAKKEN ═══════════════════════════════════════════════
   Het ritme van de pagina. Wit → zacht → wit → diep → zacht.
   Twee gekleurde vlakken achter elkaar zetten werkt niet: dan
   verdwijnt het verschil en is de kleur voor niets. */
.mq-vlak       { position: relative; padding-block: var(--r-sectie); }
.mq-vlak--kort { padding-block: clamp(48px, 6vw, 76px); }
.mq-vlak--lang { padding-block: clamp(80px, 10vw, 144px); }
.mq-vlak--zacht{ background: var(--vlak); }
.mq-vlak--groen{ background: var(--v-vlak); }
.mq-vlak--diep { background: var(--v-diep); color: var(--op-donker); }
.mq-vlak--koel { background: var(--v-koel); }

/* Een fijn rasterpatroon over een donker vlak. Geen plaatje: een
   verloop dat zichzelf herhaalt, dus het kost niets en het is op
   elke schermdichtheid scherp. */
.mq-raster::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
.mq-vlak > * { position: relative; }

/* ══ SECTIEKOP ═════════════════════════════════════════════ */
.mq-sectiekop { display: flex; flex-direction: column; gap: var(--r-4); max-width: 60ch; }
.mq-sectiekop--midden { margin-inline: auto; text-align: center; align-items: center; }

/* ══ RASTER ════════════════════════════════════════════════
   min-width:0 op de kinderen, anders duwt één breed codeblok de
   hele pagina breder dan het scherm. Dat merk je pas op een
   telefoon en dan is het al live. */
.mq-rooster { display: grid; gap: var(--r-6); }
.mq-rooster > * { min-width: 0; }
@media (min-width: 720px) { .mq-rooster--2, .mq-rooster--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mq-rooster--3 { grid-template-columns: repeat(3, 1fr); } }

/* ══ CODE ══════════════════════════════════════════════════ */
.mq-code {
  max-width: 100%; margin: 0;
  background: var(--zwart); color: #D7E6E0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rond-l);
  padding: var(--r-6);
  font-family: var(--letter-data); font-size: 13px;
  line-height: 1.75; overflow-x: auto;
}
.mq-code .c-sleutel { color: var(--gr-300); }
.mq-code .c-tekst   { color: #7DD3FC; }
.mq-code .c-uitleg  { color: #6B7F78; }

/* ══ LIJST ═════════════════════════════════════════════════ */
.mq-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r-3); }
.mq-lijst li {
  display: flex; gap: var(--r-3); align-items: flex-start;
  font-size: var(--t-klein); color: var(--inkt-2); line-height: 1.5;
}
.mq-lijst li::before {
  content: ""; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gr-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  margin-top: 2px;
}
.mq-op-donker .mq-lijst li { color: var(--op-donker-2); }
.mq-op-donker .mq-lijst li::before { background-color: rgba(255,255,255,.14); }

/* ══ BINNENKOMEN ═══════════════════════════════════════════
   Elementen komen van onderen in beeld zodra ze in beeld komen.
   De klasse staat vanaf het begin in de HTML en site.js haalt
   hem eraf; zonder JS is er dus geen onzichtbare pagina, want
   .mq-kom is alleen actief als <html> de klasse js draagt. */
.js .mq-kom {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duur-lang) var(--soepel),
              transform var(--duur-lang) var(--veer);
}
.js .mq-kom.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .mq-kom { opacity: 1; transform: none; }
}