/* ============================================================
   EDITORIAL LAAG
   Laadt NA style.css en herschrijft de bestaande componenten naar de
   opmaak van test-homepage.html: geen omkaderde vakjes maar haarlijnen,
   grotere typografie, warmere achtergrond, uppercase pill-knoppen.

   Werkt op de HTML die er al staat, zodat alle pagina's mee veranderen
   zonder dat elke pagina herschreven moet worden. Wil je terug naar de
   oude opmaak, haal dan de <link> naar dit bestand weg.
   ============================================================ */

:root {
  --bg: #faf7f2;
  --bg-soft: #f2ece4;
  --bg-elev: #ffffff;
  --line: #e2dbd0;
  --line-strong: #cdc3b4;
  --ink: #17102a;
  --ink-soft: #4a4458;
  --ink-muted: #7d7789;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
}

body { background: var(--bg); }

/* ---------- typografie ---------- */
h1 { font-size: clamp(42px, 6.6vw, 88px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
h3 { letter-spacing: -0.025em; font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
.page-lede, .section-sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; max-width: 62ch; }
.page-lede { color: var(--ink); }

/* ---------- kicker rustiger ---------- */
.kicker { font-size: 12px; letter-spacing: 0.11em; color: var(--ink-muted); font-weight: 700; }

/* ---------- knoppen: uppercase pil ---------- */
.btn {
  border-radius: 999px; text-transform: uppercase;
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em;
  padding: 18px 32px;
}
.btn i { font-size: 15px; }
.cookie-btn-small, .cookie-modal-actions .btn { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 10px 18px; }
.nav-cta { text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; font-weight: 700; }

/* ---------- meer lucht tussen secties ---------- */
.block { padding: clamp(72px, 10vw, 148px) 0; }
.block.tight { padding: clamp(52px, 7vw, 104px) 0; }
.section-head { margin-bottom: clamp(32px, 4.5vw, 60px); }

/* ============================================================
   KAARTEN WORDEN RIJEN MET HAARLIJNEN
   ============================================================ */

/* --- feature-grid: het meest gebruikte kaartraster (123x) --- */
.feature-grid {
  display: block; border-top: 1px solid var(--line);
}
.feature-card {
  display: grid; grid-template-columns: 52px minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(16px, 3vw, 40px); align-items: start;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(24px, 3vw, 36px) 0; box-shadow: none;
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover { background: none; border-color: var(--line); transform: none; padding-left: 12px; }
.feature-icon {
  width: 42px; height: 42px; margin-bottom: 0; background: none;
  color: var(--accent); font-size: 26px; border-radius: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.feature-card h3 { font-size: clamp(20px, 2.1vw, 28px); margin: 0; line-height: 1.12; }
.feature-card p { font-size: 16px; line-height: 1.62; margin: 0; }

/* --- servicekaarten op de donkere homepage-sectie --- */
.services-grid { display: block; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.service-card {
  display: grid; grid-template-columns: 52px minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
  gap: clamp(16px, 3vw, 36px); align-items: start;
  background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0; padding: clamp(24px, 3vw, 36px) 0; box-shadow: none;
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover { background: none; transform: none; padding-left: 12px; }
.service-head { display: contents; }
.service-icon { width: 42px; height: 42px; background: none; color: #c4b5fd; font-size: 26px; border-radius: 0; display: flex; align-items: center; }
.service-arrow { grid-column: 4; grid-row: 1; align-self: center; font-size: 20px; }
.service-card h3 { font-size: clamp(20px, 2.1vw, 28px); margin: 0; line-height: 1.12; }
.service-card > p { margin: 0; font-size: 16px; }
.service-features { grid-column: 3; margin-top: 12px; }

/* --- proces- en waardekaarten.
   LET OP: er bestaan TWEE structuren met de klasse .process-card.
   (a) .process-grid > .process-card met .step-num + .step-body, op de
       dienstpagina's. Die wordt een rij met een groot nummer.
   (b) .process-cards > .process-card met .process-card-top (icoon + h4)
       en een p, op de homepage en pakketten. Die houdt zijn kolommen en
       verliest alleen het kaartchroom. Eén regel voor allebei liep mis. --- */
.process-grid, .values-grid { display: block; border-top: 1px solid var(--line); }
.process-grid > .process-card, .values-grid > .value-card {
  display: grid; grid-template-columns: clamp(56px, 7vw, 96px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 36px); align-items: baseline;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(22px, 2.8vw, 34px) 0; box-shadow: none;
}
.step-num { font-size: clamp(30px, 4vw, 52px); font-weight: 700; color: var(--accent); letter-spacing: -0.04em; line-height: 1; opacity: 1; }
.step-body h3 { font-size: clamp(19px, 1.9vw, 25px); margin: 0 0 6px; }
.step-body p { margin: 0; font-size: 16px; }

/* variant (b): kolommen behouden, alleen vlakker */
.process-cards > .process-card {
  background: none; border: none; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: clamp(22px, 2.6vw, 32px) clamp(14px, 1.6vw, 22px) 0 0;
}
.process-cards > .process-card:hover { transform: none; box-shadow: none; }
.process-card-top { margin-bottom: 12px; }
.process-icon { background: none; color: var(--accent); border-radius: 0; }
.process-cards h4 { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.02em; }

/* --- pakketkaarten: kolommen behouden, alleen het kaartchroom weghalen.
   Ze omzetten naar rijen werkte niet: een pakketkaart heeft naam, prijs,
   label, bevat-regel, kenmerkenlijst en knop, dus zes blokken die niet in
   een rij passen. De uitgelichte kaart houdt bewust wel zijn vulling,
   anders staat er witte tekst op een lichte achtergrond. --- */
.pkg-grid { gap: 0; }
.pkg-card {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: clamp(30px, 3.4vw, 46px) clamp(20px, 2.4vw, 34px);
}
.pkg-card:hover { transform: none; box-shadow: none; }
.pkg-card.featured {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-darker) 100%);
  border-radius: var(--radius-lg);
}
.pkg-card.featured:hover { transform: none; }
.pkg-price { font-size: clamp(34px, 3.6vw, 54px); font-weight: 700; letter-spacing: -0.04em; }
.pkg-name { letter-spacing: 0.1em; }
.pkg-feat { border: none; padding: 0; }

/* --- FAQ zonder vakjes --- */
.faq-list { max-width: 860px; gap: 0; border-top: 1px solid var(--line); }
.faq-item { background: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq-item:hover, .faq-item[open] { border-color: var(--line); }
.faq-q { padding: clamp(20px, 2.4vw, 28px) 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.02em; }
.faq-a { padding: 0 0 clamp(20px, 2.4vw, 26px); font-size: 16px; max-width: 68ch; }

/* --- cases: beeld groot, geen kaartchroom --- */
.case-card {
  background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible;
}
.case-card:hover { transform: none; box-shadow: none; }
.case-image { border-radius: 16px; overflow: hidden; box-shadow: 0 26px 56px -26px rgba(23, 16, 42, 0.36); }
.case-body { padding: 22px 0 0; }
.case-body h3 { font-size: clamp(20px, 2vw, 26px); }
.case-tag { background: none; padding: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }

/* --- cijferrijen --- */
.stats-row { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 38px); }
.stat .num { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.04em; color: var(--accent); }
.stat .lbl { font-size: 14px; color: var(--ink-muted); }

/* --- blogkaarten krijgen dezelfde behandeling als de cases:
   beeld met ronde hoeken en schaduw, en daaronder gewoon tekst zonder
   omkaderd vak. --- */
.blog-card {
  background: none; border: none; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.blog-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.blog-image {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 26px 56px -26px rgba(23, 16, 42, 0.34);
}
.blog-card:hover .blog-image { box-shadow: 0 30px 64px -24px rgba(23, 16, 42, 0.42); }
.blog-body, .blog-card > div:not(.blog-image) { padding: 22px 0 0 !important; }
.blog-card h3 { font-size: clamp(19px, 1.8vw, 23px); margin: 0 0 10px; line-height: 1.2; }
.blog-card p { font-size: 15px; line-height: 1.6; }
.blog-tag, .related-tag {
  background: none; padding: 0; color: var(--accent);
  font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
}
.blog-card:hover h3 { color: var(--accent); }
.blog-meta, .post-meta { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }

/* --- pillen blijven pillen, maar rustiger --- */
.hood-pill, .city-link-pill, .chip {
  background: none; border: 1px solid var(--line-strong); color: var(--ink-soft);
  border-radius: 999px;
}
.hood-pill:hover, .city-link-pill:hover { border-color: var(--accent); color: var(--accent); background: none; }

/* --- donkere afsluitblokken lopen door tot de footer --- */
.final-cta { border-radius: clamp(20px, 3vw, 32px); }

/* ---------- platform-markeringen passen mee ---------- */
.platform-item { background: none; border: 1px solid var(--line-strong); }
.platform-mark { background: none; color: var(--accent); }
.platform-chip { background: none; border-color: var(--line-strong); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .feature-card { grid-template-columns: 42px minmax(0, 1fr); row-gap: 10px; }
  .feature-card p { grid-column: 2 / 3; }
  .service-card { grid-template-columns: 42px minmax(0, 1fr) auto; row-gap: 10px; }
  .service-card > p, .service-features { grid-column: 2 / 4; }
  .pkg-card { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .pkg-card > :nth-child(n+3) { grid-column: 1 / 3; }
  .process-card, .value-card { grid-template-columns: 52px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .feature-card, .service-card { grid-template-columns: 34px minmax(0, 1fr); }
  .service-arrow { display: none; }
  .feature-icon, .service-icon { width: 30px; height: 30px; font-size: 21px; }
}

/* ============================================================
   GEEN GEKLEURDE BANDEN MEER TUSSEN SECTIES
   De site wisselde af tussen wit, lavendel (--accent-soft) en beige
   (--bg-soft). Die banden knippen de pagina in stukken. Alles staat nu
   op dezelfde warme ondergrond en secties worden gescheiden door een
   haarlijn, precies zoals de rijen binnen een sectie.
   ============================================================ */
:root {
  --bg-soft: #faf7f2;
  --accent-soft: #faf7f2;
}
section[style*="bg-soft"],
section[style*="accent-soft"] {
  background: var(--bg) !important;
  border-top: 1px solid var(--line);
}
/* twee opeenvolgende gescheiden secties geven een dubbele lijn */
section[style*="bg-soft"] + section[style*="bg-soft"],
section[style*="bg-soft"] + section[style*="accent-soft"],
section[style*="accent-soft"] + section[style*="bg-soft"],
section[style*="accent-soft"] + section[style*="accent-soft"] { border-top: none; }

/* de donkere secties blijven wel donker, die zijn een bewuste pauze */

/* ============================================================
   GEEN HOVER-ANIMATIES OP DE RIJEN
   Het opschuiven bij hover leidde af en voegde niets toe.
   Alleen de kleurwissel blijft, zodat een link nog wel als link voelt.
   ============================================================ */
.feature-card, .service-card, .process-card, .value-card, .pkg-card, .case-card {
  transition: none;
}
.feature-card:hover, .service-card:hover, .process-card:hover,
.value-card:hover, .case-card:hover {
  padding-left: 0; transform: none; box-shadow: none; background: none;
}
/* de pakketkaart apart: geen background-reset, anders verliest de uitgelichte
   kaart zijn paarse vulling bij hover en wordt hij wit */
.pkg-card:hover, .pkg-card.featured:hover { transform: none; box-shadow: none; }
a.service-card:hover h3, a.case-card:hover h3 { color: inherit; }
a.service-card:hover .service-arrow { color: #c4b5fd; transform: none; }

/* ============================================================
   ECHTE MERKLOGO'S: geen paarse tint eroverheen
   ============================================================ */
.platform-mark { background: none; padding: 0; }
.platform-mark svg { width: 24px; height: 24px; }
.platform-chip svg { width: 17px; height: 17px; }
.platform-row.on-dark .platform-chip svg,
.platform-grid.on-dark .platform-mark svg { color: inherit; }
/* het ChatGPT-logo is zwart; op een donkere ondergrond wordt dat wit */
.platform-row.on-dark .platform-chip svg [stroke="#000000"],
.platform-row.on-dark .platform-chip svg[stroke="#000000"] { stroke: #ffffff; }

/* ============================================================
   KNOPPEN TERUG IN DE PAARSE GRADIENT
   Ze stonden op bijna-zwart. Dat maakte de site te zwart-wit en de
   huisstijl verdween. De hoofdknop is nu weer het paars-magenta verloop,
   de tweede knop een paarse omlijning in plaats van een zwarte.
   ============================================================ */
.btn-accent, .btn-primary, .nav-cta {
  background: linear-gradient(135deg, var(--accent) 0%, #d946ef 100%);
  color: #fff; border: none;
}
.btn-accent:hover, .btn-primary:hover, .nav-cta:hover {
  background: linear-gradient(135deg, #d946ef 0%, var(--accent) 100%);
  color: #fff;
}
.btn-secondary { background: none; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-secondary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* op donkere ondergrond blijft de tweede knop wit omlijnd */
.t-dark .btn-secondary, .final-cta .btn-secondary, footer .btn-secondary,
section[style*="brand-purple"] .btn-secondary {
  color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
.t-dark .btn-secondary:hover, .final-cta .btn-secondary:hover { background: #fff; color: var(--accent); }
.cookie-banner .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* ============================================================
   KLEURRIJKE ICONEN
   Elk icoon krijgt een eigen tint uit de paars-magenta familie plus twee
   naburige tinten. Zo heeft een lijst kleur zonder van de huisstijl af te
   wijken, en zie je in één oogopslag dat het aparte diensten zijn.
   ============================================================ */
.feature-icon, .service-icon, .process-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
}
.feature-card:nth-child(6n+2) .feature-icon,
.service-card:nth-child(6n+2) .service-icon,
.feature-card:nth-child(6n+3) .feature-icon,
.service-card:nth-child(6n+3) .service-icon,
.feature-card:nth-child(6n+4) .feature-icon,
.service-card:nth-child(6n+4) .service-icon,
.feature-card:nth-child(6n+5) .feature-icon,
.service-card:nth-child(6n+5) .service-icon,
.feature-card:nth-child(6n+6) .feature-icon,
.service-card:nth-child(6n+6) .service-icon,

.feature-grid, .services-grid, .process-grid { --niets: 0; }
.feature-card, .service-card { align-items: center; }
.feature-card h3, .service-card h3 { align-self: center; }

@media (max-width: 560px) {
  .feature-icon, .service-icon, .process-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
}

/* ============================================================
   WAARDEKAARTEN EN PROCESKAARTEN ALS NETTE RIJEN
   .value-card en .process-card hebben drie blokken (icoon, kop, tekst).
   Met een grid van twee kolommen belandde de tekst in de smalle eerste
   kolom en werd hij tot een lint geperst. Nu is het een echte rij:
   icoon, kop, tekst, net als de dienstenrijen op de homepage.
   ============================================================ */
.values-grid { display: block; border-top: 1px solid var(--line); }
.values-grid > .value-card {
  display: grid; grid-template-columns: 46px minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(22px, 2.8vw, 34px) 0; box-shadow: none;
}
.values-grid > .value-card h3 { font-size: clamp(19px, 2vw, 26px); margin: 0; line-height: 1.14; }
.values-grid > .value-card p { margin: 0; font-size: 16px; line-height: 1.62; }

.process-cards { display: block; border-top: 1px solid var(--line); }
.process-cards > .process-card {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(22px, 2.8vw, 34px) 0; box-shadow: none;
}

.process-cards h4 { font-size: clamp(19px, 2vw, 26px); margin: 0; line-height: 1.14; letter-spacing: -0.025em; }
.process-cards > .process-card > p { margin: 0; font-size: 16px; line-height: 1.62; }

.value-icon, .process-icon, .process-card-top .process-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  border-radius: 13px !important;
}

/* ============================================================
   AFSLUITENDE CTA: OVERAL DEZELFDE DONKERE BOX
   Dezelfde behandeling als de afsluiter op de homepage, maar als een
   afgerond blok met ruime binnenmarge in plaats van een volle band.
   ============================================================ */
.final-cta {
  background: radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--brand-purple) 58%);
  color: #fff; border-radius: clamp(20px, 3vw, 34px);
  padding: clamp(44px, 6vw, 92px) clamp(28px, 5vw, 76px);
  text-align: left;
}
.final-cta h2 { color: #fff; max-width: 16ch; }
.final-cta p { color: rgba(255, 255, 255, 0.78); max-width: 56ch; margin-top: 20px; font-size: clamp(16px, 1.3vw, 19px); }
.final-cta > div { justify-content: flex-start !important; margin-top: 30px; }
.final-cta::before { top: -140px; left: -60px; background: #d946ef; opacity: 0.3; }
.final-cta::after { bottom: -160px; right: -60px; background: var(--accent); opacity: 0.3; }
.final-cta .btn-accent, .final-cta .btn-primary { background: #fff; color: var(--accent); }
.final-cta .btn-accent:hover, .final-cta .btn-primary:hover { background: #d946ef; color: #fff; }
.final-cta .btn-secondary { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: transparent; }
.final-cta .btn-secondary:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* ============================================================
   GEEN HARDE VIERKANTEN
   Alles met een eigen vlak of rand krijgt afgeronde hoeken.
   ============================================================ */
.case-image, .cs-image, .post-image, .related-card, .blog-card,
.contact-form-large, .info-block, .stat, .buy-box, .order-benefits,
.werk-shot, .case-shot, .platform-item, .pkg-card.featured {
  border-radius: var(--radius-lg);
}
img[class*="shot"], .case-image img, .blog-image img { border-radius: inherit; }

@media (max-width: 900px) {
  .values-grid > .value-card { grid-template-columns: 46px minmax(0, 1fr); row-gap: 10px; }
  .process-cards > .process-card { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .values-grid > .value-card p { grid-column: 2 / 3; }
  .final-cta { padding: clamp(32px, 7vw, 52px) clamp(22px, 5vw, 36px); }
}
@media (max-width: 560px) {
  .value-icon, .process-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
  .values-grid > .value-card { grid-template-columns: 38px minmax(0, 1fr); }
}

/* --- accentwoord in de CTA-box: magenta, net als op de homepage.
   Het stond op het gewone accentpaars en dat leest te donker op de
   donkerpaarse ondergrond. --- */
.final-cta h2 .serif, .final-cta h2 span { color: #d946ef; }
.final-cta p, .final-cta h2 { text-align: left; }
.final-cta p { margin-left: 0; margin-right: 0; }
.final-cta > div[style*="justify-content: center"] { justify-content: flex-start !important; }

/* ============================================================
   ACCENTWOORDEN IN DE GRADIENT VAN DE KNOPPEN
   Belangrijk: de kleur wordt EERST gewoon gezet en pas daarna vervangen
   door de gradient, en alleen als de browser background-clip: text kan.
   Zonder die volgorde wordt de tekst onzichtbaar op oudere browsers,
   want transparante tekst zonder werkende clip is gewoon niets.
   ============================================================ */
h1 .serif, h2 .serif, h3 .serif, .t-accent { color: var(--accent); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1 .serif, h2 .serif, h3 .serif, .t-accent {
    background: linear-gradient(120deg, #7c3aed 0%, #d946ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* een gradient klipt strak op de letterranden; iets lucht voorkomt
       dat schuine uiteinden zoals de j of de g worden afgesneden */
    padding-right: 0.06em;
  }
  /* op donkere ondergrond een lichtere gradient, anders verdwijnt hij */
  .final-cta h2 .serif, .t-dark h2 .serif, .t-dark .t-accent,
  section[style*="brand-purple"] h2 .serif, .t-panel h2 .serif {
    background: linear-gradient(120deg, #c084fc 0%, #f0abfc 100%);
    -webkit-background-clip: text; background-clip: text;
  }
}

/* ============================================================
   KNOPPEN: OOK BIJ HOVER EEN GRADIENT
   ============================================================ */
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #d946ef 100%);
  color: #fff; border-color: transparent;
}
.final-cta .btn-secondary:hover, .t-dark .btn-secondary:hover {
  background: linear-gradient(135deg, #c084fc 0%, #f0abfc 100%);
  color: var(--brand-purple); border-color: transparent;
}
.final-cta .btn-accent:hover, .final-cta .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #d946ef 100%); color: #fff;
}

/* ============================================================
   DIENSTPAGINA'S: BEELD IN DE HERO
   Zelfde compositie als de homepage. De rest van de pagina blijft
   staan zoals hij was, alleen de kop krijgt beeld ernaast.
   ============================================================ */
.dienst-hero { padding-bottom: clamp(40px, 6vw, 84px); }
.dienst-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.dienst-beeld img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px -26px rgba(23, 16, 42, 0.4);
}
.dienst-hero .t-collage { position: relative; height: clamp(300px, 34vw, 460px); }
.dienst-hero .t-collage img {
  position: absolute; display: block; height: auto; border-radius: 12px;
  box-shadow: 0 30px 64px -24px rgba(23, 16, 42, 0.4);
}
.dienst-hero .t-shot-a { width: 100%; top: 8%; left: 16%; transform: rotate(-5deg); z-index: 2; }
.dienst-hero .t-shot-b { width: 54%; bottom: 6%; left: -8%; transform: rotate(4deg); z-index: 3; }
.dienst-hero .t-phone { width: 13%; bottom: 0; left: 38%; transform: rotate(-3deg); z-index: 4; border-radius: 14px; }

@media (max-width: 1000px) {
  .dienst-hero-grid { grid-template-columns: 1fr; }
  .dienst-hero .t-collage { height: clamp(230px, 54vw, 360px); margin-top: 24px; }
  .dienst-hero .t-shot-a { width: 96%; left: 8%; }
  .dienst-hero .t-shot-b { width: 52%; left: -5%; }
  .dienst-hero .t-phone { width: 13%; left: 42%; }
}

/* de tekst in de dienst-hero staat naast beeld, dus links uitlijnen zoals
   op de homepage. .page-header centreert standaard. */
.dienst-hero, .dienst-hero .container { text-align: left; }
.dienst-hero .page-lede { margin-left: 0; margin-right: 0; max-width: 48ch; }
.dienst-hero h1 { max-width: 15ch; }
.dienst-hero .kicker { text-align: left; }
@media (max-width: 1000px) {
  .dienst-hero h1 { max-width: none; }
}

/* ============================================================
   DERDE PROCESVARIANT: .steps > .step
   Naast .process-grid en .process-cards bestaat er nog een variant met
   .steps > .step (op de vijf dienstpagina's en online-zichtbaarheid).
   Die stond nog als omkaderde vakjes. Nu ook rijen met haarlijnen.
   ============================================================ */
.steps { max-width: none; gap: 0; border-top: 1px solid var(--line); }
.steps > .step {
  display: grid; grid-template-columns: clamp(60px, 7vw, 104px) minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(22px, 2.8vw, 34px) 0; box-shadow: none;
}
.steps > .step:hover { transform: none; box-shadow: none; border-color: var(--line); }
.steps > .step .step-body { display: contents; }
/* LET OP: hier stond de oude behandeling van .step-num als groot gradient
   NUMMER (background-clip:text plus text-fill-color transparent). Sinds de
   stappen icoontegels zijn, maakte die regel het icoon onzichtbaar: hij is
   specifieker dan de tegelregel verderop, dus het glyph bleef transparant.
   Niet opnieuw toevoegen. De tegelopmaak staat bij PROCESSTAPPEN. */
.steps .step-body h3 { font-size: clamp(19px, 2vw, 26px); margin: 0; line-height: 1.14; }
.steps .step-body p { margin: 0; font-size: 16px; line-height: 1.62; }

/* ============================================================
   DE DIENSTEN-SECTIE NIET MEER ALS DONKER VLAK
   Op diensten.html en de homepage stond dit blok op brand-purple. Als
   volle band voelde dat als een gat in de pagina. Nu dezelfde warme
   ondergrond en haarlijnen als de rest, net als op de homepage.
   ============================================================ */
.services { background: none; color: var(--ink); }
.services h2, .services h3 { color: var(--ink); }
.services .section-sub, .services .page-lede { color: var(--ink-soft); }
.services-grid { border-top-color: var(--line); }
.services .service-card { border-bottom-color: var(--line); }
.services .service-card > p { color: var(--ink-soft); }
.services .service-features span { background: none; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.services .service-arrow { color: var(--ink-muted); }
.services .service-icon { color: #fff; }

@media (max-width: 900px) {
  .steps > .step { grid-template-columns: clamp(48px, 12vw, 72px) minmax(0, 1fr); row-gap: 8px; }
  .steps > .step .step-body p { grid-column: 2 / 3; }
}

/* ============================================================
   DE VIER AI-KAARTEN OP DIENSTEN ALS RIJEN
   Vier gelijke vakjes met een icoon, een kop en een zinnetje: precies
   het patroon dat overal hetzelfde oogt. Nu rijen met haarlijnen en
   gekleurde iconen, in lijn met de rest van de site.
   ============================================================ */
.ai-pillar-grid { display: block; border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 52px); }
.ai-pillar-card {
  display: grid; grid-template-columns: 46px minmax(0, 0.9fr) minmax(0, 1.35fr) auto;
  gap: clamp(16px, 3vw, 40px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(22px, 2.8vw, 34px) 0; box-shadow: none;
  text-decoration: none; color: inherit;
}
.ai-pillar-card:hover { background: none; transform: none; box-shadow: none; border-color: var(--line); }
.ai-pillar-card:hover h4 { color: var(--accent); }
.ai-pillar-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; margin: 0;
}
.ai-pillar-card h4 { font-size: clamp(19px, 2vw, 26px); margin: 0; line-height: 1.14; letter-spacing: -0.025em; transition: color 0.2s ease; }
.ai-pillar-card p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.ai-pillar-card::after {
  content: "\ea24"; font-family: "tabler-icons"; font-style: normal;
  font-size: 19px; color: var(--ink-muted); line-height: 1;
}

@media (max-width: 900px) {
  .ai-pillar-card { grid-template-columns: 46px minmax(0, 1fr); row-gap: 8px; }
  .ai-pillar-card p { grid-column: 2 / 3; }
  .ai-pillar-card::after { display: none; }
}
@media (max-width: 560px) {
  .ai-pillar-card { grid-template-columns: 38px minmax(0, 1fr); }
  .ai-pillar-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
}

/* ook de kleine pakket-verwijskaartjes op de detailpagina's: geen sprongetje
   en geen kleurende rand bij hover, alleen de tekst reageert */
.other-pkg-card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.other-pkg-card:hover .ti { transform: none; }

/* ============================================================
   DIENSTENRIJEN OPGESCHOOND
   De tag-pillen en het pijltje naast het icoon zijn uit de HTML gehaald.
   De rij is nu icoon, kop, tekst. Het icoon krijgt exact dezelfde maat
   en radius als in de AI-sectie eronder, zodat ze op één pagina niet
   twee verschillende vormen zijn.
   ============================================================ */
.service-card { grid-template-columns: 46px minmax(0, 0.9fr) minmax(0, 1.35fr); }
.service-icon {
  width: 46px !important; height: 46px !important;
  border-radius: 13px !important;
  font-size: 24px; justify-content: center;
}
.service-head { display: contents; }

/* ============================================================
   PAKKETKAARTEN VERSCHUIVEN NIET MEER
   style.css zet transform: translateY en scale op hover. Mijn reset had
   dezelfde specificiteit en verloor daardoor soms. Nu expliciet.
   ============================================================ */
.pkg-card:hover, .pkg-card.featured:hover,
.pkg-grid .pkg-card:hover, .pkg-grid .pkg-card.featured:hover {
  transform: none !important; box-shadow: none !important;
}
/* transition: all op .pkg-card laat ELKE wijziging animeren, ook de padding.
   Daarom hier geen padding aanraken en de transitie helemaal uitzetten. */
.pkg-card { transition: none !important; }
.other-pkg-card:hover { transform: none !important; box-shadow: none !important; }
.other-pkg-card:hover .ti { transform: none !important; }

/* Alles rechtop, geen cursief meer. Op verzoek van Fadil 2026-08-18. */
.page-lede, .t-lede, .section-sub, .testi-featured-quote, .testi-featured-quote em,
.step-num, .steps .step-num, blockquote, em, i:not([class*="ti-"]):not(.ti) { font-style: normal; }

/* ============================================================
   GEEN ENKEL BLOK BEWEEGT NOG BIJ HOVER
   style.css zet op zowat elk component een translateY bij hover, ook op
   de knoppen IN de pakketkaarten. Dat was het verschuiven dat bleef.
   Eén regel voor alles; de navigatie houdt wel zijn beweging, want daar
   is het functioneel (dropdown en pijltje).
   ============================================================ */
.btn:hover, .btn-primary:hover, .btn-accent:hover, .btn-secondary:hover, .buy-cta:hover, .buy-cta:active,
.pkg-card:hover, .pkg-card.featured:hover, .other-pkg-card:hover, .other-pkg-card:hover .ti,
.feature-card:hover, .service-card:hover, .service-card:hover .service-arrow,
.process-card:hover, .value-card:hover, .step:hover, .ai-pillar-card:hover,
.case-card:hover, .case-card:hover .case-image img,
.blog-card:hover, .related-card:hover, .stat-card:hover, .platform-item:hover {
  transform: none !important;
}

/* ============================================================
   CASEPAGINA'S IN DE NIEUWE STIJL
   De opbouw was al goed (kop, samenvatting, cijfers, groot beeld).
   Wat ontbrak was de nieuwe typografie en het wegvallen van vakjes.
   ============================================================ */
.cs-hero { padding: clamp(48px, 6vw, 90px) 0 clamp(28px, 4vw, 48px); }
.cs-hero h1 { font-size: clamp(38px, 5.4vw, 68px); max-width: 20ch; margin-bottom: 26px; line-height: 1.04; }
.cs-hero > .container > p { font-size: clamp(17px, 1.5vw, 21px) !important; line-height: 1.55 !important; max-width: 62ch !important; }
.cs-meta-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(24px, 3vw, 34px) 0; }
.cs-meta .big { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.04em; }
.cs-meta h5 { letter-spacing: 0.11em; }
.cs-body { max-width: 760px; font-size: 17px; }
.cs-body h2 { font-size: clamp(26px, 3vw, 40px); margin: clamp(36px, 4vw, 56px) 0 16px; }
.cs-body h3 { font-size: clamp(20px, 2vw, 26px); margin: 30px 0 12px; }
.screenshot-full img, .cs-image img, .case-shot img { border-radius: var(--radius-lg); }

/* de pakketprijs in de hero staat naast beeld, dus niet meer centreren */
.dienst-hero .pkg-price-hero { justify-content: flex-start !important; text-align: left !important; margin: 0 !important; }
.pkg-price-amount { font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.04em; color: var(--accent); }

/* ============================================================
   ICONEN OUTLINED IN PLAATS VAN VOLVLAK
   De kleur blijft, maar het icoon staat nu in een licht getinte tegel met
   een gekleurde rand en een gekleurd glyph, in plaats van wit-op-vol-vlak.
   Rustiger, en de gekleurde lijn leest nog altijd als onderscheid.
   ============================================================ */
.feature-icon, .service-icon, .process-icon, .value-icon,
.ai-pillar-icon, .process-card-top .process-icon, .t-row-mark {
  background: color-mix(in srgb, var(--ic, #7c3aed) 10%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--ic, #7c3aed) 42%, transparent) !important;
  color: var(--ic, #7c3aed) !important;
  border-radius: 13px !important;
}
/* terugval voor browsers zonder color-mix */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .feature-icon, .service-icon, .process-icon, .value-icon,
  .ai-pillar-icon, .process-card-top .process-icon, .t-row-mark {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
  }
}

/* de zes tinten worden nu als variabele doorgegeven in plaats van als vulling */
.t-row-mark.c1, .feature-card:nth-child(6n+1) .feature-icon, .service-card:nth-child(6n+1) .service-icon,
.process-card:nth-child(6n+1) .process-icon, .value-card:nth-child(6n+1) .value-icon,
.ai-pillar-card:nth-child(1) .ai-pillar-icon { --ic: #7c3aed; }
.t-row-mark.c2, .feature-card:nth-child(6n+2) .feature-icon, .service-card:nth-child(6n+2) .service-icon,
.process-card:nth-child(6n+2) .process-icon, .value-card:nth-child(6n+2) .value-icon,
.ai-pillar-card:nth-child(2) .ai-pillar-icon { --ic: #2563eb; }
.t-row-mark.c3, .feature-card:nth-child(6n+3) .feature-icon, .service-card:nth-child(6n+3) .service-icon,
.process-card:nth-child(6n+3) .process-icon, .value-card:nth-child(6n+3) .value-icon,
.ai-pillar-card:nth-child(3) .ai-pillar-icon { --ic: #d946ef; }
.t-row-mark.c4, .feature-card:nth-child(6n+4) .feature-icon, .service-card:nth-child(6n+4) .service-icon,
.process-card:nth-child(6n+4) .process-icon, .value-card:nth-child(6n+4) .value-icon,
.ai-pillar-card:nth-child(4) .ai-pillar-icon { --ic: #0d9488; }
.t-row-mark.c5, .feature-card:nth-child(6n+5) .feature-icon, .service-card:nth-child(6n+5) .service-icon,
.process-card:nth-child(6n+5) .process-icon, .value-card:nth-child(6n+5) .value-icon { --ic: #ea580c; }
.t-row-mark.c6, .feature-card:nth-child(6n+6) .feature-icon, .service-card:nth-child(6n+6) .service-icon,
.process-card:nth-child(6n+6) .process-icon, .value-card:nth-child(6n+6) .value-icon { --ic: #6d28d9; }

/* ============================================================
   "ANDERE PAKKETTEN" ALS RIJEN, GEEN KAARTJES
   ============================================================ */
/* De container was 700px breed met twee kolommen. Als rij is dat te krap:
   naam, prijs en omschrijving liepen over elkaar. Nu volle breedte en
   kolommen die genoeg ruimte krijgen. */
.other-pkg-grid { display: block; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
.other-pkg-card {
  display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(120px, auto) minmax(0, 1.4fr) 24px;
  gap: clamp(14px, 2.5vw, 30px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: clamp(20px, 2.6vw, 30px) 0;
}
.other-pkg-card:hover { border-color: var(--line); }
.other-pkg-card:hover .other-pkg-name { color: var(--accent); }
.other-pkg-head { display: contents; }
.other-pkg-name { grid-column: 1; grid-row: 1; font-size: clamp(18px, 1.8vw, 23px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; transition: color 0.2s ease; }
.other-pkg-head .ti { grid-column: 4; grid-row: 1; justify-self: end; color: var(--ink-muted); font-size: 18px; }
.other-pkg-price { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: clamp(15px, 1.4vw, 18px) !important; }
.other-pkg-price .from { color: var(--accent); font-weight: 700; }
.other-pkg-tag { font-weight: 500; color: var(--ink-muted); }
.other-pkg-desc { grid-column: 3; grid-row: 1; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ============================================================
   HET VERGELIJKBLOK ADS TEGENOVER SEO
   Twee omkaderde vakjes naast elkaar. Nu twee kolommen gescheiden door
   één verticale lijn, zonder vakken.
   ============================================================ */
.vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); max-width: 940px; margin: clamp(34px, 5vw, 56px) auto 0; }
.vergelijk > div { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
.vergelijk > div:last-child { border-left: 1px solid var(--line) !important; padding-left: clamp(28px, 5vw, 64px) !important; }
.vergelijk h3 { font-size: clamp(18px, 1.8vw, 23px) !important; }
.vergelijk ul li { border-bottom: 1px solid var(--line); padding: 11px 0 !important; }
.vergelijk ul li:last-child { border-bottom: none; }

@media (max-width: 800px) {
  .other-pkg-card { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; }
  .other-pkg-name { grid-row: 1; }
  .other-pkg-head .ti { grid-row: 1; }
  .other-pkg-price { grid-column: 1 / 3; grid-row: 2; }
  .other-pkg-desc { grid-column: 1 / 3; grid-row: 3; }
  .vergelijk { grid-template-columns: 1fr; }
  .vergelijk > div:last-child { border-left: none !important; border-top: 1px solid var(--line) !important; padding-left: 0 !important; padding-top: clamp(24px, 5vw, 36px) !important; }
}

/* knoppen die de volle breedte pakken, krijgen hun tekst gecentreerd */
.btn { justify-content: center; }
@media (max-width: 900px) {
  .final-cta > div .btn, .t-dark .btn { justify-content: center; }
}

/* ============================================================
   PRIJSBLOK OP DE DIENSTPAGINA'S
   Was een wit vak met rand en gecentreerde tekst. Nu een gewoon blok
   tussen twee haarlijnen, links uitgelijnd zoals de rest.
   ============================================================ */
.price-indicator {
  max-width: 900px; margin: 0 auto;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4vw, 48px) 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px); align-items: center;
}
.price-indicator .kicker { grid-column: 1; margin-bottom: 8px; }
.price-indicator h2 { grid-column: 1; font-size: clamp(26px, 3vw, 40px); margin: 0; }
.price-indicator-bedrag {
  grid-column: 2; grid-row: 1 / 4; align-self: center;
  font-size: clamp(34px, 4vw, 56px); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1; white-space: nowrap;
  background: linear-gradient(120deg, #7c3aed 0%, #d946ef 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.price-indicator-tekst { grid-column: 1; margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; max-width: 56ch; }
.price-indicator-acties { grid-column: 1 / 3; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ============================================================
   REVIEWKAARTEN OP OVER-ONS EN DE HOMEPAGE
   Geen wit vak met rand meer; het citaat staat gewoon op de pagina,
   gescheiden door een lijn links.
   ============================================================ */
.review-card {
  background: none; border: none; border-left: 2px solid var(--line-strong);
  border-radius: 0; box-shadow: none;
  padding: 4px 0 4px clamp(18px, 2vw, 26px);
}
.review-card:hover { border-color: var(--accent); transform: none; box-shadow: none; }
.review-quote { font-size: 16px; line-height: 1.62; color: var(--ink); }
.review-card .stars { color: #f59e0b; }
.review-author .avatar {
  background: none; border: 1.5px solid var(--line-strong); color: var(--ink-soft);
}

@media (max-width: 800px) {
  .price-indicator { grid-template-columns: minmax(0, 1fr); }
  .price-indicator-bedrag { grid-column: 1; grid-row: auto; margin: 14px 0 0; }
  .price-indicator-acties { grid-column: 1; }
}

/* ============================================================
   CONTACTGEGEVENS-BLOKKEN
   Waren omkaderde vakjes; nu rijen met een haarlijn ertussen, in lijn
   met de rest van de site.
   ============================================================ */
.contact-info { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; }
.info-block {
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: clamp(16px, 2vw, 22px) 0; box-shadow: none;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: center;
}
.info-block:first-of-type { border-top: 1px solid var(--line); }
.info-block:hover { background: none; border-color: var(--line); }
.info-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent); font-size: 21px;
  display: flex; align-items: center; justify-content: center;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .info-icon { background: var(--accent-soft); border-color: var(--accent); }
}
.info-label { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.info-value { font-size: 15px; color: var(--ink-soft); }
.info-social { margin-top: 6px; }

/* ============================================================
   GERELATEERDE ARTIKELEN ONDER EEN BLOGPOST
   Waren drie halflege vakjes met veel witruimte eronder. Nu een lijst
   met haarlijnen, zoals de rest van de site, met de categorie links en
   de titel als hoofdregel.
   ============================================================ */
.related-posts {
  display: block; max-width: 860px; margin: 0 auto;
  border-top: 1px solid var(--line);
}
.related-card {
  display: grid; grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr) 22px;
  gap: clamp(14px, 3vw, 32px); align-items: center;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: clamp(18px, 2.4vw, 26px) 0;
}
.related-card:hover { border-color: var(--line); background: none; box-shadow: none; }
.related-card:hover h4 { color: var(--accent); }
.related-tag { align-self: center; margin: 0; font-size: 12px; letter-spacing: 0.11em; }
.related-card h4 {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; margin: 0;
  transition: color 0.2s ease;
}
.related-arrow {
  margin: 0; font-size: 0; justify-self: end;
}
.related-arrow .ti { font-size: 18px; color: var(--ink-muted); }

@media (max-width: 700px) {
  .related-posts { grid-template-columns: none; gap: 0; }
  .related-card { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 4px; }
  .related-tag { grid-column: 1 / 3; }
  .related-card h4 { grid-column: 1; }
}

/* ============================================================
   CONTACTGEGEVENS: TEKSTKLEUR MEE OMZETTEN
   .contact-info was een paars vlak met WITTE tekst. Toen ik het vlak
   weghaalde bleef die witte tekst staan, dus stond er wit op licht en
   was de helft onleesbaar. Geldt voor contact, gratis-website-scan en
   gratis-ai-scan.
   ============================================================ */
.contact-info, .contact-info h3, .contact-info .info-value,
.contact-info .info-value a { color: var(--ink) !important; }
.contact-info h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.025em; }
.contact-info .info-label { color: var(--ink) !important; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.contact-info .info-value { color: var(--ink-soft) !important; }
.contact-info .info-value a { text-decoration: underline; text-underline-offset: 3px; }
.contact-info .info-value a:hover { color: var(--accent) !important; }
.contact-info .info-block {
  border-top: none !important; border-bottom: 1px solid var(--line);
  display: grid !important; grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px; align-items: center;
}
.contact-info .info-block:first-of-type { border-top: 1px solid var(--line) !important; }
.contact-info .info-icon {
  width: 42px !important; height: 42px !important; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent) !important; font-size: 21px;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .contact-info .info-icon { background: var(--accent-soft) !important; border-color: var(--accent); }
}
.contact-info .info-social a {
  border-color: var(--line-strong); color: var(--ink-soft);
}
.contact-info .info-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* het laatste blok ("Volg ons") heeft geen icoon en werd dus in de smalle
   icoonkolom geperst; die mag de volle breedte pakken */
.contact-info .info-block:not(:has(.info-icon)) { grid-template-columns: minmax(0, 1fr); }
.contact-info .info-block:last-of-type { border-bottom: none; }

/* ============================================================
   GEEN ZIJWAARTS SCHUIVEN OP MOBIEL
   .final-cta en de hero hebben decoratieve elementen die buiten hun kader
   vallen (de blurcirkels, het beeld). Met overflow:hidden wordt zo'n vak
   een scroll-container: op een telefoon kan je er dan zijwaarts in vegen.
   overflow:clip knipt af zonder die scroll-container te maken.
   ============================================================ */
.final-cta, .t-panel, .dienst-hero .t-collage { overflow: clip; }
.t-hero, .dienst-hero { overflow: clip; }
html, body { overflow-x: clip; }

/* ============================================================
   REVIEWS OP OVER-ONS
   De dikke lijn tussen de kaarten was te zwaar. Nu een rustig blok met
   een subtiele scheiding en het citaat als hoofdzaak.
   ============================================================ */
.review-card {
  border-left: none; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.reviews-track { gap: clamp(24px, 4vw, 44px); }
.review-card + .review-card { position: relative; }
.review-card + .review-card::before {
  content: ''; position: absolute; left: calc(clamp(24px, 4vw, 44px) / -2);
  top: 6px; bottom: 6px; width: 1px; background: var(--line);
}
.review-quote { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink); margin: 0; }
.review-card .stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-author .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1.5px solid var(--line-strong); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.review-author .name { font-weight: 700; font-size: 15px; color: var(--ink); }
.review-author .role { font-size: 13px; color: var(--ink-muted); }

@media (max-width: 700px) {
  .review-card + .review-card::before { display: none; }
}

/* ============================================================
   PROCESSTAPPEN: OVERAL ICONEN, ZELFDE VORM
   Ze stonden deels als groot nummer en deels als icoon. Nu overal
   dezelfde outline-tegel als bij de dienstenrijen.
   ============================================================ */
.step-num {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; letter-spacing: 0;
  background: color-mix(in srgb, var(--ic, #7c3aed) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ic, #7c3aed) 42%, transparent);
  color: var(--ic, #7c3aed);
  -webkit-text-fill-color: currentColor;
  flex-shrink: 0;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .step-num { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
}
.step-num.c1 { --ic: #7c3aed; }
.step-num.c2 { --ic: #2563eb; }
.step-num.c3 { --ic: #d946ef; }
.step-num.c4 { --ic: #0d9488; }
.step-num.c5 { --ic: #ea580c; }
.step-num.c6 { --ic: #6d28d9; }

/* de kolom mag nu smaller, er staat geen groot getal meer */
.steps > .step { grid-template-columns: 46px minmax(0, 0.85fr) minmax(0, 1.3fr); }
.process-grid > .process-card { grid-template-columns: 46px minmax(0, 1fr); align-items: center; }

@media (max-width: 900px) {
  .steps > .step { grid-template-columns: 46px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .step-num { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
  .steps > .step, .process-grid > .process-card { grid-template-columns: 38px minmax(0, 1fr); }
}



/* ============================================================
   MOBIEL MENU: DE ECHTE HEADER BLIJFT STAAN
   De hamburger morpht al naar een kruis via aria-expanded, dus daar is
   geen aparte sluitknop voor nodig. Het probleem was dat body bij het
   openen overflow:hidden krijgt, waardoor de STICKY nav zijn plakpositie
   verliest en wegscrolt. Tijdens het openen staat de nav daarom op FIXED:
   het logo blijft op zijn plek en op zijn eigen grootte, en het kruis
   staat precies waar de hamburger stond.
   ============================================================ */
body.menu-open .nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 120; background: var(--bg-elev);
}
/* het menu begint onder de balk in plaats van eronder te verdwijnen */
.mobile-menu { top: 73px !important; padding: 18px 24px 28px !important; }
.mobile-menu .close { display: none !important; }

/* ============================================================
   AFSLUITENDE CTA
   Twee varianten in de HTML:
   (a) .slot-cta met een formulier erin, op dienst- en stadspaginas
   (b) .slot-cta met een .final-cta div erin, op pakketten en cases
   Bij (b) is .final-cta al de donkere box; de container mag dan GEEN
   tweede achtergrond krijgen, anders krijg je een box in een box.
   De sectie levert de buitenmarge zodat de box nooit tegen de schermrand
   plakt, ook niet op een telefoon.
   ============================================================ */
.block.slot-cta {
  padding: clamp(40px, 6vw, 90px) clamp(16px, 4vw, 40px) clamp(64px, 9vw, 120px);
}

/* --- variant (a): formulier, container wordt de box --- */
.slot-cta:has(form) > .container {
  background: radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--brand-purple) 58%);
  border-radius: clamp(20px, 3vw, 34px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4.5vw, 64px);
  max-width: 1200px; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
}
.slot-cta:has(form) .section-head { margin: 0; text-align: left; }
.slot-cta:has(form) .kicker { color: rgba(255, 255, 255, 0.62); }
.slot-cta:has(form) h2 { color: #fff; font-size: clamp(27px, 3.4vw, 46px); max-width: 15ch; }
.slot-cta:has(form) h2 .serif { background: linear-gradient(120deg, #c084fc 0%, #f0abfc 100%); -webkit-background-clip: text; background-clip: text; }
.slot-cta:has(form) .section-sub { color: rgba(255, 255, 255, 0.76); margin-top: 14px; max-width: 46ch; }

.slot-cta .contact-form-large {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px); margin: 0; max-width: none;
}
.slot-cta .contact-form-large label { color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 700; }
.slot-cta .contact-form-large input {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
}
.slot-cta .contact-form-large input::placeholder { color: rgba(255, 255, 255, 0.45); }
.slot-cta .contact-form-large input:focus { border-color: #c084fc; background: rgba(255, 255, 255, 0.14); outline: none; }
.slot-cta .contact-form-large .btn-accent { background: #fff; color: var(--accent); }
.slot-cta .contact-form-large .btn-accent:hover { background: linear-gradient(135deg, #c084fc 0%, #f0abfc 100%); color: var(--brand-purple); }
.slot-cta .contact-form-large > p { color: rgba(255, 255, 255, 0.6) !important; }
.slot-cta .contact-form-large > p a { color: #f0abfc !important; }

/* --- variant (b): .final-cta is zelf al de box, container blijft leeg --- */
.slot-cta:has(.final-cta) > .container { background: none; padding: 0; max-width: var(--max); }
.slot-cta .final-cta { margin: 0; max-width: 1200px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .slot-cta:has(form) > .container { grid-template-columns: minmax(0, 1fr); }
  .slot-cta:has(form) h2 { max-width: none; }
}

/* ============================================================
   GEEN GEFILTERDE BLUR-CIRKELS MEER IN DE DONKERE BOXEN
   .final-cta gebruikte twee ::before/::after cirkels met filter:blur(80px).
   Een element met een filter krijgt een eigen compositielaag, en die laag
   wordt door de browser op de RECHTHOEK geknipt, niet op de afgeronde
   hoeken. Resultaat: een zichtbaar vierkant gloedvlak in een ronde box.
   De gloed zit nu als radial-gradient in de achtergrond zelf, dus zonder
   filter en zonder aparte laag. Zelfde effect, geen rechte randen.
   ============================================================ */
.final-cta::before, .final-cta::after { display: none !important; content: none !important; }
.t-panel::after { display: none !important; content: none !important; }

.final-cta {
  background:
    radial-gradient(46% 62% at 8% 4%, rgba(217, 70, 239, 0.34) 0%, rgba(217, 70, 239, 0) 68%),
    radial-gradient(52% 68% at 96% 96%, rgba(124, 58, 237, 0.36) 0%, rgba(124, 58, 237, 0) 70%),
    radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--brand-purple) 58%);
}
.slot-cta:has(form) > .container {
  background:
    radial-gradient(44% 60% at 6% 2%, rgba(217, 70, 239, 0.3) 0%, rgba(217, 70, 239, 0) 66%),
    radial-gradient(50% 66% at 97% 97%, rgba(124, 58, 237, 0.32) 0%, rgba(124, 58, 237, 0) 68%),
    radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--brand-purple) 58%);
}
.t-panel {
  background:
    radial-gradient(50% 70% at 92% -8%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, var(--accent) 0%, #d946ef 100%);
}

/* ============================================================
   LAATSTE INLINE KAARTEN OMGEZET
   Drie blokken hadden hun opmaak als inline style, dus CSS won daar niet
   van. Ze hebben nu een klasse en dezelfde behandeling als de rest.
   ============================================================ */

/* --- "Waarom je dit nodig hebt": was een wit vak met rand --- */
.blok-waarom {
  background: none; border: none; border-left: 2px solid var(--accent);
  border-radius: 0; box-shadow: none;
  padding: 4px 0 4px clamp(20px, 2.4vw, 30px);
}
.blok-waarom h3 { font-size: clamp(20px, 2vw, 26px) !important; margin-bottom: 12px !important; }
.blok-waarom p { font-size: 16px !important; line-height: 1.62 !important; }

/* --- de donkere lijst naast het verhaal op de dienstpagina's.
   De losse blur-cirkel erin is verwijderd, de gloed zit nu in de
   achtergrond zodat hij niet als vierkant in de ronde box valt. --- */
.blok-lijst {
  background:
    radial-gradient(46% 62% at 92% -6%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--brand-purple) 58%);
  color: #fff; border-radius: clamp(18px, 2.4vw, 26px);
  padding: clamp(28px, 3.4vw, 44px); overflow: clip;
}
.blok-lijst .kicker { color: rgba(255, 255, 255, 0.6) !important; }
.blok-lijst h3 { color: #fff !important; font-size: clamp(19px, 1.9vw, 24px) !important; }
.blok-lijst ul li { border-color: rgba(255, 255, 255, 0.14) !important; }
.blok-lijst ul li:last-child { border-bottom: none !important; }

/* --- het voorbeeldblok op ai-automatisatie: zelfde opbouw als een case,
   beeld met ronde hoeken en de tekst eronder zonder kaartchroom --- */
.case-voorbeeld {
  display: block !important; max-width: 1000px; margin: clamp(30px, 4vw, 50px) auto 0;
  background: none !important; border: none !important; border-radius: 0 !important;
  overflow: visible !important; box-shadow: none !important; padding: 0 !important;
}
.case-voorbeeld img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px -28px rgba(23, 16, 42, 0.4);
}
.case-voorbeeld > div:not(:has(img)) { padding: clamp(20px, 2.6vw, 30px) 0 0 !important; }
.case-voorbeeld h3 { font-size: clamp(21px, 2.1vw, 28px); margin: 10px 0 12px; }

/* --- de icoontegels iets duidelijker, de tint was te subtiel --- */
.feature-icon, .service-icon, .process-icon, .value-icon,
.ai-pillar-icon, .process-card-top .process-icon, .t-row-mark, .step-num, .info-icon {
  background: color-mix(in srgb, var(--ic, #7c3aed) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--ic, #7c3aed) 34%, transparent) !important;
}

/* --- de beeldcollage op website.html stond nog schuin --- */
.dienst-hero .t-shot-a { width: 96%; top: 2%; left: 16%; transform: none; z-index: 2; }
.dienst-hero .t-shot-b { width: 46%; bottom: 3%; left: -2%; transform: none; z-index: 3; }
.dienst-hero .t-phone { width: 12.5%; bottom: -2%; left: 41%; transform: none; z-index: 4; }

@media (max-width: 800px) {
  .case-voorbeeld { margin-top: 26px; }
}


/* ============================================================
   visibleonline: .contact-form inside the dark CTA
   The NL site wraps its CTA form in .contact-form-large; the inline quote
   form here is .contact-form. Same treatment, so the fields stay readable
   on the dark box instead of white-on-white.
   ============================================================ */
.slot-cta .contact-form {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px); margin: 0; max-width: none;
}
.slot-cta .contact-form label { color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 700; }
.slot-cta .contact-form input {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
}
.slot-cta .contact-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.slot-cta .contact-form input:focus { border-color: #c084fc; background: rgba(255, 255, 255, 0.14); outline: none; }
.slot-cta .contact-form .btn-accent { background: #fff; color: var(--accent); }
.slot-cta .contact-form .btn-accent:hover { background: linear-gradient(135deg, #c084fc 0%, #f0abfc 100%); color: var(--brand-purple); }
.slot-cta .contact-form > p, .slot-cta .contact-form .form-note { color: rgba(255, 255, 255, 0.6) !important; }
.slot-cta .contact-form a { color: #f0abfc !important; }
.slot-cta .form-status { color: rgba(255, 255, 255, 0.85); }


/* ============================================================
   visibleonline: CTA form fields stack and never overflow
   .contact-form carries max-width:640px and its inputs keep their default
   intrinsic size, so inside the narrower CTA column the second field was
   pushed past the edge of the dark box. Stack the fields and let them shrink.
   ============================================================ */
.slot-cta .contact-form .row { grid-template-columns: 1fr; gap: 14px; }
.slot-cta .contact-form .field { min-width: 0; }
.slot-cta .contact-form input,
.slot-cta .contact-form select,
.slot-cta .contact-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }


/* ============================================================
   visibleonline: breathing room under the live rating line
   The [data-google-rating] line sits directly above the review carousel and its
   stars collided with the first card's stars. Give the intro block real space.
   ============================================================ */
.t-reviews .t-quote-by { margin-bottom: clamp(30px, 4vw, 48px); }
.t-reviews .reviews-carousel { margin-top: clamp(8px, 1.5vw, 18px); }


/* ============================================================
   visibleonline: section figures on the long service and package pages
   ============================================================ */
.sec-figure { margin: 0 auto; max-width: 1000px; }
.sec-figure img {
  width: 100%; height: auto; display: block;
  border-radius: clamp(14px, 2vw, 22px);
  box-shadow: 0 18px 50px rgba(26, 13, 46, 0.14);
}
.sec-figure figcaption {
  margin-top: 14px; font-size: 14.5px; line-height: 1.55;
  color: var(--ink-muted); max-width: 62ch;
}
@media (max-width: 720px) {
  .sec-figure figcaption { font-size: 13.5px; }
}


/* ============================================================
   visibleonline: tick lists that replace paired prose columns
   ============================================================ */
.tick-list { list-style: none; padding: 0; margin: 22px 0 0; }
.tick-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}
.tick-list li:last-child { border-bottom: none; }
.tick-list li i {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 14px;
}
.tick-list a { color: var(--accent); font-weight: 600; }
/* both columns of a pair start their headings at the same line */
.split-2 > .reveal > h2 { min-height: 0; }
@media (min-width: 901px) {
  .split-2 { align-items: start; }
}