/* ============================================================
   About 页面级样式
   注意：原第一至第八屏（first ~ eighth）已整体移除，样式随之清空。
   ============================================================ */

/* ============================================================
   第二屏：Who We Are
   设计稿基准：1920×738，padding 86 160 0（1rem = 100px）
   ============================================================ */
.second {
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 19.2rem;
    height: 7.38rem;
    margin: 0 auto;
    padding: 0.86rem 1.6rem 0; /* 86px 160px 0 */
    box-sizing: border-box;
    overflow: hidden;    display: flex;
    flex-direction: column;
}

/* 背景图层独立成层，便于做缓推入场 */
.second::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../assets/images/about/second-img.webp") no-repeat center / cover;
}

/* ---------- About Us 徽章按钮 ---------- */
.second__pill {
    width: max-content;
    position: relative;
    display: inline-flex;
    padding: 0.12rem 0.24rem; /* 12px 24px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    margin-bottom: 0.23rem; /* 下边距 23px */
    border-radius: 0.3rem; /* 30px */
    border: 1px solid #D9D9D9;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer;
    overflow: hidden;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

/* 高光斜条掠过 */
.second__pill::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.second__pill:hover {
    background-size: 100% 100%;
    border-color: #044EAD;
    color: #FFF;
    transform: translateY(-0.03rem) scale(1.04);
    box-shadow: 0 0.08rem 0.2rem rgba(4, 78, 173, 0.4);
}

.second__pill:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.second__title {
    position: relative;
    z-index: 0;
    width: max-content;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.26rem; /* 下边距 26px */
}

/* 标题背后的横线 */
.second__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.04rem;
    z-index: -1;
    width: 100%;
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    transform-origin: left center;
}

/* ---------- 描述段落 ---------- */
.second__desc {
    max-width: 10.4rem;
    margin: 0 0 0.46rem; /* 下边距 46px */
}

.second__desc p {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 0 0 0.26rem; /* 段落间隔 26px */
}

.second__desc p:last-child {
    margin-bottom: 0;
}

/* ---------- 优势小卡 ---------- */
.second__grid {
    display: grid;
    grid-template-columns: repeat(3, 2.84rem); /* 284px */
    column-gap: 0.21rem; /* 左右间距 21px */
    row-gap: 0.14rem; /* 上下间距 14px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.second__card {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    width: 2.84rem; /* 284px */
    height: 0.77rem; /* 77px */
    padding-left: 0.13rem; /* padding-left 13px */
    box-sizing: border-box;
    border-radius: 0.1rem; /* 10px */
    background: #F4F7FD;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

/* 蓝色底：左下 → 右上 擦入 */
.second__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #044EAD;
    transform: translate(-101%, 101%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__card:hover {
    transform: translateY(-0.05rem);
    box-shadow: 0 0.1rem 0.22rem rgba(4, 78, 173, 0.3);
}

.second__card:hover::before {
    transform: translate(0, 0);
}

.second__card-icon {
    flex: 0 0 0.5rem;
    width: 0.5rem; /* 50px */
    height: 0.5rem; /* 50px */
    margin-right: 0.2rem; /* 右边距 20px */
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.second__card-icon img {
    display: block;
    width: 0.26rem; /* 26px */
    height: 0.26rem; /* 26px */
}

.second__card-text {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-right: 0.1rem;
    transition: color 0.4s ease;
}

/* 悬浮态：蓝底白字，图标微动 */
.second__card:hover .second__card-text {
    color: #FFF;
}

.second__card:hover .second__card-icon {
    transform: rotate(-6deg) scale(1.08);
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ----------
   背景 Ken Burns 缓推 → 徽章弹出 → 标题横线展开 → 段落错峰上浮 → 卡片弹入 */
html.js .second:not(.is-in-view) .second__pill,
html.js .second:not(.is-in-view) .second__title,
html.js .second:not(.is-in-view) .second__desc p,
html.js .second:not(.is-in-view) .second__card {
    opacity: 0;
}

html.js .second:not(.is-in-view) .second__title::before {
    transform: scaleX(0);
}

.second.is-in-view::before {
    animation: second-bg-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__pill {
    animation: second-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards;
}

.second.is-in-view .second__title {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

.second.is-in-view .second__title::before {
    animation: second-bar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

.second.is-in-view .second__desc p:nth-child(1) {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

.second.is-in-view .second__desc p:nth-child(2) {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.33s backwards;
}

.second.is-in-view .second__desc p:nth-child(3) {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.41s backwards;
}

.second.is-in-view .second__card {
    animation: second-card-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) { animation-delay: 0.35s; }
.second.is-in-view .second__card:nth-child(2) { animation-delay: 0.42s; }
.second.is-in-view .second__card:nth-child(3) { animation-delay: 0.49s; }
.second.is-in-view .second__card:nth-child(4) { animation-delay: 0.56s; }
.second.is-in-view .second__card:nth-child(5) { animation-delay: 0.63s; }
.second.is-in-view .second__card:nth-child(6) { animation-delay: 0.7s; }

@keyframes second-bg-in {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}

@keyframes second-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0.2rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes second-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes second-bar-in {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes second-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.3rem) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .second {
    height: auto;
    padding: 0.5rem 0.24rem 0.6rem;
}

html[data-mode="h5"] .second__title {
    font-size: 0.36rem;
    margin-bottom: 0.2rem;
}

html[data-mode="h5"] .second__desc {
    margin-bottom: 0.3rem;
}

html[data-mode="h5"] .second__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.12rem;
}

html[data-mode="h5"] .second__card {
    width: 100%;
    padding-left: 0.08rem;
}


/* ============================================================
   第三屏：Factory Gallery（渐隐渐显轮播 + 数字统计）
   设计稿基准：1920，padding 100 160（1rem = 100px）
   ============================================================ */
.third {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 1.6rem; /* 100px 160px */
    box-sizing: border-box;
}

.third__title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.26rem; /* 下边距 26px */
}

.third__desc {
    width: 9.44rem; /* 944px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 0 0 0.39rem; /* 下边距 39px */
}

/* ---------- 渐隐渐显轮播 ---------- */
.third__track {
    position: relative;
    height: 5.59rem; /* 559px */
}

.third__slide {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 0.11rem; /* 图片间隔 11px */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.third__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.third__slide-main {
    flex: 0 0 7.95rem; /* 795px */
    height: 5.59rem; /* 559px */
    overflow: hidden;
}

.third__slide-subs {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.11rem; /* 间隔 11px */
}

.third__slide-sub {
    border-radius: 0.1rem; /* 10px */
    overflow: hidden;
}

.third__slide-main img,
.third__slide-sub img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

/* 图片悬浮动效：放大 + 提亮 */
.third__slide-main:hover img,
.third__slide-sub:hover img {
    transform: scale(1.06);
    filter: brightness(1.06);
}

/* ---------- 指示点（逻辑与首页 Banner 一致） ---------- */
.third__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    margin-top: 0.24rem;
}

.third__dot {
    position: relative;
    width: 0.2rem; /* 20px */
    height: 0.04rem; /* 4px */
    border-radius: 0.04rem;
    background: #D9D9D9;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.35s ease, background-color 0.3s ease;
}

.third__dot:hover {
    background: #B9D2F2;
}

.third__dot.is-active {
    width: 0.6rem; /* 60px */
    background: #D9D9D9;
}

/* 激活点内蓝色进度条：随切换间隔填满 */
.third__dot.is-active.is-animating::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #044EAD;
    transform-origin: left center;
    transform: scaleX(0);
    animation: third-dot-fill var(--third-dot-duration, 5000ms) linear forwards;
}

@keyframes third-dot-fill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* ---------- 数字统计条 ---------- */
.third__stats {
    display: flex;
    margin: 0.6rem 0 0;
    padding: 0.52rem 0; /* 上下 52px */
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    list-style: none;
}

.third__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 中间间隔线 */
.third__stat + .third__stat {
    border-left: 1px solid #D9D9D9;
}

.third__stat-num {
    display: flex;
    align-items: baseline;
    color: #044EAD;
}

.third__stat-value {
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.56rem; /* 56px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    font-variant-numeric: tabular-nums;
}

.third__stat-unit {
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.3rem; /* 30px */
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 42px */
    margin-left: 0.02rem;
}

.third__stat-label {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0.06rem 0 0;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .third:not(.is-in-view) .third__title,
html.js .third:not(.is-in-view) .third__desc,
html.js .third:not(.is-in-view) .third__slide-main,
html.js .third:not(.is-in-view) .third__slide-sub,
html.js .third:not(.is-in-view) .third__dots,
html.js .third:not(.is-in-view) .third__stats {
    opacity: 0;
}

.third.is-in-view .third__title {
    animation: third-t-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.third.is-in-view .third__desc {
    animation: third-t-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

/* 主图：自左向右擦亮展开 */
.third.is-in-view .third__slide-main {
    transform-origin: left center;
    animation: third-main-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

/* 子图：依次弹入 */
.third.is-in-view .third__slide.is-active .third__slide-sub {
    animation: third-sub-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.third.is-in-view .third__slide.is-active .third__slide-sub:nth-child(1) { animation-delay: 0.5s; }
.third.is-in-view .third__slide.is-active .third__slide-sub:nth-child(2) { animation-delay: 0.58s; }
.third.is-in-view .third__slide.is-active .third__slide-sub:nth-child(3) { animation-delay: 0.66s; }
.third.is-in-view .third__slide.is-active .third__slide-sub:nth-child(4) { animation-delay: 0.74s; }

.third.is-in-view .third__dots {
    animation: third-t-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}

.third.is-in-view .third__stats {
    animation: third-t-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

@keyframes third-t-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes third-main-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: scale(1.06);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

@keyframes third-sub-in {
    0% {
        opacity: 0;
        transform: translateY(0.3rem) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .third {
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .third__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .third__desc {
    width: 100%;
}

html[data-mode="h5"] .third__track {
    height: auto;
}

html[data-mode="h5"] .third__slide {
    flex-direction: column;
}

html[data-mode="h5"] .third__slide-main {
    flex: 0 0 auto;
    width: 100%;
    height: 4rem;
}

html[data-mode="h5"] .third__stats {
    flex-direction: column;
    gap: 0.3rem;
}

html[data-mode="h5"] .third__stat {
    padding-left: 0;
}

html[data-mode="h5"] .third__stat + .third__stat {
    border-left: none;
    border-top: 1px solid #D9D9D9;
    padding-top: 0.3rem;
}


/* ============================================================
   第六屏：Our Core Technology（核心技术卡片）
   设计稿基准：1920×771，padding 0 160（1rem = 100px）
   ============================================================ */
.sixth {
    width: 100%;
    max-width: 19.2rem;
    height: 7.71rem; /* 771px */
    margin: 0 auto;
    padding: 0 1.6rem; /* 0 160px */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内容上下居中 */
    background: #F5F8FC;
}

.sixth__title {
    margin-bottom: 0.26rem; /* 26px */
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sixth__desc {
    width: 9.44rem; /* 944px */
    margin-bottom: 0.6rem; /* 60px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
}

.sixth__cards {
    display: flex;
    gap: 0.2rem; /* 5×304 + 4×20 = 1600（1920 - 2×160） */
    list-style: none;
    margin: 0;
    padding: 0;
}

.sixth__card {
    position: relative;
    width: 3.04rem; /* 304px */
    height: 4.22rem; /* 422px */
    padding: 0.4rem 0.3rem 0; /* 40px 30px 0 */
    box-sizing: border-box;
    border-radius: 0.2rem; /* 20px */
    border: 1px solid #D9D9D9;
    background: #FFF;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

/* 悬浮：顶部斜切高光自左扫过 */
.sixth__card::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    z-index: 1;
    width: 40%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(4, 78, 173, 0.08) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-260%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

/* 悬浮：底部蓝色渐变条从中心向两侧展开 */
.sixth__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.06rem;
    background: linear-gradient(90deg, #1078D8 0%, #044EAD 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sixth__card:hover {
    transform: translateY(-0.1rem);
    border-color: rgba(4, 78, 173, 0.4);
    box-shadow: 0 0.2rem 0.4rem rgba(4, 78, 173, 0.14);
}

.sixth__card:hover::before {
    transform: translateX(360%) skewX(-18deg);
    opacity: 1;
}

.sixth__card:hover::after {
    transform: scaleX(1);
}

/* 数字徽章：悬浮时渐变加深 + 轻微翻转 */
.sixth__card-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.6rem; /* 60px */
    height: 0.6rem; /* 60px */
    margin-bottom: 0.55rem; /* 55px */
    border-radius: 0.1rem; /* 10px */
    background: #044EAD;
    color: #FFF;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.36rem; /* 36px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-variant-numeric: tabular-nums;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.45s ease,
        box-shadow 0.45s ease;
}

.sixth__card:hover .sixth__card-num {
    background: linear-gradient(135deg, #1078D8 0%, #044EAD 100%);
    transform: rotateY(360deg) scale(1.08);
    box-shadow: 0 0.08rem 0.18rem rgba(4, 78, 173, 0.35);
}

.sixth__card-title {
    margin-bottom: 0.12rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem; /* 24px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: color 0.35s ease;
}

.sixth__card:hover .sixth__card-title {
    color: #044EAD;
}

.sixth__card-desc {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

/* ---- 入场动画（.is-in-view 由 common.js sectionReveal 触发） ---- */
html.js .sixth:not(.is-in-view) .sixth__title,
html.js .sixth:not(.is-in-view) .sixth__desc,
html.js .sixth:not(.is-in-view) .sixth__card {
    opacity: 0;
}

.sixth.is-in-view .sixth__title {
    animation: sixth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.sixth.is-in-view .sixth__desc {
    animation: sixth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

.sixth.is-in-view .sixth__card {
    animation: sixth-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__card:nth-child(1) { animation-delay: 0.4s; }
.sixth.is-in-view .sixth__card:nth-child(2) { animation-delay: 0.52s; }
.sixth.is-in-view .sixth__card:nth-child(3) { animation-delay: 0.64s; }
.sixth.is-in-view .sixth__card:nth-child(4) { animation-delay: 0.76s; }
.sixth.is-in-view .sixth__card:nth-child(5) { animation-delay: 0.88s; }

@keyframes sixth-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes sixth-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.6rem) scale(0.92);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---- H5 适配 ---- */
html[data-mode="h5"] .sixth {
    height: auto;
    padding: 0.8rem 0.3rem;
}

html[data-mode="h5"] .sixth__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .sixth__desc {
    width: 100%;
}

html[data-mode="h5"] .sixth__cards {
    flex-wrap: wrap;
    gap: 0.24rem;
}

html[data-mode="h5"] .sixth__card {
    width: calc(50% - 0.12rem);
    height: auto;
    min-height: 3.6rem;
    padding-bottom: 0.4rem;
}


/* ============================================================
   第九屏：合作伙伴横向无限滚动（跑马灯）
   设计稿基准：1920×260（1rem = 100px）
   ============================================================ */
.ninth {
    width: 100%;
    max-width: 19.2rem;
    height: 2.6rem; /* 260px */
    margin: 0 auto;
    display: flex;
    align-items: center; /* 内容上下居中 */
    overflow: hidden;
}

.ninth__track {
    display: flex;
    width: max-content;
    animation: ninth-marquee 30s linear infinite;
}

/* 悬浮时暂停滚动 */
.ninth:hover .ninth__track {
    animation-play-state: paused;
}

/* 每组末尾补一份间距，保证两组拼接处间距与组内一致，-50% 平移无缝循环 */
.ninth__group {
    display: flex;
    gap: 0.3rem; /* 间距 30px */
    padding-right: 0.3rem;
}

.ninth__card {
    flex: 0 0 auto;
    width: 2.14rem; /* 214px */
    height: 1rem; /* 100px */
    background: #FFF;
    box-shadow: 0 0.02rem 0.08rem rgba(2, 52, 125, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

.ninth__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 悬浮动效：上浮放大 + 蓝色光晕 + Logo 微缩放 */
.ninth__card:hover {
    transform: translateY(-0.1rem) scale(1.06);
    box-shadow: 0 0.12rem 0.26rem rgba(4, 78, 173, 0.35);
    z-index: 1;
}

.ninth__card:hover img {
    transform: scale(1.05);
}

@keyframes ninth-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .ninth:not(.is-in-view) .ninth__card {
    opacity: 0;
}

.ninth.is-in-view .ninth__card {
    animation: ninth-card-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ninth.is-in-view .ninth__card:nth-child(1) { animation-delay: 0.1s; }
.ninth.is-in-view .ninth__card:nth-child(2) { animation-delay: 0.16s; }
.ninth.is-in-view .ninth__card:nth-child(3) { animation-delay: 0.22s; }
.ninth.is-in-view .ninth__card:nth-child(4) { animation-delay: 0.28s; }
.ninth.is-in-view .ninth__card:nth-child(5) { animation-delay: 0.34s; }
.ninth.is-in-view .ninth__card:nth-child(6) { animation-delay: 0.4s; }
.ninth.is-in-view .ninth__card:nth-child(7) { animation-delay: 0.46s; }
.ninth.is-in-view .ninth__card:nth-child(8) { animation-delay: 0.52s; }
.ninth.is-in-view .ninth__card:nth-child(9) { animation-delay: 0.58s; }
.ninth.is-in-view .ninth__card:nth-child(10) { animation-delay: 0.64s; }

@keyframes ninth-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.4rem) scale(0.85);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .ninth {
    height: 2rem;
}

html[data-mode="h5"] .ninth__group {
    gap: 0.16rem;
    padding-right: 0.16rem;
}

html[data-mode="h5"] .ninth__card {
    width: 1.6rem;
    height: 0.75rem;
}


/* ============================================================
   第七屏：Our Quality Commitment（左列表 + 右大图）
   设计稿基准：1920，padding 100 160（1rem = 100px）
   ============================================================ */
.seventh {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 1.6rem; /* 100px 160px */
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.seventh__left {
    flex: 0 0 6.87rem; /* 描述宽 687px */
    min-width: 0;
}

.seventh__title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.26rem; /* 下边距 26px */
}

.seventh__desc {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 0 0 0.6rem; /* 下边距 60px */
}

/* ---------- 承诺列表 ---------- */
.seventh__list {
    display: flex;
    flex-direction: column;
    gap: 0.28rem; /* 间隔 28px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.seventh__item {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh__item:hover {
    transform: translateX(0.08rem);
}

/* 图标：灰 / 蓝两套叠加，悬浮或选中时交叉淡换 */
.seventh__item-icon {
    position: relative;
    flex: 0 0 0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.1rem; /* 右边距 10px */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seventh__item-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seventh__icon-active {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: rotate(-30deg) scale(0.6);
}

.seventh__item:hover .seventh__icon-default,
.seventh__item.is-active .seventh__icon-default {
    opacity: 0;
    transform: rotate(30deg) scale(0.6);
}

.seventh__item:hover .seventh__icon-active,
.seventh__item.is-active .seventh__icon-active {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.seventh__item:hover .seventh__item-icon,
.seventh__item.is-active .seventh__item-icon {
    transform: scale(1.08);
}

.seventh__item-body {
    flex: 1;
    min-width: 0;
}

.seventh__item-title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 0.1rem; /* 下边距 10px */
    transition: color 0.3s ease;
}

.seventh__item-desc {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0;
}

/* 悬浮 / 选中：标题变蓝 */
.seventh__item:hover .seventh__item-title,
.seventh__item.is-active .seventh__item-title {
    color: #044EAD;
}

/* ---------- 右侧大图 ---------- */
.seventh__media {
    position: relative;
    flex: 0 0 6.72rem; /* 672px */
    width: 6.72rem;
    height: 7.09rem; /* 709px */
    border-radius: 0.2rem; /* 20px */
    overflow: hidden;
}

/* 4 张图层叠放置，is-active 控制显示与切换动效 */
.seventh__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04) translateX(0.2rem);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.seventh__media img.is-active {
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* 高光斜条扫过 */
.seventh__media::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.seventh__media:hover img.is-active {
    transform: scale(1.06);
}

.seventh__media:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .seventh:not(.is-in-view) .seventh__title,
html.js .seventh:not(.is-in-view) .seventh__desc,
html.js .seventh:not(.is-in-view) .seventh__item,
html.js .seventh:not(.is-in-view) .seventh__media {
    opacity: 0;
}

.seventh.is-in-view .seventh__title {
    animation: q-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.seventh.is-in-view .seventh__desc {
    animation: q-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.seventh.is-in-view .seventh__item {
    animation: q-item-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.seventh.is-in-view .seventh__item:nth-child(1) { animation-delay: 0.3s; }
.seventh.is-in-view .seventh__item:nth-child(2) { animation-delay: 0.38s; }
.seventh.is-in-view .seventh__item:nth-child(3) { animation-delay: 0.46s; }
.seventh.is-in-view .seventh__item:nth-child(4) { animation-delay: 0.54s; }

/* 大图：自右向左擦亮展开 */
.seventh.is-in-view .seventh__media {
    animation: q-media-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

@keyframes q-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes q-item-in {
    0% {
        opacity: 0;
        transform: translateX(-0.4rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes q-media-in {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .seventh {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .seventh__left {
    flex: 0 0 auto;
    width: 100%;
}

html[data-mode="h5"] .seventh__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .seventh__desc {
    width: 100%;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .seventh__media {
    flex: 0 0 auto;
    width: 100%;
    height: 4.6rem;
}


/* ============================================================
   第五屏：Our Team（文本区 + 照片无限滚动跑马灯）
   设计稿基准：1920，padding 100 0（1rem = 100px）
   ============================================================ */
.fifth {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 0; /* 100px 0 */
    box-sizing: border-box;
    overflow: hidden;
}

/* ---------- 上方文本区：整体水平居中，标题左 / 描述右 ---------- */
.fifth__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem; /* 0 160px */
    margin-bottom: 0.7rem; /* 下边距 70px */
}

.fifth__title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.fifth__desc {
    width: 7.99rem; /* 799px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 0.08rem 0 0;
}

/* ---------- 照片跑马灯（与第九屏同一套无限滚动方案） ---------- */
.fifth__track {
    display: flex;
    width: max-content;
    animation: fifth-marquee 25s linear infinite;
}

/* 悬浮时暂停滚动 */
.fifth:hover .fifth__track {
    animation-play-state: paused;
}

/* 每组末尾补一份间距，保证两组拼接处间距一致，-50% 平移无缝循环 */
.fifth__group {
    display: flex;
    gap: 0.1rem; /* 间距 10px */
    padding-right: 0.1rem;
}

.fifth__card {
    flex: 0 0 auto;
    width: 4.54rem; /* 454px */
    height: 4.54rem; /* 454px */
    border-radius: 0.1rem; /* 10px */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.fifth__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

/* 悬浮动效：整卡上浮 + 蓝色光晕 + 图片放大提亮 */
.fifth__card:hover {
    transform: translateY(-0.08rem) scale(1.02);
    box-shadow: 0 0.16rem 0.4rem rgba(4, 78, 173, 0.3);
    z-index: 1;
}

.fifth__card:hover img {
    transform: scale(1.08);
    filter: brightness(1.06);
}

@keyframes fifth-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .fifth:not(.is-in-view) .fifth__title,
html.js .fifth:not(.is-in-view) .fifth__desc,
html.js .fifth:not(.is-in-view) .fifth__card {
    opacity: 0;
}

.fifth.is-in-view .fifth__title {
    animation: fifth-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.fifth.is-in-view .fifth__desc {
    animation: fifth-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.fifth.is-in-view .fifth__card {
    animation: fifth-card-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.fifth.is-in-view .fifth__group:first-of-type .fifth__card:nth-child(1) { animation-delay: 0.3s; }
.fifth.is-in-view .fifth__group:first-of-type .fifth__card:nth-child(2) { animation-delay: 0.4s; }
.fifth.is-in-view .fifth__group:first-of-type .fifth__card:nth-child(3) { animation-delay: 0.5s; }

@keyframes fifth-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fifth-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.88);
        filter: blur(0.05rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fifth {
    padding: 0.6rem 0;
}

html[data-mode="h5"] .fifth__head {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.24rem;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .fifth__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .fifth__desc {
    width: 100%;
}

html[data-mode="h5"] .fifth__group {
    gap: 0.08rem;
    padding-right: 0.08rem;
}

html[data-mode="h5"] .fifth__card {
    width: 2.6rem;
    height: 2.6rem;
}


/* ============================================================
   第四屏：Our Development Journey（年份轮播 + 轨道线 + 时间线）
   设计稿基准：1920×920（1rem = 100px）
   ============================================================ */
.fourth {
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 19.2rem;
    height: 9.2rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景图层独立成层 */
.fourth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../assets/images/about/fourth-img1.webp") no-repeat center / cover;
}

.fourth__title {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.61rem; /* 下边距 61px */
}

/* ---------- 中间部分：左年份 + 圆图 + 右年份 ---------- */
.fourth__middle {
    display: flex;
    align-items: center;
    margin-bottom: 0.55rem; /* 下边距 55px */
}

.fourth__side--left {
    margin-right: 0.85rem; /* 右边距 85px */
    width: 3.45rem;
}

.fourth__side--right {
    margin-left: 0.85rem; /* 左边距 85px */
    width: 3.45rem;
}

.fourth__num {
    font-family: Montserrat, sans-serif;
    font-size: 1.6rem; /* 160px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 240px */
    white-space: nowrap; /* 长年份（如 Today）不换行，由 JS 缩字号适配栏宽 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fourth__num--left {
    color: #044EAD;
}

.fourth__num--right {
    color: #D9D9D9;
}

.fourth__desc {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    width: 3.45rem; /* 345px */
    margin: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 切换退场态：左年份上移淡出、右年份下移淡出 */
.fourth__middle.is-fading .fourth__num--left {
    opacity: 0;
    transform: translateY(-0.12rem);
}

.fourth__middle.is-fading .fourth__desc {
    opacity: 0;
}

.fourth__middle.is-fading .fourth__num--right {
    opacity: 0;
    transform: translateY(0.12rem);
}

/* ---------- 中间圆图 + 轨道 ---------- */
.fourth__stage {
    position: relative;
    width: 5.42rem; /* 542px */
    height: 5.42rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 外层虚线圆 */
.fourth__dashed {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed #D9D9D9;
}

/* 自动旋转的蓝色渐变线条 + 末端圆点（overflow visible 防止圆点被 viewBox 裁剪） */
.fourth__orbit {
    position: absolute;
    inset: 0;
    overflow: visible;
    animation: fourth-spin 5s linear infinite;
    will-change: transform;
}

@keyframes fourth-spin {
    to {
        transform: rotate(360deg);
    }
}

.fourth__stage-img {
    position: relative;
    z-index: 1;
    width: 5rem; /* 500px */
    height: 5rem; /* 500px */
    border-radius: 50%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fourth__stage.is-fading .fourth__stage-img {
    opacity: 0;
    transform: scale(1.06);
}

/* ---------- 下方时间线（轮播控制器，不可点击） ---------- */
.fourth__timeline {
    position: relative;
    width: 12rem; /* 1200px */
    height: 0.02rem; /* 2px */
    background: linear-gradient(90deg,
            rgba(245, 245, 245, 0.20) 0%,
            #F5F5F5 50%,
            rgba(245, 245, 245, 0.20) 100%);
}

/* 蓝色进度填充：从左填充到当前激活年份位置 */
.fourth__timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 0.02rem;
    background: #044EAD;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fourth__mark {
    position: absolute;
    bottom: -0.02rem; /* 刻度线下端贴住横线 */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fourth__mark-year {
    color: #D9D9D9;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    white-space: nowrap;
    margin-bottom: 0.06rem;
    transition: color 0.3s ease;
}

.fourth__mark-tick {
    width: 1px;
    height: 0.1rem; /* 10px */
    background: #9C9C9C;
    transition: background-color 0.3s ease, height 0.3s ease;
}

/* 等待期间：当前刻度线与年份变蓝，刻度略伸长 */
.fourth__mark.is-active .fourth__mark-tick {
    background: #044EAD;
    height: 0.14rem;
}

.fourth__mark.is-active .fourth__mark-year {
    color: #044EAD;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .fourth:not(.is-in-view) .fourth__title,
html.js .fourth:not(.is-in-view) .fourth__middle,
html.js .fourth:not(.is-in-view) .fourth__timeline {
    opacity: 0;
}

.fourth.is-in-view .fourth__title {
    animation: fourth-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.fourth.is-in-view .fourth__middle {
    animation: fourth-middle-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

.fourth.is-in-view .fourth__timeline {
    animation: fourth-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

@keyframes fourth-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fourth-middle-in {
    0% {
        opacity: 0;
        transform: scale(0.92);
        filter: blur(0.05rem);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fourth {
    height: auto;
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .fourth__title {
    font-size: 0.36rem;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .fourth__middle {
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .fourth__side--left,
html[data-mode="h5"] .fourth__side--right {
    margin: 0;
    width: auto;
    text-align: center;
}

html[data-mode="h5"] .fourth__num {
    font-size: 0.8rem;
}

html[data-mode="h5"] .fourth__desc {
    width: 100%;
}

html[data-mode="h5"] .fourth__stage {
    width: 4.5rem;
    height: 4.5rem;
}

html[data-mode="h5"] .fourth__stage-img {
    width: 4.2rem;
    height: 4.2rem;
}

html[data-mode="h5"] .fourth__timeline {
    width: 100%;
}


.first {
    height: 7.6rem;
    background-image: url('../assets/images/about/first-img.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-left: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.first h2 {
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.2rem;
    width: 8rem;
}

.first p {
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    width: 6.5rem;
    line-height: 150%;
    /* 24px */
    text-transform: capitalize;
}
/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .first {
    height: 4.6rem;
    padding: 0.8rem 0.24rem 0;
    background-size: cover;
}

html[data-mode="h5"] .first h2 {
    font-size: 0.36rem;
    margin-bottom: 0.16rem;
    width: 5rem;
}

html[data-mode="h5"] .first p {
    font-size: 0.14rem;
}

/* H5 下忽略桌面端的强制换行，避免窄屏断句生硬 */
html[data-mode="h5"] .first p br {
    display: none;
}

/* ============================================================
   第八屏：Certifications（认证背景图 + 徽章）
   ============================================================ */
.eighth {
    width: 19.2rem;
    height: 6.38rem;
    padding: 0 1.6rem;
    background-image: url('../assets/images/about/eighth-img1.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.eighth__title {
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.2rem;
}

.eighth__desc {
    color: #F5F5F5;
    font-family: Montserrat;
    width: 6.26rem;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
    text-transform: capitalize;
    margin: 0 0 0.4rem;
}

.eighth__badges {
    width: 3.06rem;
    height: 0.5rem;
    display: block;
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .eighth {
    width: 100%;
    height: auto;
    padding: 0.6rem 0.24rem;
    background-size: cover;
}

html[data-mode="h5"] .eighth__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .eighth__desc {
    width: 100%;
    font-size: 0.14rem;
}

html[data-mode="h5"] .eighth__badges {
    width: 100%;
    max-width: 3.06rem;
    height: auto;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ----------
   标题逐字弹亮 → 描述左右擦入上浮 → 徽章依次翻转弹出 → 一道光线扫过屏幕 */
html.js .eighth:not(.is-in-view) .eighth__title,
html.js .eighth:not(.is-in-view) .eighth__desc,
html.js .eighth:not(.is-in-view) .eighth__badges {
    opacity: 0;
}

/* 标题：逐字上浮弹亮 */
.eighth.is-in-view .eighth__title span {
    display: inline-block;
    animation: eighth-char-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(0.15s + var(--char-index, 0) * 0.045s);
}

.eighth.is-in-view .eighth__title {
    animation: none;
}

/* 描述：模糊聚焦 + 上浮 */
.eighth.is-in-view .eighth__desc {
    animation: eighth-desc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

/* 徽章：依次 3D 翻转弹出 */
.eighth.is-in-view .eighth__badges {
    animation: eighth-badge-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s backwards;
    transform-style: preserve-3d;
}

/* 光线扫过 */
.eighth.is-in-view::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 25%;
    height: 100%;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(173, 216, 255, 0.12) 45%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(173, 216, 255, 0.12) 55%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: eighth-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.9s backwards;
}

@keyframes eighth-char-in {
    0% {
        opacity: 0;
        transform: translateY(0.5rem) rotateX(-90deg) scale(0.6);
        filter: blur(0.06rem);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes eighth-desc-in {
    0% {
        opacity: 0;
        transform: translateY(0.35rem);
        filter: blur(0.08rem);
        letter-spacing: 0.06rem;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: normal;
    }
}

@keyframes eighth-badge-in {
    0% {
        opacity: 0;
        transform: perspective(6rem) rotateY(-100deg) translateX(-0.4rem);
    }

    100% {
        opacity: 1;
        transform: perspective(6rem) rotateY(0) translateX(0);
    }
}

@keyframes eighth-sweep {
    from {
        left: -30%;
    }

    to {
        left: 115%;
    }
}