/* Shared landing / content fullscreen menu + header bar */

        .landing-header-wrap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }
        .landing-header {
            position: relative;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            min-height: 64px;
            background: rgba(0,0,0,0.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .landing-header .logo-wrap {
            display: flex;
            align-items: center;
            min-height: 48px;
        }
        .landing-header .logo-wrap img.logo-img {
            max-height: 48px;
            width: auto;
            display: block;
        }
        .landing-header-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .landing-header-controls button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0.9rem;
            min-width: 44px;
            min-height: 44px;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 42% 58% 63% 37% / 48% 39% 61% 52%;
            color: var(--serbia-white);
            font-family: 'Exo 2', sans-serif;
            font-size: 1.1rem;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
            transition: background 0.25s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.4s ease;
        }
        .landing-header-controls button:hover {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.35);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
            border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%;
        }
        .landing-header-controls button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(0,0,0,0.25);
        }
        #menu-trigger[aria-expanded="true"] {
            background: rgba(177, 18, 38, 0.85);
            border-color: var(--serbia-red);
            box-shadow: 0 4px 20px rgba(177, 18, 38, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        #menu-trigger[aria-expanded="true"]:hover {
            background: rgba(177, 18, 38, 0.95);
            border-color: var(--serbia-red);
        }
        html:not([data-theme="dark"]) .landing-header-controls button {
            background: rgba(255,255,255,0.7);
            border-color: rgba(0,0,0,0.12);
            color: rgba(0,0,0,0.85);
            box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html:not([data-theme="dark"]) .landing-header-controls button:hover {
            background: rgba(255,255,255,0.9);
            color: #000;
            border-color: rgba(0,0,0,0.18);
        }
        html:not([data-theme="dark"]) #menu-trigger[aria-expanded="true"] {
            background: var(--serbia-red);
            border-color: var(--serbia-red);
            color: #fff;
            box-shadow: 0 4px 20px rgba(177, 18, 38, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        /* Hamburger – tri crtice koje se animiraju u X */
        .menu-trigger-hamburger {
            flex-direction: column;
            gap: 5px;
        }
        .menu-trigger-hamburger .hamburger-line {
            display: block;
            width: 20px;
            height: 2px;
            background: currentColor;
            border-radius: 2px;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
            transform-origin: center;
        }
        .menu-trigger-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .menu-trigger-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .menu-trigger-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }
        /* Na telefonu: logo i tri dugmeta u jednoj liniji */
        @media (max-width: 576px) {
            .landing-header {
                flex-wrap: nowrap;
                padding: 0.6rem 1rem;
                min-height: 52px;
            }
            .landing-header .logo-wrap {
                min-height: 40px;
                flex-shrink: 0;
            }
            .landing-header .logo-wrap img.logo-img {
                max-height: 40px;
            }
            .landing-header-controls {
                flex-shrink: 0;
                gap: 0.35rem;
            }
            .landing-header-controls button {
                padding: 0.4rem 0.7rem;
                min-width: 40px;
                min-height: 40px;
                font-size: 1rem;
            }
        }
        /* Meni – fullscreen overlay, klizi odozgo nadole / nestaje nagore */
        #main-menu {
            --menu-pad-t: max(1rem, env(safe-area-inset-top));
            --menu-pad-r: max(1rem, env(safe-area-inset-right));
            --menu-pad-b: max(1rem, env(safe-area-inset-bottom));
            --menu-pad-l: max(1rem, env(safe-area-inset-left));
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            /* Eksplicitna visina da grid sa 1fr ne skuplja overlay (mobilni Safari / Chrome) */
            height: 100vh;
            height: 100dvh;
            min-height: -webkit-fill-available;
            z-index: 1;
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            /* Unutrašnji razmak za sadržaj; pozadina se posegne do ivica (vidi .main-menu-backdrop) */
            padding: var(--menu-pad-t) var(--menu-pad-r) var(--menu-pad-b) var(--menu-pad-l);
            transform: translateY(-100%);
            visibility: hidden;
            pointer-events: none;
            transition:
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.4s;
        }
        #main-menu.is-open {
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
            transition:
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
        }
        /* Da mehurići ne budu odsečeni ispod vrha menija */
        #main-menu,
        #main-menu .main-menu-visual-corner {
            overflow: visible;
        }
        /* Podrazumevano tamna tema menija (data-theme="dark" ili pre podešavanja u skripti) */
        /* Pozadina do ivica viewporta: inače padding na #main-menu ostavlja „prozirne“ trake (dole levo/desno) */
        #main-menu .main-menu-backdrop {
            position: absolute;
            top: calc(-1 * var(--menu-pad-t));
            right: calc(-1 * var(--menu-pad-r));
            bottom: calc(-1 * var(--menu-pad-b));
            left: calc(-1 * var(--menu-pad-l));
            width: auto;
            height: auto;
            z-index: 0;
            background:
                linear-gradient(
                    165deg,
                    rgba(15, 23, 42, 0.94) 0%,
                    rgba(2, 6, 23, 0.97) 45%,
                    rgba(15, 23, 42, 0.95) 100%
                );
            backdrop-filter: blur(24px) saturate(1.15);
            -webkit-backdrop-filter: blur(24px) saturate(1.15);
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            font: inherit;
            color: inherit;
        }
        /* Svetla tema mape: meni belo/svetlo sivi, tekst tamno plav; tamna tema = varijanta ispod */
        html:not([data-theme="dark"]) #main-menu .main-menu-backdrop {
            background:
                linear-gradient(
                    165deg,
                    rgba(255, 255, 255, 0.97) 0%,
                    rgba(248, 250, 252, 0.95) 42%,
                    rgba(241, 245, 249, 0.96) 100%
                );
            backdrop-filter: blur(18px) saturate(1.08);
            -webkit-backdrop-filter: blur(18px) saturate(1.08);
        }
        /* HiDPI: manji blur (skuplji po pikselu), jači gradient */
        @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
            #main-menu .main-menu-backdrop {
                background:
                    linear-gradient(
                        165deg,
                        rgba(15, 23, 42, 0.97) 0%,
                        rgba(2, 6, 23, 0.99) 45%,
                        rgba(15, 23, 42, 0.98) 100%
                    );
                backdrop-filter: blur(12px) saturate(1.12);
                -webkit-backdrop-filter: blur(12px) saturate(1.12);
            }
            html:not([data-theme="dark"]) #main-menu .main-menu-backdrop {
                background:
                    linear-gradient(
                        165deg,
                        rgba(255, 255, 255, 0.99) 0%,
                        rgba(248, 250, 252, 0.98) 42%,
                        rgba(241, 245, 249, 0.99) 100%
                    );
                backdrop-filter: blur(10px) saturate(1.05);
                -webkit-backdrop-filter: blur(10px) saturate(1.05);
            }
        }
        @media (min-width: 1920px) and (-webkit-min-device-pixel-ratio: 2),
        (min-width: 1920px) and (min-resolution: 192dpi) {
            #main-menu .main-menu-backdrop {
                backdrop-filter: blur(8px) saturate(1.1);
                -webkit-backdrop-filter: blur(8px) saturate(1.1);
            }
            html:not([data-theme="dark"]) #main-menu .main-menu-backdrop {
                backdrop-filter: blur(6px) saturate(1.03);
                -webkit-backdrop-filter: blur(6px) saturate(1.03);
            }
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-link span {
            background-image: linear-gradient(
                100deg,
                #0f172a 0%,
                #0f172a 30%,
                #2563eb 40%,
                var(--serbia-red) 50%,
                #1d4ed8 58%,
                #0f172a 68%,
                #0f172a 100%
            );
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-link:focus-visible {
            outline: 2px solid rgba(30, 58, 138, 0.5);
            outline-offset: 3px;
        }
        #main-menu .menu-inner {
            position: relative;
            z-index: 2;
            width: auto;
            max-width: min(560px, 94vw);
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            align-self: center;
            flex: 0 0 auto;
            padding:
                max(4.75rem, calc(env(safe-area-inset-top) + 3rem))
                1.5rem
                1.25rem
                max(2rem, env(safe-area-inset-left));
            pointer-events: none;
        }
        #main-menu .menu-inner .menu-nav {
            pointer-events: auto;
        }
        /* Kredit: donji levi ugao overlay-a (na mobilnom isto dno fullscreen menija) */
        #main-menu .menu-footer-credit {
            position: absolute;
            z-index: 3;
            left: max(1rem, env(safe-area-inset-left));
            bottom: max(1rem, env(safe-area-inset-bottom));
            margin: 0;
            max-width: min(92vw, 22rem);
            font-family: 'Exo 2', system-ui, sans-serif;
            font-size: clamp(0.6rem, 1.75vw, 0.6875rem);
            font-weight: 300;
            letter-spacing: 0.02em;
            line-height: 1.35;
            color: rgba(248, 250, 252, 0.38);
            pointer-events: auto;
        }
        #main-menu .menu-footer-credit .menu-footer-credit-link {
            margin-left: 0.35em;
            color: rgba(148, 197, 255, 0.55);
            text-decoration: none;
            font-weight: 400;
            transition: color 0.2s ease, text-decoration-color 0.2s ease;
        }
        #main-menu .menu-footer-credit .menu-footer-credit-link:hover {
            color: rgba(226, 232, 240, 0.82);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        #main-menu .menu-footer-credit .menu-footer-credit-link:focus-visible {
            outline: 1px solid rgba(148, 197, 255, 0.45);
            outline-offset: 2px;
            border-radius: 2px;
        }
        html:not([data-theme="dark"]) #main-menu .menu-footer-credit {
            color: rgba(15, 23, 42, 0.38);
        }
        html:not([data-theme="dark"]) #main-menu .menu-footer-credit .menu-footer-credit-link {
            color: rgba(29, 78, 216, 0.55);
        }
        html:not([data-theme="dark"]) #main-menu .menu-footer-credit .menu-footer-credit-link:hover {
            color: rgba(30, 58, 138, 0.78);
        }
        html:not([data-theme="dark"]) #main-menu .menu-footer-credit .menu-footer-credit-link:focus-visible {
            outline-color: rgba(30, 58, 138, 0.4);
        }
        /* Mobilni: dno overlay-a, poravnato sa levim paddingom menija; iznad ilustracije ako se preklapaju */
        @media (max-width: 1199.98px) {
            #main-menu .menu-footer-credit {
                left: max(1.85rem, env(safe-area-inset-left));
                bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
                z-index: 4;
            }
        }
        /* Društvene mreže: desktop između stavki i slike; mobilni grid — iznad slike */
        #main-menu .main-menu-social {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: clamp(0.55rem, 2.25vw, 0.95rem);
            pointer-events: auto;
            z-index: 2;
            flex: 0 0 auto;
        }
        #main-menu .main-menu-social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.05rem;
            height: 2.05rem;
            text-decoration: none;
            color: rgba(248, 250, 252, 0.92);
            font-size: 0.92rem;
            line-height: 1;
            background: linear-gradient(
                165deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.04) 100%
            );
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.1) inset,
                0 2px 4px rgba(0, 0, 0, 0.06),
                0 8px 20px rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(16px) saturate(1.2);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
            transition:
                transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1),
                background 0.28s ease,
                border-color 0.28s ease,
                box-shadow 0.32s ease,
                color 0.28s ease,
                border-radius 0.4s ease;
        }
        /* Nepravilni „blob“ kao dugmad u headeru; svaka mreža malo drugačija */
        #main-menu .main-menu-social-link--youtube {
            border-radius: 42% 58% 63% 37% / 48% 39% 61% 52%;
        }
        #main-menu .main-menu-social-link--instagram {
            border-radius: 48% 52% 58% 42% / 52% 48% 45% 55%;
        }
        #main-menu .main-menu-social-link--facebook {
            border-radius: 58% 42% 52% 48% / 45% 55% 52% 48%;
        }
        #main-menu .main-menu-social-link:hover {
            transform: translateY(-2px) scale(1.04);
        }
        #main-menu .main-menu-social-link:focus-visible {
            outline: 2px solid rgba(147, 197, 253, 0.45);
            outline-offset: 2px;
        }
        #main-menu .main-menu-social-link--youtube:hover {
            border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%;
            background: linear-gradient(165deg, rgba(255, 68, 68, 0.35) 0%, rgba(200, 0, 0, 0.22) 100%);
            border-color: rgba(255, 120, 120, 0.38);
            color: #fff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.2) inset,
                0 10px 24px rgba(180, 20, 20, 0.28);
        }
        #main-menu .main-menu-social-link--instagram:hover {
            border-radius: 52% 48% 42% 58% / 58% 42% 48% 52%;
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 240, 248, 0.14) 45%,
                rgba(255, 255, 255, 0.1) 100%
            );
            border-color: rgba(255, 255, 255, 0.42);
            color: #fff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.35) inset,
                0 0 0 1px rgba(255, 255, 255, 0.12),
                0 0 18px rgba(255, 255, 255, 0.55),
                0 0 38px rgba(255, 255, 255, 0.28),
                0 8px 22px rgba(0, 0, 0, 0.18);
        }
        #main-menu .main-menu-social-link--facebook:hover {
            border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%;
            background: linear-gradient(165deg, rgba(59, 130, 246, 0.4) 0%, rgba(24, 119, 242, 0.22) 100%);
            border-color: rgba(120, 170, 255, 0.4);
            color: #fff;
            box-shadow: 0 10px 24px rgba(24, 119, 242, 0.22);
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link {
            color: rgba(30, 41, 59, 0.9);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.75) 100%);
            border-color: rgba(15, 23, 42, 0.08);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 2px 6px rgba(15, 23, 42, 0.06),
                0 8px 18px rgba(15, 23, 42, 0.07);
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link:focus-visible {
            outline-color: rgba(30, 58, 138, 0.45);
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link--youtube:hover {
            border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%;
            background: rgba(255, 0, 0, 0.12);
            border-color: rgba(220, 38, 38, 0.35);
            color: #b91c1c;
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link--instagram:hover {
            border-radius: 52% 48% 42% 58% / 58% 42% 48% 52%;
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(248, 250, 252, 0.98) 100%
            );
            border-color: rgba(255, 255, 255, 0.95);
            color: #0f172a;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 0 0 1px rgba(255, 255, 255, 0.65),
                0 0 12px rgba(255, 255, 255, 0.9),
                0 0 26px rgba(255, 255, 255, 0.75),
                0 0 40px rgba(255, 255, 255, 0.45),
                0 4px 16px rgba(15, 23, 42, 0.07);
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link--instagram:hover i {
            color: #0f172a;
            filter: none;
        }
        html:not([data-theme="dark"]) #main-menu .main-menu-social-link--facebook:hover {
            border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%;
            background: rgba(24, 119, 242, 0.14);
            border-color: rgba(24, 119, 242, 0.35);
            color: #1d4ed8;
        }
        @media (prefers-reduced-motion: reduce) {
            #main-menu .main-menu-social {
                transform: none !important;
            }
            #main-menu .main-menu-social-link {
                transition-duration: 0.01ms !important;
            }
            #main-menu .main-menu-social-link:hover {
                transform: none;
            }
        }
        #main-menu .menu-nav {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.8rem;
            width: 100%;
        }
        #main-menu .menu-nav-link {
            position: relative;
            display: inline-block;
            padding: 0.45rem 0;
            font-family: 'Exo 2', system-ui, sans-serif;
            font-weight: 700;
            font-size: clamp(1.5rem, 5.2vw, 2.55rem);
            line-height: 1.12;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            text-decoration: none;
            overflow: hidden;
        }
        /* Jedna stavka u jednom redu na širokom meniju (bez lomljenja naslova) */
        @media (min-width: 1200px) {
            #main-menu .menu-nav-link {
                white-space: nowrap;
            }
        }
        /* Beli tekst; pri hoveru „sijaj“ plavo–crveni prelaz kroz slova (background-clip) */
        #main-menu .menu-nav-link span {
            display: inline-block;
            background-image: linear-gradient(
                100deg,
                #ffffff 0%,
                #ffffff 32%,
                #60a5fa 42%,
                var(--serbia-red) 50%,
                #3b82f6 58%,
                #ffffff 70%,
                #ffffff 100%
            );
            background-size: 260% 100%;
            background-position: 0% 50%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: background-position 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #main-menu .menu-nav-link:hover span,
        #main-menu .menu-nav-link:focus-visible span {
            background-position: 100% 50%;
        }
        #main-menu .menu-nav-link:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.45);
            outline-offset: 4px;
        }
        button.menu-nav-link {
            background: none;
            border: none;
            cursor: pointer;
            font: inherit;
            text-align: left;
            width: auto;
        }
        /* Blok sa podmenijem: vertikalno; podmeni ne zauzima visinu dok je zatvoren — donje stavke idu dole tek kad se otvori */
        #main-menu .menu-nav-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
            width: 100%;
        }
        #main-menu .menu-nav-item--signin {
            position: relative;
        }
        /* Podmeni: grid 0fr→1fr (glatka visina), unutrašnjost fade + blag slide */
        #main-menu .menu-nav-sub {
            display: grid;
            grid-template-rows: 0fr;
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            min-width: 0;
            overflow: hidden;
            pointer-events: none;
            visibility: hidden;
            transition:
                grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.48s;
        }
        #main-menu .menu-nav-sub-inner {
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.4rem;
            box-sizing: border-box;
            padding: 0.2rem 0 0 0.75rem;
            margin: 0;
            border-left: 1px solid rgba(255, 255, 255, 0.22);
            opacity: 0;
            transform: translate3d(-10px, -6px, 0);
            transition:
                opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @media (min-width: 1200px) {
            #main-menu .menu-nav-item--signin:hover .menu-nav-sub,
            #main-menu .menu-nav-item--signin:focus-within .menu-nav-sub,
            #main-menu .menu-nav-item--signin.is-open .menu-nav-sub {
                grid-template-rows: 1fr;
                pointer-events: auto;
                visibility: visible;
                transition:
                    grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s;
            }
            #main-menu .menu-nav-item--signin:hover .menu-nav-sub-inner,
            #main-menu .menu-nav-item--signin:focus-within .menu-nav-sub-inner,
            #main-menu .menu-nav-item--signin.is-open .menu-nav-sub-inner {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition-delay: 0.04s, 0.04s;
            }
        }
        @media (max-width: 1199.98px) {
            #main-menu .menu-nav-item--signin.is-open .menu-nav-sub {
                grid-template-rows: 1fr;
                pointer-events: auto;
                visibility: visible;
                transition:
                    grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s;
            }
            #main-menu .menu-nav-item--signin.is-open .menu-nav-sub-inner {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition-delay: 0.04s, 0.04s;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #main-menu .menu-nav-sub,
            #main-menu .menu-nav-sub-inner {
                transition-duration: 0.01ms !important;
                transition-delay: 0s !important;
            }
        }
        #main-menu .menu-nav-sub-link {
            display: inline-block;
            font-family: 'Exo 2', system-ui, sans-serif;
            font-weight: 600;
            font-size: clamp(1rem, 2.2vw, 1.2rem);
            letter-spacing: 0.04em;
            line-height: 1.3;
            text-transform: none;
            text-decoration: none;
            color: rgba(248, 250, 252, 0.92);
            padding: 0.2rem 0;
            white-space: nowrap;
        }
        #main-menu .menu-nav-sub-link:hover,
        #main-menu .menu-nav-sub-link:focus-visible {
            color: #fff;
        }
        #main-menu .menu-nav-sub-link--personal:hover,
        #main-menu .menu-nav-sub-link--personal:focus-visible {
            color: #fecaca;
        }
        #main-menu .menu-nav-sub-link--company:hover,
        #main-menu .menu-nav-sub-link--company:focus-visible {
            color: #93c5fd;
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-inner {
            border-left-color: rgba(15, 23, 42, 0.18);
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link {
            color: #334155;
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link:hover,
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link:focus-visible {
            color: #0f172a;
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link--personal:hover,
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link--personal:focus-visible {
            color: var(--serbia-red);
        }
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link--company:hover,
        html:not([data-theme="dark"]) #main-menu .menu-nav-sub-link--company:focus-visible {
            color: var(--serbia-blue);
        }
        @media (max-width: 1199.98px) {
            #main-menu .menu-nav-item--signin.is-open .menu-nav-sub-inner {
                padding-top: 0.25rem;
                margin-top: 0.15rem;
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, 0.15);
                padding-left: 0;
            }
            html:not([data-theme="dark"]) #main-menu .menu-nav-item--signin.is-open .menu-nav-sub-inner {
                border-top-color: rgba(15, 23, 42, 0.12);
            }
        }
        /* Zajedničko za ugao sa ilustracijom — poziciju određuju samo media upiti (bez preklapanja sa menijem) */
        #main-menu .main-menu-visual-corner {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            pointer-events: none;
            user-select: none;
            z-index: 1;
        }
        /*
         * Ispod 1200px: „mobilni“ režim — kolona u toku dokumenta, bez preklapanja
         * (stavke gore, ilustracija dole desno; mehurići isključeni da ne ulaze u zonu menija).
         */
        @media (max-width: 1199.98px) {
            /*
             * Mobilni: nav + social (ispod Kontakta, centrirano), spacer, ilustracija na dnu iznad copyright-a.
             */
            #main-menu {
                display: grid;
                grid-template-rows: auto auto minmax(0, 1fr) auto;
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    'menu-main'
                    'menu-social'
                    'menu-spacer'
                    'menu-visual';
                align-content: stretch;
                justify-items: stretch;
                height: 100vh;
                height: 100dvh;
                max-height: 100vh;
                max-height: 100dvh;
                min-height: 0;
                overflow: hidden;
            }
            #main-menu .main-menu-bubble-field {
                display: none !important;
            }
            #main-menu .menu-inner {
                grid-area: menu-main;
                max-width: 100%;
                width: 100%;
                min-width: 0;
                align-self: flex-start;
                z-index: 2;
                padding-top: max(4.1rem, calc(env(safe-area-inset-top) + 2.35rem));
                padding-left: max(1.85rem, env(safe-area-inset-left));
                padding-right: max(1.1rem, env(safe-area-inset-right));
                padding-bottom: 0.35rem;
            }
            #main-menu .menu-nav {
                gap: 0.45rem;
                min-width: 0;
            }
            #main-menu .menu-nav-link,
            #main-menu .menu-nav-link--signin {
                white-space: nowrap;
                letter-spacing: 0.05em;
                font-size: clamp(1.02rem, 4.1vw, 1.85rem);
                padding: 0.28rem 0;
                max-width: 100%;
            }
            #main-menu .main-menu-social {
                grid-area: menu-social;
                align-self: start;
                justify-self: stretch;
                justify-content: center;
                padding: 0.35rem max(1.85rem, env(safe-area-inset-left)) 0.5rem;
                margin-top: 0;
                transform: none;
                z-index: 2;
            }
            #main-menu .main-menu-visual-corner {
                grid-area: menu-visual;
                position: relative;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                margin-top: 0;
                align-self: end;
                justify-self: end;
                width: auto;
                min-height: 0;
                max-width: min(92vw, 480px);
                /* visible: float animacija (translateY nagore) inače seče „nevidljivi okvir“ */
                overflow: visible;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                z-index: 1;
                padding-top: 0.85rem;
                padding-right: max(0.35rem, env(safe-area-inset-right));
                /* Ostavi prostor za copyright ispod ilustracije */
                padding-bottom: max(2.05rem, calc(env(safe-area-inset-bottom) + 1.55rem));
            }
            #main-menu .main-menu-visual-stack {
                max-width: min(92vw, 480px);
                width: auto;
                height: auto;
                max-height: min(42dvh, calc(100dvh - 22rem), 380px);
                overflow: visible;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
            }
            #main-menu .main-menu-illustration {
                max-height: min(42dvh, calc(100dvh - 22rem), 380px);
                width: auto;
                max-width: 100%;
                height: auto;
                object-fit: contain;
                object-position: right bottom;
            }
            #main-menu .menu-footer-credit {
                bottom: max(0.55rem, calc(env(safe-area-inset-bottom) + 0.2rem));
                z-index: 4;
            }
        }
        /* Niski mobilni (landscape / mali viewport): kompaktniji nav, ista veličina svih stavki */
        @media (max-width: 1199.98px) and (max-height: 520px) {
            #main-menu .menu-inner {
                padding-top: max(3.25rem, calc(env(safe-area-inset-top) + 1.5rem));
                padding-bottom: 0.15rem;
            }
            #main-menu .menu-nav {
                gap: 0.2rem;
            }
            #main-menu .menu-nav-link,
            #main-menu .menu-nav-link--signin {
                font-size: clamp(0.88rem, 3.4vh, 1.25rem);
                padding: 0.12rem 0;
            }
            #main-menu .main-menu-social {
                padding-bottom: 0.15rem;
            }
            #main-menu .main-menu-social-link {
                width: 1.75rem;
                height: 1.75rem;
                font-size: 0.8rem;
            }
            #main-menu .main-menu-visual-corner {
                padding-bottom: max(1.65rem, calc(env(safe-area-inset-bottom) + 1.2rem));
            }
            #main-menu .main-menu-visual-stack,
            #main-menu .main-menu-illustration {
                max-height: min(34dvh, calc(100dvh - 16rem), 220px);
            }
        }
        /* Širi ekran: stavke menija vertikalno centrirane levo; ilustracija desno i dole */
        @media (min-width: 1200px) {
            #main-menu {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: stretch;
            }
            #main-menu .main-menu-social {
                align-self: flex-end;
                justify-content: center;
                align-items: center;
                padding: 0 0.65rem calc(max(0.75rem, env(safe-area-inset-bottom)) + 0.55rem);
                margin-left: 0;
                margin-right: 0;
                transform: translateY(-5px);
            }
            #main-menu .main-menu-social-link {
                width: 2.2rem;
                height: 2.2rem;
                font-size: 0.98rem;
            }
            #main-menu .menu-inner {
                align-self: center;
                flex: 0 1 auto;
                max-width: min(560px, 52vw);
                width: auto;
                margin-top: 0;
                margin-bottom: 0;
                padding:
                    max(0.75rem, env(safe-area-inset-top))
                    1.5rem
                    max(0.75rem, env(safe-area-inset-bottom))
                    max(3rem, calc(env(safe-area-inset-left) + 1.75rem));
            }
            #main-menu .main-menu-visual-corner {
                position: relative;
                right: auto;
                bottom: auto;
                margin-top: 0;
                margin-left: auto;
                align-self: flex-end;
                flex: 0 0 auto;
                max-width: min(58vw, 780px);
            }
            #main-menu .menu-footer-credit {
                left: max(3rem, calc(env(safe-area-inset-left) + 1.75rem));
                bottom: max(0.85rem, env(safe-area-inset-bottom));
            }
        }
        #main-menu .main-menu-visual-stack {
            position: relative;
            display: block;
            max-width: min(114vw, 780px);
            line-height: 0;
            overflow: visible;
        }
        /* Od sredine slike do iznad ekrana – mehurići mogu da odlete do vrha viewporta */
        #main-menu .main-menu-bubble-field {
            position: absolute;
            left: 0;
            right: 0;
            top: -130vh;
            bottom: 50%;
            width: 100%;
            overflow: visible;
            z-index: 2;
            pointer-events: none;
            mask-image: linear-gradient(to top, black 0%, black 78%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
            -webkit-mask-image: linear-gradient(to top, black 0%, black 78%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
        }
        /* 3D mehurići: fiksna kugla, blag ulaz, sporo plutanje nagore (mali drift) */
        #main-menu .mfb-token {
            --mfb-size: 28px;
            position: absolute;
            left: 0;
            bottom: 0;
            width: var(--mfb-size);
            height: var(--mfb-size);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: none;
            overflow: hidden;
            box-shadow: none;
        }
        #main-menu .mfb-token > i {
            position: relative;
            z-index: 1;
            font-size: calc(var(--mfb-size) * 0.46);
            line-height: 1;
        }
        #main-menu .mfb-token--chip,
        #main-menu .mfb-token--pin,
        #main-menu .mfb-token--leaf {
            border-radius: 50%;
        }
        #main-menu:not(.is-open) .main-menu-bubble-field .mfb-token {
            animation: none !important;
            visibility: hidden;
            opacity: 0;
            transform: translate3d(0, 10px, 0) scale(0.88);
        }
        #main-menu.is-open .main-menu-bubble-field .mfb-token {
            visibility: visible;
            will-change: transform, opacity;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-name: mfb-token-rise;
            animation-fill-mode: backwards;
        }
        #main-menu.is-open .main-menu-bubble-field .mfb-token--alt {
            animation-name: mfb-token-rise-alt;
        }
        #main-menu .mfb-token--w {
            border: 1px solid rgba(71, 85, 105, 0.38);
            background: radial-gradient(circle at 32% 28%, #ffffff 0%, #e8eefa 38%, #94a3b8 88%, #64748b 100%);
            color: #1e293b;
        }
        #main-menu .mfb-token--w > i {
            color: #0f172a;
        }
        #main-menu .mfb-token--b {
            border: 1px solid rgba(15, 23, 42, 0.5);
            background: radial-gradient(circle at 30% 26%, #93c5fd 0%, var(--serbia-blue) 45%, #0f172a 92%);
            color: #eff6ff;
        }
        #main-menu .mfb-token--b > i {
            color: #f8fafc;
        }
        #main-menu .mfb-token--r {
            border: 1px solid rgba(69, 10, 10, 0.55);
            background: radial-gradient(circle at 32% 28%, #fda4af 0%, var(--serbia-red) 48%, #7f1d1d 95%);
            color: #fff;
        }
        #main-menu .mfb-token--r > i {
            color: #fff;
        }
        /* Lagano: pojava → jedinstven krug → sporo nagore sa blagim S-driftom, bez menjanja oblika */
        @keyframes mfb-token-rise {
            0% {
                opacity: 0;
                transform: translate3d(0, 10px, 0) scale(0.88);
            }
            9% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
            }
            45% {
                transform: translate3d(7px, -58vh, 0) scale(1);
                opacity: 0.88;
            }
            100% {
                opacity: 0;
                transform: translate3d(-5px, -128vh, 0) scale(1);
            }
        }
        @keyframes mfb-token-rise-alt {
            0% {
                opacity: 0;
                transform: translate3d(0, 10px, 0) scale(0.88);
            }
            9% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
            }
            45% {
                transform: translate3d(-7px, -58vh, 0) scale(1);
                opacity: 0.88;
            }
            100% {
                opacity: 0;
                transform: translate3d(5px, -130vh, 0) scale(1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #main-menu .main-menu-backdrop {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background:
                    linear-gradient(
                        165deg,
                        rgba(15, 23, 42, 0.99) 0%,
                        rgba(2, 6, 23, 1) 45%,
                        rgba(15, 23, 42, 0.99) 100%
                    );
            }
            html:not([data-theme="dark"]) #main-menu .main-menu-backdrop {
                background:
                    linear-gradient(
                        165deg,
                        rgba(255, 255, 255, 1) 0%,
                        rgba(248, 250, 252, 0.99) 42%,
                        rgba(241, 245, 249, 1) 100%
                    );
            }
            #main-menu.is-open .main-menu-bubble-field .mfb-token {
                animation: none !important;
                opacity: 0.35;
                transform: translate3d(0, -40px, 0) scale(0.9);
                visibility: visible;
                will-change: auto;
            }
            #main-menu.is-open .main-menu-illustration {
                animation: none;
                filter: none;
            }
        }
        #main-menu .main-menu-illustration {
            position: relative;
            display: block;
            width: auto;
            max-width: 100%;
            max-height: min(126vh, 960px);
            height: auto;
            object-fit: contain;
            object-position: right bottom;
            z-index: 1;
            transform-origin: 78% 96%;
        }
        /* SVG kao <img>: ulaz (1) pa kontinuirani float */
        #main-menu:not(.is-open) .main-menu-illustration {
            animation: none;
            opacity: 1;
            filter: none;
            transform: none;
        }
        #main-menu.is-open .main-menu-illustration {
            filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.24));
            animation:
                menuIllEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
                menuIllSvgFloat 5s ease-in-out 0.55s infinite;
            animation-fill-mode: backwards, none;
        }
        html:not([data-theme="dark"]) #main-menu.is-open .main-menu-illustration {
            filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.12));
        }
        @keyframes menuIllEnter {
            0% {
                opacity: 0;
                transform: translateY(22px) scale(0.96);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        @keyframes menuIllSvgFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg) scale(1);
            }
            50% {
                transform: translateY(-11px) rotate(0.55deg) scale(1.012);
            }
        }
        /* Lite / Retina: ista ideja plutanja, manji pomeraj i sporije — samo transform, bez filtera */
        @keyframes menuIllSvgFloatLite {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-5px) scale(1.003);
            }
        }
        /* Retina + veliki fizički panel (npr. ugrađeni MacBook Pro): manje repaint-a, kraći let balona, bez blur pozadine */
        @keyframes mfb-token-rise-lite {
            0% {
                opacity: 0;
                transform: translate3d(0, 8px, 0) scale(0.9);
            }
            12% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
            }
            55% {
                transform: translate3d(5px, -200px, 0) scale(1);
                opacity: 0.82;
            }
            100% {
                opacity: 0;
                transform: translate3d(-4px, -380px, 0) scale(1);
            }
        }
        @keyframes mfb-token-rise-lite-alt {
            0% {
                opacity: 0;
                transform: translate3d(0, 8px, 0) scale(0.9);
            }
            12% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
            }
            55% {
                transform: translate3d(-5px, -200px, 0) scale(1);
                opacity: 0.82;
            }
            100% {
                opacity: 0;
                transform: translate3d(4px, -380px, 0) scale(1);
            }
        }
        html.landing-menu-perf-lite #main-menu .main-menu-backdrop {
            background:
                linear-gradient(
                    165deg,
                    rgba(15, 23, 42, 0.992) 0%,
                    rgba(2, 6, 23, 0.996) 45%,
                    rgba(15, 23, 42, 0.993) 100%
                );
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        html.landing-menu-perf-lite:not([data-theme="dark"]) #main-menu .main-menu-backdrop {
            background:
                linear-gradient(
                    165deg,
                    rgba(255, 255, 255, 0.995) 0%,
                    rgba(248, 250, 252, 0.992) 42%,
                    rgba(241, 245, 249, 0.995) 100%
                );
        }
        html.landing-menu-perf-lite #main-menu .main-menu-bubble-field {
            mask-image: none;
            -webkit-mask-image: none;
        }
        html.landing-menu-perf-lite #main-menu.is-open .main-menu-bubble-field .mfb-token {
            animation-name: mfb-token-rise-lite !important;
            animation-duration: 29s !important;
        }
        html.landing-menu-perf-lite #main-menu.is-open .main-menu-bubble-field .mfb-token--alt {
            animation-name: mfb-token-rise-lite-alt !important;
        }
        html.landing-menu-perf-lite #main-menu.is-open .main-menu-illustration {
            filter: none;
            animation:
                menuIllEnter 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards,
                menuIllSvgFloatLite 7s ease-in-out 0.5s infinite;
            animation-fill-mode: backwards, none;
        }
        html.landing-menu-perf-lite #main-menu .main-menu-visual-stack {
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        @media (prefers-reduced-motion: reduce) {
            html.landing-menu-perf-lite #main-menu.is-open .main-menu-bubble-field .mfb-token {
                animation: none !important;
                opacity: 0.35;
                transform: translate3d(0, -40px, 0) scale(0.9);
                visibility: visible;
                will-change: auto;
            }
            html.landing-menu-perf-lite #main-menu.is-open .main-menu-illustration {
                animation: none !important;
                filter: none !important;
            }
        }

/* Content pages: fixed header bar (landing keeps absolute inside .landing-hero) */
body.has-landing-main-menu .landing-header-wrap--content {
    position: fixed;
    z-index: 60;
}
body.has-landing-main-menu {
    padding-top: 4.5rem;
}
@media (max-width: 576px) {
    body.has-landing-main-menu {
        padding-top: 4.1rem;
    }
}
#main-menu .menu-nav-link.is-active span {
    background: linear-gradient(90deg, #f87171 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html:not([data-theme="dark"]) #main-menu .menu-nav-link.is-active span {
    background: linear-gradient(90deg, #B11226 0%, #1E3A8A 100%);
    -webkit-background-clip: text;
    background-clip: text;
}