@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   INVOLV DESIGN SYSTEM  ·  v2.3  ·  canonieke stylesheet
   ---------------------------------------------------------------------------
   Bron van waarheid voor alle Involv-marketingpagina's (WordPress + WPBakery).
   Afkomstig van Pieters redesign ("homepage redesign" / steden & gemeenten),
   opgeschoond en gestandaardiseerd tot één herbruikbaar systeem.

   HOE GEBRUIKEN
   1. Laad dit bestand ÉÉN keer globaal via WPCode / Code Snippets
      (type: CSS Snippet, "Site Wide"). Niet per pagina plakken.
   2. Wikkel de HTML-body van elke pagina in:  <div class="involv"> ... </div>
      Alle stijl is gescoped onder .involv → nul clash met het WP-thema.
   3. Bouw de pagina met de componenten hieronder (zie component-catalog.html).

   REGELS
   · Kleuren/typografie NOOIT hardcoden in de pagina — gebruik de tokens/classes.
   · Afbeeldingen ALTIJD via het Go-domein of de WP-mediabibliotheek:
        https://go.involv-intranet.com/hubfs/images/Involv-intranet/...
     Nooit lokale paden (./..._files/...) — die breken bij publicatie.
   · Nieuwe kleur/afstand nodig? Voeg een token toe hier, niet inline.

   Tokens zijn 1:1 conform de officiële Involv brand rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BRAND TOKENS ─────────────────────────────────────────────────────────── */
.involv{
  --navy:#111926;
  --navy-2:#202F47;
  --navy-3:#16202f;
  --red:#E9514B;
  --pink:#C5416A;
  --yellow:#FFE746;
  --green:#2eab6f;
  --orange:#e08b2d;                 /* officieel brand-accent, optioneel */
  --grad-warm:linear-gradient(135deg,#C5416A,#E9514B);
  --grad-cool:linear-gradient(135deg,#111926,#202F47);
  --ink:#eef1f6;                    /* tekst op donker */
  --dim:#9aa6bd;                    /* gedimde tekst op donker */
  --paper:#f6f7fb;                  /* lichte sectie */
  --paper-2:#ecf0f6;               /* lichte sectie, iets donkerder */
  --paper-ink:#16202f;             /* tekst op licht */
  --paper-dim:#566175;             /* gedimde tekst op licht */
  --line:rgba(255,255,255,.10);
  --line-d:rgba(17,25,38,.10);
  --radius:18px;
  --container:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --bg-img:url("https://go.involv-intranet.com/hubfs/images/Involv-intranet/Involv%20background.jpg");
}

/* ─── RESET ────────────────────────────────────────────────────────────────── */
.involv,.involv *{margin:0;padding:0;box-sizing:border-box}
.involv{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--navy);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* full-bleed ALLEEN op onze eigen wrapper, niet op toevallige .involv-classes elders
   (bv. de Jupiter FAQ-toggles op de homepage hebben ook class "involv" → anders full-width) */
.involv:not([class*="mk-"]):not([class*="vc_"]){width:100vw;margin-left:calc(50% - 50vw)}

/* ─── BRANDED DONKERE ACHTERGROND (Involv background-image i.p.v. stippen) ──── */
.involv .dotgrid{
  background-image:linear-gradient(rgba(17,25,38,.85),rgba(17,25,38,.92)),var(--bg-img);
  background-size:cover;background-position:center;
}
.involv a{color:inherit;text-decoration:none}
.involv img{max-width:100%;display:block}
.involv .wrap{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ─── TYPOGRAFIE ───────────────────────────────────────────────────────────── */
.involv h1,.involv h2,.involv h3,.involv h4{font-weight:800;letter-spacing:-.5px;line-height:1.2}
.involv .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--yellow);margin-bottom:18px;
}
.involv .eyebrow.warm{color:var(--pink)}

/* ─── BUTTONS ──────────────────────────────────────────────────────────────── */
.involv .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;padding:13px 24px;border-radius:10px;
  cursor:pointer;transition:all .25s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.involv .btn-primary{background:var(--grad-warm);color:#fff}
/* Hover = subtiele inner-shadow (geen glow, geen lift) */
.involv .btn-primary:hover{box-shadow:rgba(60,64,67,.2) 0 1px 2px 0,rgba(50,50,93,.1) 0 30px 60px 0 inset,rgba(0,0,0,.15) 0 18px 36px 0 inset;transform:none}
.involv .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.involv .btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.involv .btn-ghost.dark{color:var(--paper-ink);border-color:var(--line-d)}
.involv .btn-ghost.dark:hover{border-color:var(--pink);color:var(--pink)}
.involv .btn-white{background:#fff;color:var(--red)}
.involv .btn-white:hover{box-shadow:rgba(60,64,67,.2) 0 1px 2px 0,rgba(50,50,93,.1) 0 30px 60px 0 inset,rgba(0,0,0,.15) 0 18px 36px 0 inset;transform:none}
.involv .cta-group{display:flex;gap:14px;flex-wrap:wrap}

/* ─── SECTIES ──────────────────────────────────────────────────────────────── */
.involv section.block{padding:96px 0;position:relative}
.involv section.paper{background:var(--paper);color:var(--paper-ink)}
.involv section.paper2{background:var(--paper-2);color:var(--paper-ink)}
.involv section.paper .eyebrow.warm,
.involv section.paper2 .eyebrow.warm{color:var(--pink)}
.involv .sec-head{max-width:720px;margin:0 auto 56px;text-align:center}
.involv .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:16px}
.involv .sec-head p{font-size:1.08rem;color:var(--paper-dim)}

/* ─── SCROLL-REVEAL ────────────────────────────────────────────────────────── */
.involv .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.involv .reveal.in{opacity:1;transform:none}
.involv .reveal.d1{transition-delay:.08s}
.involv .reveal.d2{transition-delay:.16s}
.involv .reveal.d3{transition-delay:.24s}
.involv .reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.involv .reveal{opacity:1;transform:none;transition:none}}

/* ═══ 1. HERO ══════════════════════════════════════════════════════════════ */
.involv .hero{
  position:relative;padding:160px 0 100px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(17,25,38,.40),rgba(17,25,38,.68)),
    var(--bg-img);
  background-size:cover;
  background-position:center;
}
.involv .hero-accent{
  position:absolute;top:0;right:0;width:42%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 55%,rgba(197,65,106,.06) 100%);
}
.involv .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.involv .hero-sector-badge{
  display:inline-block;
  font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--pink);margin-bottom:20px;
}
.involv .hero h1{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:800;line-height:1.16;letter-spacing:-.5px;color:var(--ink);margin-bottom:22px}
.involv .hero h1 em{font-style:normal;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Typewriter: wit + iets dunner dan de h1, met knipperende cursor */
.involv .h1-type{display:block;min-height:1.3em;font-weight:600;color:var(--ink)}
.involv .h1-type .tw-caret{display:inline-block;width:2px;height:1em;background:var(--pink);vertical-align:-.12em;margin-left:4px;animation:involvCaret 1.1s step-end infinite}
@keyframes involvCaret{0%,100%{opacity:1}50%{opacity:0}}
.involv .hero p.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--dim);font-weight:300;max-width:52ch;margin-bottom:34px;line-height:1.7}
/* horizontale rij, wrapt per volledig item (geen afsnijden, geen stapel-bolletjes) */
.involv .hero-micro{display:flex;flex-direction:row;flex-wrap:wrap;gap:9px 22px;color:rgba(238,241,246,.82);font-size:13.5px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.involv .hero-micro .hm{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.involv .hero-micro .hm svg{flex-shrink:0}
/* afbeelding links + kaarten in een eigen kolom rechts (geen overlap) */
.involv .hero-visual{display:grid;grid-template-columns:1fr 210px;gap:20px;align-items:center}
.involv .hero-cards{display:flex;flex-direction:column;gap:13px}
.involv .hero-cards .hero-bubble,.involv .hero-cards .hero-badge{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important;animation:none!important;opacity:1!important;transform:none!important}
.involv .hero-shot{border-radius:22px;border:0!important;box-shadow:none!important;overflow:hidden;background:transparent!important}
.involv .hero-shot img{width:100%;height:auto;display:block}
.involv .hero-badge{position:absolute;bottom:-22px;left:-22px;background:#fff;color:var(--paper-ink);border-radius:16px;padding:14px 18px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:flex;align-items:center;gap:12px;max-width:240px}
.involv .hero-badge img{width:42px;height:42px;object-fit:contain}
.involv .hero-badge b{font-size:13.5px;display:block;line-height:1.25;color:var(--paper-ink)}
.involv .hero-badge span{font-size:11.5px;color:var(--paper-dim)}
.involv .hero-bubble{position:absolute;background:#fff;border-radius:14px;padding:11px 15px;box-shadow:0 8px 32px rgba(0,0,0,.28);display:flex;align-items:center;gap:10px;max-width:230px;font-size:12px;color:var(--paper-ink);z-index:3}
.involv .hero-bubble b{display:block;font-size:12px;font-weight:700;color:var(--paper-ink);line-height:1.3}
.involv .hero-bubble small{font-size:11px;color:var(--paper-dim);line-height:1.4;display:block;margin-top:1px}
.involv .hero-bubble .hb-ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px}
.involv .hero-bubble .hb-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:var(--grad-warm)}
/* Twee bubbles die afwisselend verschijnen en verdwijnen */
.involv .hero-bubble.b-1{top:-18px;right:-20px;animation:involvBubbleCycle 7.5s ease-in-out infinite}
.involv .hero-bubble.b-2{bottom:56px;right:-26px;animation:involvBubbleCycle 7.5s ease-in-out infinite 3.75s}
@keyframes involvBubbleCycle{
  0%{opacity:0;transform:translateY(18px) scale(.94)}
  7%{opacity:1;transform:translateY(0) scale(1)}
  30%{opacity:1;transform:translateY(-4px) scale(1)}
  43%{opacity:1;transform:translateY(0) scale(1)}
  50%{opacity:0;transform:translateY(-18px) scale(.94)}
  100%{opacity:0;transform:translateY(-18px) scale(.94)}
}
@media(prefers-reduced-motion:reduce){
  .involv .hero-bubble{animation:none!important;opacity:1;transform:none}
  .involv .hero-bubble.b-2{display:none}
}

/* ═══ 2. TRUST BAR + TICKER ════════════════════════════════════════════════ */
.involv .trust{padding:44px 0 36px;border-top:1px solid var(--line)}
.involv .trust .label{text-align:center;color:var(--dim);font-size:13px;letter-spacing:1px;margin-bottom:28px}
.involv .trust .label b{color:var(--ink)}
.involv .logos{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.involv .logos img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}
.involv .logos img:hover{opacity:1}
.involv .ticker-outer{overflow:hidden;margin-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.involv .ticker-track{display:flex;white-space:nowrap;width:max-content;animation:involvTicker 44s linear infinite}
.involv .ticker-track:hover{animation-play-state:paused}
.involv .ticker-name{font-size:13.5px;font-weight:500;color:var(--dim);padding:0 18px;letter-spacing:.3px}
.involv .ticker-dot{font-size:10px;color:var(--pink);opacity:.7;display:inline-flex;align-items:center}
@keyframes involvTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ 3. PAIN POINTS ═══════════════════════════════════════════════════════ */
.involv .pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* subgrid: icoon / titel / tekst lijnen automatisch uit over alle kaarten */
.involv .pain{background:#fff;border:1px solid var(--line-d);border-radius:var(--radius);padding:28px;transition:transform .4s var(--ease),box-shadow .4s;display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:14px}
.involv .pain:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(17,25,38,.12)}
.involv .pain .ic{width:52px;height:52px;border-radius:13px;background:var(--grad-cool);display:flex;align-items:center;justify-content:center}
.involv .pain .ic svg{width:26px;height:26px}
/* fix: markup gebruikt h3 (semantisch juist) — style zowel h3 als h4 */
.involv .pain h3,.involv .pain h4{font-size:1.05rem !important;font-weight:700;color:var(--paper-ink);line-height:1.3;align-self:start}
.involv .pain p{font-size:13.5px;color:var(--paper-dim);line-height:1.6}

/* ═══ 4. FEATURE-BLOKKEN (alternerend links/rechts) ════════════════════════ */
.involv .feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:var(--container);margin:0 auto}
.involv .feat.rev .feat-txt{order:2}
.involv .feat h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:18px;color:var(--paper-ink)}
.involv .feat p.l{font-size:1.05rem;color:var(--paper-dim);margin-bottom:24px;line-height:1.7}
.involv .feat ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.involv .feat ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--paper-dim)}
.involv .feat ul li::before{
  content:"";flex:0 0 22px;height:22px;border-radius:6px;background:rgba(46,171,111,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232eab6f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px;margin-top:1px;
}
.involv .feat-img{border-radius:0;overflow:visible;border:none;box-shadow:none;background:transparent}
.involv .feat-img img{width:100%;height:auto;display:block}
/* tekstlink i.p.v. knop in feature-secties (CRO: 1 primaire CTA, rest = tekstlinks) */
.involv .feat-link{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--red)}
.involv .feat-link:hover{color:var(--pink)}
.involv .feat-placeholder{border-radius:22px;border:2px dashed rgba(17,25,38,.2);background:linear-gradient(135deg,#ecf0f6,#dde4f0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 30px;color:var(--paper-dim);text-align:center;min-height:320px}
.involv .feat-placeholder .ph-icon{font-size:3rem;opacity:.5}
.involv .feat-placeholder p{font-size:13px;font-weight:600;line-height:1.5}

/* ═══ 5. STATISTIEKEN ══════════════════════════════════════════════════════ */
.involv .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.involv .stat .big{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.involv .stat .lab{font-size:14px;color:var(--paper-dim);margin-top:4px}

/* ═══ 6. TESTIMONIAL-KAARTEN ═══════════════════════════════════════════════ */
.involv .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.involv .tcard{background:#fff;border:1px solid var(--line-d);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px;transition:transform .4s var(--ease),box-shadow .4s}
.involv .tcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(17,25,38,.12)}
.involv .stars{color:var(--pink);font-size:15px;letter-spacing:2px}
.involv .tcard .quote{font-size:14.5px;color:var(--paper-ink);line-height:1.6;flex:1;font-style:italic}
.involv .tcard .who{display:flex;align-items:center;gap:13px}
.involv .tcard .who .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.involv .tcard .who b{font-size:14px;display:block;color:var(--paper-ink)}
.involv .tcard .who span{font-size:12.5px;color:var(--paper-dim)}
.involv .tlink{font-size:12.5px;color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.involv .tlink:hover{color:var(--pink)}

/* ═══ 7. CASE-STUDY-KAARTEN ════════════════════════════════════════════════ */
.involv .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.involv .case-card{background:#fff;border:1px solid var(--line-d);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.involv .case-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(17,25,38,.12)}
.involv .case-img{height:200px;padding:24px 28px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--line-d)}
.involv .case-img img{height:150px;width:auto;max-width:85%;object-fit:contain}
.involv .case-body{padding:24px;flex:1;display:flex;flex-direction:column}
.involv .case-tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--pink);background:rgba(197,65,106,.08);padding:3px 10px;border-radius:999px;margin-bottom:12px}
.involv .case-body h3{font-size:1.05rem;color:var(--paper-ink);margin-bottom:10px;line-height:1.3}
.involv .case-body p{font-size:13.5px;color:var(--paper-dim);flex:1;line-height:1.6}
.involv .case-stats{display:flex;gap:0;margin:18px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.involv .case-stat{flex:1;text-align:center;padding:14px 8px}
.involv .case-stat:not(:last-child){border-right:1px solid var(--line-d)}
.involv .case-stat .big{font-size:1.6rem;font-weight:800;display:block;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.involv .case-stat .lab{font-size:11.5px;color:var(--paper-dim);display:block}
.involv .case-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--red);margin-top:16px}
.involv .case-link:hover{color:var(--pink)}

/* ═══ 8. QUICKSTART-BLOK ═══════════════════════════════════════════════════ */
.involv .qs{border-radius:26px;padding:54px;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;color:#fff;box-shadow:0 30px 70px rgba(17,25,38,.18);background-image:linear-gradient(rgba(17,25,38,.46),rgba(17,25,38,.66)),var(--bg-img);background-size:cover;background-position:center}
.involv .qs .eyebrow{color:var(--pink)}
.involv .qs h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:14px;color:#fff}
.involv .qs p{color:rgba(255,255,255,.8);margin-bottom:24px;font-size:1.02rem}
.involv .qs-steps{display:flex;flex-direction:column;gap:14px}
/* strakke genummerde lijst i.p.v. box-in-box */
.involv .qs-step{display:flex;gap:14px;align-items:flex-start;padding:6px 0}
.involv .qs-step .n{flex:0 0 34px;height:34px;border-radius:9px;background:var(--grad-warm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff}
.involv .qs-step b{font-size:14.5px;display:block;color:#fff}
.involv .qs-step span{font-size:13px;color:rgba(255,255,255,.72)}

/* ═══ 9. FAQ (native <details>) ════════════════════════════════════════════ */
.involv .faq{max-width:820px;margin:0 auto}
.involv .qa{border-bottom:1px solid var(--line-d)}
.involv .qa summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--paper-ink)}
.involv .qa summary::-webkit-details-marker{display:none}
.involv .qa summary .pm{flex:0 0 24px;height:24px;position:relative}
.involv .qa summary .pm::before,.involv .qa summary .pm::after{content:"";position:absolute;background:var(--pink);border-radius:2px;transition:transform .3s}
.involv .qa summary .pm::before{top:11px;left:2px;right:2px;height:2px}
.involv .qa summary .pm::after{left:11px;top:2px;bottom:2px;width:2px}
.involv .qa[open] summary .pm::after{transform:scaleY(0)}
.involv .qa p{padding:0 0 22px;color:var(--paper-dim);font-size:15px;max-width:90%}
.involv .qa a{color:var(--red);font-weight:600}

/* ═══ 10. FINALE CTA ═══════════════════════════════════════════════════════ */
.involv .final{position:relative;text-align:center;padding:110px 0;overflow:hidden;background:var(--grad-warm)}
.involv .final h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-bottom:18px;max-width:22ch;margin-inline:auto}
.involv .final p{color:rgba(255,255,255,.92);font-size:1.1rem;margin-bottom:32px;max-width:52ch;margin-inline:auto}
.involv .final .guarantee{margin-top:28px;font-size:13px;color:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.involv .g-item{display:flex;align-items:center;gap:6px}
.involv .g-item::before{content:"✓";font-weight:700;color:rgba(255,255,255,.9)}

/* ═══ INTEGRATIES ══════════════════════════════════════════════════════════ */
.involv .integ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
.involv .integ-card{background:#fff;border:1.5px solid rgba(17,25,38,.08);border-radius:14px;padding:28px 24px 24px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s}
.involv .integ-card:hover{box-shadow:0 8px 28px rgba(17,25,38,.1);transform:translateY(-2px)}
.involv .integ-card-open{border-style:dashed;background:rgba(197,65,106,.03)}
.involv .integ-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden}
.involv .integ-logo img{width:40px;height:40px;object-fit:contain}
.involv .integ-name{font-weight:700;font-size:.95rem;color:var(--navy)}
.involv .integ-desc{font-size:.83rem;color:var(--paper-dim);line-height:1.5}
.involv .integ-note{text-align:center;font-size:.82rem;color:var(--paper-dim);max-width:580px;margin:0 auto;padding-top:8px}

/* ═══ MENSELIJK CONTACT ════════════════════════════════════════════════════ */
.involv .human-cta{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.involv .human-cta-txt h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--navy);margin-bottom:16px}
.involv .human-cta-txt p{color:var(--paper-dim);line-height:1.65;margin-bottom:28px;max-width:46ch}
.involv .human-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.involv .human-cta-team{display:flex;flex-direction:column;gap:20px}
.involv .team-member{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid rgba(17,25,38,.08);border-radius:14px;padding:16px 20px;transition:box-shadow .2s,transform .2s}
.involv .team-member:hover{box-shadow:0 6px 22px rgba(17,25,38,.08);transform:translateY(-1px)}
.involv .team-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#C5416A,#E9514B);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:#fff;letter-spacing:.04em}
.involv .team-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.involv .team-info{display:flex;flex-direction:column;gap:2px}
.involv .team-info b{font-size:.95rem;color:var(--navy)}
.involv .team-info span{font-size:.8rem;color:var(--paper-dim)}

/* ═══ VERGELIJKINGSTABEL (nieuw t.o.v. bron — bv. pakketten / vs. maatwerk) ══ */
.involv .cmp-wrap{max-width:920px;margin:0 auto;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line-d);box-shadow:0 24px 50px rgba(17,25,38,.08)}
.involv .cmp{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
.involv .cmp th,.involv .cmp td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line-d)}
.involv .cmp thead th{background:var(--grad-cool);color:#fff;font-weight:700;font-size:14px;border-bottom:none}
.involv .cmp thead th:first-child{border-top-left-radius:var(--radius)}
.involv .cmp thead th:last-child{border-top-right-radius:var(--radius)}
.involv .cmp tbody tr:last-child td{border-bottom:none}
.involv .cmp tbody th{font-weight:600;color:var(--paper-ink);background:var(--paper)}
.involv .cmp td{color:var(--paper-dim)}
.involv .cmp td.hi{color:var(--paper-ink);font-weight:600}
.involv .cmp .yes{color:var(--green);font-weight:700}
.involv .cmp .no{color:#c2c8d4}
.involv .cmp col.feature{width:44%}
.involv .cmp tbody tr:hover td,.involv .cmp tbody tr:hover th{background:rgba(197,65,106,.04)}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .involv .pain-grid{grid-template-columns:repeat(2,1fr)}
  .involv .stats{grid-template-columns:repeat(2,1fr)}
  .involv .integ-grid{grid-template-columns:repeat(2,1fr)}
  .involv .human-cta{grid-template-columns:1fr;gap:36px}
}
@media(max-width:880px){
  .involv .hero-grid,
  .involv .hero-visual,
  .involv .feat,
  .involv .feat.rev .feat-txt,
  .involv .qs{grid-template-columns:1fr;order:initial}
  .involv .hero{padding:120px 0 70px}
  .involv .tgrid,
  .involv .cases-grid{grid-template-columns:1fr}
  .involv .qs{padding:34px}
}
@media(max-width:560px){
  .involv .pain-grid{grid-template-columns:1fr}
  .involv .logos{gap:24px}
  .involv .logos img{height:24px}
  .involv .wrap{padding:0 20px}
  .involv .integ-grid{grid-template-columns:1fr}
}

/* ═══ COMPAT: neutraliseert regels van een oudere, tijdelijk nog-meegeladen versie ══
   Zodat een pagina correct rendert ook als de globale loader nog een oude
   involv-design-system.css meelaadt (overgangsperiode). Onschadelijk in de eindstaat.
   ─────────────────────────────────────────────────────────────────────────────── */
.involv::before{display:none}
.involv .eyebrow::before{content:none;width:0;height:0;background:none}
.involv .hero-sector-badge{background:transparent;border:0;padding:0}
.involv .btn-primary,.involv .btn-white,.involv .btn-ghost{box-shadow:none}
.involv .btn-ghost:hover{transform:none}
.involv .qs-step{background:transparent;border:0;border-radius:0}
.involv .case-img img{filter:none}
.involv .hero-bubble.b-2{left:auto!important;right:-26px!important;top:auto!important;bottom:56px!important}
/* Jupiter-thema stylet .btn zelf → forceer onze knop-look */
.involv .btn{border-radius:10px!important}
.involv .btn-ghost,.involv .btn-ghost:hover,.involv .btn-ghost.dark:hover{background:transparent!important}
.involv .btn-ghost:hover,.involv .btn-ghost.dark:hover{border-color:var(--pink)!important;color:var(--pink)!important}