/* ===== GPU 产品子页 hero — 仅手机端覆盖 ===== */

@media (max-width: 828px) {
    .youchao-hero .hero-bg,
    .ouye-hero .hero-bg {
        background: #fff;
    }

    .youchao-hero .hero-bg-gradient,
    .ouye-hero .hero-bg-gradient {
        display: none;
    }

    .youchao-hero .hero-banner,
    .ouye-hero .hero-banner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 1;
        order: unset;
        width: 100%;
        height: calc(840 * var(--rpx));
        margin: 0;
        background-size: cover;
        background-position: 61.5% center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .youchao-hero .hero-banner::after,
    .ouye-hero .hero-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 88%,
            rgba(255, 255, 255, 1) 100%
        );
        pointer-events: none;
    }

    .youchao-hero .hero-shell,
    .ouye-hero .hero-shell {
        position: relative;
        z-index: 2;
        max-width: var(--wrapper-width);
        margin-left: auto;
        margin-right: auto;
        padding-top: calc(780 * var(--rpx));
    }

    .youchao-hero .hero-stage,
    .ouye-hero .hero-stage {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: calc(24 * var(--rpx)) 0 calc(48 * var(--rpx));
    }

    .youchao-hero .hero-left-col,
    .ouye-hero .hero-left-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .youchao-hero .hero-title,
    .ouye-hero .hero-title {
        order: 1;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        max-width: none;
        gap: calc(10 * var(--rpx));
        text-align: center;
    }

    .youchao-hero .hero-title-name,
    .ouye-hero .hero-title-name {
        font-size: calc(36 * var(--fpx));
        flex-shrink: 1;
    }

    .youchao-hero .hero-title-meta,
    .ouye-hero .hero-title-meta {
        align-items: center;
    }

    .youchao-hero .hero-title-tag,
    .ouye-hero .hero-title-tag {
        align-self: center;
    }

    .youchao-hero .hero-desc,
    .ouye-hero .hero-desc {
        order: 3;
        align-items: center;
        width: 100%;
        margin-top: calc(32 * var(--rpx));
        gap: calc(28 * var(--rpx));
        padding-top: 0;
    }

    .youchao-hero .hero-desc-group,
    .ouye-hero .hero-desc-group {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .youchao-hero .hero-desc-diagram,
    .ouye-hero .hero-desc-diagram {
        width: 72%;
        max-width: 72%;
        margin-left: 0;
        align-self: center;
    }

    .youchao-hero .hero-desc-diagram--imr,
    .youchao-hero .hero-desc-diagram--simd,
    .youchao-hero .hero-desc-diagram--1,
    .youchao-hero .hero-desc-diagram--2,
    .ouye-hero .hero-desc-diagram--simt,
    .ouye-hero .hero-desc-diagram--transformer,
    .ouye-hero .hero-desc-diagram--1,
    .ouye-hero .hero-desc-diagram--2 {
        width: 72%;
        max-width: 72%;
        margin-left: 0;
    }

    .youchao-hero .hero-info-card,
    .ouye-hero .hero-info-card {
        order: 4;
        width: 100%;
        min-height: 0;
        margin-top: calc(24 * var(--rpx));
    }

    .youchao-hero .hero-card-row,
    .ouye-hero .hero-card-row {
        flex-wrap: wrap;
        gap: calc(16 * var(--rpx));
        justify-content: center;
    }

    .youchao-hero .hero-card-features,
    .ouye-hero .hero-card-features {
        flex-wrap: wrap;
        justify-content: center;
    }

    .youchao-hero .hero-card-feature-label,
    .ouye-hero .hero-card-feature-label {
        white-space: normal;
    }

    .youchao-hero .hero-info-card .hero-card-feature img,
    .ouye-hero .hero-info-card .hero-card-feature img {
        display: block;
        width: calc(64 * var(--rpx));
        height: calc(60 * var(--rpx));
        object-fit: contain;
    }

    .youchao-hero .hero-card-laptop,
    .ouye-hero .hero-card-laptop {
        width: calc(120 * var(--rpx));
        height: calc(68 * var(--rpx));
        object-fit: contain;
    }

    .ouye-hero .hero-card-desktop {
        width: calc(108 * var(--rpx));
        height: calc(88 * var(--rpx));
        object-fit: contain;
    }

    .youchao-hero .hero-guides,
    .ouye-hero .hero-guides {
        display: none;
    }

    .youchao-hero .hero-callouts,
    .ouye-hero .hero-callouts {
        position: static;
        order: 5;
        width: 100%;
        margin-top: calc(24 * var(--rpx));
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: calc(16 * var(--rpx));
    }

    .youchao-hero .hero-callout,
    .ouye-hero .hero-callout {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(16 * var(--rpx));
        box-sizing: border-box;
        padding: calc(20 * var(--rpx)) calc(18 * var(--rpx));
        border: 1px solid rgba(132, 139, 159, 0.14);
        border-radius: calc(8 * var(--rpx));
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 253, 0.92) 100%);
        box-shadow: 0 calc(4 * var(--rpx)) calc(14 * var(--rpx)) rgba(0, 12, 36, 0.05);
        text-align: left;
    }

    .youchao-hero .hero-callout-icon,
    .ouye-hero .hero-callout-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(26 * var(--fpx) + 22 * var(--fpx) + 6 * var(--rpx));
        height: calc(26 * var(--fpx) + 22 * var(--fpx) + 6 * var(--rpx));
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 12, 36, 0.06);
    }

    .youchao-hero .hero-callout-icon img,
    .ouye-hero .hero-callout-icon img {
        width: calc(38 * var(--rpx));
        height: calc(39 * var(--rpx));
        object-fit: contain;
    }

    .youchao-hero .hero-callout-body,
    .ouye-hero .hero-callout-body {
        padding-top: 0;
        min-width: 0;
    }

    .youchao-hero .hero-callout-title,
    .ouye-hero .hero-callout-title {
        font-size: calc(18 * var(--fpx));
        line-height: calc(26 / 18);
    }

    .youchao-hero .hero-callout-desc,
    .ouye-hero .hero-callout-desc {
        margin-top: calc(6 * var(--rpx));
        font-size: calc(14 * var(--fpx));
        line-height: calc(22 / 14);
    }
}