html,
body,
#container,
#body-container,
#productService-page {
    min-height: 100%;
    background: #03031E;
}

#productService-page {
    color: #fff;
    overflow-x: clip;
    background: radial-gradient(circle at right, #6859E2 0, #03031E 10rem, #03031E 100%);
}

.product-service-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(2rem, 3.2vh, 2.8rem);
    min-height: calc(100vh - var(--header-height));
    padding: 1.8rem clamp(4.25rem, 6.2vw, 6.8rem) 3.5rem;
    background: radial-gradient(circle at right, #6859E2 0, #03031E 10rem, #03031E 100%);
    isolation: isolate;
}

.product-service-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("https://shunwei-file.oss-cn-hangzhou.aliyuncs.com/img/gw-image/gw-AI.png") center center / min(28rem, 34vw) auto no-repeat;
    opacity: 0.48;
    filter: brightness(0.48) saturate(0.78);
}

.product-service-hero > * {
    position: relative;
    z-index: 1;
}

#productService-page .product-service-title {
    margin: -1.2rem 0 0;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
    font-size: clamp(2.2rem, 2.55vw, 2.9rem);
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0;
}

.product-service-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.8rem, 5.2vw, 5.8rem);
    min-height: 0;
}

.product-service-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.65rem;
    align-self: center;
}

.product-service-copy h2 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: clamp(2.75rem, 3.55vw, 3.55rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    white-space: nowrap;
}

.product-service-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.35rem, 1.65vw, 1.7rem);
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

.product-service-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.35rem;
    width: 8.5rem;
    margin-top: 0.55rem;
}

.product-service-tab {
    min-height: 3.55rem;
    padding: 0 1.25rem;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.24s ease,
        color 0.24s ease,
        opacity 0.24s ease;
}

.product-service-tab:hover,
.product-service-tab:focus-visible {
    color: #fff;
    background: rgba(18, 70, 255, 0.34);
    outline: none;
}

.product-service-tab:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(62, 185, 251, 0.62);
}

.product-service-tab.active {
    background: #1246ff;
}

.product-service-stage {
    position: relative;
    width: 100%;
    max-width: 78rem;
    height: clamp(25rem, 41vw, 33rem);
    justify-self: center;
    perspective: 74rem;
    perspective-origin: 50% 42%;
}

.product-service-device {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    width: clamp(12rem, 18vw, 18rem);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    opacity: 0.55;
    transform: translate3d(-50%, 0.8rem, -8rem) scale(0.78);
    transform-origin: center bottom;
    transition:
        opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

/* PC 端画面需要更大的展示面，同时保留 rem 下限以响应浏览器缩放。 */
.product-service-device-pc {
    width: clamp(22rem, 25vw, 26rem);
}

.product-service-device.is-left {
    z-index: 1;
    opacity: 0.66;
    filter: saturate(0.82) brightness(0.82);
    transform: translate3d(calc(-50% - clamp(12rem, 23vw, 24rem)), 1rem, -7rem) rotateY(16deg) scale(0.78);
}

.product-service-device.is-right {
    z-index: 1;
    opacity: 0.66;
    filter: saturate(0.82) brightness(0.82);
    transform: translate3d(calc(-50% + clamp(12rem, 23vw, 24rem)), 1rem, -7rem) rotateY(-16deg) scale(0.78);
}

.product-service-device.is-active {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, 0, 0) rotateY(0) scale(1);
}

.product-service-placeholder {
    display: block;
    width: 100%;
    max-width: min(10.5rem, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0.35rem;
    box-shadow: none;
    transition:
        max-width 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.product-service-device.is-active .product-service-placeholder {
    max-width: min(14rem, 100%);
    box-shadow: none;
}

.product-service-device-pc.is-active .product-service-placeholder {
    max-width: min(31rem, 100%);
    aspect-ratio: 1.55;
}

.product-service-device-pc .product-service-placeholder {
    aspect-ratio: 1.55;
}

.product-service-device-mini .product-service-placeholder,
.product-service-device-app .product-service-placeholder {
    max-width: min(8.6rem, 100%);
    aspect-ratio: 0.58;
}

.product-service-device-mini.is-active .product-service-placeholder,
.product-service-device-app.is-active .product-service-placeholder {
    max-width: min(14rem, 100%);
}

.product-service-device:not(.is-active) .product-service-placeholder {
    transform: scale(0.92);
}

.product-service-device h2 {
    margin: 1.1rem 0 0.45rem;
    color: #fff;
    font-size: clamp(1.15rem, 1.35vw, 1.45rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.product-service-device p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
    font-weight: 400;
    line-height: 1.45;
}

.product-service-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.95rem;
    line-height: 1;
    transform: translateX(-50%);
}

.product-service-scroll-hint svg {
    width: 1.1rem;
    height: 1.1rem;
}