/*
 * Mega-menu's in de nieuwe stijl (12 nov 2026). Alleen desktop (>900px);
 * het mobiele sheet blijft zoals het is. Alleen opmaak: markup en menu-inhoud
 * komen ongewijzigd uit site-chrome.php. Iconen en de muis-gloed zet
 * site-mega-2027.js erbij; zonder script ziet het menu er nog steeds goed uit.
 * Laadt na de nieuwe kopbalk (site-assets.php, prioriteit 55).
 */
@media (min-width: 901px) {
  /* ── Paneel ─────────────────────────────────────────────────────────── */
  body .nav-wrapper .nav-mega .mega-menu {
    padding: 22px 22px 18px;
    column-gap: 12px; row-gap: 12px;
    background:
      radial-gradient(600px 220px at 12% -40px, rgba(232, 54, 66, .13), transparent 70%),
      radial-gradient(500px 200px at 100% 110%, rgba(255, 138, 61, .06), transparent 70%),
      #0B0D1A;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
    overflow: hidden;
    transform: translateX(-50%) translateY(-10px) scale(.985);
    transform-origin: 50% 0;
    transition: opacity .35s cubic-bezier(.22, 1, .36, 1), visibility .35s, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  body .nav-wrapper .nav-mega:hover .mega-menu,
  body .nav-wrapper .nav-mega.open .mega-menu { transform: translateX(-50%) translateY(0) scale(1); }
  /* Overflow knipt de hover-brug (::before op -22px) af; de knop neemt hem over. */
  body .nav-wrapper .nav-mega > button.nav-dropdown-btn { position: relative; }
  body .nav-wrapper .nav-mega > button.nav-dropdown-btn::before {
    content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 26px;
  }
  /* Merklijn bovenaan, zoals de footer */
  body .nav-wrapper .nav-mega .mega-menu::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #E83642 25%, #FF8A3D 55%, transparent);
    opacity: .85;
  }

  /* ── Kolommen als kaarten ───────────────────────────────────────────── */
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) {
    position: relative; isolation: isolate;
    padding: 16px 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .055);
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1),
                border-color .35s, background .35s;
  }
  body .nav-wrapper .nav-mega:hover .mega-col,
  body .nav-wrapper .nav-mega.open .mega-col { opacity: 1; transform: none; }
  body .nav-wrapper .nav-mega .mega-col:nth-child(1) { transition-delay: .04s, .04s, 0s, 0s; }
  body .nav-wrapper .nav-mega .mega-col:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s; }
  body .nav-wrapper .nav-mega .mega-col:nth-child(3) { transition-delay: .12s, .12s, 0s, 0s; }
  body .nav-wrapper .nav-mega .mega-col:nth-child(4) { transition-delay: .16s, .16s, 0s, 0s; }
  body .nav-wrapper .nav-mega .mega-col:nth-child(5) { transition-delay: .20s, .20s, 0s, 0s; }
  /* Bij sluiten geen vertraging */
  body .nav-wrapper .nav-mega:not(:hover):not(.open) .mega-col { transition-delay: 0s; }

  /* Muis-gloed (positie via --mx/--my uit het script) */
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 54, 66, .14), transparent 65%);
    opacity: 0; transition: opacity .4s;
  }
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan):hover {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(232, 54, 66, .28);
  }
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan):hover::before { opacity: 1; }

  /* ── Kop met icoon ──────────────────────────────────────────────────── */
  body .nav-wrapper .nav-mega .mega-col__kop { display: flex; align-items: center; gap: 10px; }
  body .nav-wrapper .nav-mega .mega-ico {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(140deg, rgba(232, 54, 66, .9), rgba(200, 32, 42, .75) 55%, rgba(255, 138, 61, .7));
    box-shadow: 0 8px 20px -8px rgba(232, 54, 66, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
  }
  body .nav-wrapper .nav-mega .mega-ico svg { width: 17px; height: 17px; }
  body .nav-wrapper .nav-mega .mega-col:hover .mega-ico {
    transform: translateY(-2px) rotate(-6deg);
    box-shadow: 0 12px 26px -8px rgba(232, 54, 66, 1), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) h6 {
    font: 700 15px/1.25 Poppins, sans-serif; letter-spacing: -.01em; color: #fff;
  }
  body .nav-wrapper .nav-mega .mega-col h6 a.mega-col__link:hover {
    color: #fff; text-decoration: none;
    background: linear-gradient(90deg, #ff6b75, #FF8A3D); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body .nav-wrapper .nav-mega .mega-col .mega-promise {
    margin: 8px 0 10px; padding-bottom: 10px;
    font-size: 12.5px; line-height: 1.5; color: #8F94AE;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  /* ── Links ──────────────────────────────────────────────────────────── */
  body .nav-wrapper .nav-mega .mega-col ul li a {
    position: relative;
    margin: 0 -6px !important; padding: 6px 26px 6px 8px !important;
    border-radius: 10px;
    transition: background .3s, transform .3s;
  }
  body .nav-wrapper .nav-mega .mega-col ul li a::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px;
    background: linear-gradient(180deg, #E83642, #FF8A3D);
    transform: translateY(-50%); transition: height .35s cubic-bezier(.22, 1, .36, 1);
  }
  body .nav-wrapper .nav-mega .mega-col ul li a::after {
    content: "→"; position: absolute; right: 8px; top: 50%;
    font: 600 13px/1 Poppins, sans-serif; color: #FF8A3D;
    opacity: 0; transform: translate(-6px, -50%); transition: opacity .3s, transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover {
    background: rgba(255, 255, 255, .05) !important; padding-left: 14px !important;
  }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover::before { height: 60%; }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover::after { opacity: 1; transform: translate(0, -50%); }
  body .nav-wrapper .nav-mega .mega-col ul li a { transition: background .3s, padding-left .35s cubic-bezier(.22, 1, .36, 1); }
  body .nav-wrapper .nav-mega .mega-col ul li a .mega-name { color: #CDD0DE; font-size: 14px; }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover .mega-name { color: #fff; }
  /* "Meer"-link heeft zelf al een pijl */
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-more::after { content: none; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-more .mega-name { color: #fca5a5; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-more .mega-arrow { display: inline-block; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-more:hover .mega-arrow { transform: translateX(4px); }

  /* Software- en Included-labeltje: rood glas */
  body .nav-wrapper .nav-mega .mega-soort {
    padding: 2px 7px; font: 600 9.5px/1.5 Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: #ffb3b8; background: rgba(232, 54, 66, .1); border: 1px solid rgba(232, 54, 66, .32);
  }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover .mega-soort { background: rgba(232, 54, 66, .2); border-color: rgba(232, 54, 66, .55); color: #fff; }

  /* ── Band onderaan ──────────────────────────────────────────────────── */
  body .nav-wrapper .nav-mega .mega-band {
    position: relative; overflow: hidden;
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1) .24s, transform .55s cubic-bezier(.22, 1, .36, 1) .24s;
  }
  body .nav-wrapper .nav-mega:hover .mega-band,
  body .nav-wrapper .nav-mega.open .mega-band { opacity: 1; transform: none; }
  body .nav-wrapper .nav-mega:not(:hover):not(.open) .mega-band { transition-delay: 0s; }
  body .nav-wrapper .nav-mega .mega-menu a.mega-foot__link { color: #fff; }
  body .nav-wrapper .nav-mega .mega-menu a.mega-foot__link + a.mega-foot__link { margin-left: 22px; }
  body .nav-wrapper .nav-mega .mega-menu a.mega-foot__link:hover { color: #fca5a5; text-decoration: none; }
  body .nav-wrapper .nav-mega .mega-menu a.mega-foot__link .mega-arrow { display: inline-block; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  body .nav-wrapper .nav-mega .mega-menu a.mega-foot__link:hover .mega-arrow { transform: translateX(4px); }

  /* Scan-knop: zelfde verloop en glans als de Business Scan-knop in de kop */
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__btn {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 12px;
    background: linear-gradient(180deg, #f04a55, #C8202A);
    box-shadow: 0 12px 30px -10px rgba(232, 54, 66, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  }
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__btn:hover {
    background: linear-gradient(180deg, #f04a55, #C8202A); transform: translateY(-1px);
    box-shadow: 0 18px 40px -10px rgba(232, 54, 66, 1), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__btn:hover::after { transform: translateX(130%); }
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__link { color: #A9AEC4; text-decoration: none; }
  body .nav-wrapper .nav-mega .mega-menu a.mega-scan__link:hover { color: #fff; }

  /* Fisionbot-hoofdje bij "Not sure where to start?" (door het script) */
  body .nav-wrapper .nav-mega .mega-scan__tekst { position: relative; }
  body .nav-wrapper .nav-mega .mega-bot {
    position: relative; flex: 0 0 auto; width: 46px; height: 46px;
    animation: sfMegaBot 4.5s ease-in-out infinite;
  }
  /* Zelfde uitsnede als het avatar in het chatpaneel (42px), geschaald naar 46px */
  body .nav-wrapper .nav-mega .mega-bot {
    border-radius: 50%; overflow: hidden; background: #1a0c12;
    box-shadow: 0 0 0 1px rgba(232, 54, 66, .5), 0 8px 22px -6px rgba(232, 54, 66, .6);
  }
  body .nav-wrapper .nav-mega .mega-bot img { position: absolute; left: -4.5px; top: 9.1px; width: 51px; height: 67.6px; max-width: none; }
  body .nav-wrapper .nav-mega .mega-col--scan:hover .mega-bot { animation-duration: 1.4s; }
  @keyframes sfMegaBot { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }

  /* Band als licht vlak met zachte rode gloed rechts */
  body .nav-wrapper .nav-mega .mega-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px 120px at 75% 50%, rgba(232, 54, 66, .1), transparent 70%);
  }
}

/* ── Platform-paneel: groepsnaam blijft een rustig label, wel met icoon ── */
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega--platform .mega-col:not(.mega-col--scan) h6 {
    font: 600 11px/1.3 Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #A9AEC4;
  }
  body .nav-wrapper .nav-mega--platform .mega-col__kop { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  body .nav-wrapper .nav-mega--platform .mega-ico { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; }
  body .nav-wrapper .nav-mega--platform .mega-ico svg { width: 15px; height: 15px; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body .nav-wrapper .nav-mega .mega-menu,
  body .nav-wrapper .nav-mega .mega-col,
  body .nav-wrapper .nav-mega .mega-band { transition: opacity .2s, visibility .2s !important; transform: translateX(-50%) !important; }
  body .nav-wrapper .nav-mega .mega-col,
  body .nav-wrapper .nav-mega .mega-band { transform: none !important; }
  body .nav-wrapper .nav-mega .mega-bot { animation: none; }
}

/* Fijnafstelling na eerste blik (12 nov) */
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega .mega-menu { align-items: stretch; }
  body .nav-wrapper .nav-mega .mega-col__kop { gap: 9px; }
  body .nav-wrapper .nav-mega .mega-ico { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; }
  body .nav-wrapper .nav-mega .mega-ico svg { width: 15px; height: 15px; }
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) h6 { font-size: 14.5px; white-space: nowrap; }
  body .nav-wrapper .nav-mega .mega-col ul li a { padding-right: 18px !important; }
  body .nav-wrapper .nav-mega .mega-col ul li a::after { right: 4px; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product { flex-wrap: nowrap; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product .mega-name { white-space: nowrap; }
  body .nav-wrapper .nav-mega .mega-soort { padding: 1px 6px; font-size: 8.5px; }
  body .nav-wrapper .nav-mega .mega-arrow { margin-left: 5px; }
}
/* 901-1200px: drie bredere kolommen, koppen mogen daar gewoon afbreken */
@media (min-width: 901px) and (max-width: 1200px) {
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) h6 { white-space: normal; }
}
@media (min-width: 1201px) {
  body .nav-wrapper .nav-mega .mega-col h6 a.mega-col__link { white-space: nowrap; }
}
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product { flex-wrap: wrap; }
}
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega--platform .mega-col:not(.mega-col--scan) h6 { white-space: normal; font-size: 10.5px; letter-spacing: .07em; }
  body .nav-wrapper .nav-mega--platform .mega-col__kop { align-items: center; min-height: 52px; }
}
@media (min-width: 1201px) {
  body .nav-wrapper .nav-mega--platform .mega-menu { width: min(1080px, calc(100vw - 32px)); }
}
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega .mega-col { min-width: 0; }
}
@media (min-width: 901px) {
  /* Belofte is op 2 regels afgekapt (salesfision.css); padding liet de 3e regel half zien. Lijn naar de lijst. */
  body .nav-wrapper .nav-mega .mega-col .mega-promise { padding-bottom: 0; border-bottom: 0; margin-bottom: 12px; }
  body .nav-wrapper .nav-mega .mega-col > .mega-col__inhoud > ul { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 8px; }
  /* Lange Duitse woorden mogen afbreken */
  body .nav-wrapper .nav-mega .mega-col ul li a .mega-name { overflow-wrap: anywhere; hyphens: auto; }
}

/* ── Spacing-ronde (12 nov, na Davides screenshot) ─────────────────────── */
@media (min-width: 1201px) {
  /* Iets breder paneel, zodat "Customer Experience" niet tegen de kaartrand komt */
  body .nav-wrapper .nav-mega:not(.nav-mega--platform) .mega-menu { width: min(1240px, calc(100vw - 32px)); }
}
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) { padding: 18px 16px 14px; }
  body .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) h6 { font-size: 14px; letter-spacing: -.015em; }
  /* Links precies onder de kop/subregel uitlijnen en overal dezelfde regelafstand */
  body .nav-wrapper .nav-mega .mega-col ul li a { margin: 0 -8px !important; padding: 7px 8px !important; }
  body .nav-wrapper .nav-mega .mega-col ul li a:hover { padding-left: 14px !important; }
  body .nav-wrapper .nav-mega .mega-col ul li:has(> a.mega-product) + li:not(:has(> a.mega-product)) {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .08);
  }
  /* Software-items: naam links, label rechts op dezelfde regel; naam breekt zelf af */
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product {
    display: flex !important; flex-wrap: nowrap; justify-content: space-between; align-items: center !important; gap: 10px;
  }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product .mega-name { white-space: normal; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product .mega-soort { flex: none; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-product::after { content: none; }
  body .nav-wrapper .nav-mega .mega-col ul li a.mega-more { margin-top: 8px !important; padding-top: 9px !important; border-top: 1px dashed rgba(255, 255, 255, .08); border-radius: 0 0 10px 10px; }

  /* Band: Scan-blok links, overzichtslink rechts achter een scheidingslijn */
  body .nav-wrapper .nav-mega:not(.nav-mega--platform) .mega-band { justify-content: flex-start; gap: 12px 28px; padding: 14px 20px; }
  body .nav-wrapper .nav-mega:not(.nav-mega--platform) .mega-band .mega-col--scan { flex: 1 1 auto; gap: 10px 20px; }
  body .nav-wrapper .nav-mega:not(.nav-mega--platform) .mega-band .mega-foot {
    order: 2; margin-left: auto; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .09);
  }
  body .nav-wrapper .nav-mega .mega-band .mega-scan__routes { gap: 6px 18px; }
}

/* ══ SOLUTIONS-MENU (variant B, gekozen door Davide 12 nov) ══════════════════
   Links tabbladen met een glijdende markering, midden het actieve gebied met
   titel-link, watermerk en dienst-tegels met icoon, rechts de Scan-kaart.
   Het script zet html.sf-mega-b en de extra elementen; zonder script (en op
   901-1023px en bij Platform) geldt de kaartenversie hierboven. */
@media (min-width: 1024px) {
  html.sf-mega-b body .nav-wrapper .nav-mega .mega-menu {
    width: min(1180px, calc(100vw - 32px));
    grid-template-columns: clamp(220px, 21vw, 262px) minmax(0, 1fr) clamp(240px, 23vw, 286px);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: 16px; row-gap: 4px; align-items: stretch;
    padding: 16px;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-menu > .mega-col:not(.mega-col--scan) { display: contents; }

  /* ── Tabbladen ── */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(1) .mega-col__kop { grid-row: 1; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(2) .mega-col__kop { grid-row: 2; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(3) .mega-col__kop { grid-row: 3; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(4) .mega-col__kop { grid-row: 4; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(5) .mega-col__kop { grid-row: 5; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__kop {
    grid-column: 1; position: relative; z-index: 1;
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
    padding: 11px 34px 11px 11px; border-radius: 14px; cursor: pointer;
    opacity: 0; transform: translateX(-8px);
    transition: opacity .4s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), background .3s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega:is(:hover, .open) .mega-col__kop { opacity: 1; transform: none; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(2) .mega-col__kop { transition-delay: .04s, .04s, 0s; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(3) .mega-col__kop { transition-delay: .08s, .08s, 0s; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(4) .mega-col__kop { transition-delay: .12s, .12s, 0s; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:nth-child(5) .mega-col__kop { transition-delay: .16s, .16s, 0s; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:not(.is-active) .mega-col__kop:hover { background: rgba(255, 255, 255, .03); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__kop::after {
    content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid #FF8A3D; border-top: 2px solid #FF8A3D;
    transform: translate(-6px, -50%) rotate(45deg); opacity: 0;
    transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active .mega-col__kop::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-ico {
    flex: none; width: 34px; height: 34px; border-radius: 11px;
    background: rgba(255, 255, 255, .05); color: #8F94AE; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    transition: background .4s, color .4s, box-shadow .4s, transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-ico svg { width: 16px; height: 16px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active .mega-ico {
    color: #fff; transform: rotate(-6deg);
    background: linear-gradient(140deg, #E83642, #C8202A 55%, #FF8A3D);
    box-shadow: 0 8px 20px -6px rgba(232, 54, 66, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col:not(.mega-col--scan) h6 {
    font: 600 14.5px/1.25 Poppins, sans-serif; letter-spacing: -.01em; color: #A9AEC4; white-space: normal; transition: color .3s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active h6,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__kop:hover h6 { color: #fff; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col h6 a.mega-col__link:hover {
    -webkit-text-fill-color: currentColor; background: none; text-decoration: none;
  }
  /* Kleine teller onder de naam: aantal diensten in dat gebied */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tel {
    grid-column: 2; margin-top: 2px; font: 500 11.5px/1.2 Roboto, sans-serif; color: #6F748E; transition: color .3s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active .mega-tel { color: #fca5a5; }

  /* Glijdende markering achter het actieve tabblad */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-glider {
    position: absolute; left: 16px; top: 0; z-index: 0; pointer-events: none;
    width: var(--gw, 240px); height: var(--gh, 56px); transform: translateY(var(--gy, 16px));
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(232, 54, 66, .16), rgba(255, 255, 255, .03) 85%);
    box-shadow: inset 0 0 0 1px rgba(232, 54, 66, .32), 0 10px 30px -14px rgba(232, 54, 66, .6);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1), opacity .3s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-glider::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #E83642, #FF8A3D); box-shadow: 0 0 12px rgba(232, 54, 66, .9);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-glider.zonder-anim { transition: none; }

  /* ── Middenpaneel ── */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud {
    grid-column: 2; grid-row: 1 / -1; position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column;
    padding: 22px 24px 20px; border-radius: 18px;
    background: radial-gradient(520px 240px at 0% 0%, rgba(232, 54, 66, .1), transparent 70%), rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .06);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .25s, visibility .25s, transform .4s cubic-bezier(.22, 1, .36, 1);
  }
  html.sf-mega-b .nav-wrapper .nav-mega:is(:hover, .open) .mega-col.is-active .mega-col__inhoud {
    opacity: 1; visibility: visible; transform: none; transition-delay: .04s;
  }
  /* Groot watermerk-icoon rechtsonder, zoals in de dienstkaartjes op de homepage */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-wm {
    position: absolute; right: -30px; bottom: -36px; z-index: -1; width: 200px; height: 200px; color: #fff; opacity: .03;
    transform: rotate(-12deg) scale(.92); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active .mega-wm { transform: rotate(-6deg) scale(1); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-wm svg { width: 100%; height: 100%; stroke-width: 1.2; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-wm::after {
    content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .8;
    animation: sfMegaDraai 40s linear infinite;
  }
  @keyframes sfMegaDraai { to { rotate: 360deg; } }

  /* Titel als link naar de gebiedspagina */
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop {
    display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
    margin: 0 0 6px; padding: 0; background: none; border-radius: 0; white-space: normal;
    font: 800 26px/1.15 Poppins, sans-serif; letter-spacing: -.02em; color: #fff; text-decoration: none;
  }
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop span {
    background: linear-gradient(90deg, #fff 45%, #ffb3a0); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: .08em;
  }
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop i {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: normal 600 15px/1 Poppins, sans-serif; color: #fff;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: background .35s, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop:hover { background: none; }
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop:hover i {
    background: #E83642; box-shadow: 0 8px 20px -6px rgba(232, 54, 66, .9); transform: translateX(4px) rotate(-45deg);
  }
  html.sf-mega-b .nav-wrapper .nav-mega a.mega-pkop:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col .mega-promise {
    -webkit-line-clamp: unset; min-height: 0; margin: 0 0 18px; max-width: 520px;
    font: 400 14px/1.55 Roboto, sans-serif; color: #A9AEC4;
  }

  /* ── Tegels ── */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud ul {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; border-top: 0; padding-top: 0;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col.is-active ul li {
    animation: sfMegaTegel .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.05s + var(--n, 0) * .045s);
  }
  @keyframes sfMegaTegel { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a {
    position: relative; overflow: hidden; isolation: isolate;
    margin: 0 !important; height: 100%; min-height: 60px;
    padding: 12px 36px 12px 12px !important; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(8, 9, 20, .55);
    display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center !important; justify-content: flex-start; gap: 12px;
    transition: border-color .3s, background .3s, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a:hover {
    padding-left: 12px !important; transform: translateY(-2px);
    border-color: rgba(232, 54, 66, .4); background: rgba(14, 12, 26, .8) !important;
    box-shadow: 0 14px 30px -16px rgba(232, 54, 66, .7);
  }
  /* Muis-gloed in de tegel */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a::before {
    display: block; content: ""; position: absolute; inset: 0; left: 0; top: 0; z-index: -1; width: auto; height: auto; border-radius: inherit;
    background: radial-gradient(180px circle at var(--tx, 50%) var(--ty, 50%), rgba(232, 54, 66, .16), transparent 70%);
    transform: none; opacity: 0; transition: opacity .35s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a:hover::before { height: auto; opacity: 1; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-product::after {
    content: "→"; right: 14px; opacity: .3; transform: translate(0, -50%); color: #FF8A3D;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a:hover::after { opacity: 1; transform: translate(3px, -50%); }
  /* Icoon in de tegel */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    color: #ff8f96; background: rgba(232, 54, 66, .1); box-shadow: inset 0 0 0 1px rgba(232, 54, 66, .22);
    transition: color .35s, background .35s, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico svg { width: 17px; height: 17px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a:hover .mega-tico {
    color: #fff; transform: rotate(-8deg) scale(1.06);
    background: linear-gradient(140deg, #E83642, #C8202A 55%, #FF8A3D); box-shadow: 0 8px 18px -6px rgba(232, 54, 66, .9);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-ttekst { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a .mega-name {
    font: 500 14.5px/1.3 Poppins, sans-serif; color: #E3E5EE; text-align: left; white-space: normal;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-soort { font-size: 8.5px; padding: 1px 6px; }
  /* "Ook voor andere sectoren": rustige tegel over de volle breedte */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li:has(> a.mega-more) { grid-column: 1 / -1; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-more {
    min-height: 0; padding: 11px 14px !important; justify-content: center;
    background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .12);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-more::after { content: none; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-more .mega-name { font-size: 13.5px; color: #fca5a5; text-align: center; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-more .mega-name br { display: none; }

  /* ── Scan-kaart rechts ── */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band {
    grid-column: 3; grid-row: 1 / -1; position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 22px 20px 16px; border-radius: 18px;
    background:
      radial-gradient(280px 220px at 50% -10%, rgba(232, 54, 66, .3), transparent 70%),
      linear-gradient(180deg, rgba(232, 54, 66, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(232, 54, 66, .28);
  }
  /* Langzaam draaiende lichtrand */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band::before {
    content: ""; display: block; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
    background: conic-gradient(from var(--sfa, 0deg), transparent 0 70%, rgba(255, 138, 61, .9) 80%, rgba(232, 54, 66, .9) 86%, transparent 94%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: sfMegaRand 6s linear infinite;
  }
  @property --sfa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes sfMegaRand { to { --sfa: 360deg; } }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-col--scan {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1 1 auto; padding: 0;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-bot { width: 64px; height: 64px; margin-bottom: 16px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-bot img { left: -6.2px; top: 12.7px; width: 71px; height: 94px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-col--scan h6 { font: 800 20px/1.2 Poppins, sans-serif; letter-spacing: -.01em; margin: 0 0 8px; color: #fff; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-scan__lead { font-size: 13.5px; line-height: 1.55; color: #B9BDD0; margin: 0 0 18px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-scan__tekst { max-width: none; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band a.mega-scan__btn {
    align-self: stretch; margin-top: auto; text-align: center; padding: 13px 16px; font-size: 14px; white-space: normal;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-scan__routes { margin-top: 14px; justify-content: center; align-self: stretch; gap: 6px 18px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-foot {
    order: 2; margin: 16px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .09); text-align: center;
  }
}
/* Fisionbot knippert (alle varianten) */
@media (min-width: 901px) {
  body .nav-wrapper .nav-mega .mega-bot img + img { transform-origin: 47.1% 19.3%; animation: sfMegaKnip 5s infinite; }
  @keyframes sfMegaKnip { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li { animation: none !important; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band::before,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-wm::after { animation: none; }
}

/* Extra elementen van het script alleen in de tabbladenversie (>=1024px) */
@media (max-width: 1023px) {
  .nav-mega .mega-pkop, .nav-mega .mega-wm, .nav-mega .mega-tel, .nav-mega .mega-tico, .nav-mega .mega-glider { display: none !important; }
  .nav-mega .mega-ttekst { display: contents; }
}
@media (max-width: 900px) {
  .nav-mega .mega-ico, .nav-mega .mega-bot { display: none !important; }
}
@media (min-width: 1024px) {
  html.sf-mega-b body .nav-wrapper .nav-mega .mega-menu { row-gap: 6px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__kop { padding-top: 14px; padding-bottom: 14px; }
}
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a .mega-name { hyphens: manual; overflow-wrap: normal; }
  html.sf-mega-b:lang(de) .nav-wrapper .nav-mega .mega-col ul li a .mega-name { hyphens: auto; overflow-wrap: break-word; }
}
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-col--scan,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-band .mega-col--scan:hover { background: none; border: 0; border-radius: 0; padding: 0; }
}


/* ── Spacing-ronde 2 (12 nov): kolommen even hoog gevuld ─────────────────── */
@media (min-width: 1024px) {
  /* Tabbladen verdelen zich over de volle hoogte */
  html.sf-mega-b body .nav-wrapper .nav-mega .mega-menu { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__kop { padding-top: 10px; padding-bottom: 10px; align-self: stretch; }
  /* Tegels vullen het middenpaneel; inhoud blijft verticaal gecentreerd */
  /* Gebieden met max. 4 diensten: grote kaart-tegels die het paneel vullen
     (icoon boven, naam onder, pijl rechtsboven). Industries blijft compact. */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul { flex: 1 1 auto; grid-auto-rows: minmax(92px, 1fr); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a.mega-product {
    flex-direction: column; align-items: flex-start !important; justify-content: space-between; gap: 14px;
    padding: 16px 44px 16px 16px !important;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a:hover { padding-left: 16px !important; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a.mega-product::after { top: 26px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-tico { width: 40px; height: 40px; border-radius: 12px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-tico svg { width: 19px; height: 19px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-col ul li a .mega-name,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a .mega-name { font-size: 15px; font-weight: 600; }
}

/* ── Platform in dezelfde stijl: tabbladen + app-tegels, links-band onderaan ── */
@media (min-width: 1024px) {
  html.sf-mega-b body .nav-wrapper .nav-mega--platform .mega-menu {
    width: min(940px, calc(100vw - 32px));
    grid-template-columns: clamp(220px, 21vw, 262px) minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr)) auto;
  }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col__kop { min-height: 0; margin: 0; border-bottom: 0; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col:not(.mega-col--scan) h6 {
    font: 600 14.5px/1.25 Poppins, sans-serif; letter-spacing: -.01em; text-transform: none; color: #A9AEC4;
  }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col.is-active h6,
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col__kop:hover h6 { color: #fff; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col__kop { cursor: default; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-ico { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-ico svg { width: 16px; height: 16px; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-col__inhoud { grid-row: 1 / 6; min-height: 300px; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform div.mega-pkop {
    display: block; margin: 0 0 18px; font: 800 26px/1.15 Poppins, sans-serif; letter-spacing: -.02em;
  }
  html.sf-mega-b .nav-wrapper .nav-mega--platform div.mega-pkop span {
    background: linear-gradient(90deg, #fff 45%, #ffb3a0); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* Links-band onder het middenpaneel */
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-band {
    grid-column: 2; grid-row: 6; flex-direction: row; align-items: center; justify-content: flex-start;
    padding: 12px 18px; margin-top: 8px; border-radius: 14px;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
    opacity: 0; transform: translateY(8px);
  }
  html.sf-mega-b .nav-wrapper .nav-mega--platform:is(:hover, .open) .mega-band { opacity: 1; transform: none; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-band::before { display: none; }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-band .mega-foot {
    order: 0; display: flex; gap: 8px 26px; margin: 0; padding: 0; border: 0; text-align: left;
  }
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-menu a.mega-foot__link + a.mega-foot__link { margin-left: 0; }
}
/* Bento: 2 tegels onder elkaar, 3 tegels = eerste breed + twee eronder */
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul { grid-template-columns: minmax(0, 1fr); }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child { grid-column: 1 / -1; }
  /* Brede tegels: icoon links naast de naam, dan oogt een lage brede tegel niet leeg */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul li a,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul li a,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child a {
    flex-direction: row; align-items: center !important; justify-content: flex-start; gap: 16px;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul li a::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul li a::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child a::after { top: 50%; }
}
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul li a.mega-product,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul li a.mega-product,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child a.mega-product {
    flex-direction: row; align-items: center !important; justify-content: flex-start; gap: 16px;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul li a.mega-product::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul li a.mega-product::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child a.mega-product::after { top: 50%; }
  /* Kaart-tegels: label rechtsboven naast de pijl, zodat de namen op één lijn staan */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot ul li a .mega-soort { position: absolute; top: 18px; right: 40px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n2 ul li a .mega-soort,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n1 ul li a .mega-soort,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-n3 ul li:first-child a .mega-soort { position: static; }
}
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega--platform .mega-band { grid-column: 1 / -1; }
}

/* ── Dienst-tegels in Solutions: icoon + kleur zoals What We Do Best (13 nov 2026) ── */
@media (min-width: 1024px) {
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico.mega-tico--dienst {
    background: color-mix(in srgb, var(--c) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico--dienst img { width: 24px; height: 24px; object-fit: contain; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-tico--dienst img { width: 27px; height: 27px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a:hover .mega-tico.mega-tico--dienst {
    background: color-mix(in srgb, var(--c) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 8px 20px -6px var(--c);
  }
  /* Tegel zelf: rand, gloed en pijltje in de dienstkleur */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-dienst:hover {
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--c) 70%, transparent);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-dienst::before {
    background: radial-gradient(180px circle at var(--tx, 50%) var(--ty, 50%), color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-dienst::after,
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col ul li a.mega-dienst.mega-product::after { color: var(--c); }
  /* Lijn-iconen (Industries) en SF-beeldmerk (Platform) in de dienstkleur */
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico--lijn { color: var(--c) !important; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico-masker {
    display: block; width: 22px; height: 22px; background: var(--c);
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-tico-masker { width: 24px; height: 24px; }
  html.sf-mega-b .nav-wrapper .nav-mega .mega-col__inhoud.mega-groot .mega-tico--dienst img[src*="platform-icons"],
  html.sf-mega-b .nav-wrapper .nav-mega .mega-tico--dienst img[src*="platform-icons"] { width: 21px; height: 21px; }
}