/* 手机端首页 hero：828 设计稿坐标系，与桌面 hero-interactive 隔离 */
@media (max-width: 828px) {
    section.hero {
        width: 100vw;
        height: auto;
        min-height: 0;
        padding-bottom: 0;
        background-color: #fff;
        aspect-ratio: 828 / 1605;
    }

    section.hero .hero-inner {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: unset;
        container-type: normal;
    }

    .hero-interactive {
        display: none !important;
    }

    .hero-mobile-bg,
    .hero-mobile-fade,
    .hero-mobile {
        display: block;
    }

    .hero-mobile-bg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 95%;
        object-fit: cover;
        object-position: center top;
        pointer-events: none;
        z-index: 0;
    }

    .hero-mobile-fade {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(900 * var(--rpx));
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .hero-slogan {
        position: relative;
        z-index: 3;
        left: auto;
        top: auto;
        visibility: visible;
        pointer-events: none;
        max-width: none;
        margin: 0 auto;
        padding: var(--mobile-hero-pad-top) calc(30 * var(--rpx)) 0;
        text-align: center;
    }

    section.hero.hero-intro-pending .hero-slogan {
        visibility: visible;
    }

    .hero-title {
        font-size: calc(40 * var(--fpx));
        font-weight: 600;
        line-height: 1.12;
        color: var(--text-primary);
    }

    .hero-subtitle {
        margin-top: calc(16 * var(--rpx));
        max-width: none;
        font-size: calc(20 * var(--fpx));
        line-height: calc(48 / 28);
        color: var(--text-primary);
    }

    .hero-mobile {
        position: relative;
        z-index: 4;
        width: calc(768 * var(--rpx));
        height: calc(766 * var(--rpx));
        margin: calc(70 * var(--rpx)) auto calc(80 * var(--rpx));
    }

    .hero-mobile-brick {
        position: absolute;
        display: block;
        overflow: hidden;
        background-color: rgba(162, 199, 219, 0.12);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.22s var(--hover-ease), box-shadow 0.22s var(--hover-ease);
    }

    .hero-mobile-brick-title {
        position: absolute;
        left: calc(28 * var(--rpx));
        top: calc(32 * var(--rpx));
        z-index: 1;
        font-size: calc(22 * var(--fpx));
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-primary);
        pointer-events: none;
        white-space: normal;
    }

    .hero-mobile-brick:active {
        transform: scale(0.985);
    }

    .hero-mobile-brick--wide {
        width: calc(460 * var(--rpx));
        height: calc(250 * var(--rpx));
    }

    .hero-mobile-brick--narrow {
        width: calc(300 * var(--rpx));
        height: calc(250 * var(--rpx));
    }

    .hero-mobile-brick[data-brick-id="hardware"] {
        left: 0;
        top: 0;
    }

    .hero-mobile-brick[data-brick-id="solution"] {
        left: calc(468 * var(--rpx));
        top: 0;
    }

    .hero-mobile-brick[data-brick-id="share"] {
        left: 0;
        top: calc(258 * var(--rpx));
    }

    .hero-mobile-brick[data-brick-id="ecosystem"] {
        left: calc(308 * var(--rpx));
        top: calc(258 * var(--rpx));
    }

    .hero-mobile-brick[data-brick-id="about"] {
        left: 0;
        top: calc(516 * var(--rpx));
    }

    .hero-mobile-brick[data-brick-id="software"] {
        left: calc(468 * var(--rpx));
        top: calc(516 * var(--rpx));
    }
}