/* ===== ouye Arise1 series hero ===== */
body.page-inner {
    background: #FAFCFD;
}

.ouye-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--text-primary);
}

.ouye-hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #FAFCFD;
}

.ouye-hero .hero-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #EDF1FB 0%, rgba(237, 241, 251, 0) 100%);
    pointer-events: none;
}

.ouye-hero .hero-shell {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.ouye-hero .hero-stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--hero-max-width);
    min-height: calc(1080 * var(--rpx-50));
    margin: 0 auto;
    padding-top: calc(206 * var(--rpx-50));
    padding-bottom: calc(143 * var(--rpx-50));
}

/* ===== left column: title + desc + info card ===== */
.ouye-hero .hero-left-col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: calc(480 * var(--rpx-50));
    min-height: calc((1080 - 206 - 143) * var(--rpx-50));
    margin-left: calc(160 * var(--rpx-50));
}

/* ===== left: title ===== */
.ouye-hero .hero-title {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--rpx-50));
    max-width: calc(520 * var(--rpx-50));
}

.ouye-hero .hero-title-name {
    margin: 0;
    flex-shrink: 0;
    font-size: calc(58 * var(--fpx-50));
    font-weight: 600;
    line-height: calc(68 / 58);
}

.ouye-hero .hero-title-meta {
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--rpx-50));
    min-width: 0;
}

.ouye-hero .hero-title-sub {
    margin: 0;
    font-size: calc(24 * var(--fpx));
    font-weight: 600;
    line-height: calc(36 / 24);
}

.ouye-hero .hero-title-tag {
    margin: 0;
    align-self: flex-start;
    padding: calc(2 * var(--rpx-50)) calc(12 * var(--rpx-50));
    border: 1px solid #848B9F;
    border-radius: calc(5 * var(--rpx-50));
    font-size: calc(16 * var(--fpx));
    font-weight: 400;
    line-height: calc(24 / 16);
    color: var(--brand-red);
}

/* ===== left: desc / diagrams ===== */
.ouye-hero .hero-desc {
    display: flex;
    flex-direction: column;
    gap: calc(65 * var(--rpx-50));
    width: 100%;
    margin-top: calc(60 * var(--rpx-50));
    padding-top: calc(8 * var(--rpx-50));
}

.ouye-hero .hero-desc-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.ouye-hero .hero-desc-title {
    margin: 0;
    font-size: calc(20 * var(--fpx));
    font-weight: 600;
    line-height: calc(30 / 20);
}

.ouye-hero .hero-desc-divider {
    width: 100%;
    height: 1px;
    margin-top: calc(7 * var(--rpx-50));
    background: rgba(0, 0, 0, 0.1);
}

.ouye-hero .hero-desc-diagram {
    display: block;
    align-self: center;
    height: auto;
    margin-top: calc(21 * var(--rpx-50));
}

.ouye-hero .hero-desc-diagram--simt {
    width: calc(300 * var(--rpx-50));
}

.ouye-hero .hero-desc-diagram--transformer {
    width: calc(309 * var(--rpx-50));
}

/* ===== left: info card ===== */
.ouye-hero .hero-info-card {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(180 * var(--rpx-50));
    margin-top: auto;
    padding:
        calc(28 * var(--rpx-50))
        calc(30 * var(--rpx-50))
        calc(32 * var(--rpx-50))
        calc(30 * var(--rpx-50));
    border-radius: calc(5 * var(--rpx-50));
    background: #FFFFFF;
    box-shadow: 0 calc(5 * var(--rpx-50)) calc(15 * var(--rpx-50)) rgba(0, 12, 36, 0.06);
}

.ouye-hero .hero-card-title {
    margin: 0;
    font-size: calc(18 * var(--fpx));
    font-weight: 600;
    line-height: calc(34 / 18);
}

.ouye-hero .hero-card-row {
    display: flex;
    align-items: flex-end;
    gap: calc(36 * var(--rpx-50));
    margin-top: calc(16 * var(--rpx-50));
}

.ouye-hero .hero-card-desktop {
    flex-shrink: 0;
    display: block;
    width: calc(76 * var(--rpx-50));
    height: calc(62 * var(--rpx-50));
    object-fit: contain;
}

.ouye-hero .hero-card-features {
    display: flex;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
}

.ouye-hero .hero-card-feature {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rpx-50));
    min-width: 0;
    text-align: center;
}

.ouye-hero .hero-card-feature img {
    display: block;
    width: calc(26 * var(--rpx-50));
    height: calc(24 * var(--rpx-50));
    object-fit: contain;
}

.ouye-hero .hero-card-feature-label {
    font-size: calc(14 * var(--fpx));
    font-weight: 400;
    line-height: calc(20 / 14);
    color: #666666;
    white-space: nowrap;
}

.ouye-hero .hero-card-sep {
    flex-shrink: 0;
    align-self: flex-end;
    width: 1px;
    height: calc(16 * var(--rpx-50));
    margin: 0 calc(10 * var(--rpx-50)) calc(2 * var(--rpx-50));
    background: rgba(0, 0, 0, 0.1);
}

/* ===== right: full-stage banner ===== */
.ouye-hero .hero-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
}

.ouye-hero .hero-guides {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.ouye-hero .hero-guide {
    position: absolute;
    left: calc(1119 * var(--rpx-50));
    top: calc(var(--guide-y) * var(--rpx-50));
    width: 0;
    height: 0;
}

.ouye-hero .hero-guide-line {
    position: absolute;
    left: calc(15 * var(--rpx-50));
    top: 0;
    width: calc(var(--guide-w) * var(--rpx-50));
    height: calc(2 * var(--rpx-50));
    transform: translateY(-50%);
    border-radius: calc(1 * var(--rpx-50));
    background: linear-gradient(
        90deg,
        rgba(132, 139, 159, 0.95) 0%,
        rgba(132, 139, 159, 0.35) 72%,
        rgba(132, 139, 159, 0.08) 100%
    );
    box-shadow: 0 0 calc(6 * var(--rpx-50)) rgba(255, 255, 255, 0.45);
}

.ouye-hero .hero-guide-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: calc(6 * var(--rpx-50));
    height: calc(6 * var(--rpx-50));
    border-radius: 50%;
    background: #848B9F;
    transform: translate(50%, -50%);
}

.ouye-hero .hero-guide-dot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: calc(30 * var(--rpx-50));
    height: calc(30 * var(--rpx-50));
}

.ouye-hero .hero-guide-dot__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
    box-shadow: 0 0 calc(4 * var(--rpx-50)) rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(calc(3 * var(--rpx-50)));
    -webkit-backdrop-filter: blur(calc(3 * var(--rpx-50)));
}

.ouye-hero .hero-guide-dot__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(6.667 * var(--rpx-50));
    height: calc(6.667 * var(--rpx-50));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%),
        linear-gradient(118deg, rgba(36, 101, 223, 0) 0%, #2465DF 100%),
        #AE3EEA;
}

/* ===== right: callouts ===== */
.ouye-hero .hero-callouts {
    position: absolute;
    left: calc(1379 * var(--rpx-50));
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    width: calc(397 * var(--rpx-50));
}

.ouye-hero .hero-callout {
    position: absolute;
    left: 0;
    top: calc(var(--callout-y) * var(--rpx-50));
    display: flex;
    align-items: flex-start;
    gap: calc(20 * var(--rpx-50));
    width: 100%;
}

.ouye-hero .hero-callout-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(80 * var(--rpx-50));
    height: calc(80 * var(--rpx-50));
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    background: transparent;
}

.ouye-hero .hero-callout-icon img {
    display: block;
    width: calc(40 * var(--rpx-50));
    height: calc(41 * var(--rpx-50));
    object-fit: contain;
}

.ouye-hero .hero-callout-body {
    min-width: 0;
    padding-top: calc(10 * var(--rpx-50));
}

.ouye-hero .hero-callout-title {
    margin: 0;
    font-size: calc(24 * var(--fpx-50));
    font-weight: 600;
    line-height: calc(30 / 24);
}

.ouye-hero .hero-callout-title-line {
    display: block;
}

.ouye-hero .hero-callout-desc {
    margin: calc(8 * var(--rpx-50)) 0 0;
    font-size: calc(16 * var(--fpx));
    font-weight: 400;
    line-height: calc(20 / 16);
    color: #666666;
}

/* ===== @828 mobile ===== */
@media (max-width: 828px) {
    .ouye-hero .hero-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: var(--mobile-hero-pad-top) 0 calc(48 * var(--rpx));
    }

    .ouye-hero .hero-left-col {
        display: contents;
    }

    .ouye-hero .hero-title {
        order: 1;
        flex-wrap: wrap;
        max-width: none;
        gap: calc(10 * var(--rpx));
    }

    .ouye-hero .hero-title-name {
        font-size: calc(36 * var(--fpx));
    }

    .ouye-hero .hero-banner {
        position: relative;
        order: 2;
        inset: auto;
        flex-shrink: 0;
        width: 100%;
        height: calc(320 * var(--rpx));
        margin-top: calc(24 * var(--rpx));
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

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

    .ouye-hero .hero-desc-diagram {
        width: 100%;
        max-width: calc(335 * var(--rpx));
        margin-left: 0;
    }

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

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

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

    .ouye-hero .hero-callouts {
        position: static;
        order: 5;
        width: 100%;
        margin-top: calc(24 * var(--rpx));
        display: flex;
        flex-direction: column;
        gap: calc(20 * var(--rpx));
    }

    .ouye-hero .hero-callout {
        position: static;
        top: auto;
    }

    .ouye-hero .hero-callout-icon {
        width: calc(56 * var(--rpx));
        height: calc(56 * var(--rpx));
    }
}