/* Replace static bg.webp / small1.webp with dynamic hero + buttons */
#landing_bg.landing_bg {
    background-image: none !important;
    overflow: hidden;
    cursor: default;
}

#bg.bg {
    display: none;
}

#landing_bg .vip-hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 75px);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.18s ease;
}

#landing_bg .vip-hero.is-ready {
    opacity: 1;
}

/* Default: auto 100% — fill height, clip horizontal overflow */
#landing_bg .vip-hero__stage {
    position: absolute;
    top: 0;
    left: 50%;
    height: calc(100vh - 75px);
    transform: translateX(-50%);
}

#landing_bg .vip-hero__picture {
    display: block;
    height: 100%;
    line-height: 0;
}

#landing_bg .vip-hero__bg {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}

/* Narrow portrait: 100% auto — fill width, clip vertical overflow */
@media (orientation: portrait) and (max-aspect-ratio: 601/1000) {
    #landing_bg .vip-hero__stage {
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
    }

    #landing_bg .vip-hero__picture {
        width: 100%;
        height: auto;
    }

    #landing_bg .vip-hero__bg {
        width: 100%;
        height: auto;
    }
}

#landing_bg .vip-hero__actions {
    position: absolute;
    inset: 0;
}

#landing_bg .vip-hero__btn {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

#landing_bg .vip-hero__btn:hover {
    transform: scale(1.03);
    filter: brightness(1.08);
}

#landing_bg .vip-hero__btn:active {
    transform: scale(0.98);
}

#landing_bg .vip-hero__btn-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Desktop / landscape positions from ref_indexbg.webp */
#landing_bg .vip-hero__btn--view {
    left: 30.33%;
    top: 50.27%;
    width: 24.52%;
}

#landing_bg .vip-hero__btn--download {
    left: 30.48%;
    top: 62.39%;
    width: 24.36%;
}

@media (orientation: portrait) {
    /* Mobile positions from ref_indexbg_mobile.webp */
    #landing_bg .vip-hero__btn--view {
        left: 27.98%;
        top: 51.31%;
        width: 39.45%;
    }

    #landing_bg .vip-hero__btn--download {
        left: 28.21%;
        top: 61.71%;
        width: 39.30%;
    }
}