/* SLIMBOT-MEGAMENU-20261020 — gescoped, wint van de oude per-pagina nav-CSS */
/* zelfvoorzienend: pagina's zonder de algemene Slimbot-CSS (platform, setup, demo-builder…) krijgen dezelfde balk, logo en knoppen. GEEN backdrop-filter (kapt fixed panelen af). */
#nav{position:sticky;top:0;z-index:500;background:#fff!important;border-bottom:1px solid var(--bdr,#e2e8f0);box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-family:inherit}
#nav.scrolled{box-shadow:0 2px 18px rgba(15,23,42,.08)}
#nav .sbm-wrap .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;color:var(--dk,#0f172a)!important;text-decoration:none!important;white-space:nowrap}
#nav .sbm-wrap .logo-mark{width:36px;height:36px;border-radius:10px;overflow:hidden;flex:0 0 36px;display:block}
#nav .sbm-wrap .logo-mark img{display:block;width:36px;height:36px}
#nav .sbm-top{color:var(--dk,#0f172a)!important}
#nav .sbm-top.sbm-demo{color:var(--g-tx,#047857)!important}
#nav .sbm-right .btn-nav-login{display:inline-flex;align-items:center;padding:9px 16px;border-radius:10px;border:1px solid var(--bdr,#e2e8f0);background:#fff;color:var(--dk,#0f172a)!important;font-weight:600;font-size:.9rem;text-decoration:none!important;white-space:nowrap}
#nav .sbm-right .btn-nav-login:hover{border-color:#94a3b8}
#nav .sbm-right .btn-nav-cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;background:var(--g-tx,#047857);color:#fff!important;font-weight:700;font-size:.9rem;text-decoration:none!important;white-space:nowrap;border:0}
#nav .sbm-right .btn-nav-cta:hover{filter:brightness(1.08)}
#nav .sbm-wrap{max-width:1280px;margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;gap:18px;position:relative}
#nav .sbm-wrap .logo{flex:0 0 auto}
#nav .sbm-main{display:flex;align-items:center;gap:2px;margin:0 auto 0 12px;list-style:none;padding:0}
#nav .sbm-main > li{position:static}
#nav .sbm-top{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:9px;font:inherit;font-size:.92rem;font-weight:550;color:var(--dk,#0f172a);background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
#nav .sbm-top:hover,#nav .sbm-top[aria-expanded=true],#nav .sbm-top.on{background:var(--lt,#f1f5f9)}
#nav .sbm-top.sbm-demo{color:var(--g-tx,#047857);font-weight:650}
#nav .sbm-top svg.sbm-caret{width:10px;height:10px;transition:transform .2s}
#nav .sbm-top[aria-expanded=true] svg.sbm-caret{transform:rotate(180deg)}
#nav .sbm-panel{position:absolute;left:28px;right:28px;top:calc(100% - 4px);background:#fff;border:1px solid var(--bdr,#e2e8f0);border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.16);padding:22px;z-index:700;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
#nav .sbm-panel.sbm-small{left:auto;right:auto;width:340px;padding:10px}
#nav .sbm-panel:not(.sbm-small).sbm-2{left:auto;width:min(860px,calc(100% - 56px))}
#nav .sbm-panel.open{opacity:1;visibility:visible;transform:none}
#nav .sbm-cols{display:grid;grid-template-columns:repeat(var(--sbm-n,4),minmax(0,1fr)) 260px;gap:8px 16px;align-items:start}
#nav .sbm-col h4,#mobileNav .sbm-col h4{margin:2px 10px 8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#64748b;font-weight:700}
#nav .sbm-item,#mobileNav .sbm-item{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:11px;text-decoration:none;color:var(--dk,#0f172a)}
#nav .sbm-item:hover,#nav .sbm-item:focus-visible,#nav .sbm-item[aria-current=page]{background:var(--lt,#f1f5f9)}
#nav .sbm-item b,#mobileNav .sbm-item b{display:block;font-size:.9rem;font-weight:600;line-height:1.25}
#nav .sbm-item small,#mobileNav .sbm-item small{display:block;font-size:.78rem;color:#64748b;line-height:1.35;margin-top:2px}
#nav .sbm-ic,#mobileNav .sbm-ic{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--g-tx,#047857) 10%,#fff);color:var(--g-tx,#047857)}
#nav .sbm-feat{background:linear-gradient(160deg,color-mix(in srgb,var(--g-tx,#047857) 12%,#fff),#fff);border:1px solid color-mix(in srgb,var(--g-tx,#047857) 22%,#fff);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
#nav .sbm-feat .sbm-ic{background:#fff;align-self:flex-start;flex:0 0 auto;width:38px;height:38px}
#nav .sbm-feat b{font-size:1rem;color:var(--dk,#0f172a)} #nav .sbm-feat p{margin:0;font-size:.85rem;color:#475569;line-height:1.45}
#nav .sbm-feat .sbm-feat-cta{align-self:flex-start;margin-top:4px;padding:9px 14px;border-radius:10px;background:var(--g-tx,#047857);color:#fff!important;font-weight:650;font-size:.86rem;text-decoration:none}
#nav .sbm-feat .sbm-feat-sub{font-size:.82rem;color:var(--g-tx,#047857);text-decoration:none;font-weight:600}
#nav .sbm-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#nav .sbm-burger{display:none;width:44px;height:44px;border:0;background:none;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto}
#nav .sbm-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--dk,#0f172a)}
#nav .hamburger:not(.sbm-burger){display:none!important}
/* mobiel/tablet paneel — buiten #nav */
#mobileNav.sbm-mobile{position:fixed;inset:0;z-index:2147483000;background:#fff;display:none;flex-direction:column;height:100vh;height:100dvh}
#mobileNav.sbm-mobile.open{display:flex}
#mobileNav .sbm-mhead{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:64px;border-bottom:1px solid var(--bdr,#e2e8f0);flex:0 0 auto}
#mobileNav .sbm-mhead .logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--dk,#0f172a);text-decoration:none;font-size:1.1rem}
#mobileNav .sbm-close{width:44px;height:44px;border:0;background:var(--lt,#f1f5f9);border-radius:12px;font-size:1.4rem;cursor:pointer;color:var(--dk,#0f172a)}
#mobileNav .sbm-mbody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 16px 24px}
#mobileNav .sbm-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px}
#mobileNav .sbm-quick a{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:12px;background:var(--lt,#f1f5f9);color:var(--dk,#0f172a);font-weight:650;text-decoration:none;font-size:.92rem}
#mobileNav .sbm-quick a.sbm-q-demo{background:color-mix(in srgb,var(--g-tx,#047857) 12%,#fff);color:var(--g-tx,#047857)}
#mobileNav details{border-bottom:1px solid var(--bdr,#e2e8f0)}
#mobileNav summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 6px;font-weight:700;font-size:1.02rem;color:var(--dk,#0f172a);cursor:pointer}
#mobileNav summary::-webkit-details-marker{display:none}
#mobileNav summary svg{transition:transform .2s} #mobileNav details[open] summary svg{transform:rotate(180deg)}
#mobileNav .sbm-mgrid{display:grid;grid-template-columns:1fr;gap:2px;padding:0 0 12px}
#mobileNav .sbm-col h4{margin:12px 6px 4px}
#mobileNav .sbm-acc{padding:10px 6px 0;display:flex;flex-direction:column;gap:4px}
#mobileNav .sbm-acc a{padding:10px 8px;border-radius:10px;color:var(--dk,#0f172a);text-decoration:none;font-weight:550}
#mobileNav .sbm-acc span{font-size:.85rem;color:#64748b;padding:0 8px}
#mobileNav .sbm-mfoot{flex:0 0 auto;display:flex;gap:8px;padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--bdr,#e2e8f0);background:#fff}
#mobileNav .sbm-mfoot a{flex:1;text-align:center;padding:13px;border-radius:12px;font-weight:700;text-decoration:none;font-size:.95rem}
#mobileNav .sbm-mfoot .sbm-mlogin{background:var(--lt,#f1f5f9);color:var(--dk,#0f172a)}
#mobileNav .sbm-mfoot .sbm-mcta{background:var(--g-tx,#047857);color:#fff!important}
body.mob-nav-open{overflow:hidden}
@media (max-width:1099px){
  #nav .sbm-main,#nav .sbm-panel{display:none!important}
  #nav .sbm-right .btn-nav-login,#nav .sbm-right .nav-right-extra{display:none}
  #nav .sbm-burger{display:flex}
  #nav .sbm-wrap{padding:0 16px;height:64px;gap:10px}
  #nav .sbm-right{margin-left:auto}
}
@media (min-width:640px) and (max-width:1099px){
  #mobileNav .sbm-mgrid{grid-template-columns:1fr 1fr;gap:2px 14px}
  #mobileNav .sbm-mbody{padding:16px 28px 28px}
}
@media (max-width:420px){ #nav .sbm-right .btn-nav-cta{padding:9px 12px;font-size:.85rem} }
@media (min-width:1100px){ #mobileNav.sbm-mobile{display:none!important} }
@media (prefers-reduced-motion:reduce){ #nav .sbm-panel,#nav .sbm-top svg.sbm-caret,#mobileNav summary svg{transition:none} }