section.hero{
    padding-top: var(--header-height);
    height: calc(1660 * var(--rpx));
    position: relative;
}

.hero-content{
    position: relative;
    width: 100%;
}

.hero-title{
    position: absolute;
    width: 100%;
    top: calc(200 * var(--rpx-50));
    font-weight: 600;
    font-size: calc(78 * var(--fpx-50));
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.hero-back{
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;

    width: 100%;
    height: 100%;
    top: calc(200 * var(--rpx-50));

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-back-inner{
    width: calc(1920 * var(--rpx));
    height: calc(1660 * var(--rpx));
}

.hero-back-canvas{
    display: block;
    width: 100%;
    height: 100%;
}

/* 与 banner viewBox 对齐：--ix/--iy 为相对 1920×1660 设计稿的像素坐标（已减 viewBox minX 6.5） */
.hero-side-icons-slot{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
}

.hero-side-icons{
    position: relative;
    width: calc(1920 * var(--rpx));
    height: calc(1660 * var(--rpx));
    pointer-events: none;
}

.hero-side-icon{
    position: absolute;
    left: calc(var(--ix) * 100% / 1920);
    top: calc(var(--iy) * 100% / 1660);
    width: calc(66.666664 * 100% / 1920);
    height: calc(66.666664 * 100% / 1660);
    pointer-events: auto;
    touch-action: manipulation;
    color: inherit;
    outline: none;
    box-sizing: border-box;
}

.hero-side-icon:focus-visible .hero-side-icon__face{
    box-shadow: 0 0 0 2px rgba(156, 127, 255, 0.85);
}

.hero-side-icon__persp{
    width: 100%;
    height: 100%;
    perspective: 380px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

.hero-side-icon__tilt{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.hero-side-icon__face{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22.5%;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.35s ease-out;
}

.hero-side-icon__face.is-tracking{
    transition: none;
}

.hero-side-icon__bg{
    position: absolute;
    border-radius: inherit;
    background: linear-gradient(to bottom, #00003F98 0%, #01010300 100%) #4877FF;
    box-shadow: inset 0 0 0 1px #fff4;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.hero-side-icon__gl{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: block;
    pointer-events: none;
    border-radius: inherit;
    z-index: 240;
}