/* =====================================================================
   MumboMedia — sitestijl.

   De layout van de kern wordt in dit thema volledig overschreven, dus deze
   stylesheet staat op zichzelf. Uitgangspunt: donker als basis, wit alleen
   waar de aandacht moet vallen, en typografie die laat zien dat we met
   structuur kunnen werken in plaats van met plaatjes.
   ===================================================================== */

:root{
  --mm-ink:#170B12;
  --mm-ink-2:#221019;
  --mm-roze:#AF4172;
  --mm-gloed:#FF5E9B;
  --mm-wit:#FBF7F9;
  --mm-zacht:#D8C6D0;
  --mm-gedempt:#9C8492;
  --mm-lijn:rgba(255,255,255,.14);
  --mm-lijn-hard:rgba(255,255,255,.28);
  --mm-wrap:1240px;
  --mm-ease:cubic-bezier(.2,.7,.3,1);
  --mm-r:4px;
  --mm-r-groot:6px;
  --mm-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mm-ink);color:var(--mm-zacht);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* HostFact's eigen whois.css wordt door zijn script in de pagina geschoven en
   komt dus ná deze stylesheet. Hij zet onder andere body{background:transparent}
   en een ander lettertype — dat zou de hele site wit maken. Door html ervoor te
   zetten wegen deze regels zwaarder, ongeacht de volgorde. */
html body{
  background:var(--mm-ink);color:var(--mm-zacht);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.62;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:Ubuntu,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  line-height:1.06;margin:0;color:#fff}
h1{font-size:clamp(2.4rem,7vw,5rem)}
h2{font-size:clamp(1.8rem,4.4vw,3rem)}
h3{font-size:1.2rem;font-weight:500;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--mm-gloed);outline-offset:3px;border-radius:4px}

.mm-wrap{width:100%;max-width:var(--mm-wrap);margin:0 auto;padding:0 24px}
.mm-skip{position:absolute;left:-9999px}
.mm-skip:focus{left:16px;top:16px;background:#fff;color:var(--mm-ink);padding:10px 16px;z-index:200;border-radius:var(--mm-r)}

/* label in monospace, als een technisch bijschrift */
.mm-label{font-family:var(--mm-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mm-gloed);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.mm-label::before{content:"";width:26px;height:1px;background:var(--mm-gloed)}

/* ---------------------------------------------------------------- kop */
.mm-kop{position:sticky;top:0;z-index:80;background:rgba(23,11,18,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.mm-kop.is-vast{border-bottom-color:var(--mm-lijn);background:rgba(23,11,18,.96)}
.mm-kop-in{display:flex;align-items:center;gap:20px;min-height:76px;position:relative}
.mm-merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-family:Ubuntu,sans-serif;font-weight:700;font-size:1.22rem;letter-spacing:-.04em}
.mm-stip{width:10px;height:10px;border-radius:50%;background:var(--mm-gloed);
  box-shadow:0 0 14px var(--mm-gloed);transition:transform .4s var(--mm-ease)}
.mm-merk:hover .mm-stip{transform:scale(1.4)}

.mm-nav{display:none;margin-left:auto;gap:4px}
@media(min-width:940px){.mm-nav{display:flex}}
.mm-nav a{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--mm-zacht);
  padding:9px 13px;border-radius:var(--mm-r);font-size:.98rem;
  transition:color .28s,background .28s,box-shadow .28s}
.mm-nav a:hover{box-shadow:inset 0 0 0 1px var(--mm-lijn)}
.mm-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.mm-nav a[aria-current="page"]{color:#fff;background:rgba(255,94,155,.14)}
.mm-nr{font-family:var(--mm-mono);font-size:.68rem;color:var(--mm-gedempt);letter-spacing:.06em}
.mm-nav a[aria-current="page"] .mm-nr{color:var(--mm-gloed)}

.mm-kop-acties{display:flex;align-items:center;gap:10px;margin-left:auto}
@media(min-width:940px){.mm-kop-acties{margin-left:0}}
.mm-menuknop{display:grid;gap:5px;background:none;border:1px solid var(--mm-lijn);border-radius:var(--mm-r);
  padding:11px 12px;cursor:pointer}
.mm-menuknop span{display:block;width:18px;height:1.5px;background:#fff}
@media(min-width:940px){.mm-menuknop{display:none}}
.mm-nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
  background:var(--mm-ink-2);border-top:1px solid var(--mm-lijn);padding:8px;border-radius:0 0 var(--mm-r) var(--mm-r)}
.mm-nav.is-open a{padding:14px 16px;border-radius:var(--mm-r)}

/* ------------------------------------------------------------- knoppen */
.mm-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--mm-r);background:#fff;color:var(--mm-ink);
  transition:transform .3s var(--mm-ease),box-shadow .3s,background .3s,color .3s}
.mm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,255,255,.18)}
.mm-btn--klein{padding:11px 20px;font-size:.98rem}
.mm-btn--roze{background:var(--mm-roze);color:#fff}
.mm-btn--roze:hover{background:var(--mm-gloed);color:var(--mm-ink);box-shadow:0 14px 30px rgba(255,94,155,.35)}
.mm-btn--rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--mm-lijn-hard)}
.mm-btn--rand:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #fff}
.mm-tekstlink{color:#fff;text-decoration:none;font-weight:600;border-bottom:1px solid var(--mm-roze);
  padding-bottom:2px;transition:border-color .3s,color .3s}
.mm-tekstlink:hover{color:var(--mm-gloed);border-color:var(--mm-gloed)}

/* ------------------------------------------------------------- secties */
/* Ruimte tussen secties.

   Elke sectie had 100px boven en onder, dus tussen twee blokken zat 200px.
   Waar de ondergrond wisselt — donker naar wit — is dat precies goed: die
   twee banden moeten uit elkaar staan. Maar volgen er drie donkere secties
   op elkaar, dan is dat 200px identieke leegte en leest het als een gat in
   de pagina in plaats van als rust.

   Dus: volle ruimte waar de band verandert, krap waar hij hetzelfde blijft.
   En op een telefoon overal minder, want daar telt elke schermhoogte. */
:root{--mm-sectie-pad:clamp(56px,6.5vw,100px)}
.mm-sectie{padding:var(--mm-sectie-pad) 0;position:relative}
.mm-sectie--strak{padding:calc(var(--mm-sectie-pad) * .62) 0}

/* twee secties met dezelfde ondergrond achter elkaar: minder lucht ertussen */
.mm-sectie + .mm-sectie{padding-top:calc(var(--mm-sectie-pad) * .30)}
/* ...maar zodra de ondergrond wisselt weer de volle ruimte. Deze regels
   staan bewust ná de vorige: gelijke specificiteit, dus de laatste wint. */
.mm-sectie + .mm-sectie--licht,
.mm-sectie--licht + .mm-sectie:not(.mm-sectie--licht){padding-top:var(--mm-sectie-pad)}
/* De paginakop uit de kern loopt direct over in het eerste blok. Titel en
   intro horen bij elkaar met wat eronder komt; daar hoeft geen gat tussen. */
.section--kop{padding-bottom:calc(var(--mm-sectie-pad) * .34)}
.section--kop + .mm-sectie{padding-top:calc(var(--mm-sectie-pad) * .34)}
.section--kop + .mm-sectie--strak{padding-top:calc(var(--mm-sectie-pad) * .34)}
.mm-sectie--licht{background:var(--mm-wit);color:#3A2B33}
.mm-sectie--licht h1,.mm-sectie--licht h2,.mm-sectie--licht h3{color:var(--mm-ink)}
.mm-sectie--licht .mm-label{color:var(--mm-roze)}
.mm-sectie--licht .mm-label::before{background:var(--mm-roze)}
.mm-kop-blok{max-width:56ch;margin-bottom:52px}
.mm-kop-blok p{margin-top:20px;font-size:1.1rem;color:var(--mm-gedempt)}
.mm-sectie--licht .mm-kop-blok p{color:#6B5460}

/* ---------------------------------------------------------------- hero */
.mm-hero{position:relative;overflow:hidden;padding:clamp(80px,12vw,150px) 0 84px}
.mm-hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:150%;pointer-events:none;
  background:radial-gradient(46% 40% at 20% 10%,rgba(175,65,114,.5),transparent 68%),
             radial-gradient(38% 34% at 86% 4%,rgba(255,94,155,.16),transparent 70%)}
.mm-hero-in{position:relative;display:grid;gap:48px}
@media(min-width:1000px){.mm-hero-in{grid-template-columns:1.35fr .65fr;align-items:end}}
.mm-hero h1{max-width:15ch}
.mm-hero h1 em{font-style:normal;color:var(--mm-gloed)}
.mm-hero-lede{margin-top:26px;max-width:52ch;font-size:1.16rem;color:var(--mm-zacht)}
.mm-hero-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* de pijlers naast de kop */
.mm-pijlers{display:grid;gap:0;border-top:1px solid var(--mm-lijn)}
.mm-pijler{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--mm-lijn);transition:padding-left .35s var(--mm-ease)}
.mm-pijler b{grid-column:2;font-family:Ubuntu,sans-serif;font-size:1.05rem;font-weight:500;color:#fff}
.mm-pijler span{grid-column:2;font-size:.98rem;color:var(--mm-gedempt)}
.mm-pijler i{grid-row:1 / span 2;font-style:normal;font-family:var(--mm-mono);font-size:.74rem;
  color:var(--mm-gloed);padding-top:4px}

/* ---------------------------------------------------------- cijferband */
.mm-cijfers{display:grid;gap:0;border-top:1px solid var(--mm-lijn)}
@media(min-width:760px){.mm-cijfers{grid-template-columns:repeat(3,1fr)}}
.mm-cijfer{padding:30px 0;border-bottom:1px solid var(--mm-lijn)}
@media(min-width:760px){
  .mm-cijfer{padding:34px 28px;border-bottom:0;border-right:1px solid var(--mm-lijn)}
  .mm-cijfer:first-child{padding-left:0}
  .mm-cijfer:last-child{border-right:0}
}
.mm-cijfer b{display:block;font-family:Ubuntu,sans-serif;font-size:clamp(2rem,4vw,2.9rem);
  font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.mm-cijfer span{display:block;margin-top:10px;font-size:.98rem;color:var(--mm-gedempt)}

/* --------------------------------------------------- diensten als lijst */
.mm-lijst{border-top:1px solid var(--mm-lijn)}
.mm-sectie--licht .mm-lijst{border-top-color:rgba(23,11,18,.14)}
.mm-rij{border-bottom:1px solid var(--mm-lijn)}
.mm-sectie--licht .mm-rij{border-bottom-color:rgba(23,11,18,.14)}
.mm-rij-kop{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:none;border:0;font:inherit;text-align:left;color:inherit;cursor:pointer;padding:30px 4px;
  transition:padding-left .4s var(--mm-ease)}
.mm-rij-nr{font-family:var(--mm-mono);font-size:.78rem;color:var(--mm-roze);letter-spacing:.08em}
.mm-rij-titel{font-family:Ubuntu,sans-serif;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:500;
  letter-spacing:-.02em;margin:0;color:#fff}
.mm-sectie--licht .mm-rij-titel{color:var(--mm-ink)}
.mm-rij-plus{width:34px;height:34px;border-radius:var(--mm-r);display:grid;place-items:center;font-size:1.2rem;
  border:1px solid var(--mm-lijn-hard);color:#fff;
  transition:transform .4s var(--mm-ease),background .3s,color .3s,border-color .3s}
.mm-sectie--licht .mm-rij-plus{border-color:rgba(23,11,18,.2);color:var(--mm-ink)}
.mm-rij.is-open .mm-rij-plus{transform:rotate(135deg);background:var(--mm-roze);color:#fff;border-color:var(--mm-roze)}
.mm-rij-uit{max-height:0;overflow:hidden;transition:max-height .5s var(--mm-ease)}
.mm-rij.is-open .mm-rij-uit{max-height:660px}
.mm-rij-in{padding:0 4px 34px;display:grid;gap:26px}
@media(min-width:860px){.mm-rij-in{grid-template-columns:1.1fr .9fr;padding-left:58px}}
.mm-rij-in ul{margin:0;padding-left:20px}
.mm-rij-in li{margin-bottom:9px}
.mm-callout{background:rgba(255,255,255,.04);color:var(--mm-zacht);border-radius:var(--mm-r-groot);padding:24px 26px;
  border:1px solid var(--mm-lijn);margin:0}
.mm-sectie--licht .mm-callout{background:var(--mm-ink);border-color:transparent}
.mm-callout b{display:block;color:#fff;font-weight:600;margin-bottom:8px}

/* -------------------------------------------------------- werk als lijst */
.mm-werk{border-top:1px solid var(--mm-lijn)}
.mm-werk-item{display:grid;gap:6px 24px;padding:34px 4px;border-bottom:1px solid var(--mm-lijn);
  text-decoration:none;color:inherit;transition:padding-left .4s var(--mm-ease),background .35s}
@media(min-width:860px){.mm-werk-item{grid-template-columns:1fr 1.2fr auto;align-items:baseline}}
.mm-werk-naam{font-family:Ubuntu,sans-serif;font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:#fff}
.mm-werk-wat{color:var(--mm-gedempt)}
.mm-werk-uit{font-family:var(--mm-mono);font-size:.8rem;color:var(--mm-gloed);white-space:nowrap}

/* ------------------------------------------------------------- portaal */
.mm-twee{display:grid;gap:48px;align-items:center}
@media(min-width:980px){.mm-twee{grid-template-columns:.9fr 1.1fr;gap:70px}}
.mm-streepjes{display:grid;gap:2px;margin-top:32px}
.mm-streepjes div{padding:16px 0 16px 20px;border-left:2px solid var(--mm-roze);
  transition:border-color .3s,padding-left .35s var(--mm-ease)}
.mm-streepjes div:hover{border-color:var(--mm-gloed);padding-left:28px}
.mm-streepjes b{display:block;color:#fff;font-weight:600}
.mm-streepjes span{color:var(--mm-gedempt);font-size:.98rem}

.mm-venster{background:#fff;color:var(--mm-ink);border-radius:var(--mm-r-groot);overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5);transition:transform .55s var(--mm-ease)}
.mm-venster-balk{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#F2E9EE}
.mm-venster-balk i{width:9px;height:9px;border-radius:50%;background:#C8B2BF}
.mm-venster-balk em{margin-left:10px;font-style:normal;font-family:var(--mm-mono);font-size:.76rem;color:#6B5460}
.mm-venster-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid #F2E9EE}
.mm-venster-tabs button{border:0;background:none;font:inherit;font-size:.96rem;padding:14px 12px;
  cursor:pointer;color:#6B5460;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.mm-venster-tabs button[aria-selected="true"]{color:var(--mm-roze);border-bottom-color:var(--mm-roze);font-weight:600}
.mm-vlak{display:none;padding:14px 18px 20px}
.mm-vlak.is-on{display:block;animation:mm-fade .4s var(--mm-ease)}
@keyframes mm-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mm-regel{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid #F5EEF1;
  border-radius:var(--mm-r);font-size:1rem;transition:background .28s,padding-left .28s var(--mm-ease)}
.mm-regel:last-child{border-bottom:0}
.mm-regel:hover{background:#FBF7F9;padding-left:14px}
.mm-regel b{font-weight:600}
.mm-pil{font-size:.8rem;padding:3px 9px;border-radius:var(--mm-r);font-weight:600;background:#F2E9EE;color:#6B5460}
.mm-pil--ok{background:rgba(47,211,184,.2);color:#0B5B4E}
.mm-pil--let{background:rgba(175,65,114,.13);color:#8E2F5B}
.mm-rechts{margin-left:auto;color:#6B5460;font-size:.93rem;font-family:var(--mm-mono)}

/* ------------------------------------------------------------- stappen */
.mm-stappen{display:grid;gap:28px}
@media(min-width:820px){.mm-stappen{grid-template-columns:repeat(4,1fr)}}
.mm-stap{border-top:1px solid var(--mm-lijn);padding-top:20px;transition:border-color .35s}
.mm-stap-nr{font-family:var(--mm-mono);font-size:.76rem;color:var(--mm-gloed);letter-spacing:.08em}
.mm-stap b{display:block;margin:10px 0 8px;color:#fff;font-weight:600}
.mm-stap span{color:var(--mm-gedempt);font-size:.98rem}
.mm-sectie--licht .mm-stap{border-top-color:rgba(23,11,18,.14)}
.mm-sectie--licht .mm-stap b{color:var(--mm-ink)}
.mm-sectie--licht .mm-stap span{color:#6B5460}

/* ---------------------------------------------------------- prijsregels */
.mm-prijzen{display:grid;gap:0;border-top:1px solid rgba(23,11,18,.14)}
.mm-prijs{display:grid;gap:6px 24px;padding:28px 4px;border-bottom:1px solid rgba(23,11,18,.14);
  transition:padding-left .35s var(--mm-ease),background .3s;text-decoration:none;color:inherit}
@media(min-width:860px){.mm-prijs{grid-template-columns:12rem 1fr auto;align-items:baseline}}
.mm-prijs-naam{font-family:Ubuntu,sans-serif;font-size:1.35rem;font-weight:500;color:var(--mm-ink)}
.mm-prijs-wat{color:#6B5460}
.mm-prijs-bedrag{font-family:Ubuntu,sans-serif;font-size:1.25rem;font-weight:500;color:var(--mm-roze);white-space:nowrap}

/* -------------------------------------------------------- specificaties */
.mm-specs{border-top:1px solid rgba(23,11,18,.14)}
.mm-spec{display:grid;gap:4px 28px;padding:18px 4px;border-bottom:1px solid rgba(23,11,18,.14)}
@media(min-width:700px){.mm-spec{grid-template-columns:14rem 1fr;align-items:baseline}}
.mm-spec b{font-weight:600;font-family:var(--mm-mono);font-size:.84rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mm-roze)}
.mm-spec span{color:#6B5460}

/* ------------------------------------------------------------ slotband */
.mm-slot{background:var(--mm-roze);color:#fff;padding:110px 0;position:relative;overflow:hidden}
.mm-slot::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(255,94,155,.55),transparent 70%)}
.mm-slot .mm-wrap{position:relative}
.mm-slot h2{max-width:20ch}
.mm-slot p{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.92)}
.mm-slot-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------------------------------------------------------------- voet */
.mm-voet{background:var(--mm-ink-2);border-top:1px solid var(--mm-lijn);padding:72px 0 30px}
.mm-voet-top{display:grid;gap:40px}
@media(min-width:860px){.mm-voet-top{grid-template-columns:1.6fr 1fr 1fr}}
.mm-merk--groot{font-size:1.5rem;margin-bottom:16px}
.mm-voet-claim{max-width:42ch;color:var(--mm-gedempt)}
.mm-voet-contact{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.mm-voet-contact a{color:#fff;text-decoration:none;border-bottom:1px solid var(--mm-roze);padding-bottom:2px}
.mm-voet-contact a:hover{color:var(--mm-gloed);border-color:var(--mm-gloed)}
.mm-voet-kolom h3{font-family:var(--mm-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-gedempt);font-weight:500;margin-bottom:14px}
.mm-voet-kolom a{display:block;color:var(--mm-zacht);text-decoration:none;padding:5px 0;
  transition:color .25s,transform .25s var(--mm-ease)}
.mm-voet-kolom a:hover{color:#fff;transform:translateX(5px)}
.mm-voet-onder{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  margin-top:56px;padding-top:22px;border-top:1px solid var(--mm-lijn);
  font-family:var(--mm-mono);font-size:.76rem;color:var(--mm-gedempt);letter-spacing:.04em}

/* ----------------------------------------------------- contactformulier */
.mm-formulier{background:#fff;color:var(--mm-ink);border-radius:var(--mm-r-groot);padding:32px}
.mm-formulier h3{color:var(--mm-ink)}
.mm-formulier label{display:block;font-weight:600;font-size:.96rem;margin:16px 0 6px}
.mm-formulier input,.mm-formulier select,.mm-formulier textarea{width:100%;font:inherit;padding:13px 14px;
  border:1px solid #E4D8DF;border-radius:var(--mm-r);background:var(--mm-wit);color:var(--mm-ink)}
.mm-formulier textarea{min-height:140px;resize:vertical}
.mm-formulier input:focus,.mm-formulier select:focus,.mm-formulier textarea:focus{
  outline:0;border-color:var(--mm-roze);box-shadow:0 0 0 3px rgba(175,65,114,.15);background:#fff}
.mm-formulier .mm-btn{width:100%;justify-content:center;margin-top:22px;background:var(--mm-roze);color:#fff}
.mm-formulier .mm-btn:hover{background:#8E2F5B;box-shadow:0 14px 30px rgba(175,65,114,.3)}
.mm-formulier .mm-klein{margin-top:12px;font-size:.9rem;color:#6B5460}
.mm-melding{padding:14px 16px;border-radius:var(--mm-r);font-weight:600;margin-bottom:18px;
  background:rgba(47,211,184,.16);color:#0B5B4E}
.mm-melding--fout{background:rgba(175,65,114,.12);color:#8E2F5B}
.mm-contactgegevens div{padding:18px 0;border-bottom:1px solid var(--mm-lijn)}
.mm-contactgegevens b{display:block;color:#fff;font-weight:600}
.mm-contactgegevens a,.mm-contactgegevens span{color:var(--mm-gedempt);text-decoration:none}
.mm-contactgegevens a:hover{color:var(--mm-gloed)}

/* ---------------------------------------------------------- losse tekst */
.mm-tekst{max-width:68ch}
.mm-tekst h2{margin:38px 0 14px}
.mm-tekst h3{margin:26px 0 10px;color:#fff}
.mm-sectie--licht .mm-tekst h3{color:var(--mm-ink)}
.mm-tekst p{margin-bottom:16px}
.mm-tekst ul{padding-left:20px}
.mm-tekst li{margin-bottom:8px}
.mm-tekst a{color:var(--mm-gloed)}
.mm-sectie--licht .mm-tekst a{color:var(--mm-roze)}

/* ------------------------------------------------------------ beweging */
.mm-op{opacity:0;transform:translateY(18px);animation:mm-op-in .85s var(--mm-ease) forwards}
.mm-op:nth-child(2){animation-delay:.08s}
.mm-op:nth-child(3){animation-delay:.16s}
.mm-op:nth-child(4){animation-delay:.24s}
@keyframes mm-op-in{to{opacity:1;transform:none}}
/* Alleen verbergen als javascript het ook weer tevoorschijn haalt. Valt dat
   weg, dan staat de inhoud er onbeweeglijk maar compleet. */
.mm-js .mm-in{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--mm-ease),transform .8s var(--mm-ease);transition-delay:var(--mm-d,0ms)}
.mm-in.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mm-op,.mm-in{opacity:1;transform:none;animation:none;transition:none}
  .mm-hero::before{animation:none}
}

/* ------------------------------------------------------- domeincheck */
.mm-whois{margin-top:34px;max-width:620px}
.mm-whois-label{display:block;font-family:var(--mm-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mm-gedempt);margin-bottom:12px}
.mm-veld{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border-radius:var(--mm-r-groot);padding:7px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);transition:box-shadow .4s var(--mm-ease),transform .4s var(--mm-ease)}
.mm-veld:focus-within{box-shadow:0 28px 64px rgba(255,94,155,.3);transform:translateY(-3px)}
.mm-veld input{flex:1 1 200px;min-width:0;border:0;outline:0;font:inherit;font-size:1.04rem;
  padding:14px 15px;border-radius:var(--mm-r);color:var(--mm-ink);background:transparent}
.mm-veld button{border:0;border-radius:var(--mm-r);background:var(--mm-ink);color:#fff;font:inherit;font-weight:600;
  padding:14px 24px;cursor:pointer;transition:background .3s,transform .25s var(--mm-ease)}
.mm-veld button:hover{background:var(--mm-roze);transform:translateY(-1px)}
.mm-tlds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mm-tld{border:1px solid var(--mm-lijn);border-radius:var(--mm-r);padding:6px 12px;font-size:.92rem;
  color:var(--mm-gedempt);transition:border-color .3s,color .3s,transform .3s var(--mm-ease)}
.mm-tld b{font-weight:600;color:#fff;font-family:var(--mm-mono);font-size:.86rem}
.mm-tld:hover{border-color:var(--mm-gloed);color:#fff;transform:translateY(-2px)}

/* --------------------------------------------------- korte pluspunten */
.mm-punten{display:grid;gap:22px}
@media(min-width:760px){.mm-punten{grid-template-columns:repeat(3,1fr)}}
.mm-punt{display:flex;gap:14px;align-items:flex-start}
.mm-punt svg{flex:0 0 20px;width:20px;height:20px;color:var(--mm-gloed);margin-top:5px}
.mm-punt b{display:block;color:#fff;font-weight:600}
.mm-punt span{color:var(--mm-gedempt);font-size:.98rem}
.mm-sectie--licht .mm-punt b{color:var(--mm-ink)}
.mm-sectie--licht .mm-punt span{color:#6B5460}

/* --------------------------------------------------------- melding */
.mm-melder{border:1px solid var(--mm-lijn);border-left:3px solid var(--mm-roze);border-radius:var(--mm-r);
  padding:22px 24px;background:rgba(255,255,255,.03)}
.mm-melder b{display:block;color:#fff;font-weight:600;margin-bottom:6px}
.mm-melder span{color:var(--mm-gedempt)}

/* --------------------------------------------------------- citaten */
.mm-citaten{display:grid;gap:0;border-top:1px solid var(--mm-lijn)}
.mm-citaat{margin:0;padding:30px 4px;border-bottom:1px solid var(--mm-lijn)}
.mm-citaat p{font-family:Ubuntu,sans-serif;font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:500;
  letter-spacing:-.015em;color:#fff;line-height:1.35}
.mm-citaat cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mm-mono);
  font-size:.8rem;letter-spacing:.06em;color:var(--mm-gloed)}

/* ---------------------------------------------------------------------
   Vangnet: blokken zonder eigen sjabloon in dit thema gebruiken nog de
   opmaak van de kern. Die stylesheet laden we hier niet, dus geven we ze
   een rustige basis in plaats van kale HTML met reuzengrote iconen.
   --------------------------------------------------------------------- */
main .section{padding:72px 0}
main .section--tight{padding:44px 0}
main .wrap{width:100%;max-width:var(--mm-wrap);margin:0 auto;padding:0 24px}
main .wrap--narrow{max-width:760px}
main .section svg{width:22px;height:22px;flex:0 0 auto}
main .section-head{max-width:56ch;margin-bottom:32px}
main .section img{border-radius:var(--mm-r-groot)}
main .eyebrow{font-family:var(--mm-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-gloed);margin-bottom:12px}
main .figure figcaption{color:var(--mm-gedempt);font-size:.92rem;margin-top:10px}

/* --------------------------------------------- uitslag van de domeincheck */
.mm-uitslag{margin-top:16px}
.mm-uitslag-regel{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--mm-r);
  background:rgba(255,255,255,.07);border:1px solid var(--mm-lijn);margin-bottom:8px;
  opacity:0;transform:translateY(12px);animation:mm-op-in .5s var(--mm-ease) forwards;
  transition:background .3s,border-color .3s}
.mm-uitslag-regel:hover{background:rgba(255,255,255,.12);border-color:rgba(255,94,155,.5)}
.mm-uitslag-regel b{color:#fff;font-weight:600}
.mm-uitslag-status{margin-left:auto;font-family:var(--mm-mono);font-size:.82rem;color:var(--mm-gloed)}
.mm-uitslag-regel.is-bezet{opacity:.6}
.mm-uitslag-regel.is-bezet .mm-uitslag-status{color:var(--mm-gedempt)}
.mm-uitslag-prijs{font-family:var(--mm-mono);font-size:.82rem;color:var(--mm-zacht)}
.mm-uitslag-melding{color:var(--mm-gedempt);font-size:.98rem}
.mm-sectie--licht .mm-uitslag-regel{background:#fff;border-color:rgba(23,11,18,.12)}
.mm-sectie--licht .mm-uitslag-regel b{color:var(--mm-ink)}

/* =====================================================================
   Zweven bij mouse-over.

   Op wit werkt een schaduw; op het donkere vlak zie je die nauwelijks, dus
   daar komt er een iets lichtere ondergrond en een haarlijn bij. Beide
   bewegen even ver omhoog, zodat het over de hele site hetzelfde aanvoelt.
   ===================================================================== */

:root{
  --mm-lift:translateY(-4px);
  --mm-schaduw-licht:0 20px 46px rgba(23,11,18,.16);
  --mm-schaduw-donker:0 22px 50px rgba(0,0,0,.45);
  --mm-op-donker:rgba(255,255,255,.055);
}

/* ---- uitklapbare regels ---- */
.mm-rij{border-radius:var(--mm-r-groot);
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
             transform .38s var(--mm-ease),border-color .38s}
.mm-rij:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);border-bottom-color:transparent}
.mm-rij.is-open{background:var(--mm-op-donker)}
.mm-rij:hover .mm-rij-kop{padding-left:22px}
.mm-sectie--licht .mm-rij:hover{background:#fff;box-shadow:var(--mm-schaduw-licht)}

/* ---- werk, pakketten en prijsregels ---- */
.mm-werk-item{border-radius:var(--mm-r-groot);
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
             transform .38s var(--mm-ease),padding-left .38s var(--mm-ease),border-color .38s}
.mm-werk-item:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);padding-left:22px;border-bottom-color:transparent}
.mm-sectie--licht .mm-werk-item:hover{background:#fff;box-shadow:var(--mm-schaduw-licht)}
.mm-prijs{border-radius:var(--mm-r-groot);transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
  transform .38s var(--mm-ease),padding-left .38s var(--mm-ease)}
.mm-prijs:hover{background:#fff;box-shadow:var(--mm-schaduw-licht);transform:var(--mm-lift);padding-left:18px}

/* ---- stappen ---- */
.mm-stap{border-radius:0 0 var(--mm-r) var(--mm-r);padding:20px 16px 20px 0;
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
             transform .38s var(--mm-ease),border-color .38s,padding-left .38s var(--mm-ease)}
.mm-stap:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);border-top-color:var(--mm-gloed);padding-left:16px}
.mm-sectie--licht .mm-stap:hover{background:#fff;box-shadow:var(--mm-schaduw-licht)}

/* ---- pluspunten, citaten en specificaties ---- */
.mm-punt{padding:16px;border-radius:var(--mm-r-groot);margin:-16px;
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),transform .38s var(--mm-ease)}
.mm-punt:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);transform:var(--mm-lift)}
.mm-sectie--licht .mm-punt:hover{background:#fff;box-shadow:var(--mm-schaduw-licht)}

.mm-citaat{border-radius:var(--mm-r-groot);padding:30px 20px;
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
             transform .38s var(--mm-ease),border-color .38s}
.mm-citaat:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);border-bottom-color:transparent}

.mm-spec{border-radius:var(--mm-r);transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
  transform .38s var(--mm-ease),padding-left .38s var(--mm-ease)}
.mm-spec:hover{background:#fff;box-shadow:var(--mm-schaduw-licht);transform:var(--mm-lift);padding-left:16px}

/* ---- pijlers naast de hero ---- */
.mm-pijler{border-radius:var(--mm-r);padding:18px 14px;
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
             transform .38s var(--mm-ease),border-color .38s}
.mm-pijler:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);padding-left:14px;border-bottom-color:transparent}

/* ---- kaders: kadertje in een dienst, melding, uitslag ---- */
.mm-callout,.mm-melder{transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),
  transform .38s var(--mm-ease),border-color .38s}
.mm-callout:hover,.mm-melder:hover{transform:var(--mm-lift);box-shadow:var(--mm-schaduw-donker);
  border-color:rgba(255,94,155,.35)}
.mm-sectie--licht .mm-callout:hover{box-shadow:var(--mm-schaduw-licht)}
.mm-uitslag-regel{border-radius:var(--mm-r);
  transition:background .3s,border-color .3s,box-shadow .3s var(--mm-ease),transform .3s var(--mm-ease)}
.mm-uitslag-regel:hover{transform:var(--mm-lift);box-shadow:var(--mm-schaduw-donker)}

/* ---- de witte vlakken die er al waren, gelijktrekken ---- */
.mm-venster{transition:transform .45s var(--mm-ease),box-shadow .45s var(--mm-ease)}
.mm-venster:hover{transform:translateY(-8px);box-shadow:0 44px 84px rgba(0,0,0,.55)}
.mm-formulier{transition:transform .45s var(--mm-ease),box-shadow .45s var(--mm-ease)}
.mm-formulier:hover{transform:translateY(-4px);box-shadow:0 28px 62px rgba(0,0,0,.42)}
.mm-contactgegevens div{border-radius:var(--mm-r);padding:18px 14px;
  transition:background .38s var(--mm-ease),box-shadow .38s var(--mm-ease),transform .38s var(--mm-ease)}
.mm-contactgegevens div:hover{background:var(--mm-op-donker);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift);border-bottom-color:transparent}

/* ---- knoppen iets meer lift, in dezelfde maat ---- */
.mm-btn:hover{transform:var(--mm-lift)}

/* Met minder beweging ingesteld: alleen de ondergrond verandert. */
@media(prefers-reduced-motion:reduce){
  .mm-rij:hover,.mm-werk-item:hover,.mm-stap:hover,.mm-punt:hover,.mm-citaat:hover,
  .mm-spec:hover,.mm-pijler:hover,.mm-callout:hover,.mm-melder:hover,.mm-prijs:hover,
  .mm-venster:hover,.mm-formulier:hover,.mm-uitslag-regel:hover,.mm-btn:hover,
  .mm-contactgegevens div:hover{transform:none;transition:background .2s}
}

/* =====================================================================
   Witte productblokken, zoals in het oorspronkelijke ontwerp: een raster
   van kaarten met de prijs groot, de kenmerken eronder en een knop. Wordt
   gebruikt door het pakkettenblok en door tegels met een bijschrift.
   ===================================================================== */
.mm-kaarten{display:grid;gap:18px}
@media(min-width:820px){.mm-kaarten{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.mm-kaarten--twee{grid-template-columns:repeat(2,1fr)}}
.mm-kaart{display:flex;flex-direction:column;background:#fff;color:var(--mm-ink);
  border:1px solid rgba(23,11,18,.12);border-radius:var(--mm-r-groot);padding:26px;
  text-decoration:none;box-shadow:0 2px 8px rgba(23,11,18,.05);
  transition:transform .42s var(--mm-ease),box-shadow .42s var(--mm-ease),border-color .42s}
.mm-kaart:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(0,0,0,.35);
  border-color:rgba(175,65,114,.45)}
.mm-kaart h3{color:var(--mm-ink);font-family:Ubuntu,sans-serif;font-size:1.22rem;font-weight:500}
.mm-kaart-prijs{font-family:Ubuntu,sans-serif;font-size:2.2rem;font-weight:500;letter-spacing:-.03em;
  margin:14px 0 2px;color:var(--mm-ink)}
.mm-kaart-per{font-size:.94rem;color:#6B5460}
.mm-kaart-tekst{margin-top:16px;color:#6B5460;font-size:1rem}
.mm-kaart-lijst{list-style:none;padding:0;margin:18px 0 0;font-size:.98rem}
.mm-kaart-lijst li{padding:9px 0;border-top:1px solid rgba(23,11,18,.1);display:flex;gap:10px}
.mm-kaart-lijst li::before{content:"";flex:0 0 6px;height:6px;margin-top:.55em;border-radius:1px;
  background:var(--mm-roze)}
.mm-kaart-knop{display:block;text-align:center;margin-top:22px;padding:13px;border-radius:var(--mm-r);
  background:#F2E9EE;color:var(--mm-ink);font-weight:600;text-decoration:none;
  transition:background .3s,color .3s}
.mm-kaart:hover .mm-kaart-knop{background:var(--mm-roze);color:#fff}

/* de middelste kaart springt eruit, net als in het ontwerp */
.mm-kaart--uit{background:var(--mm-ink);color:#fff;border-color:rgba(255,94,155,.45);
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.mm-kaart--uit h3,.mm-kaart--uit .mm-kaart-prijs{color:#fff}
.mm-kaart--uit .mm-kaart-per,.mm-kaart--uit .mm-kaart-tekst{color:var(--mm-zacht)}
.mm-kaart--uit .mm-kaart-lijst li{border-top-color:var(--mm-lijn)}
.mm-kaart--uit .mm-kaart-knop{background:var(--mm-gloed);color:var(--mm-ink)}
@media(min-width:820px){.mm-kaart--uit{transform:translateY(-10px)}
  .mm-kaart--uit:hover{transform:translateY(-18px)}}
.mm-kaart-label{font-family:var(--mm-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-roze);margin-bottom:10px}
.mm-kaart--uit .mm-kaart-label{color:var(--mm-gloed)}

/* =====================================================================
   2027-laag: beweging die reageert op wat de bezoeker doet, in plaats van
   animaties die uit zichzelf staan te knipperen. Alles traag, eenmalig, en
   weg zodra iemand minder beweging heeft ingesteld.
   ===================================================================== */

/* ---- voortgangsbalk bovenaan ---- */
.mm-voortgang{position:fixed;top:0;left:0;height:2px;z-index:90;width:0;
  background:linear-gradient(90deg,var(--mm-roze),var(--mm-gloed));
  box-shadow:0 0 12px rgba(255,94,155,.6)}

/* ---- fijn raster over de donkere vlakken ---- */
.mm-hero::after,.mm-slot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(72% 62% at 50% 40%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 40%,#000,transparent 76%)}

/* ---- kop die zichzelf aanvult ---- */
.mm-wissel{color:var(--mm-gloed);display:inline-block;vertical-align:top}
/* De cursor hangt aan het eind van het woord, niet aan het eind van de
   gereserveerde ruimte: anders staat hij bij een kort woord in het niets. */
.mm-wissel-rij{display:inline}
.mm-caret{display:inline-block;width:3px;height:.8em;margin-left:5px;vertical-align:-.06em;
  background:var(--mm-gloed);animation:mm-knipper 1.05s steps(1) infinite}
@keyframes mm-knipper{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- licht dat de muis volgt ---- */
.mm-kaart,.mm-rij,.mm-werk-item{position:relative}
.mm-kaart::before,.mm-rij::before,.mm-werk-item::before{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .4s var(--mm-ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,94,155,.15),transparent 62%)}
.mm-kaart:hover::before,.mm-rij:hover::before,.mm-werk-item:hover::before{opacity:1}

/* ---- cijfers die oplopen ---- */
.mm-cijfer b{font-variant-numeric:tabular-nums}

/* =====================================================================
   AI-blok: een gesprek dat zich ter plekke vult. Geen video en geen
   schermafdruk, maar echte opmaak — dus scherp op elk scherm.
   ===================================================================== */
.mm-ai{display:grid;gap:40px;align-items:center}
@media(min-width:980px){.mm-ai{grid-template-columns:1fr 1fr;gap:64px}}
.mm-chat{background:rgba(255,255,255,.04);border:1px solid var(--mm-lijn);
  border-radius:var(--mm-r-groot);padding:20px;min-height:340px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 70px rgba(0,0,0,.42)}
.mm-chat-kop{display:flex;align-items:center;gap:9px;padding-bottom:14px;
  border-bottom:1px solid var(--mm-lijn);font-family:var(--mm-mono);font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mm-gedempt)}
.mm-chat-kop i{width:7px;height:7px;border-radius:50%;background:var(--mm-gloed);
  box-shadow:0 0 10px var(--mm-gloed);animation:mm-puls 2.4s ease-in-out infinite}
@keyframes mm-puls{0%,100%{opacity:1}50%{opacity:.3}}
.mm-chat-stroom{display:flex;flex-direction:column;gap:12px;justify-content:flex-end;flex:1}
.mm-bericht{max-width:88%;padding:13px 16px;border-radius:var(--mm-r-groot);font-size:1rem;line-height:1.5;
  opacity:0;transform:translateY(10px);animation:mm-bericht-in .45s var(--mm-ease) forwards}
@keyframes mm-bericht-in{to{opacity:1;transform:none}}
.mm-bericht--klant{align-self:flex-end;background:var(--mm-roze);color:#fff;border-bottom-right-radius:2px}
.mm-bericht--bot{align-self:flex-start;background:rgba(255,255,255,.07);color:var(--mm-zacht);
  border:1px solid var(--mm-lijn);border-bottom-left-radius:2px}
.mm-bericht--bot b{color:#fff;font-weight:600}
.mm-bron{display:block;margin-top:8px;font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--mm-gloed)}
.mm-typt{display:inline-flex;gap:4px;align-items:center;padding:14px 16px}
.mm-typt i{width:6px;height:6px;border-radius:50%;background:var(--mm-gedempt);
  animation:mm-typt 1.3s ease-in-out infinite}
.mm-typt i:nth-child(2){animation-delay:.18s}
.mm-typt i:nth-child(3){animation-delay:.36s}
@keyframes mm-typt{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.mm-chat-voet{font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.05em;color:var(--mm-gedempt);
  padding-top:12px;border-top:1px solid var(--mm-lijn)}

@media(prefers-reduced-motion:reduce){
  .mm-caret,.mm-chat-kop i,.mm-typt i{animation:none}
  .mm-bericht{opacity:1;transform:none;animation:none}
  .mm-voortgang{display:none}
}

/* =====================================================================
   XL-LAAG

   Alles hieronder is de zware beweging: een puntenveld in de kop, een
   eigen aanwijzer, secties die blijven staan en werk dat zijwaarts
   schuift. Drie regels gelden overal:

   1. Het is een laag erover. Haal je deze laag weg, dan staat de site er
      nog, alleen rustiger. Niets hieronder draagt inhoud.
   2. Het zwaarste werk is alleen voor een breed scherm met een muis. Op
      een telefoon valt het terug op stapelen en vegen.
   3. Staat "minder beweging" aan, dan gaat het hele blok uit. Onderaan
      dit bestand staat één regel die dat afdwingt.
   ===================================================================== */

:root{
  --mm-cyaan:#45E0D0;
  --mm-ease-xl:cubic-bezier(.22,.68,.26,1);
}

/* ---------------------------------------------------------------- ruis ----
   Een korrel over het hele beeld. Haalt het plastic van de vlakken af; je
   ziet het niet, je merkt het. */
.mm-ruis{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ----------------------------------------------------------- aanwijzer ----
   Een ring die de muis met vertraging volgt en groeit boven alles wat je
   kunt aanklikken, met een hard stipje precies op de punt. Op een
   aanraakscherm bestaat hij niet. */
.mm-aanw{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid var(--mm-gloed);
  border-radius:50%;z-index:96;pointer-events:none;transform:translate3d(-100px,-100px,0);
  mix-blend-mode:difference;
  transition:width .3s var(--mm-ease-xl),height .3s var(--mm-ease-xl),background .3s,opacity .3s}
.mm-aanw.is-groot{width:64px;height:64px;background:rgba(255,94,155,.15);border-color:transparent}
.mm-aanw-stip{position:fixed;top:0;left:0;width:4px;height:4px;border-radius:50%;
  background:var(--mm-gloed);z-index:96;pointer-events:none;transform:translate3d(-100px,-100px,0)}
@media(hover:none),(pointer:coarse){.mm-aanw,.mm-aanw-stip{display:none}}

/* ------------------------------------------------------- sectiestippen ----
   Rechts in beeld, één stip per sectie. Wordt in javascript opgebouwd uit
   de blokken die op de pagina staan, dus er is niets in te vullen. */
.mm-stippen{position:fixed;right:clamp(10px,1.6vw,20px);top:50%;transform:translateY(-50%);z-index:70;
  display:none;flex-direction:column;align-items:center;gap:14px;
  padding:14px 9px;border-radius:999px;background:rgba(20,9,18,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07)}
@media(min-width:1180px){.mm-stippen{display:flex}}
.mm-stippen a{position:relative;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--mm-lijn-hard);
  transition:background .3s,transform .3s var(--mm-ease-xl),border-color .3s}
.mm-stippen a.is-aan{background:var(--mm-gloed);border-color:var(--mm-gloed);transform:scale(1.35);
  box-shadow:0 0 14px var(--mm-gloed)}
/* naam van de sectie bij het aanwijzen */
.mm-stippen a::after{content:attr(data-naam);position:absolute;right:20px;top:50%;
  transform:translateY(-50%);white-space:nowrap;font-family:var(--mm-mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mm-zacht);opacity:0;
  pointer-events:none;transition:opacity .3s}
.mm-stippen a:hover::after{opacity:1}

/* ------------------------------------------------------------ de kop ----
   Duikt weg zodra je naar beneden scrollt en komt terug zodra je omhoog
   gaat; zo heb je bij het lezen het volle scherm en is het menu er direct
   als je het nodig hebt. */
.mm-kop{transition:transform .45s var(--mm-ease-xl),border-color .4s,background .4s}
.mm-kop.is-weg{transform:translateY(-110%)}
.mm-kop.is-weg .mm-nav.is-open{display:none}

/* nav: de tekst rolt om zijn eigen as */
.mm-nav a{overflow:hidden}
.mm-nav-tekst{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.mm-nav-tekst span{display:block;transition:transform .42s var(--mm-ease-xl)}
.mm-nav-tekst .mm-kopie{position:absolute;left:0;top:0;transform:translateY(130%);color:#fff}
.mm-nav a:hover .mm-nav-tekst .mm-orig{transform:translateY(-130%)}
.mm-nav a:hover .mm-nav-tekst .mm-kopie{transform:translateY(0)}
@media(max-width:939px){
  /* in het uitgeklapte menu geen rollende tekst: dat leest alleen maar lastig */
  .mm-nav.is-open .mm-nav-tekst .mm-kopie{display:none}
  .mm-nav.is-open .mm-nav-tekst span{transform:none !important}
}

/* --------------------------------------------------------- knoppen ----
   Een vlak dat van onderaf invult, in plaats van een kleur die omklapt. */
.mm-btn{position:relative;overflow:hidden;isolation:isolate}
.mm-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--mm-gloed);
  transform:translateY(101%);transition:transform .45s var(--mm-ease-xl)}
.mm-btn:hover::after{transform:translateY(0)}
.mm-btn--roze::after{background:#fff}
.mm-btn--roze:hover{background:var(--mm-roze);color:var(--mm-ink)}
.mm-btn--rand::after{background:#fff}
.mm-btn--rand:hover{color:var(--mm-ink);background:transparent}
.mm-btn .mm-pijl{transition:transform .4s var(--mm-ease-xl)}
.mm-btn:hover .mm-pijl{transform:translateX(5px)}
/* knoppen die naar de muis toe leunen zetten hun eigen transform; de lift
   uit de laag hierboven zou daarmee vechten */
.mm-magneet{transition:transform .35s var(--mm-ease-xl),box-shadow .3s,background .3s,color .3s}

/* -------------------------------------------------------------- hero ----
   Volle hoogte, een puntenveld dat de muis ontwijkt, drie wazige vlekken
   die traag over elkaar schuiven, en een kop die regel voor regel
   omhoogkomt. */
.mm-hero{min-height:100svh;display:flex;align-items:center;
  padding:clamp(96px,9vw,130px) 0 clamp(60px,7vw,90px)}
.mm-puntenveld{position:absolute;inset:0;z-index:0;opacity:.85;pointer-events:none}
.mm-aurora{position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.7}
.mm-aurora i{position:absolute;display:block;border-radius:50%}
.mm-aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:2%;background:rgba(175,65,114,.5);
  animation:mm-zweef-1 26s ease-in-out infinite alternate}
.mm-aurora i:nth-child(2){width:34vw;height:34vw;right:6%;top:-6%;background:rgba(255,94,155,.26);
  animation:mm-zweef-2 32s ease-in-out infinite alternate}
.mm-aurora i:nth-child(3){width:30vw;height:30vw;left:38%;bottom:-12%;background:rgba(69,224,208,.12);
  animation:mm-zweef-3 38s ease-in-out infinite alternate}
@keyframes mm-zweef-1{to{transform:translate3d(8%,6%,0) scale(1.15)}}
@keyframes mm-zweef-2{to{transform:translate3d(-10%,9%,0) scale(1.2)}}
@keyframes mm-zweef-3{to{transform:translate3d(6%,-8%,0) scale(1.1)}}
.mm-hero-in{z-index:2}
.mm-hero h1{font-size:clamp(2.3rem,6vw,4.4rem)}

/* kop per regel: elke regel komt uit zijn eigen venstertje omhoog */
.mm-reg{display:block;overflow:hidden}
.mm-reg > span{display:block}
/* Alleen wegstoppen als javascript er daadwerkelijk is. Gaat dat mis, dan
   staat de kop er gewoon — een onzichtbare kop is geen kop. */
.mm-js .mm-reg > span{transform:translateY(105%);opacity:0;
  transition:transform 1s var(--mm-ease-xl),opacity 1s var(--mm-ease-xl)}
.mm-geladen .mm-reg > span{transform:none;opacity:1}
.mm-reg:nth-child(2) > span{transition-delay:.1s}
.mm-reg:nth-child(3) > span{transition-delay:.2s}
.mm-reg:nth-child(4) > span{transition-delay:.3s}

/* scrollwenk onderaan de hero */
.mm-scrolhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:none;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mm-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-gedempt)}
@media(min-width:900px){.mm-scrolhint{display:flex}}
.mm-scrolhint i{display:block;width:1px;height:38px;
  background:linear-gradient(var(--mm-gloed),transparent);
  animation:mm-zak 2.2s ease-in-out infinite}
@keyframes mm-zak{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ------------------------------------------------------ doorlopende band */
.mm-band{border-top:1px solid var(--mm-lijn);border-bottom:1px solid var(--mm-lijn);
  padding:18px 0;overflow:hidden;background:rgba(255,255,255,.015)}
.mm-band-spoor{display:flex;gap:40px;width:max-content;
  animation:mm-loop var(--mm-band-duur,34s) linear infinite}
.mm-band:hover .mm-band-spoor{animation-play-state:paused}
@keyframes mm-loop{to{transform:translateX(-50%)}}
.mm-band span{display:flex;align-items:center;gap:40px;white-space:nowrap;
  font-family:var(--mm-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-gedempt)}
.mm-band span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--mm-roze)}

/* ------------------------------------------------------------- cijferstrook */
.mm-live{display:grid;border:1px solid var(--mm-lijn);border-radius:var(--mm-r-groot);
  overflow:hidden;background:rgba(255,255,255,.02)}
@media(min-width:760px){.mm-live{grid-template-columns:repeat(4,1fr)}}
.mm-live-cel{position:relative;overflow:hidden;padding:26px;border-bottom:1px solid var(--mm-lijn)}
@media(min-width:760px){
  .mm-live-cel{border-bottom:0;border-right:1px solid var(--mm-lijn)}
  .mm-live-cel:last-child{border-right:0}}
.mm-live-cel::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,94,155,.14),transparent 60%)}
.mm-live-cel:hover::after{opacity:1}
.mm-live-cel b{display:block;font-family:Ubuntu,sans-serif;font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.mm-live-cel span{display:block;margin-top:10px;color:var(--mm-gedempt);font-size:.96rem}
.mm-puls{display:inline-flex !important;align-items:center;gap:9px;color:var(--mm-cyaan) !important;
  font-size:clamp(1.5rem,2.6vw,2rem) !important}
.mm-puls i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--mm-cyaan);
  box-shadow:0 0 0 0 rgba(69,224,208,.6);animation:mm-golf 2.2s ease-out infinite}
@keyframes mm-golf{
  0%{box-shadow:0 0 0 0 rgba(69,224,208,.5)}
  100%{box-shadow:0 0 0 14px rgba(69,224,208,0)}}

/* ------------------------------------------------- diensten die blijven staan
   De buitenkant is vier schermen hoog; de binnenkant plakt aan de bovenkant.
   Zo heb je vier keer scrollen om door de panelen te gaan zonder dat de
   pagina verspringt. Onder 960px is het een gewone lijst met tabbladen. */
.mm-pin-buiten{position:relative}
@media(min-width:960px){.mm-pin-buiten{height:var(--mm-pin-h,400svh)}}
.mm-pin{position:relative;padding:clamp(70px,9vw,110px) 0}
@media(min-width:960px){
  /* De doos die blijft staan is zo hoog als zijn inhoud, niet een heel
     scherm. Het javascript geeft hem een top-afstand waardoor hij alsnog
     midden in beeld staat zodra hij vastplakt.

     Eerder was dit height:100svh met de inhoud in het midden. Dat ziet er
     vastgeplakt prima uit, maar vlak vóór de sectie kijk je dan tegen de
     bovenste, lege helft van die doos aan: een half scherm leegte dat in
     geen enkel blok te vinden is, omdat het de sectie zelf is. */
  .mm-pin{position:sticky;top:var(--mm-vast-top,0px);height:auto;display:block;padding:0}}
.mm-pin-in{display:grid;gap:36px;width:100%}
@media(min-width:960px){.mm-pin-in{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}}
.mm-pin-lijst{display:grid;gap:4px;margin-top:34px}
.mm-pin-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  position:relative;width:100%;padding:17px 16px;border:0;background:none;font:inherit;
  text-align:left;cursor:pointer;border-radius:var(--mm-r-groot);
  transition:background .45s var(--mm-ease-xl),transform .45s var(--mm-ease-xl)}
.mm-pin-item i{font-style:normal;font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--mm-gedempt);transition:color .4s}
.mm-pin-item span{font-family:Ubuntu,sans-serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.1;color:var(--mm-gedempt);transition:color .4s}
.mm-pin-item::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:2px;
  background:var(--mm-gloed);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--mm-ease-xl)}
.mm-pin-item.is-aan{background:rgba(255,255,255,.05)}
.mm-pin-item.is-aan span{color:#fff}
.mm-pin-item.is-aan i{color:var(--mm-gloed)}
.mm-pin-item.is-aan::before{transform:scaleY(1)}
.mm-pin-item:hover span{color:#fff}

.mm-pin-paneel{position:relative}
/* De panelen liggen op elkaar in hetzelfde rastervak. Dat is bewust geen
   position:absolute: dan heeft de houder geen hoogte meer en valt een lang
   paneel buiten de kaart. Zo groeit de houder mee met het langste paneel en
   past alles er altijd in. */
@media(min-width:960px){
  .mm-pin-paneel{display:grid;align-items:stretch;min-height:340px}
  .mm-pin-blad{grid-area:1 / 1 / 2 / 2}}
.mm-pin-blad{opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .55s var(--mm-ease-xl),transform .55s var(--mm-ease-xl)}
.mm-pin-blad.is-aan{opacity:1;transform:none;pointer-events:auto}
/* Zonder javascript valt de hele constructie terug op een gewone sectie:
   geen extra hoogte, niets dat vastplakt, alle panelen onder elkaar. Een
   lege sectie van vier schermen hoog is erger dan geen beweging. */
.mm-pin-buiten:not([data-mm-aan]){height:auto}
.mm-pin-buiten:not([data-mm-aan]) .mm-pin{position:static;height:auto;display:block;
  padding:clamp(70px,9vw,110px) 0}
.mm-pin-buiten:not([data-mm-aan]) .mm-pin-paneel{display:block;min-height:0}
.mm-pin-buiten:not([data-mm-aan]) .mm-pin-blad{grid-area:auto;position:static;opacity:1;
  transform:none;pointer-events:auto;margin-bottom:14px}
.mm-pin-buiten:not([data-mm-aan]) .mm-pin-lijst{display:none}
.mm-pin-kaart{height:100%;padding:clamp(24px,3vw,34px);border:1px solid var(--mm-lijn);
  border-radius:var(--mm-r-groot);background:rgba(255,255,255,.04);
  transition:border-color .4s,box-shadow .45s var(--mm-ease-xl),transform .45s var(--mm-ease-xl)}
.mm-pin-kaart:hover{border-color:rgba(255,94,155,.4);box-shadow:var(--mm-schaduw-donker);
  transform:var(--mm-lift)}
.mm-pin-nr{font-family:var(--mm-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-gloed)}
.mm-pin-kaart h3{margin-top:12px;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:500}
.mm-pin-kaart ul{margin:20px 0 0;padding-left:20px;color:var(--mm-zacht)}
.mm-pin-kaart li{margin-bottom:10px}
.mm-pin-uit{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--mm-lijn);
  font-family:var(--mm-mono);font-size:.76rem;letter-spacing:.06em;color:var(--mm-gloed)}
.mm-pin-uit a{color:#fff;text-decoration:none;border-bottom:1px solid var(--mm-roze);padding-bottom:2px}
.mm-pin-uit a:hover{color:var(--mm-gloed);border-color:var(--mm-gloed)}

/* ---------------------------------------------- werk dat zijwaarts schuift
   Zelfde truc als hierboven: drie schermen hoog, binnenkant plakt vast, en
   het spoor schuift naar links. Onder 900px veeg je het zelf. */
.mm-spoor-buiten{position:relative}
@media(min-width:900px){.mm-spoor-buiten{height:var(--mm-spoor-h,300svh)}}
/* Ook hier: draait het javascript niet, dan is het een gewone sectie met een
   rij die je opzij veegt. */
.mm-spoor-buiten:not([data-mm-aan]){height:auto}
.mm-spoor-buiten:not([data-mm-aan]) .mm-spoor-vast{position:static;height:auto;display:block;
  overflow:visible;padding:clamp(70px,9vw,110px) 0}
.mm-spoor-buiten:not([data-mm-aan]) .mm-spoor-vak{overflow-x:auto}
.mm-spoor-vast{padding:clamp(70px,9vw,110px) 0}
@media(min-width:900px){
  /* Zelfde verhaal als bij de vastgezette diensten: zo hoog als de inhoud,
     met een top-afstand van het javascript in plaats van een scherm hoog
     met alles in het midden. */
  .mm-spoor-vast{position:sticky;top:var(--mm-vast-top,0px);height:auto;display:block;
    overflow:hidden;padding:0}}
.mm-spoor-intro{margin-top:18px;max-width:52ch;color:var(--mm-gedempt)}
.mm-spoor-vak{margin-top:clamp(28px,4vw,44px)}
.mm-spoor{display:grid;gap:16px;padding:0 24px}
@media(min-width:900px){
  .mm-spoor{display:flex;gap:26px;width:max-content;will-change:transform;
    /* Begin op dezelfde lijn als de kop erboven; eindig met wat lucht,
       zodat de laatste kaart niet tegen de rand plakt. */
    padding:0 clamp(24px,calc((100vw - var(--mm-wrap)) / 2 + 24px),320px)}}
/* vegen op smalle schermen */
@media(max-width:899px){
  .mm-spoor-vak{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:10px}
  .mm-spoor{display:flex;gap:14px;width:max-content}
  .mm-proj{width:min(80vw,340px);scroll-snap-align:start}}
.mm-proj{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(22px,3vw,32px);background:rgba(255,255,255,.035);
  border:1px solid var(--mm-lijn);border-radius:var(--mm-r-groot);
  color:inherit;text-decoration:none;
  transition:border-color .4s,transform .5s var(--mm-ease-xl),box-shadow .5s var(--mm-ease-xl)}
/* De kaarten zijn even hoog zodat de labels onderaan op één lijn staan. Niet
   hoger dan nodig: met 46vh stond er bij korte teksten een half lege kaart. */
@media(min-width:900px){.mm-proj{width:min(42vw,470px);min-height:clamp(300px,34vh,420px)}}
.mm-proj::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,94,155,.16),transparent 62%)}
.mm-proj:hover::after{opacity:1}
.mm-proj:hover{border-color:rgba(255,94,155,.45);box-shadow:var(--mm-schaduw-donker)}
.mm-proj-nr{font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-gloed)}
.mm-proj h3{margin:16px 0 12px;font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:500}
.mm-proj p{color:var(--mm-gedempt)}
.mm-proj-uit{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.mm-tag{font-family:var(--mm-mono);font-size:.68rem;letter-spacing:.08em;padding:5px 10px;
  border-radius:var(--mm-r);border:1px solid var(--mm-lijn);color:var(--mm-zacht)}

/* ------------------------------------------------------- kantelende kaarten
   De witte productblokken leunen een paar graden mee met de muis. De hoek
   blijft klein; meer dan dat wordt een kermisattractie. */
.mm-kaart{transform-style:preserve-3d;will-change:transform}

/* ----------------------------------------------------------- terugvallen ----
   Eén plek waar alles uitgaat. Wie minder beweging heeft ingesteld krijgt
   de site zonder puntenveld, zonder vastgezette secties en zonder
   zijwaarts schuiven — en ziet alle inhoud alsnog. */
@media(prefers-reduced-motion:reduce){
  .mm-ruis,.mm-aanw,.mm-aanw-stip,.mm-puntenveld,.mm-aurora,.mm-scrolhint{display:none}
  .mm-aurora i,.mm-band-spoor,.mm-puls i{animation:none}
  .mm-reg > span{transform:none;opacity:1;transition:none}
  .mm-kop.is-weg{transform:none}
  .mm-hero{min-height:0;padding:clamp(80px,12vw,150px) 0 84px;display:block}
  .mm-pin-buiten{height:auto}
  .mm-pin{position:static;height:auto;display:block;padding:clamp(70px,9vw,110px) 0}
  .mm-pin-lijst{display:none}
  .mm-pin-paneel{display:block;min-height:0}
  .mm-pin-blad{grid-area:auto;position:static;opacity:1;transform:none;pointer-events:auto;
    margin-bottom:14px}
  .mm-spoor-buiten{height:auto}
  .mm-spoor-vast{position:static;height:auto;display:block;overflow:visible;
    padding:clamp(70px,9vw,110px) 0}
  .mm-spoor{display:grid;gap:16px;width:auto;transform:none !important}
  .mm-proj{width:auto;min-height:0}
  .mm-nav-tekst .mm-kopie{display:none}
  .mm-btn::after{display:none}
}

/* =====================================================================
   Portfolio.

   Per project een kaart met daarboven een nagebootst browservenster. De
   adresbalk toont het echte domein; het vlak eronder is een abstracte
   weergave die zijn kleur ontleent aan de naam van het project, zodat er
   nooit twee dezelfde naast elkaar staan.
   ===================================================================== */
.mm-pf{display:grid;gap:20px}
@media(min-width:720px){.mm-pf{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.mm-pf{grid-template-columns:repeat(3,1fr)}}

.mm-pf-kaart{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid var(--mm-lijn);
  border-radius:var(--mm-r-groot);color:inherit;text-decoration:none;
  transition:border-color .4s,transform .45s var(--mm-ease),box-shadow .45s var(--mm-ease)}
.mm-pf-kaart:hover{border-color:rgba(255,94,155,.45);transform:var(--mm-lift);
  box-shadow:var(--mm-schaduw-donker)}

/* --- het venster --- */
.mm-pf-venster{border-bottom:1px solid var(--mm-lijn);background:rgba(0,0,0,.25)}
.mm-pf-balk{display:flex;align-items:center;gap:6px;padding:10px 12px;
  border-bottom:1px solid var(--mm-lijn);background:rgba(255,255,255,.04)}
.mm-pf-balk i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.mm-pf-balk span{margin-left:8px;padding:3px 10px;border-radius:var(--mm-r);
  background:rgba(0,0,0,.3);font-family:var(--mm-mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--mm-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Het vlak onder de adresbalk: een abstracte pagina. De tint komt uit het
   sjabloon mee als hoek op de kleurencirkel. */
.mm-pf-vlak{position:relative;display:flex;flex-direction:column;gap:9px;
  padding:20px 18px;min-height:132px;overflow:hidden;
  background:
    radial-gradient(70% 90% at 15% 0%,hsl(var(--mm-pf-h,320) 55% 42% / .55),transparent 70%),
    radial-gradient(60% 80% at 95% 100%,hsl(calc(var(--mm-pf-h,320) + 40) 60% 50% / .3),transparent 70%),
    var(--mm-ink-2)}
.mm-pf-kop{display:block;width:46%;height:13px;border-radius:2px;background:rgba(255,255,255,.72)}
.mm-pf-regel{display:block;width:78%;height:6px;border-radius:2px;background:rgba(255,255,255,.26)}
.mm-pf-regel--kort{width:56%}
.mm-pf-blokjes{display:flex;gap:7px;margin-top:auto;padding-top:12px}
.mm-pf-blokjes i{flex:1;height:22px;border-radius:2px;background:rgba(255,255,255,.12)}
.mm-pf-kaart:hover .mm-pf-blokjes i{background:rgba(255,255,255,.2)}
.mm-pf-blokjes i,.mm-pf-kop,.mm-pf-regel{transition:background .45s var(--mm-ease)}

/* --- de tekst --- */
.mm-pf-tekst{display:flex;flex-direction:column;flex:1;padding:22px 20px 20px}
.mm-pf-soort{font-family:var(--mm-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mm-gloed)}
.mm-pf-tekst h3{margin:10px 0 0;font-size:1.26rem;font-weight:500}
.mm-pf-wat{margin-top:10px;color:var(--mm-gedempt);font-size:.98rem}
.mm-pf-uit{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.mm-pf-link{margin-top:18px;padding-top:14px;border-top:1px solid var(--mm-lijn);
  font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.06em;color:var(--mm-zacht);
  transition:color .3s}
.mm-pf-kaart:hover .mm-pf-link{color:var(--mm-gloed)}

/* Het licht dat de muis volgt, ook hier. */
.mm-pf-kaart::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,94,155,.14),transparent 62%)}
.mm-pf-kaart:hover::after{opacity:1}

/* =====================================================================
   Binnenkort-band: voor een dienst die nog niet live is. Eerlijk zichtbaar
   in plaats van een pagina die doet alsof alles al kan.
   ===================================================================== */
.mm-binnenkort{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(69,224,208,.4);
  background:rgba(69,224,208,.08);
  font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-cyaan)}
.mm-binnenkort i{width:7px;height:7px;border-radius:50%;background:var(--mm-cyaan);
  box-shadow:0 0 0 0 rgba(69,224,208,.6);animation:mm-golf 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.mm-binnenkort i{animation:none}}

/* Bijschrift onder de tarieven bij de domeinchecker. */
.mm-tld-voet{margin-top:12px;font-family:var(--mm-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--mm-gedempt)}

/* Bestelknop in de uitslag van de domeincheck. Alleen bij een vrije naam:
   bij een bezette staat er niets, want daar valt niets te bestellen. */
.mm-uitslag-knop{margin-left:12px;padding:7px 14px;border-radius:var(--mm-r);
  background:var(--mm-roze);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;
  white-space:nowrap;transition:background .3s,transform .25s var(--mm-ease)}
.mm-uitslag-knop:hover{background:var(--mm-gloed);color:var(--mm-ink);transform:translateY(-1px)}
.mm-uitslag-regel .mm-uitslag-status{margin-left:auto}
@media(max-width:560px){
  .mm-uitslag-regel{flex-wrap:wrap}
  .mm-uitslag-knop{margin-left:0;margin-top:10px;width:100%;text-align:center}
}

/* =====================================================================
   Plug-ins. Een raster van kaarten met de prijs en de knoppen onderaan
   op één lijn, ook als de ene kaart meer kenmerken heeft dan de andere.
   ===================================================================== */
.mm-plugs{display:grid;gap:18px}
@media(min-width:760px){.mm-plugs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.mm-plugs{grid-template-columns:repeat(3,1fr)}}

.mm-plug{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(22px,2.6vw,30px);background:rgba(255,255,255,.035);
  border:1px solid var(--mm-lijn);border-radius:var(--mm-r-groot);
  transition:border-color .4s,transform .45s var(--mm-ease),box-shadow .45s var(--mm-ease)}
.mm-plug:hover{border-color:rgba(255,94,155,.45);transform:var(--mm-lift);
  box-shadow:var(--mm-schaduw-donker)}
.mm-plug::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s;border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,94,155,.14),transparent 62%)}
.mm-plug:hover::after{opacity:1}

.mm-plug-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mm-plug-voor{font-family:var(--mm-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mm-gloed);padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,94,155,.35);background:rgba(255,94,155,.08)}
.mm-plug-versie{font-family:var(--mm-mono);font-size:.66rem;letter-spacing:.08em;color:var(--mm-gedempt)}

.mm-plug h3{margin:16px 0 0;font-size:1.3rem;font-weight:500}
.mm-plug-wat{margin-top:10px;color:var(--mm-gedempt);font-size:.98rem}
.mm-plug-lijst{list-style:none;padding:0;margin:18px 0 0;font-size:.96rem}
.mm-plug-lijst li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--mm-lijn);
  color:var(--mm-zacht)}
.mm-plug-lijst li::before{content:"";flex:0 0 5px;height:5px;margin-top:.62em;background:var(--mm-gloed)}

/* margin-top:auto duwt de voet naar de onderkant van de kaart. Prijs en
   knoppen staan altijd onder elkaar, nooit naast elkaar: in de ene kaart
   passen ze op één regel en in de andere niet, en dan staan de voeten van
   kaarten naast elkaar op verschillende hoogtes. Altijd stapelen geeft elke
   voet dezelfde hoogte, dus een nette lijn over de hele rij. */
.mm-plug-voet{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  margin-top:auto;padding-top:20px}
.mm-plug-prijs b{display:block;font-family:Ubuntu,sans-serif;font-size:1.5rem;font-weight:500;
  letter-spacing:-.02em;color:#fff;line-height:1.1}
.mm-plug-prijs span{display:block;margin-top:2px;font-size:.88rem;color:var(--mm-gedempt)}
.mm-plug-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.mm-plug-knoppen .mm-btn{position:relative;z-index:1}

/* Label op een plug-inkaart, bijvoorbeeld "Nieuw" of "Meest gekozen". */
.mm-plug-badge{font-family:var(--mm-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mm-ink);background:var(--mm-gloed);padding:4px 9px;border-radius:999px}

/* =====================================================================
   Domeinzoeker van HostFact
   ---------------------------------------------------------------------
   Deze klassen schrijft HostFact zelf in de pagina (w_form, w_result,
   wf_form_submit, goto_orderform, order_link, domain_td_*). Zijn eigen
   whois.css wordt door datzelfde script ingeladen en komt dus ná dit
   bestand; daarom staat .mm-hfz overal voor, zodat onze regels zwaarder
   wegen. Opmaak van kleuren, randen en knoppen doen wij — de indeling
   van de tabel laten we aan hem, zodat een update daar niets breekt.
   ===================================================================== */
.mm-hfz-vak{margin-top:clamp(18px,2.4vw,28px)}
/* Een domeinveld van 1240px breed is onzin; de uitslagtabel mag dat wel. */
.mm-hfz .w_form{max-width:720px}
.mm-hfz-voet{margin-top:14px;font-size:.92rem;color:var(--mm-gedempt)}
.mm-hfz-zonder{color:var(--mm-gedempt)}
.mm-hfz-zonder a{color:#fff;border-bottom:1px solid var(--mm-roze)}

/* De witte kaart die HostFact om zijn formulier en uitslag zet, halen we
   weg: bij ons staat het al in een sectie. */
.mm-hfz .w_form_container,
.mm-hfz .w_result{background:transparent;box-shadow:none;padding:0;margin:0;
  border-radius:0;max-width:none}
/* Staan het zoekveld en de uitslag op dezelfde pagina, dan mogen ze niet
   tegen elkaar aan plakken. */
.mm-hfz .w_form + .w_result,
.mm-hfz .w_form ~ .w_result{margin-top:clamp(18px,2.2vw,26px)}
.mm-hfz .w_result p{margin-top:18px}

/* --- het zoekveld: dezelfde witte balk als elders op de site --- */
.mm-hfz .w_form form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:#fff;border-radius:var(--mm-r-groot);padding:7px;margin:0;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  transition:box-shadow .4s var(--mm-ease),transform .4s var(--mm-ease)}
.mm-hfz .w_form form:focus-within{box-shadow:0 28px 64px rgba(255,94,155,.3);transform:translateY(-3px)}
.mm-hfz .w_form input[type="text"],
.mm-hfz .w_form select{flex:1 1 220px;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:1.04rem;padding:14px 15px;border-radius:var(--mm-r);color:var(--mm-ink);
  box-shadow:none}
.mm-hfz .w_form input[type="text"]:focus,
.mm-hfz .w_form select:focus{border:0;box-shadow:none;outline:0}
.mm-hfz .w_form .wf_form_submit{border:0;border-radius:var(--mm-r);background:var(--mm-ink);
  color:#fff;font:inherit;font-weight:600;padding:14px 24px;cursor:pointer;box-shadow:none;
  transition:background .3s,transform .25s var(--mm-ease)}
.mm-hfz .w_form .wf_form_submit:hover{background:var(--mm-roze);transform:translateY(-1px)}

/* --- de uitslag --- */
.mm-hfz .w_result table{width:100%;border-collapse:collapse;border-spacing:0;
  background:rgba(255,255,255,.03);border:1px solid var(--mm-lijn);
  border-radius:var(--mm-r-groot);overflow:hidden}
.mm-hfz .w_result th{background:rgba(255,255,255,.05);color:#fff;border:0;
  font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;padding:14px 16px}
.mm-hfz .w_result td{padding:16px;border-bottom:1px solid var(--mm-lijn);color:var(--mm-zacht)}
.mm-hfz .w_result tr:last-child td{border-bottom:0}
.mm-hfz .w_result td.domain_td_checked_available,
.mm-hfz .w_result tr.domain_td_checked_available td:nth-child(2){color:var(--mm-cyaan);font-weight:600}
.mm-hfz .w_result td.domain_td_checked_unavailable,
.mm-hfz .w_result tr.domain_td_checked_unavailable td:nth-child(2){color:var(--mm-gedempt)}

/* --- bestellen en verwijderen --- */
.mm-hfz .goto_orderform,
.mm-hfz .w_result td.domain_td_order a,
.mm-hfz .w_result td.domain_td_order .order_link{display:inline-block;border:0;cursor:pointer;
  background:var(--mm-gloed);color:var(--mm-ink);border-radius:var(--mm-r);
  padding:11px 20px;font:inherit;font-weight:600;text-decoration:none;
  transition:background .3s,transform .25s var(--mm-ease)}
.mm-hfz .goto_orderform:hover,
.mm-hfz .w_result td.domain_td_order a:hover,
.mm-hfz .w_result td.domain_td_order .order_link:hover{background:#fff;transform:translateY(-1px)}
.mm-hfz .w_result td.domain_td_order .remove_link{background:transparent;color:var(--mm-zacht);
  border:1px solid var(--mm-lijn)}
.mm-hfz .w_result td.domain_td_order .remove_link:hover{background:transparent;color:#fff;
  border-color:var(--mm-lijn-hard)}

/* --- meldingen --- */
.mm-hfz .w_result .domain_error,
.mm-hfz .w_result .domain_warning{background:rgba(255,255,255,.04);border-radius:var(--mm-r);
  padding:14px 16px;color:var(--mm-zacht)}
.mm-hfz .w_result .domain_error{border:1px solid rgba(233,110,110,.5)}
.mm-hfz .w_result .domain_warning{border:1px solid rgba(255,94,155,.45)}

/* --- op een lichte ondergrond --- */
.mm-hfz.mm-sectie--licht .w_result table{background:#fff;border-color:rgba(23,11,18,.12)}
.mm-hfz.mm-sectie--licht .w_result th{background:#F2E9EE;color:var(--mm-ink)}
.mm-hfz.mm-sectie--licht .w_result td{color:#6B5460;border-bottom-color:rgba(23,11,18,.1)}
.mm-hfz.mm-sectie--licht .w_form form{box-shadow:0 18px 40px rgba(23,11,18,.14)}
.mm-hfz.mm-sectie--licht .mm-hfz-voet,
.mm-hfz.mm-sectie--licht .mm-hfz-zonder{color:#6B5460}