/* ===========================================================
   MATCHLINK — automatiseringslaag tussen aanvraag en plaatsing
   ===========================================================
   Eén accent: het staffing-blauw dat de dienst ook op de homepage
   en /services draagt. --pink wordt naar dat blauw geschaduwd zodat
   de gedeelde componenten (knoppen, eyebrows, links) meekleuren
   zonder per element een uitzondering.

   --warm is bewust géén tweede merkkleur. Hij markeert uitsluitend
   "zoals het nu gaat": handwerk, verlies, wachttijd. Overal waar
   blauw staat gaat het om de nieuwe situatie. Die afspraak maakt de
   voor-en-na-blokken leesbaar zonder bijschrift.
   =========================================================== */
body{
  --pink:#0073FF;
  --pink-soft:#7DB6FF;
  --fl-accent-mid:#4DA3FF;
  --ice:#8FC7FF;
  --acc-wash:rgba(0,115,255,.08);
  --acc-line:rgba(0,115,255,.30);
  --warm:#FF8A4C;
  --warm-line:rgba(255,138,76,.34);
}

/* ---------------- leesvoortgang ---------------- */
.mx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.mx-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--ice))}

/* ---------------- sticky CTA ---------------- */
.mx-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  transform:translateY(110%);transition:transform .5s var(--ease-out);
  background:rgba(6,15,38,.88);backdrop-filter:blur(14px);border-top:1px solid var(--acc-line);
}
.mx-sticky.is-on{transform:translateY(0)}
.mx-sticky__in{
  max-width:var(--shell);margin:0 auto;padding:13px var(--bleed-gut);
  display:flex;align-items:center;gap:22px;
}
.mx-sticky__txt{flex:1;min-width:0;font-size:14.5px;color:var(--t-80);line-height:1.4}
.mx-sticky__txt b{color:#fff;font-weight:600}
.mx-sticky .btn{flex:none}
@media (max-width:680px){
  .mx-sticky__txt{display:none}
  .mx-sticky .btn{flex:1;text-align:center}
}

/* ---------------- sectieritme ---------------- */
.mx-band{padding:clamp(70px,8vw,112px) 0;position:relative}
.mx-band--tight{padding:clamp(48px,5.5vw,72px) 0}
.mx-band--alt{background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)}
.mx-head{max-width:64ch;margin:0 0 clamp(32px,3.8vw,50px)}
.mx-head--wide{max-width:80ch}
.mx-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.mx-eyebrow::before{content:"";width:22px;height:1px;background:var(--pink);flex:none}
.mx-h2{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.028em;
  color:#fff;margin:0;text-wrap:balance;
}
.mx-h2 em{font-style:normal;color:var(--pink)}
.mx-lead{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--t-70)}
.mx-fine{margin:24px 0 0;font-size:13.5px;color:var(--t-62);line-height:1.6;max-width:78ch}

/* ---------------- hero ----------------
   Drie lagen: foto onderop, raster erboven, tekst bovenaan. De foto
   zit rechtsboven en het raster is naar links verschoven, zodat ze
   elkaar niet overlappen — anders zouden de rasterlijnen dwars over
   een gezicht lopen. */
.mx-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}

/* De aangeleverde foto heeft een felmagenta achtergrond. Onbewerkt
   vecht die met het staffing-blauw van deze pagina, dus wordt de
   verzadiging teruggebracht en er een navy waas overheen gelegd: de
   foto voegt zich naar het palet in plaats van andersom. */
.mx-hero__photo{
  /* Eigen verhouding aanhouden in plaats van het hele hero-vlak vullen:
     de hero is bijna twee keer zo hoog als de foto breed is, dus cover
     over inset:0 zoomde tot alleen de lege achtergrond boven haar hoofd
     in beeld stond. */
  position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(68%,880px);aspect-ratio:1024/572;
  background:url("hero-matcher.jpg") center right / cover no-repeat;
  filter:saturate(.38) contrast(1.05) brightness(.95);
  /* Twee maskers die elkaar snijden: links uitfaden zodat het raster
     zichtbaar blijft, onderaan uitfaden zodat de USP-grafieken op een
     schone ondergrond staan. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 22%, #000 68%),
    linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 22%, #000 68%),
    linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.mx-hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(6,15,38,.94) 0%,
    rgba(6,15,38,.58) 38%,
    rgba(8,30,74,.24) 100%);
}
@media (max-width:900px){.mx-hero__photo{display:none}}

.mx-hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 110% at 20% 42%, #000 6%, transparent 64%);
  mask-image:radial-gradient(120% 110% at 20% 42%, #000 6%, transparent 64%);
}
.mx-hero__in{
  position:relative;z-index:2;max-width:var(--shell);margin:0 auto;
  padding:clamp(92px,10vw,142px) var(--bleed-gut) clamp(56px,6vw,80px);
}
.crumb{font-size:13.5px;color:var(--muted);margin:0 0 24px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:#fff}
.mx-kick{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin:0 0 20px;
}
.mx-hero h1{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.034em;
  color:#fff;margin:0 0 26px;max-width:16ch;text-wrap:balance;
}
.mx-hero h1 em{font-style:normal;color:var(--pink)}

/* De drie beloftes waar de kop op rust: omzet, klanttevredenheid,
   productiviteit. Elk met een eigen micro-grafiek in dezelfde
   beeldtaal — staafjes — zodat het drie varianten van één verhaal
   zijn en geen drie losse iconen. De grafiek vertelt wat de zin
   vertelt: volume dat stijgt, uitslag die vlak wordt, output die
   groeit terwijl de bezetting gelijk blijft. */
.mx-usps{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:none;
}
.mx-usp{
  border-top:2px solid var(--pink);padding-top:18px;
  display:flex;flex-direction:column;gap:14px;
}
.mx-usp p{
  margin:0;font-size:15.6px;font-weight:600;color:#fff;
  line-height:1.42;letter-spacing:-.012em;
}
.mx-usp__viz{display:block;width:116px;height:53px;overflow:visible}
.mx-usp__viz rect{
  transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.06);
  transition:transform .75s var(--ease-out);
}
.mx-hero.is-lit .mx-usp__viz rect{transform:scaleY(1)}
.mx-usp:nth-child(1) rect:nth-of-type(1){transition-delay:.05s}
.mx-usp:nth-child(1) rect:nth-of-type(2){transition-delay:.10s}
.mx-usp:nth-child(1) rect:nth-of-type(3){transition-delay:.15s}
.mx-usp:nth-child(1) rect:nth-of-type(4){transition-delay:.20s}
.mx-usp:nth-child(1) rect:nth-of-type(5){transition-delay:.25s}
.mx-usp:nth-child(1) rect:nth-of-type(6){transition-delay:.30s}
.mx-usp:nth-child(2) rect:nth-of-type(1){transition-delay:.15s}
.mx-usp:nth-child(2) rect:nth-of-type(2){transition-delay:.20s}
.mx-usp:nth-child(2) rect:nth-of-type(3){transition-delay:.25s}
.mx-usp:nth-child(2) rect:nth-of-type(4){transition-delay:.30s}
.mx-usp:nth-child(2) rect:nth-of-type(5){transition-delay:.35s}
.mx-usp:nth-child(2) rect:nth-of-type(6){transition-delay:.40s}
.mx-usp:nth-child(3) rect:nth-of-type(1){transition-delay:.25s}
.mx-usp:nth-child(3) rect:nth-of-type(2){transition-delay:.30s}
.mx-usp:nth-child(3) rect:nth-of-type(3){transition-delay:.35s}
.mx-usp:nth-child(3) rect:nth-of-type(4){transition-delay:.40s}
.mx-usp:nth-child(3) rect:nth-of-type(5){transition-delay:.45s}
.mx-usp:nth-child(3) rect:nth-of-type(6){transition-delay:.50s}
/* De referentielijn in grafiek 3 (gelijkblijvende bezetting) schuift
   pas open nadat de staven staan — anders leest hij als onderdeel van
   de assen in plaats van als de vergelijking. Via scaleX en niet via
   stroke-dashoffset, want dat laatste zou de streepjes zelf opeten. */
.mx-usp__line{
  transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);
  transition:transform .8s var(--ease-out) .55s;
}
.mx-hero.is-lit .mx-usp__line{transform:scaleX(1)}
.mx-usp__cap{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:-4px 0 0;
}
@media (max-width:820px){
  .mx-usps{grid-template-columns:1fr;gap:0}
  .mx-usp{border-top:1px solid var(--acc-line);padding:18px 0;flex-direction:row;align-items:center;gap:20px}
  .mx-usp:first-child{border-top:2px solid var(--pink)}
  .mx-usp__viz{flex:none}
  .mx-usp__cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mx-usp__viz rect{transform:scaleY(1);transition:none}
  .mx-usp__line{transform:scaleX(1);transition:none}
}

.mx-hero__sub{margin:0 0 16px;font-size:17.5px;line-height:1.65;color:var(--t-80);max-width:62ch}
.mx-hero__sub b{color:#fff;font-weight:600}
.mx-hero__body{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--t-70);max-width:64ch}
.mx-hero__punch{
  margin:0;font-size:18px;font-weight:600;color:#fff;letter-spacing:-.016em;
  padding-left:20px;border-left:3px solid var(--pink);
}

.mx-hero__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.mx-hero__note{margin:16px 0 0;font-size:14px;color:var(--t-62);line-height:1.55;max-width:56ch}

/* ---------------- de keten ----------------
   Het beeld van de pagina: wat er tussen aanvraag en plaatsing
   gebeurt, als één lijn. Komt twee keer terug — hier als belofte,
   later als bedienbaar spectrum. */
.mx-chain{margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--rule);padding-top:30px}
.mx-chain__lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px;
}
.mx-chain__row{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.mx-node{position:relative;padding:0 14px 0 0}
.mx-node::after{
  content:"";position:absolute;left:0;right:0;top:7px;height:1px;
  background:var(--rule-strong);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out),background-color .4s ease;
}
.mx-chain.is-on .mx-node::after{transform:scaleX(1)}
.mx-chain.is-on .mx-node::after{background:var(--acc-line)}
.mx-node:last-child::after{right:14px}
.mx-node__dot{
  position:relative;z-index:1;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface-0);display:block;
  transition:border-color .4s ease,background-color .4s ease,box-shadow .4s ease;
}
.mx-chain.is-on .mx-node.is-lit .mx-node__dot{
  border-color:var(--pink);background:var(--pink);box-shadow:0 0 0 5px rgba(0,115,255,.16);
}
.mx-node__t{display:block;margin:16px 0 0;font-size:14.5px;font-weight:600;color:#fff;line-height:1.3;letter-spacing:-.012em}
.mx-node__w{
  display:block;margin:7px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .35s ease;
}
.mx-node__w.is-ai{color:var(--ice)}
.mx-node__w.is-mix{color:var(--pink-soft)}
@media (max-width:900px){
  .mx-chain__row{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .mx-node:nth-child(3)::after{right:14px}
}
@media (max-width:560px){
  .mx-chain__row{grid-template-columns:1fr;gap:0}
  .mx-node{padding:0 0 20px 22px}
  .mx-node::after{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .mx-chain.is-on .mx-node::after{transform:scaleY(1)}
  .mx-node:last-child::after{display:none}
  .mx-node__dot{position:absolute;left:0;top:0}
  .mx-node__t{margin-top:0}
}


/* ---------------- het probleem: de handelingen ---------------- */
/* Vaste kolomaantallen in plaats van auto-fill: twaalf handelingen
   delen precies op bij 4, 3, 2 en 1 kolom, zodat de laatste rij nooit
   half leeg is. */
.mx-hands{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
@media (max-width:1080px){.mx-hands{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.mx-hands{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.mx-hands{grid-template-columns:1fr}}
.mx-hands li{
  list-style:none;background:var(--surface-0);padding:15px 18px;
  font-size:14.2px;color:var(--t-70);line-height:1.5;
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
}
.mx-hands li span{font-family:var(--mono);font-size:11px;color:var(--warm);padding-top:2px}
.mx-verdict{
  margin:30px 0 0;font-size:19px;line-height:1.6;color:#fff;font-weight:600;
  padding-left:22px;border-left:3px solid var(--pink);letter-spacing:-.015em;max-width:62ch;
}

/* ---------------- medewerkersportaal ---------------- */
.mx-portal{display:grid;grid-template-columns:1fr 320px;gap:clamp(34px,5vw,68px);align-items:center}
.mx-portal__c p{margin:0 0 16px;color:var(--t-80);font-size:16.5px;line-height:1.7;max-width:60ch}
.mx-portal__c strong{color:#fff;font-weight:600}
.mx-fnlist{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.mx-fnlist li{
  background:var(--surface-0);padding:14px 18px;font-size:14.5px;color:var(--t-80);
  line-height:1.45;display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
}
.mx-fnlist svg{width:16px;height:16px;margin-top:2px;color:var(--pink);flex:none}
@media (max-width:560px){.mx-fnlist{grid-template-columns:1fr}}

/* Telefoonmock: het portaal is een app, dus laat hem als app zien. */
.mx-phone{
  justify-self:center;width:100%;max-width:300px;
  border:1px solid var(--acc-line);border-radius:30px;overflow:hidden;
  background:linear-gradient(170deg,rgba(0,115,255,.14),rgba(6,15,38,.96) 46%);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95);
}
.mx-phone__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 10px;font-family:var(--mono);font-size:10.5px;color:var(--t-62);
}
.mx-phone__bar b{color:#fff;font-size:13px;font-family:var(--sans,inherit);letter-spacing:-.01em}
.mx-phone__screen{padding:6px 14px 18px}
.mx-shift{
  border:1px solid var(--acc-line);border-radius:var(--r-md);
  background:rgba(0,115,255,.12);padding:14px 15px;margin-bottom:10px;
}
.mx-shift__k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ice);margin:0 0 7px;
}
.mx-shift h4{margin:0 0 3px;font-size:15px;color:#fff;letter-spacing:-.014em}
.mx-shift p{margin:0 0 12px;font-size:12.8px;color:var(--t-70)}
.mx-shift__btns{display:flex;gap:7px}
.mx-shift__btns span{
  flex:1;text-align:center;border-radius:20px;padding:7px 0;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
.mx-shift__yes{background:var(--pink);color:#fff}
.mx-shift__no{border:1px solid var(--rule-strong);color:var(--t-70)}
.mx-prow{
  display:grid;grid-template-columns:20px 1fr auto;gap:11px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--rule);font-size:13.2px;color:var(--t-80);
}
.mx-prow:last-child{border-bottom:0}
.mx-prow svg{width:16px;height:16px;color:var(--ice)}
.mx-prow em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted)}
@media (max-width:900px){
  .mx-portal{grid-template-columns:1fr;gap:36px}
  .mx-phone{max-width:280px}
}

/* ---------------- spectrum ---------------- */
.mx-spec{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1)}
.mx-spec__tabs{display:grid;grid-template-columns:repeat(3,1fr)}
.mx-lvl{
  background:none;border:0;border-bottom:1px solid var(--rule);cursor:pointer;text-align:left;
  padding:22px 26px;color:var(--t-70);font:inherit;position:relative;
  transition:background-color .3s ease,color .3s ease;
}
.mx-lvl + .mx-lvl{border-left:1px solid var(--rule)}
.mx-lvl::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out);
}
.mx-lvl:hover{background:rgba(255,255,255,.02);color:var(--t-80)}
.mx-lvl.is-on{background:var(--acc-wash);color:#fff}
.mx-lvl.is-on::after{transform:scaleX(1)}
.mx-lvl__k{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.mx-lvl.is-on .mx-lvl__k{color:var(--ice)}
.mx-lvl__t{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.mx-spec__body{padding:30px 30px 34px}
.mx-spec__say{
  margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--t-80);max-width:70ch;
  min-height:3.2em;
}
.mx-spec__say b{color:#fff}
.mx-spec .mx-chain{margin-top:0;border-top:0;padding-top:0}
.mx-spec__foot{
  margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule);
  font-size:15.5px;color:var(--t-80);line-height:1.6;
}
.mx-spec__foot b{color:#fff}
@media (max-width:820px){
  .mx-spec__tabs{grid-template-columns:1fr}
  .mx-lvl + .mx-lvl{border-left:0}
  .mx-spec__body{padding:26px 22px 30px}
  .mx-spec__say{min-height:0}
}

/* ---------------- jouw regels ---------------- */
.mx-rules{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.mx-rules__l{padding:34px 36px;background:var(--surface-1)}
.mx-rules__r{padding:34px 36px;border-left:1px solid var(--rule);background:linear-gradient(160deg,var(--acc-wash),transparent 60%)}
.mx-rules__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px;
}
.mx-rules__r .mx-rules__k{color:var(--ice)}
.mx-quotes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mx-quotes li{
  font-size:15.2px;line-height:1.5;color:var(--t-80);font-style:italic;
  padding-left:18px;border-left:2px solid var(--warm-line);
}
/* Deze regels beschrijven niet meer de pijn maar wat het systeem doet.
   Dus rechtop en in het accent, niet cursief en warm. */
.mx-quotes--rules li{font-style:normal;border-left-color:var(--acc-line)}
.mx-rules__r p{margin:0 0 16px;color:var(--t-80);line-height:1.7;font-size:15.5px}
.mx-rules__r p:last-child{margin-bottom:0}
.mx-rules__r strong{color:#fff;font-weight:600}
.mx-trust{
  margin-top:22px;padding:16px 20px;border:1px solid var(--acc-line);border-radius:var(--r-md);
  background:rgba(0,115,255,.07);font-size:14px;color:var(--t-80);line-height:1.6;
}
.mx-trust b{color:#fff}
@media (max-width:900px){
  .mx-rules{grid-template-columns:1fr}
  .mx-rules__r{border-left:0;border-top:1px solid var(--rule)}
}


/* ---------------- voor en na (proces) ---------------- */
.mx-ba{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.mx-ba__h,.mx-ba__r{display:grid;grid-template-columns:1.15fr 1fr 1fr}
.mx-ba__h{background:rgba(255,255,255,.025);border-bottom:1px solid var(--rule)}
.mx-ba__h span{
  padding:14px 22px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.mx-ba__h span:nth-child(2){color:var(--warm)}
.mx-ba__h span:nth-child(3){color:var(--ice)}
.mx-ba__r{border-bottom:1px solid var(--rule);transition:background-color .25s ease}
.mx-ba__r:last-child{border-bottom:0}
.mx-ba__r:hover{background:var(--acc-wash)}
.mx-ba__r > *{padding:15px 22px;font-size:14.6px;line-height:1.5}
.mx-ba__k{color:#fff;font-weight:500}
.mx-ba__now{color:var(--t-62)}
.mx-ba__new{color:var(--t-80);border-left:1px solid var(--rule)}
.mx-ba__new b{color:var(--ice);font-weight:600}
@media (max-width:760px){
  .mx-ba__h{display:none}
  .mx-ba__r{grid-template-columns:1fr;gap:0;padding:6px 0}
  .mx-ba__r > *{padding:5px 18px}
  .mx-ba__k{padding-top:14px;font-weight:600}
  .mx-ba__now::before{content:"Nu: ";font-family:var(--mono);font-size:11px;color:var(--warm)}
  .mx-ba__new{border-left:0;padding-bottom:14px}
  .mx-ba__new::before{content:"Straks: ";font-family:var(--mono);font-size:11px;color:var(--ice)}
}

/* ---------------- race ---------------- */
.mx-race{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1)}
.mx-race__row{padding:26px 30px;position:relative}
.mx-race__row + .mx-race__row{border-top:1px solid var(--rule)}
.mx-race__row--new{background:linear-gradient(120deg,var(--acc-wash),transparent 60%);padding-bottom:56px}
.mx-race__top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mx-race__name{font-size:16px;font-weight:700;color:var(--t-80);letter-spacing:-.012em}
.mx-race__row--new .mx-race__name{color:#fff}
.mx-race__dur{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--warm-line);color:var(--warm);border-radius:20px;padding:3px 11px;
  font-variant-numeric:tabular-nums;
}
.mx-race__row--new .mx-race__dur{border-color:var(--acc-line);color:var(--ice)}
.mx-race__meta{font-size:13.5px;color:var(--t-62);margin-left:auto}
.mx-track{position:relative;height:34px;border-radius:6px;background:rgba(255,255,255,.045)}
.mx-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,138,76,.55),var(--warm));
  transition:width 2.4s cubic-bezier(.32,.72,.3,1);
}
.mx-race__row--new .mx-fill{
  background:linear-gradient(90deg,var(--pink),var(--ice));transition-duration:.75s;
  box-shadow:0 0 22px rgba(0,115,255,.55);min-width:5px;
}
.mx-pin{position:absolute;top:-6px;bottom:-6px;width:1px;background:rgba(255,255,255,.22);opacity:0;transition:opacity .4s ease}
.mx-pin.is-on{opacity:1}
.mx-pin span{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mx-race__callout{
  position:absolute;left:0;top:calc(100% + 12px);display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;color:var(--ice);white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:opacity .5s ease .7s,transform .5s ease .7s;
}
.mx-race.is-run .mx-race__callout{opacity:1;transform:none}
.mx-race__callout::before{content:"";width:22px;height:1px;background:var(--acc-line)}
.mx-race__verdict{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 30px;border-top:1px solid var(--acc-line);background:rgba(0,115,255,.09);
}
.mx-race__verdict p{margin:0;font-size:15px;color:var(--t-80);line-height:1.5}
.mx-race__verdict b{color:#fff}
.mx-race__delta{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;color:#fff;line-height:1;
}
@media (max-width:760px){.mx-race__row{padding:22px 20px}.mx-race__row--new{padding-bottom:56px}.mx-race__verdict{padding:18px 20px}}

/* ---------------- live demo ---------------- */
.mx-demo{
  border:1px solid var(--acc-line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(0,115,255,.10),rgba(11,26,61,.86) 52%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.mx-demo__bar{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--acc-line);background:rgba(6,15,38,.5);
}
.mx-demo__dot{width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none}
.mx-demo__title{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);flex:1;min-width:0;
}
.mx-demo__tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule-strong);border-radius:20px;padding:3px 9px;
}
.mx-demo__body{padding:20px 18px 18px}
.mx-step{
  display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:start;padding:9px 0;
  opacity:.22;transform:translateY(4px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.mx-step.is-on{opacity:1;transform:none}
.mx-step__t{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:2px}
.mx-step.is-on .mx-step__t{color:var(--ice)}
.mx-step__c b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.35;letter-spacing:-.01em}
.mx-step__c span{display:block;margin-top:3px;font-size:13px;color:var(--t-62);line-height:1.5}
.mx-step__c i{font-style:normal;color:var(--ice);font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.mx-demo__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-top:1px solid var(--acc-line);background:rgba(0,115,255,.07);
}
.mx-demo__elapsed{font-family:var(--mono);font-size:12.5px;color:var(--t-80);font-variant-numeric:tabular-nums}
.mx-demo__elapsed b{color:#fff;font-size:15px}
.mx-demo__replay{
  background:none;border:1px solid var(--acc-line);border-radius:20px;color:var(--ice);
  font:inherit;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 13px;cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}
.mx-demo__replay:hover{background:var(--pink);color:#fff;border-color:var(--pink)}

/* ---------------- meten ---------------- */
.mx-measure{
  border:1px solid var(--acc-line);border-radius:var(--r-xl);padding:clamp(32px,4.4vw,56px);
  background:radial-gradient(120% 140% at 88% 8%, rgba(0,115,255,.16), transparent 58%), var(--surface-1);
}
.mx-measure p{margin:0 0 16px;color:var(--t-80);font-size:17px;line-height:1.72;max-width:72ch}
.mx-measure strong{color:#fff;font-weight:600}
.mx-metrics{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--acc-line);border:1px solid var(--acc-line);border-radius:var(--r-md);overflow:hidden}
.mx-metrics li{background:var(--surface-1);padding:18px 20px;font-size:14.5px;color:var(--t-80);line-height:1.45}
.mx-metrics b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:7px}

/* ---------------- aanbod ---------------- */
.mx-offers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mx-offer{
  border:1px solid var(--fl-line);border-radius:var(--r-lg);background:var(--surface-1);
  padding:34px;display:flex;flex-direction:column;
  transition:border-color .35s ease,transform .35s var(--ease-out);
}
.mx-offer:hover{transform:translateY(-3px);border-color:var(--acc-line)}
.mx-offer--lead{border-color:var(--acc-line);background:linear-gradient(155deg,var(--acc-wash),var(--surface-1) 58%)}
.mx-offer__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);margin:0 0 14px}
.mx-offer h3{margin:0 0 12px;font-size:23px;letter-spacing:-.024em;color:#fff;line-height:1.22}
.mx-offer > p{margin:0 0 20px;color:var(--t-70);line-height:1.68}
.mx-ticks{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.mx-ticks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;color:var(--t-80);font-size:15px;line-height:1.55}
.mx-ticks svg{width:18px;height:18px;margin-top:2px;color:var(--pink);flex:none}
.mx-offer__foot{margin:auto 0 0}
.mx-offer__fine{margin:12px 0 0;font-size:13px;color:var(--t-62)}
@media (max-width:860px){.mx-offers{grid-template-columns:1fr}}

/* ---------------- rekenmachine ---------------- */
.mx-calc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--acc-line);border-radius:var(--r-xl);overflow:hidden}
.mx-calc__in{padding:34px;display:flex;flex-direction:column;gap:24px}
.mx-field label{display:block;font-size:14px;color:var(--t-80);margin-bottom:11px;font-weight:500}
.mx-field__row{display:flex;align-items:center;gap:16px}
.mx-field input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.16);outline:none}
.mx-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--pink);cursor:pointer;border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(0,115,255,.35);transition:box-shadow .3s ease;
}
.mx-field input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(0,115,255,.18)}
.mx-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--pink);cursor:pointer;border:2px solid #fff}
.mx-field__v{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;color:#fff;min-width:84px;text-align:right}
.mx-calc__out{
  padding:34px;background:linear-gradient(155deg,rgba(0,115,255,.16),rgba(6,15,38,.5));
  border-left:1px solid var(--acc-line);display:flex;flex-direction:column;justify-content:center;
}
.mx-calc__lbl{font-size:14.5px;color:var(--t-70);margin:0 0 12px;line-height:1.5}
.mx-calc__amt{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-.036em;color:#fff;
  font-variant-numeric:tabular-nums;margin:0;
}
.mx-calc__sub{margin:14px 0 0;font-size:14.5px;color:var(--t-80);line-height:1.5}
.mx-calc__sub b{color:var(--ice)}
.mx-calc__fine{margin:20px 0 0;font-size:12.5px;color:var(--t-62)}
@media (max-width:860px){.mx-calc{grid-template-columns:1fr}.mx-calc__out{border-left:0;border-top:1px solid var(--acc-line)}}

/* ---------------- voor wie ---------------- */
.mx-fit{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.mx-fit__c{padding:32px 44px 32px 0}
.mx-fit__c + .mx-fit__c{padding:32px 0 32px 44px;border-left:1px solid var(--rule)}
.mx-fit h3{margin:0 0 20px;font-size:18px;color:#fff;letter-spacing:-.018em}
.mx-fit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.mx-fit li{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;font-size:15.2px;line-height:1.55}
.mx-fit svg{width:17px;height:17px;margin-top:3px;flex:none}
.mx-fit--yes li{color:var(--t-80)}
.mx-fit--yes svg{color:var(--pink)}
.mx-fit--no li{color:var(--t-62)}
.mx-fit--no svg{color:var(--slate)}
.mx-fit--no em{font-style:normal;color:var(--t-70)}
@media (max-width:860px){
  .mx-fit{grid-template-columns:1fr}
  .mx-fit__c{padding:28px 0}
  .mx-fit__c + .mx-fit__c{padding:28px 0;border-left:none;border-top:1px solid var(--rule)}
}

/* ---------------- accordeon ---------------- */
.mx-acc{border-top:1px solid var(--rule)}
.mx-acc__i{border-bottom:1px solid var(--rule)}
.mx-acc__b{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:1fr 26px;gap:20px;align-items:center;padding:21px 0;
  color:#fff;font:inherit;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.014em;
  transition:color .25s ease,padding-left .3s var(--ease-out);
}
.mx-acc__b:hover{color:var(--ice);padding-left:8px}
.mx-acc__i.is-open .mx-acc__b{color:var(--ice)}
.mx-acc__ic{position:relative;width:15px;height:15px;justify-self:end}
.mx-acc__ic::before,.mx-acc__ic::after{content:"";position:absolute;background:var(--pink);transition:transform .34s var(--ease-out),opacity .3s ease}
.mx-acc__ic::before{top:50%;left:0;width:15px;height:1.5px;transform:translateY(-50%)}
.mx-acc__ic::after{left:50%;top:0;width:1.5px;height:15px;transform:translateX(-50%)}
.mx-acc__i.is-open .mx-acc__ic::after{transform:translateX(-50%) scaleY(0);opacity:0}
.mx-acc__p{overflow:hidden;height:0;transition:height .36s var(--ease-out)}
.mx-acc__in{padding:0 0 24px;max-width:86ch}
.mx-acc__in p{margin:0 0 14px;color:var(--t-70);line-height:1.72;font-size:15.5px}
.mx-acc__in p:last-child{margin-bottom:0}

/* modules binnen een accordeon-item */
.mx-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:4px}
.mx-mod{background:var(--surface-0);padding:20px 22px}
.mx-mod__n{font-family:var(--mono);font-size:11px;color:var(--ice);letter-spacing:.14em;display:block;margin-bottom:9px}
.mx-mod h4{margin:0 0 7px;font-size:15px;color:#fff;letter-spacing:-.014em;line-height:1.3}
.mx-mod p{margin:0;color:var(--t-62);font-size:13.6px;line-height:1.55}
@media (max-width:900px){.mx-mods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.mx-mods{grid-template-columns:1fr}}

/* ---------------- reveal ---------------- */
.mx-rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.mx-rev.is-in{opacity:1;transform:none}
.mx-rev[data-d="1"]{transition-delay:.08s}
.mx-rev[data-d="2"]{transition-delay:.16s}
.mx-rev[data-d="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .mx-rev,.mx-step{opacity:1;transform:none;transition:none}
  .mx-fill{transition:none}
  .mx-pin,.mx-race__callout{opacity:1;transform:none;transition:none}
  .mx-sticky{transition:none}
  .mx-node::after{transform:none!important}
}