.hero-section {
                position: relative;
                min-height: 100vh;
                height: auto;
                background-image: url('../images/galerija/hero-neon-cocktails.webp');
                background-size: cover;
                background-position: center 32%;
                overflow: visible;
            }

            .home-hero .container {
                height: auto;
                padding-bottom: 0;
            }

            .home-hero .container .row {
                height: auto;
            }

            /* overlay */
            .hero-section::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:
                    radial-gradient(circle at top, rgba(203, 108, 230, 0.18), transparent 30%),
                    linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.74) 60%, rgba(0, 0, 0, 0.88));
                z-index: 1;
            }

            /* da sadržaj bude iznad */
            .hero-section > * {
                position: relative;
                z-index: 2;
            }

            .hero-orb {
                position: absolute;
                width: 320px;
                height: 320px;
                border-radius: 50%;
                filter: blur(70px);
                opacity: 0.22;
                z-index: 1;
                animation: drift 12s ease-in-out infinite;
            }

            .orb-left {
                left: -80px;
                bottom: -40px;
                background: rgba(203, 108, 230, 0.82);
            }

            .orb-right {
                top: 110px;
                right: -90px;
                background: rgba(203, 166, 87, 0.68);
                animation-delay: -4s;
            }

            .main-options {
                min-height: calc(100vh - 32px);
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 28px 0 56px;
            }

            .home-shell {
                max-width: 1100px;
                margin: 0 auto;
                padding-top: 0;
            }

            .logo-wrap img {
                width: 210px;
                margin-bottom: 18px;
                filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.35));
            }

            .intro-kicker {
                display: inline-flex;
                align-items: center;
                border: 1px solid rgba(255, 255, 255, 0.18);
                background: rgba(255, 255, 255, 0.05);
                border-radius: 999px;
                color: #f3feff;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: 0.18em;
                margin-bottom: 16px;
                padding: 10px 18px;
                text-transform: uppercase;
            }

            .intro-copy {
                max-width: 640px;
                margin: 0 auto 30px;
                color: rgba(243, 254, 255, 0.86);
                font-size: 20px;
                line-height: 1.6;
            }

            .options-wrap {
                display: flex;
                gap: 30px;
                justify-content: center;
                flex-wrap: wrap;
            }

.option-card {
                position: relative;
                width: 480px;
                height: 300px;
                border-radius: 28px;
                overflow: hidden;
                text-decoration: none;
                border: 1px solid rgba(255,255,255,0.24);
                background: rgba(0, 0, 0, 0.24);
                box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
                transform: translateY(0);
                transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
            }

.option-card::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                padding: 1px;
                background: linear-gradient(140deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04), rgba(203, 166, 87, 0.38));
                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
                pointer-events: none;
                opacity: 0.8;
            }

.option-card::after {
                content: "";
                position: absolute;
                top: 0;
                left: -120%;
                width: 55%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
                transform: skewX(-18deg);
                transition: left 0.8s ease;
                pointer-events: none;
            }

.option-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s ease, filter 0.45s ease;
            }

            .option-card .overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.78));
            }

            .card-content {
                position: absolute;
                left: 28px;
                right: 28px;
                bottom: 24px;
                text-align: left;
            }

            .card-tag {
                display: inline-block;
                color: rgba(243, 254, 255, 0.78);
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.14em;
                margin-bottom: 12px;
                text-transform: uppercase;
            }

            .option-card h2 {
                color: white;
                font-size: 30px;
                font-weight: 700;
                letter-spacing: 1px;
                margin-bottom: 8px;
            }

            .option-card p {
                color: rgba(243, 254, 255, 0.82);
                font-size: 17px;
                line-height: 1.55;
                margin-bottom: 0;
            }

            /* hover efekat */
            .option-card:hover img {
                transform: scale(1.08);
                filter: saturate(1.08);
            }

            .option-card:hover .overlay {
                background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.84));
            }

.option-card:hover {
                transform: translateY(-8px);
                border-color: rgba(203, 166, 87, 0.55);
                box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
            }

.option-card:hover::after {
                left: 135%;
            }

            .home-reveal {
                opacity: 0;
                transform: translateY(26px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }

            body.page-ready .home-reveal {
                opacity: 1;
                transform: translateY(0);
            }

            .delay-1 { transition-delay: 0.1s; }
            .delay-2 { transition-delay: 0.2s; }
            .delay-3 { transition-delay: 0.3s; }
            .delay-4 { transition-delay: 0.42s; }
            .delay-5 { transition-delay: 0.54s; }

            @keyframes drift {
                0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
                50% { transform: translate3d(0, -18px, 0) scale(1.06); }
            }

            @media (max-width: 768px) {
                .hero-section {
                    min-height: auto;
                    background-image: url('../images/galerija/slika5.webp');
                    background-position: center;
                }

                .main-options {
                    min-height: auto;
                    padding: 32px 0 52px;
                }

                .logo-wrap img {
                    width: 150px;
                    margin-bottom: 10px;
                    padding-top:0;
                    margin-top: 0;
                }
                .options-wrap {
                    flex-direction: column;
                    align-items: center;
                }

                .intro-copy {
                    font-size: 17px;
                    margin-bottom: 24px;
                }

                .option-card {
                    width: 90%;
                    height: 260px;
                }

                .card-content {
                    left: 20px;
                    right: 20px;
                    bottom: 18px;
                }

                .option-card h2 {
                    font-size: 24px;
                }
            }

            @media (max-height: 860px) and (min-width: 769px) {
                .main-options {
                    padding-top: 24px;
                    padding-bottom: 60px;
                }

                .logo-wrap img {
                    width: 176px;
                    margin-bottom: 12px;
                }

                .intro-copy {
                    margin-bottom: 24px;
                    font-size: 18px;
                }

                .option-card {
                    width: 430px;
                    height: 270px;
                }
            }

            .home-map-frame {
                width: 95%;
                height: 95%;
            }

            @media (max-width: 768px) {
                .home-map-frame {
                    width: 100%;
                    min-height: 320px;
                }
            }