/* ShanDun v350: shared Infrastructure Deck hero system. */

.home-hero-section {
    background: #ffffff !important;
    border-top: 0 !important;
}

.home-hero-section::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Homepage v310: seamless UCloud-style carousel rhythm and pagination. */
.home-hero-section[data-hero-carousel] {
    cursor: grab;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}

.home-hero-section[data-hero-carousel] .home-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home-hero-section[data-hero-carousel].is-dragging {
    cursor: grabbing;
    user-select: none;
}

.home-hero-section[data-hero-carousel] .home-hero-track {
    display: flex !important;
    width: 100% !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.home-hero-section[data-hero-carousel].is-dragging .home-hero-track,
.home-hero-section[data-hero-carousel].is-jumping .home-hero-track {
    transition: none !important;
}

.home-hero-section[data-hero-carousel] .home-hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    backface-visibility: hidden;
}

.home-hero-section[data-hero-carousel] .home-hero-visual img {
    user-select: none;
    -webkit-user-drag: none;
}

.home-hero-section[data-hero-carousel] .home-hero-progress {
    bottom: 26px !important;
    z-index: 20;
    display: flex !important;
    gap: 16px !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button {
    width: 30px !important;
    height: 20px !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button::before,
.home-hero-section[data-hero-carousel] .home-hero-progress span {
    height: 4px !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button::before {
    background: #d8e3f0 !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button.is-active span {
    animation: heroProgress 4s linear forwards;
}

.home-hero-section[data-hero-carousel].is-paused .home-hero-progress button.is-active span {
    animation-play-state: paused;
}

.home-hero-section + .product-section.home-section {
    border-top: 0 !important;
    background: linear-gradient(180deg, #ffffff 0, #f8fafc 150px) !important;
}

@media (min-width: 761px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 560px !important;
        min-height: 560px !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        left: max(32px, calc((100vw - 1200px) / 2 + 60px)) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    .home-hero-slide::after {
        background: none !important;
    }
}

.product-page .product-hero,
.product-page .product-hero-inner,
.about-hero,
.about-hero-inner,
.legal-hero,
.legal-hero-inner {
    min-height: 560px;
}

.product-page-cloud .product-hero,
.product-page-metal .product-hero,
.product-page-seo .product-hero,
.about-hero {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.product-page-cloud .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-cloud-v372-ucloud.webp");
}

.product-page-metal .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange.webp");
}

.product-page-seo .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-seo-v378-aligned.webp");
}

.product-page .product-hero::before,
.about-hero::before {
    display: none;
}

.about-hero {
    background-image: url("/web/funidc/static/images/about-hero-v350-deck.webp");
}

.legal-hero {
    background-color: #ffffff;
}

.legal-hero::before {
    background-image: var(--legal-hero-image, url("/web/funidc/static/images/legal-hero-v350-deck.webp"));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.legal-hero::after {
    display: none;
}

.legal-tabs {
    margin: 24px auto 0;
}

@media (max-width: 760px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 540px !important;
        min-height: 540px !important;
    }

    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    .home-hero-slide::after {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 56%, rgba(255, 255, 255, 0.72) 62%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0) 76%) !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress {
        bottom: 14px !important;
        gap: 12px !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button {
        width: 26px !important;
        height: 18px !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button::before,
    .home-hero-section[data-hero-carousel] .home-hero-progress span {
        height: 3px !important;
    }

    .product-page .product-hero,
    .product-page .product-hero-inner,
    .about-hero,
    .about-hero-inner,
    .legal-hero,
    .legal-hero-inner {
        min-height: 820px;
    }

    .product-page-cloud .product-hero,
    .product-page-metal .product-hero,
    .product-page-seo .product-hero,
    .about-hero {
        background-position: center bottom;
        background-size: cover;
    }

    .product-page-cloud .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-cloud-v372-ucloud-mobile.webp");
    }

    .product-page-metal .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange-mobile.webp");
    }

    .product-page-seo .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-seo-v378-aligned-mobile.webp");
    }

    .about-hero {
        background-image: url("/web/funidc/static/images/about-hero-v350-deck-mobile.webp");
    }

    .product-page .product-hero::before,
    .about-hero::before {
        display: block;
        opacity: 1;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(255, 255, 255, 0.72) 64%, rgba(255, 255, 255, 0.08) 71%, rgba(255, 255, 255, 0) 76%);
    }

    .legal-hero::before {
        background-image:
            linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(255, 255, 255, 0.72) 64%, rgba(255, 255, 255, 0.08) 71%, rgba(255, 255, 255, 0) 76%),
            var(--legal-hero-image-mobile, url("/web/funidc/static/images/legal-hero-v350-deck-mobile.webp"));
        background-position: center bottom;
        background-size: cover;
    }

    .legal-tabs {
        margin: 16px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-section[data-hero-carousel] .home-hero-track {
        transition: none !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button.is-active span {
        animation: none !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 520px !important;
        min-height: 520px !important;
    }
}

/* ShanDun v313: consistent slide typography and a clearer physical-server visual. */
.home-hero-copy h1,
.home-hero-copy h2 {
    margin: 0;
    color: #07142c;
    font-size: clamp(34px, 2.55vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
}

.home-hero-copy h1 span,
.home-hero-copy h2 span {
    color: #f6821f;
}

.home-hero-section .home-hero-visual {
    pointer-events: none;
}

@media (min-width: 761px) {
    .home-hero-slide--physical .home-hero-visual img {
        transform: scale(1.09) !important;
        transform-origin: 74% 52%;
        filter: saturate(1.34) contrast(1.16) brightness(0.99);
    }

    .product-page-metal .product-hero {
        background-image: none;
    }

    .product-page-metal .product-hero::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background: #ffffff url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange.webp") center center / 100% auto no-repeat;
        filter: saturate(1.34) contrast(1.16) brightness(0.99);
        pointer-events: none;
    }

}

@media (max-width: 760px) {
    .home-hero-copy h1,
    .home-hero-copy h2 {
        font-size: 29px !important;
        line-height: 1.15 !important;
    }

    .home-hero-slide--physical .home-hero-visual img {
        transform: scale(1.05) !important;
        transform-origin: 70% 70%;
        filter: saturate(1.26) contrast(1.12) brightness(0.99);
    }

    .product-page-metal .product-hero {
        background-image: none;
    }

    .product-page-metal .product-hero::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background: #ffffff url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange-mobile.webp") center bottom / cover no-repeat;
        filter: saturate(1.26) contrast(1.12) brightness(0.99);
        pointer-events: none;
    }

    .product-page .product-hero-inner {
        align-items: start;
        box-sizing: border-box;
        padding: 76px 0 280px !important;
    }
}

/* ShanDun v314: compact, dependable mobile homepage hero. */
@media (max-width: 760px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 570px !important;
        min-height: 570px !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        top: 30px !important;
        left: 22px !important;
        width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
    }

    .home-hero-copy h1,
    .home-hero-copy h2 {
        font-size: 28px !important;
        line-height: 1.14 !important;
    }

    .home-hero-copy p,
    .home-hero-slide:not(:first-child) .home-hero-copy p {
        max-width: 470px !important;
        margin-top: 12px !important;
        font-size: 13px !important;
        line-height: 1.62 !important;
    }

    .home-hero-tags {
        gap: 7px !important;
        margin-top: 14px !important;
    }

    .home-hero-tags span {
        min-height: 29px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    .home-hero-actions {
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .home-hero-actions a {
        min-height: 48px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .home-hero-actions .home-action-icon {
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .home-hero-actions .home-action-icon i {
        font-size: 17px !important;
    }

    .home-hero-slide::after {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.08) 59%, rgba(255, 255, 255, 0) 66%) !important;
    }

    .home-hero-slide--physical .home-hero-visual img {
        transform: scale(1.24) translateY(-8px) !important;
        transform-origin: 52% 88% !important;
        filter: saturate(1.5) contrast(1.24) brightness(0.99) !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress {
        bottom: 9px !important;
    }

    .home-hero-section + .product-section.home-section {
        padding-top: 34px !important;
    }
}

@media (max-width: 420px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 550px !important;
        min-height: 550px !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        left: 18px !important;
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
    }

    .home-hero-copy h1,
    .home-hero-copy h2 {
        font-size: 26px !important;
    }

    .home-hero-actions a {
        padding: 0 7px !important;
        font-size: 11px !important;
    }
}

/* ShanDun v315: treat the mobile hero as one continuous background scene. */
@media (max-width: 760px) {
    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        opacity: 0 !important;
    }

    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        background-repeat: no-repeat !important;
        background-size: auto 72% !important;
    }

    .home-hero-slide--cloud .home-hero-visual {
        background-image: url("/web/funidc/static/images/home-hero-cloud-v372-ucloud.webp") !important;
        background-position: 88% bottom !important;
    }

    .home-hero-slide--physical .home-hero-visual {
        background-image: url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange.webp") !important;
        background-position: 88% bottom !important;
    }

    .home-hero-slide--seo .home-hero-visual {
        background-image: url("/web/funidc/static/images/home-hero-seo-v378-aligned.webp") !important;
        background-position: 90% bottom !important;
    }

    .home-hero-slide::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 32%, rgba(255, 255, 255, 0.78) 47%, rgba(255, 255, 255, 0.38) 64%, rgba(255, 255, 255, 0.06) 84%, rgba(255, 255, 255, 0) 100%) !important;
    }
}

/* ShanDun v318: one clear homepage CTA without decorative button icons. */
.home-hero-actions {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 0 !important;
}

.home-hero-actions .home-hero-primary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    justify-self: start !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.home-hero-actions .home-action-icon {
    display: none !important;
}

@media (max-width: 760px) {
    .home-hero-actions {
        width: auto !important;
        max-width: 100% !important;
        margin-top: 18px !important;
    }

    .home-hero-actions .home-hero-primary {
        width: auto !important;
        min-width: 184px !important;
        min-height: 52px !important;
        padding: 0 24px !important;
        font-size: 13px !important;
        justify-self: start !important;
    }
}

@media (max-width: 380px) {
    .home-hero-actions .home-hero-primary {
        min-width: 0 !important;
        padding: 0 20px !important;
    }
}

/* ShanDun v319: mobile artwork first, content second, without a white veil. */
@media (max-width: 760px) {
    .home-hero-section,
    .home-hero-inner {
        height: auto !important;
        min-height: 0 !important;
    }

    .home-hero-track {
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .home-hero-slide,
    .home-hero-section[data-hero-carousel] .home-hero-slide {
        display: grid !important;
        grid-template-areas:
            "visual"
            "copy";
        grid-template-rows: 300px auto !important;
        align-content: start !important;
        height: auto !important;
        min-height: 620px !important;
        padding: 0 0 52px !important;
        background: #ffffff !important;
    }

    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        position: relative !important;
        inset: auto !important;
        grid-area: visual;
        z-index: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: 300px !important;
        min-height: 300px !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
        background-image: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        opacity: 1 !important;
        transform: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .home-hero-slide.home-hero-slide--physical .home-hero-visual img {
        filter: saturate(1.18) contrast(1.08) brightness(1.01) !important;
        transform: scale(1.3) !important;
        transform-origin: center bottom !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        position: relative !important;
        inset: auto !important;
        grid-area: copy;
        z-index: 4 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 20px 22px 0 !important;
        transform: none !important;
    }

    .home-hero-slide::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress {
        bottom: 11px !important;
    }

    .home-hero-section + .product-section.home-section {
        padding-top: 32px !important;
    }
}

@media (max-width: 420px) {
    .home-hero-slide,
    .home-hero-section[data-hero-carousel] .home-hero-slide {
        grid-template-rows: 286px auto !important;
        min-height: 600px !important;
    }

    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 286px !important;
        min-height: 286px !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        padding: 18px 18px 0 !important;
    }
}

/* ShanDun v321: keep the 560px UCloud-style canvas and fill desktop widths edge to edge. */
.home-hero-visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 761px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual {
        width: 100% !important;
        height: 560px !important;
        min-height: 560px !important;
    }

    .home-hero-section,
    .home-hero-slide,
    .home-hero-visual {
        background-color: #f4f8ff !important;
    }

    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-blend-mode: multiply !important;
    }

    .home-hero-slide--cloud .home-hero-visual {
        background-image: url("../static/images/home-hero-cloud-v372-ucloud.webp") !important;
    }

    .home-hero-slide--physical .home-hero-visual {
        background-image: url("../static/images/home-hero-metal-v385-ucloud-orange.webp") !important;
    }

    .home-hero-slide--seo .home-hero-visual {
        background-image: url("../static/images/home-hero-seo-v378-aligned.webp") !important;
    }

    .home-hero-visual img {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}