.sjk-nav {
        background: rgba(20, 16, 47, .72);
        backdrop-filter: saturate(140%) blur(12px);
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        border-bottom: 1px solid rgba(255,255,255,.08);
        transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
    }
    /* Bij scrollen: iets voller, compacter en met zachte schaduw (JS zet .is-scrolled) */
    .sjk-nav.is-scrolled {
        background: rgba(17, 13, 40, .92);
        box-shadow: 0 10px 30px -14px rgba(0,0,0,.6);
        padding-top: .35rem !important; padding-bottom: .35rem !important;
    }
    .sjk-nav .navbar-brand { display: inline-flex; align-items: center; gap: .55rem; }
    .sjk-wordmark { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: #fff; }
    .sjk-wordmark .je { color: var(--sjk-koraal); }

    .sjk-nav .nav-link {
        color: rgba(255,255,255,.82); font-weight: 600; font-size: .95rem; white-space: nowrap;
        padding: .5rem .85rem; border-radius: 10px; transition: color .12s, background .12s;
    }
    .sjk-nav .nav-link:hover, .sjk-nav .nav-link:focus { color: #fff; background: rgba(255,255,255,.07); }
    .sjk-nav .nav-link.active { color: #fff; }
    .sjk-nav .nav-link::after {
        content: ""; display: block; height: 2px; border-radius: 2px; margin: .28rem .85rem 0;
        background: var(--sjk-koraal); transform: scaleX(0); transform-origin: left;
        transition: transform .25s var(--sjk-ease-out);
    }
    .sjk-nav .nav-link:hover::after, .sjk-nav .nav-link.active::after { transform: scaleX(1); }

    .sjk-btn-ghost {
        color: #fff; border: 1px solid rgba(255,255,255,.28); background: transparent; text-decoration: none;
        border-radius: var(--sjk-radius-btn); font-weight: 600; min-height: 2.6rem;
        display: inline-flex; align-items: center; justify-content: center; padding: .4rem 1.1rem;
        transition: background .18s ease, border-color .18s ease;
    }
    .sjk-btn-ghost:hover, .sjk-btn-ghost:focus { color: #fff; background: rgba(255,255,255,.1); }
    .sjk-btn-cta {
        position: relative; overflow: hidden; text-decoration: none;
        color: #fff; background: var(--sjk-koraal-diep); border: 1px solid var(--sjk-koraal-diep);
        border-radius: var(--sjk-radius-btn); font-weight: 700; min-height: 2.6rem;
        display: inline-flex; align-items: center; justify-content: center; padding: .4rem 1.2rem;
        box-shadow: 0 8px 18px rgba(242,86,79,.32);
        transition: transform .18s var(--sjk-ease-spring), box-shadow .18s ease, filter .18s;
    }
    .sjk-btn-cta::before {
        content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
        transform: skewX(-18deg); transition: left .6s var(--sjk-ease-out);
    }
    .sjk-btn-cta:hover::before { left: 170%; }
    .sjk-btn-cta:hover, .sjk-btn-cta:focus { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(242,86,79,.45); }

    .sjk-nav .navbar-toggler { border: 1px solid rgba(255,255,255,.3); padding: .35rem .6rem; }
    .sjk-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.15); }

    /* Uitgeklapt menu (mobiel/iPad-portret): wat lucht + scheidingslijn */
    @media (max-width: 991.98px) {
        .sjk-nav .navbar-collapse { padding: .6rem 0 .4rem; margin-top: .5rem; border-top: 1px solid rgba(255,255,255,.1); }
        .sjk-nav .nav-link.active::after { display: none; }
        .sjk-nav .nav-link.active { background: rgba(255,255,255,.08); }
        .sjk-nav .sjk-btn-ghost, .sjk-nav .sjk-btn-cta { width: 100%; }
    }

    /* Actiebalk (dismissbaar) boven de navbar */
    .sjk-promobar { background: var(--sjk-koraal-diep, #f2564f); color: #fff; font-size: .92rem; }
    .sjk-promobar__in { display: flex; align-items: center; justify-content: center; gap: .8rem;
        flex-wrap: wrap; padding: .5rem 1rem; text-align: center; }
    .sjk-promobar strong { font-weight: 800; }
    .sjk-promobar a.sjk-promobar__cta { color: #fff; font-weight: 700; text-decoration: underline;
        text-underline-offset: 2px; white-space: nowrap; }
    .sjk-promobar a.sjk-promobar__cta:hover { color: #fff; opacity: .9; }
    .sjk-promobar__x { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
        background: transparent; border: 0; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .8; }
    .sjk-promobar__x:hover { opacity: 1; }
    .sjk-promobar__wrap { position: relative; }