/* ==========================================================================
   HoloX 洞悉 · 官网设计系统 — 版块层
   ========================================================================== */

/* ==========================================================================
   开场舞台 .stg：立体窗口随滚动“站直”（进入即展示完整内容）
   斜置角度取中等强度：既有立体感，又不牺牲默认态的正文可读性；
   归正后 transform:none，文字回到原生栅格化（最清晰）。
   高度只给 170vh：以前是 660vh，四个产品屏靠页面滚动逐屏切，
   结果客户想往下看其他内容得先滚过六屏多 —— tab 切换已改成窗口内滚轮，
   这里只留 70vh 行程给 3D 归正，归正完 sticky 立即释放。
   ========================================================================== */
.stg {
    --p: 0;
    --q: 0;
    position: relative;
    height: 170vh;
    background: #04060e;
}

.stg-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    /* 深空靓蓝：接近黑的冷蓝墨，靠亮度层次而非色彩堆叠出科技感 */
    background:
        radial-gradient(122% 86% at 50% -6%,
            #17264e 0%,
            #111b3a 26%,
            #0b1228 52%,
            #070a18 78%,
            #03050c 100%);
}

/* 立体窗口后方的一道宽冷光，让白色产品界面在深底上“发光” */
.stg-sticky::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 320px;
    width: 1420px;
    height: 400px;
    margin-left: -710px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(128, 176, 255, .26), rgba(48, 92, 196, .12) 52%, transparent 76%);
    filter: blur(52px);
    opacity: calc(1 - var(--q) * .55);
}

/* 动态背景层：数据网络流场（节点随机漂移 + 近距离自动连线），滚动站直后逐渐隐去 */
.stg-field {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: calc(1 - var(--q) * .82);
}

/* 呼吸色层：整块背景的颜色由这一层负责，多团大半径色斑换色 + 移动，
   叠在深底之上，看到的就是“整个背景在换颜色”，而不是某个元素在闪。
   --bl 是各处自定义的模糊半径（呼吸关键帧里复用它，避免把模糊值写死） */
.stg-grid {
    --bl: 2px;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(66% 46% at 50% -4%, rgba(102, 156, 255, .46), transparent 70%),
        radial-gradient(58% 46% at 12% 20%, rgba(52, 110, 232, .4), transparent 72%),
        radial-gradient(56% 44% at 88% 12%, rgba(70, 124, 242, .38), transparent 72%),
        radial-gradient(78% 52% at 50% 104%, rgba(30, 84, 206, .4), transparent 72%),
        radial-gradient(120% 100% at 50% 44%, transparent 46%, rgba(2, 4, 10, .6) 100%);
    background-size: 150% 150%, 160% 160%, 160% 160%, 150% 150%, 100% 100%;
    background-position: 50% 0%, 0% 22%, 100% 10%, 50% 100%, 50% 50%;
    filter: blur(2px);
    will-change: filter, opacity;
    animation: bgBreath 10s ease-in-out infinite;
}

/* 氛围光：顶部青碧聚光 + 中部海蓝托底光，弱对比、大半径 */
.stg-glow {
    position: absolute;
    inset: -10% -6% auto -6%;
    height: 84%;
    pointer-events: none;
    background:
        radial-gradient(52% 42% at 50% 0%, rgba(94, 144, 244, .26), transparent 74%),
        radial-gradient(60% 28% at 50% 58%, rgba(42, 78, 178, .2), transparent 76%),
        radial-gradient(42% 34% at 18% 30%, rgba(64, 132, 226, .16), transparent 78%),
        radial-gradient(42% 34% at 84% 22%, rgba(70, 118, 224, .14), transparent 78%);
    filter: blur(78px);
    opacity: 1;
    will-change: transform, opacity, filter;
    animation: stgAura 28s ease-in-out infinite;
}

/* 氛围光跟着一起漂移，周期与呼吸层错开，避免同频 */
@keyframes stgAura {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.02);
        filter: blur(76px) hue-rotate(-16deg);
        opacity: .72;
    }

    50% {
        transform: translate3d(3%, 3%, 0) scale(1.1);
        filter: blur(92px) hue-rotate(18deg);
        opacity: 1;
    }

    100% {
        transform: translate3d(-3%, -2%, 0) scale(1.02);
        filter: blur(76px) hue-rotate(-16deg);
        opacity: .72;
    }
}

/* 全站深色区共用的背景呼吸：色相在 冷蓝 ↔ 靛蓝 之间往复（不跑到霓虹紫），
   同时明暗、饱和与位置一起起伏，整片背景的颜色变化能一眼看出来 */
@keyframes bgBreath {
    0% {
        filter: blur(var(--bl, 2px)) hue-rotate(-20deg) saturate(.94) brightness(.9);
        opacity: .52;
        background-position: 50% 0%, 0% 22%, 100% 10%, 50% 100%, 50% 50%;
    }

    26% {
        filter: blur(var(--bl, 2px)) hue-rotate(2deg) saturate(1.3) brightness(1.12);
        opacity: 1;
        background-position: 44% 8%, 16% 10%, 84% 22%, 56% 92%, 50% 50%;
    }

    58% {
        filter: blur(var(--bl, 2px)) hue-rotate(14deg) saturate(1.46) brightness(1.02);
        opacity: .78;
        background-position: 58% 2%, 4% 32%, 96% 2%, 42% 100%, 50% 50%;
    }

    80% {
        filter: blur(var(--bl, 2px)) hue-rotate(-10deg) saturate(1.2) brightness(1.08);
        opacity: .95;
        background-position: 48% 10%, 10% 16%, 88% 14%, 52% 96%, 50% 50%;
    }

    100% {
        filter: blur(var(--bl, 2px)) hue-rotate(-20deg) saturate(.94) brightness(.9);
        opacity: .52;
        background-position: 50% 0%, 0% 22%, 100% 10%, 50% 100%, 50% 50%;
    }
}

/* --------------------------------------------------------------------------
   内页深色 Hero 共用的呼吸—— 与首页 bgBreath 同一种语言，但刻意降一档。

   【关键】呼吸能不能被看见，靠的是 background-position 而不是 transform：
   整层 translate 是刚性平移，三团 blur 60px 的色斑彼此相对位置不变，
   在没有参照物的深底上几乎看不出来（第一版就栽在这上面）。
   必须让色斑彼此错动，才读得出「云在流、整片背景在换色」——
   因此各雾层必须同时写 background-size（>100%），否则 position 无效。

   与首页的分界：周期 15~18s（首页 10s）、色相摆幅 8~11deg（首页 20deg），
   且内页一律不给粒子流场。内页 hero 只有三四百像素高、几秒就被划过，
   再快再大就从「高级」变成「廉价闪烁」，还会抢走 h1 的注意力。

   另一个差异：模糊半径走 --bl 且全程不变。首页 stgAura 在帧里改 blur（76→92px），
   一屏可以接受；13 个内页都让浏览器每帧重算高斯模糊，低端机必掉帧。
   帧点取 0 / 34 / 64 / 100 而不是对称的 0 / 50 / 100，呼吸才不像节拍器
   -------------------------------------------------------------------------- */
@keyframes heroBreath {
    0% {
        transform: translate3d(calc(var(--hb-x) * -1), calc(var(--hb-y) * -1), 0) scale(var(--hb-s0));
        filter: blur(var(--bl, 58px)) hue-rotate(calc(var(--hb-h) * -1)) saturate(.86) brightness(.8);
        opacity: var(--hb-o0);
        background-position: 50% 0%, 0% 20%, 100% 10%;
    }

    34% {
        transform: translate3d(calc(var(--hb-x) * .4), var(--hb-y), 0) scale(var(--hb-s1));
        filter: blur(var(--bl, 58px)) hue-rotate(calc(var(--hb-h) * .35)) saturate(1.38) brightness(1.26);
        opacity: var(--hb-o1);
        background-position: 38% 14%, 22% 4%, 78% 28%;
    }

    64% {
        transform: translate3d(var(--hb-x), calc(var(--hb-y) * .2), 0) scale(calc(var(--hb-s1) - .02));
        filter: blur(var(--bl, 58px)) hue-rotate(var(--hb-h)) saturate(1.2) brightness(1.04);
        opacity: calc(var(--hb-o1) - .24);
        background-position: 62% 0%, 0% 38%, 100% 0%;
    }

    100% {
        transform: translate3d(calc(var(--hb-x) * -1), calc(var(--hb-y) * -1), 0) scale(var(--hb-s0));
        filter: blur(var(--bl, 58px)) hue-rotate(calc(var(--hb-h) * -1)) saturate(.86) brightness(.8);
        opacity: var(--hb-o0);
        background-position: 50% 0%, 0% 20%, 100% 10%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .stg-grid,
    .stg-glow,
    .stats-band::after,
    .site-footer::after,
    .whx-pan.is-active .whx-face::after,
    /* 内页 hero 的呼吸雾：以前漏在覆盖之外，减少动效偏好下竟还在跑 */
    .page-hero::before,
    .ec-hero-mesh,
    .cpv-breath,
    .gs-breath {
        animation: none;
    }

    .whx .whx-pan,
    .whx .whx-face {
        transition: none;
    }
}

/* 手机竖屏：hero 被压扁后呼吸几乎看不出来，却要付全额的大面积模糊重绘成本，
   这两层新增的雾直接停成静态（颜色与层次全部保留） */
@media (max-width: 680px) {

    .cpv-breath,
    .gs-breath {
        animation: none;
    }
}

/* 文案层：绝对定位不参与流，随进度淡出上移（只用 opacity + 整数位移） */
.stg-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 74px;
    text-align: center;
    opacity: calc(1 - var(--q) * 1.35);
    transform: translateY(calc(var(--q) * -64px));
}

.stg.is-mid .stg-copy {
    display: none;
}

.stg-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 16px 0 12px;
    border: 1px solid var(--tech-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    color: var(--on-dark-2);
}

.stg-badge b {
    color: var(--on-dark);
    font-weight: 600;
}

.stg-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ea6ff;
    flex: none;
}

.stg h1 {
    margin: 18px 0 0;
    font-size: 48px;
    line-height: 1.26;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 0 46px rgba(122, 168, 255, .26);
}

/* 关键词用科技渐变色（青碧 → 浅青蓝），不再是纯白 */
.stg h1 .em {
    background: linear-gradient(96deg, #7fb2ff 0%, #c2d8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stg-sub {
    margin: 14px auto 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.78;
    color: var(--on-dark-2);
}

.btn-neon {
    background: #fff;
    color: #06070c;
    font-weight: 600;
}

.btn-neon:hover {
    background: rgba(255, 255, 255, .88);
    color: #06070c;
}

.btn-onglass {
    color: #fff;
    border: 1px solid var(--tech-line-2);
    background: rgba(255, 255, 255, .05);
}

.btn-onglass:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

/* 立体窗口：多轴斜置 + 进深线索（边框厉光 / 屏面掩光 / 地面反射 / 体积光） */
.stg-device {
    position: absolute;
    z-index: 3;
    left: 32px;
    right: 32px;
    max-width: 1240px;
    margin: 0 auto;
    top: calc(414px - var(--q) * 224px);
    transform-origin: 50% 0%;
    transform:
        perspective(1360px)
        rotateX(calc((1 - var(--q)) * 20deg))
        rotateY(calc((1 - var(--q)) * 15deg))
        rotateZ(calc((1 - var(--q)) * -4deg))
        scale(calc(0.90 + var(--q) * 0.10));
}

/* 体积光：屏幕向周围环境洒出的冷光，让“屏幕在发光”一眼可见 */
.stg-device::before {
    content: "";
    position: absolute;
    inset: -12% -8% -18% -8%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52% 42% at 50% 34%, rgba(120, 146, 214, .26), transparent 72%),
        radial-gradient(38% 30% at 16% 26%, rgba(104, 116, 190, .18), transparent 74%),
        radial-gradient(36% 30% at 86% 22%, rgba(112, 168, 190, .14), transparent 74%);
    filter: blur(46px);
    opacity: calc(.34 + (1 - var(--q)) * .66);
}

/* 地面反射：斜置时投在“地面”的一片冷光，强化悬浮与进深 */
.stg-device::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: -58px;
    height: 110px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 0%, rgba(128, 152, 210, .38), transparent 72%);
    filter: blur(24px);
    opacity: calc(1 - var(--q));
}

/* 关键：变平后彻底去除变换，文字回到原生栅格化 */
.stg-device.is-flat {
    transform: none;
}

/* 设备外壳：渐变金属质感 + 左右不对称深影（斜置时右侧更重，立体更直观） */
.dev {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(168deg, #1b2247 0%, #141a38 24%, #0c0f1d 58%, #05060e 100%);
    padding: 9px;
    box-shadow:
        calc((1 - var(--q)) * 44px) 74px 150px rgba(2, 4, 10, .74),
        0 16px 44px rgba(2, 4, 10, .54),
        inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* 边框厉光：沿窗口一圈的渐变描边，让轮廓在深色背景里“立起来” */
.dev-rim {
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: 19px;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(178, 196, 240, .82), rgba(150, 178, 214, .40) 30%, rgba(255, 255, 255, .06) 54%, rgba(150, 172, 220, .30) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: calc(.46 + (1 - var(--q)) * .54);
}

/* 顶栏：产品切换标签 + 实时演示指示 */
.dev-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 11px;
}

.dev-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(150, 190, 255, .26);
    flex: none;
}

.dev-tabs {
    display: flex;
    gap: 3px;
    margin-left: 12px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.dev-tab {
    height: 26px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--on-dark-3);
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.dev-tab:hover {
    color: #fff;
}

.dev-tab.on {
    color: #fff;
    background: linear-gradient(96deg, rgba(84, 112, 200, .42), rgba(96, 138, 168, .22));
    box-shadow: inset 0 0 0 1px rgba(150, 176, 232, .32);
}

.dev-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 4px;
    font-size: 11px;
    letter-spacing: .10em;
    color: rgba(255, 255, 255, .48);
    white-space: nowrap;
}

.dev-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ea6ff;
    box-shadow: 0 0 0 3px rgba(126, 166, 255, .16);
    animation: demo-pulse 1.6s ease-in-out infinite;
}

.dev-screen {
    position: relative;
    height: min(calc(524px + var(--q, 1) * 104px), calc(100vh - 256px));
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

/* 屏面掩光：斜置时的玻璃反射，随归正淡出（归正后不影响字体清晰度） */
.dev-sheen {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(114deg, rgba(255, 255, 255, .46) 0%, rgba(214, 230, 255, .16) 24%, transparent 44%);
    opacity: calc((1 - var(--q)) * .78);
}

/* ---------- 屏内 6 屏（公司简介 + 功能介绍四宫格 + 4 个产品）：在窗口区域内逐屏切换 ---------- */
.pane {
    position: absolute;
    inset: 0;
    padding: 24px 30px 26px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .36s ease, transform .36s ease, visibility .36s;
    -webkit-font-smoothing: antialiased;
}

.pane.on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.intro-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
}

.intro-brand {
    display: flex;
    align-items: center;
}

/* 官方 logo 图（白底区用深色文字版） */
.intro-logo {
    display: block;
    height: 36px;
    width: auto;
}

.intro-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--ink-4);
    white-space: nowrap;
}

.intro-meta span+span {
    padding-left: 14px;
    border-left: 1px solid var(--line-2);
}

.intro-cols {
    flex: 1;
    min-height: 0;
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 34px;
}

.intro-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.intro-main p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.88;
    color: var(--ink-2);
}

.intro-main p b {
    color: var(--ink);
    font-weight: 600;
}

.intro-main .intro-lead {
    font-size: 16px;
    line-height: 1.82;
    color: var(--ink);
}

/* 主张句：淡蓝底 + 渐变竖条，作为左栅的视觉落点 */
.intro-main .intro-claim {
    margin-top: auto;
    padding: 11px 15px;
    border-radius: 0 8px 8px 0;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #1257e0, #17b7a5) 1 100%;
    background: linear-gradient(94deg, rgba(18, 87, 224, .06), rgba(23, 183, 165, .04) 70%, transparent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
    color: var(--brand);
}

/* 左栅底部：关键数字行式指标条 */
.intro-facts {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.intro-facts>div+div {
    padding-left: 12px;
    border-left: 1px solid var(--line-2);
}

.intro-facts b {
    display: block;
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(140deg, #0b1729 20%, #1257e0 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-facts b i {
    font-style: normal;
    font-size: 15px;
}

.intro-facts span {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--ink-4);
}

/* 右栅：平台矩阵行式列表，均分高度填满（不做卡片堆叠） */
.intro-side {
    display: flex;
    flex-direction: column;
    padding-left: 32px;
    border-left: 1px solid var(--line-2);
}

.intro-side-hd {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--ink-4);
}

.intro-side-hd::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
    flex: none;
    background: linear-gradient(90deg, #1257e0, #17b7a5);
}

.plat {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 10px 0 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 8px;
    position: relative;
    transition: background-color .18s ease;
}

.plat:first-of-type {
    margin-top: 10px;
}

.plat:last-of-type {
    border-bottom: 0;
}

.plat:hover {
    background: linear-gradient(94deg, rgba(18, 87, 224, .05), transparent 78%);
}

/* 右侧箭头：明确可点击 */
.plat::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    margin-left: auto;
    border-right: 1.6px solid var(--ink-4);
    border-bottom: 1.6px solid var(--ink-4);
    transform: rotate(-45deg);
    transition: transform .18s ease, border-color .18s ease;
}

.plat:hover::after {
    border-color: var(--brand);
    transform: rotate(-45deg) translate(2px, 2px);
}

.plat i {
    width: 34px;
    height: 34px;
    flex: none;
    margin-left: 2px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.plat i.c1 {
    background: linear-gradient(150deg, #3b3fd8, #5b6bf0);
}

.plat i.c2 {
    background: linear-gradient(150deg, #1257e0, #2f8fe6);
}

.plat i.c3 {
    background: linear-gradient(150deg, #0f9b8e, #17b7a5);
}

.plat i.c4 {
    background: linear-gradient(150deg, #5b3bc4, #8a5be0);
}

.plat b {
    display: block;
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.plat em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-3);
}

.plat:hover b {
    color: var(--brand);
}

/* 滚动提示 */
.stg-hint {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 20px;
    margin-left: -120px;
    width: 240px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em;
    white-space: nowrap;
    color: var(--on-dark-3);
    /* 以前随行程淡出（因为当时是页面滚动在翻屏）；
       现在是窗口内滚轮切 tab，提示应该在窗口站直后一直在 */
    opacity: var(--q);
}

.stg-hint span {
    display: block;
    width: 1px;
    height: 26px;
    margin: 8px auto 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
}

/* ==========================================================================
   屏内产品屏：左侧产品视频介绍 + 右侧产品介绍
   ========================================================================== */
.pane-prod {
    padding: 22px 26px 24px;
}

.pane-cols {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: 22px;
}

.pane-video {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 视频播放器：深色外框 + 产品录屏画面（可直接换成 <video>） */
.vp {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 0;
    border-radius: 12px;
    background: linear-gradient(168deg, #131d40 0%, #060a16 100%);
    box-shadow: 0 18px 42px rgba(6, 12, 30, .3), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.vp-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    background: #f4f7fc;
    overflow: hidden;
}

.vp-shot {
    position: absolute;
    inset: 0;
    padding: 38px 14px 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

/* 真实视频：JS 探测到可播后注入，铺满整个左侧深色区域 */
.vp-video {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #05060c;
}

/* 接入真实视频后：去掉内边距与假控制条，视频铺满整个左侧区域 */
.vp.has-video {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.vp.has-video .vp-stage {
    border-radius: 12px;
}

.vp.has-video .vp-shot,
.vp.has-video .vp-scan {
    display: none;
}

.vp.has-video .vp-stage {
    background: #05060c;
}

.vp.has-video .vp-tag {
    z-index: 4;
}

/* 播放控件：浮层在视频底部，悬停才出现，不占画面 */
.vp.has-video .vp-ctl {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    padding: 0 16px;
    background: linear-gradient(180deg, transparent, rgba(4, 6, 14, .74));
    opacity: 0;
    transition: opacity .2s ease;
}

.vp.has-video:hover .vp-ctl,
.vp.has-video:focus-within .vp-ctl {
    opacity: 1;
}

/* 静态模拟的进度与时长不适用于真实视频，隐去避免误导 */
.vp.has-video .vp-line,
.vp.has-video .vp-time {
    display: none;
}

.vp-shot>* {
    flex: none;
}

.vp-shot .mock-list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 扫描带：营造“正在播放 / 正在处理”的动感 */
.vp-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 87, 224, .10), rgba(18, 87, 224, 0) 78%);
    animation: demo-scan 7s linear infinite;
}

.vp-tag {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(8, 12, 26, .76);
    font-size: 11px;
    letter-spacing: .06em;
    color: #fff;
}

.vp-tag i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff5d5d;
    animation: demo-pulse 1.5s ease-in-out infinite;
}

/* 控制条 */
.vp-ctl {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 0 4px;
}

.vp-play {
    position: relative;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .90);
}

.vp-play::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    border-left: 7px solid #0b0d18;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* 真实视频播放中：三角换成暂停两条竖线 */
.vp.is-playing .vp-play::before {
    left: 7px;
    top: 6px;
    width: 8px;
    height: 10px;
    border: 0;
    background: linear-gradient(90deg, #0b0d18 0 34%, transparent 34% 66%, #0b0d18 66% 100%);
}

.vp-line {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

.vp-line i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #3f6fe8, #9fc0ff);
    animation: demo-play 7s linear infinite;
}

.vp-time {
    font-family: var(--font-en);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .56);
    white-space: nowrap;
}

.vp-hd {
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .72);
}

.vp-cap {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-4);
}

/* 右侧：产品介绍（渐变竖线分隔 + 编号清单 + 实体按钮，不做卡片堆叠） */
.pane-side {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: 30px;
}

/* 左边界：渐变竖线（替代灰色 1px 描边，与整站 AI 渐变语言一致） */
.pane-side::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1257e0 0%, rgba(23, 183, 165, .55) 44%, rgba(15, 23, 42, .06) 100%);
}

.pane-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 28px;
    padding: 0 13px 0 3px;
    border-radius: 999px;
    border: 1px solid rgba(18, 87, 224, .16);
    background: linear-gradient(94deg, rgba(18, 87, 224, .09), rgba(23, 183, 165, .07));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--brand);
}

.pane-tag i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #1257e0, #17b7a5 150%);
    font-family: var(--font-en);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.pane-h {
    margin: 14px 0 0;
    font-family: var(--font-en);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    background: linear-gradient(140deg, #0b1729 18%, #1257e0 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pane-sub {
    margin: 7px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink-2);
}

.pane-desc {
    margin: 11px 0 0;
    padding-bottom: 3px;
    font-size: 13px;
    line-height: 1.82;
    color: var(--ink-3);
}

/* 能力清单：编号 + 均分栏高，撑满右栏不留空 */
.pane-list {
    flex: 1;
    min-height: 0;
    margin: 14px 0 16px;
    padding-top: 3px;
    display: flex;
    flex-direction: column;
    counter-reset: pl;
    border-top: 1px solid var(--line);
}

.pane-list li {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 2px 5px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    counter-increment: pl;
}

.pane-list li:last-child {
    border-bottom: 0;
}

.pane-list li::before {
    content: counter(pl, decimal-leading-zero);
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, rgba(18, 87, 224, .11), rgba(23, 183, 165, .11));
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand);
}

/* 入口按钮：实体渐变按钮，作为右栏视觉落点 */
.pane-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 9px;
    background: linear-gradient(122deg, #1257e0 0%, #2f6ff0 58%, #17b7a5 190%);
    box-shadow: 0 10px 24px rgba(18, 87, 224, .22);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pane-more svg {
    width: 15px;
    height: 15px;
}

.pane-more:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(18, 87, 224, .3);
}

/* ---------- 屏内「实时演示」：让每个平台看起来在跑 ---------- */
@keyframes demo-play {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes demo-scan {
    from {
        transform: translateY(-130px);
    }

    to {
        transform: translateY(520px);
    }
}

/* 切到当前屏时，KPI 与列表逐项进入 */
.pane.on .mock-kpi,
.pane.on .mock-row:not(.hd) {
    animation: demo-in .46s ease both;
}

.pane.on .mock-kpi:nth-child(2) {
    animation-delay: .07s;
}

.pane.on .mock-kpi:nth-child(3) {
    animation-delay: .14s;
}

.pane.on .mock-row:nth-child(2) {
    animation-delay: .16s;
}

.pane.on .mock-row:nth-child(3) {
    animation-delay: .24s;
}

.pane.on .mock-row:nth-child(4) {
    animation-delay: .32s;
}

.pane.on .mock-row:nth-child(5) {
    animation-delay: .40s;
}

@keyframes demo-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 图表生长 */
.pane.on .bars i {
    transform-origin: 50% 100%;
    animation: demo-bar .62s cubic-bezier(.2, .7, .2, 1) both;
}

.pane.on .bars i:nth-child(even) {
    animation-delay: .09s;
}

@keyframes demo-bar {
    from {
        transform: scaleY(.14);
    }

    to {
        transform: none;
    }
}

/* 「AI 处理中」状态点脉冲 */
.pill-run::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: demo-pulse 1.3s ease-in-out infinite;
}

@keyframes demo-pulse {

    0%,
    100% {
        opacity: .22;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vp-line i,
    .vp-scan,
    .vp-tag i,
    .dev-live i,
    .pane.on .mock-kpi,
    .pane.on .mock-row:not(.hd),
    .pane.on .bars i,
    .pill-run::before {
        animation: none;
    }
}

/* ---------- 开场舞台响应式 ---------- */
@media (max-width: 1280px) {
    .stg h1 {
        font-size: 44px;
    }

    .intro-cols {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 26px;
    }

    .intro-side {
        padding-left: 24px;
    }

    .pane-cols {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 24px;
    }

    .pane-side {
        padding-left: 24px;
    }

    .pane-h {
        font-size: 27px;
    }

}

@media (max-width: 1024px) {

    /* 移动端：取消滚动驱动，直接顺序展示全部 5 屏内容 */
    .stg {
        height: auto;
        padding-bottom: 44px;
    }

    .stg-sticky {
        position: static;
        height: auto;
        padding-top: 40px;
    }

    .stg-copy {
        position: static;
        opacity: 1;
        transform: none;
        padding: 0 20px;
    }

    .stg.is-mid .stg-copy {
        display: block;
    }

    .stg h1 {
        font-size: 32px;
    }

    .stg-sub {
        font-size: 15px;
    }

    .stg-device,
    .stg-device.is-flat {
        position: static;
        width: auto;
        max-width: none;
        margin: 30px 20px 0;
        transform: none;
    }

    .stg-device::after,
    .dev-sheen,
    .dev-tabs,
    .stg-hint,
    .stg-sticky::after {
        display: none;
    }

    .dev-screen {
        height: auto;
        min-height: 0;
    }

    .pane {
        position: static;
        inset: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 22px 20px;
        border-top: 1px solid var(--line-2);
    }

    .pane:first-of-type {
        border-top: 0;
    }

    .intro-hd {
        flex-wrap: wrap;
        gap: 8px;
    }

    .intro-meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .intro-cols {
        margin-top: 16px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .intro-side {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line-2);
        padding-top: 16px;
    }

    .intro-facts {
        margin-top: 14px;
    }

    .pane-cols {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .vp-stage {
        height: 340px;
        flex: none;
    }

    .vp-shot {
        padding: 34px 12px 12px;
    }

    .pane-side {
        padding-left: 0;
    }

    .pane-side::before {
        display: none;
    }

    .pane-list {
        flex: none;
        margin-bottom: 18px;
    }

    .pane-list li {
        flex: none;
        padding: 9px 0;
    }

}

/* ---------- Hero（内页保留） ---------- */
.hero {
    position: relative;
    padding: 84px 0 0;
    background: #fff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 70% at 50% -20%, rgba(18, 87, 224, .07), transparent 68%),
        radial-gradient(60% 50% at 88% 6%, rgba(23, 183, 165, .05), transparent 72%);
}

.hero-glow {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 1100px;
    height: 620px;
    margin-left: -550px;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(18, 87, 224, .10), transparent 70%);
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--ink-3);
    box-shadow: var(--sh-1);
}

.hero-badge b {
    color: var(--brand);
    font-weight: 600;
}

.hero-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    flex: none;
}

.hero h1 {
    margin-top: 26px;
}

.hero h1 .em {
    color: var(--brand);
}

.hero-sub {
    margin-top: 22px;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink-3);
}

.hero-cta {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-note {
    margin-top: 20px;
    color: var(--ink-4);
    font-size: 13px;
}

/* Hero 右侧：产品界面示意（纯 SVG/DOM，无 3D 变换，文字锐利） */
.mock {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-3);
    overflow: hidden;
}

.mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line-2);
}

.mock-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d5dbe5;
}

.mock-bar span {
    margin-left: 8px;
    font-size: 12px;
    color: var(--ink-4);
    font-family: var(--font-en);
}

.mock-body {
    padding: 18px;
}

.mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mock-kpi {
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: #fff;
}

.mock-kpi span {
    font-size: 12px;
    color: var(--ink-4);
}

.mock-kpi b {
    display: block;
    margin-top: 2px;
    font-family: var(--font-en);
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.mock-kpi b.up {
    color: var(--brand);
}

.mock-chart {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
}

.mock-chart-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-4);
    margin-bottom: 12px;
}

.mock-chart-hd b {
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
}

.bars i {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: var(--brand-100);
}

.bars i.hi {
    background: var(--brand);
}

.mock-list {
    margin-top: 12px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    overflow: hidden;
}

.mock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 86px;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
    color: var(--ink-2);
}

.mock-row:last-child {
    border-bottom: 0;
}

.mock-row.hd {
    background: var(--bg-soft);
    color: var(--ink-4);
    font-size: 12px;
}

.mock-row em {
    font-style: normal;
    font-family: var(--font-en);
    color: var(--ink-4);
    font-size: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pill-ok {
    background: #e7f6f0;
    color: var(--ok);
}

.pill-run {
    background: var(--brand-050);
    color: var(--brand);
}

.pill-wait {
    background: #fdf3e3;
    color: var(--warn);
}

/* ---------- AI Agents 处理流水线（演示窗口内）---------- */
.mock-pipe {
    margin-top: 12px;
    padding: 13px 14px 15px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
}

.mock-pipe-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mock-pipe-hd b {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.mock-pipe-hd em {
    font-style: normal;
    font-size: 12px;
    color: var(--brand);
}

.pipe {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pipe-step {
    position: relative;
    text-align: center;
}

/* 步骤之间的连线 */
.pipe-step::before {
    content: "";
    position: absolute;
    left: 0;
    right: 50%;
    top: 5px;
    height: 2px;
    background: var(--line-2);
}

.pipe-step:first-child::before {
    display: none;
}

.pipe-step.done::before,
.pipe-step.run::before {
    background: var(--brand);
}

.pipe-step i {
    position: relative;
    z-index: 1;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
}

.pipe-step.done i {
    background: var(--brand);
    border-color: var(--brand);
}

.pipe-step.run i {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-050);
    animation: pipe-run 1.4s ease-in-out infinite;
}

@keyframes pipe-run {
    0%,
    100% {
        box-shadow: 0 0 0 2px var(--brand-050);
    }

    50% {
        box-shadow: 0 0 0 6px var(--brand-050);
    }
}

.pipe-step span {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--ink-4);
}

.pipe-step.done span,
.pipe-step.run span {
    color: var(--ink-2);
}

.pipe-step.run span {
    font-weight: 600;
    color: var(--brand);
}

/* ---------- 数据条 ---------- */
.stats {
    margin-top: 72px;
    border-top: 1px solid var(--line);
    background: #fff;
    position: relative;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
    padding: 34px 28px;
    border-right: 1px solid var(--line-2);
}

.stat:last-child {
    border-right: 0;
}

.stat b {
    display: flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    font-family: var(--font-en);
    font-size: 40px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.stat b i {
    font-style: normal;
    color: var(--brand);
}

.stat>span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-3);
}

/* 凭证数据带：承接首屏深色的横向凭证条，用品牌短竖线代替满高分隔线，避免表格感 */
.stats-band {
    position: relative;
    background: linear-gradient(180deg, #060a16 0%, #0a1122 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.stats-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 166, 255, .5) 26%, rgba(126, 166, 255, .5) 74%, transparent);
}

/* 数据带的背景也跟着首屏一起呼吸，深色区的颜色节奏贯通 */
.stats-band::after {
    --bl: 48px;
    content: "";
    position: absolute;
    inset: -40% -8% -40% -8%;
    pointer-events: none;
    background:
        radial-gradient(40% 60% at 16% 50%, rgba(56, 112, 236, .42), transparent 72%),
        radial-gradient(38% 56% at 84% 40%, rgba(72, 120, 242, .36), transparent 72%),
        radial-gradient(46% 60% at 50% 60%, rgba(30, 84, 206, .3), transparent 74%);
    background-size: 150% 150%, 160% 160%, 150% 150%;
    background-position: 0% 50%, 100% 40%, 50% 60%;
    filter: blur(48px);
    animation: bgBreath 13s ease-in-out infinite;
}

.stats-band .wrap {
    position: relative;
    z-index: 1;
}

.stats-band .stats-grid {
    gap: 0 30px;
    padding: 32px 0 34px;
}

.stats-band .stat {
    position: relative;
    padding: 4px 0 2px 18px;
    border-right: 0;
}

.stats-band .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(126, 166, 255, .85), rgba(126, 166, 255, .06));
}

.stats-band .stat b {
    font-size: 38px;
    color: #fff;
}

.stats-band .stat b i {
    font-size: 19px;
    font-weight: 600;
    color: rgba(154, 190, 255, .95);
}

.stats-band .stat>span {
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(228, 236, 250, .62);
}

.mock-search {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.mock-search span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-4);
}

.mock-search b {
    display: block;
    margin-top: 4px;
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--ink);
    word-break: break-all;
}

.mock-search em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 11px;
    color: var(--brand);
}

/* ---------- 客户 Logo 墙（文字型，克制） ---------- */
.logowall {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.logowall span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 78px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3);
    border-right: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    letter-spacing: .02em;
}

.logowall span:hover {
    color: var(--brand);
    background: var(--brand-050);
}

/* ---------- 客户占位栏：整段淡青白底（比次级背景只深半度），白色 logo 面板仍能“浮”在区域上；
   顶部叠一道 62px 的深→透明过渡带，接上方深色数据带时不突然断开 ---------- */
.cw-dark {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 13, 28, .5) 0, rgba(8, 13, 28, .1) 24px, transparent 52px),
        radial-gradient(120% 70% at 50% 0%, rgba(24, 64, 160, .06), transparent 62%),
        linear-gradient(180deg, #f4f7fd 0%, #eef3fb 52%, #f6f9fd 100%);
    border-bottom: 1px solid var(--line);
}

/* 分界光缝：1 段横向渐变高光，深浅交接处干净利落 */
.cw-dark::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(18, 87, 224, .5) 24%,
            rgba(90, 180, 255, .72) 50%,
            rgba(18, 87, 224, .5) 76%,
            transparent 100%);
}

.cw-hd {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.cw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.cw-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: rgba(18, 87, 224, .45);
}

.cw-claim {
    margin-top: 14px;
    font-size: 27px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.cw-claim b {
    font-family: var(--font-en);
    font-size: 36px;
    background: linear-gradient(96deg, #0b3fae 0%, #3183ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cw-sub {
    margin-top: 12px;
    max-width: 860px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* ---------- 客户品牌流带：五条轨道，一条对应一个合作领域 ----------
   这个区块返工了四次，走错的路全记在这里，不要再试：
     ✗ 6 列矩阵 + 「展开查看更多」—— 102 家叠成 17 行，读完只得到「logo 很多」；
     ✗ 每格 1px 发丝线 + 每条轨 1px 分隔 —— 横线竖线一叠就是 Excel；
     ✗ 深蓝面板 + 白卡浮在上面 —— 底色太重，且每张卡都带边界与投影，
       一百多个边界加一百多种品牌色同时开叫，只能是乱。
   现在的做法：浅色干净底，无卡、无线、无框，logo 默认保留品牌原色；
   区分全交给统一的格宽与等距留白，多色噪点靠留白收，不靠去色收 ---------- */
.cwf {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: 28px 0;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fafcff 100%);
    box-shadow:
        0 20px 50px rgba(12, 30, 74, .09),
        0 0 0 1px rgba(24, 52, 112, .07);
}

.cwf-lane {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
}

/* 标签列：不给底色、不画分界线，只是一行字加一根短标记。
   家数已去掉 —— 上面标题里已经说了 1200+，每条轨再标一个小数字
   只会把读者的注意力拉到“为什么只有 10 家”上去 */
.cwf-lane-hd {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 22px 0 30px;
}

/* 短标记：只在文字左侧留一根 20px 的品牌色细条，不拉成通高竖线 */
.cwf-lane-hd::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brand) 0%, #4da6ff 100%);
}

.cwf-lane-hd b {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--ink-2);
}

/* 领域序号：把五条轨从“并列的五块”变成“有次序的五道” */
.cwf-lane-hd b i {
    font-style: normal;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(24, 52, 112, .32);
    margin-right: 9px;
    vertical-align: 1px;
}

/* 两端蒙版淡出：logo 不在边缘被硬切成半个，流动才读得出「没有尽头」 */
/* 两端蒙版淡出：logo 不在边缘被硬切成半个，流动才读得出「没有尽头」 */
.cwf-vp {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* 带子里并排两份相同内容，所以跑到 -50% 刚好与起点重合，
   无限循环看不到接缝；translateX 由 GPU 合成，不触发重排 */
.cwf-tape {
    display: flex;
    width: max-content;
    animation: cwfRun var(--cwf-dur, 60s) linear infinite;
    /* 图没到齐先别跑：一条半空的带子在滚，比它静静地等图难看得多。
       .is-on 由 main.js 在这一轨的 logo 全部就绪（或2.5s 兜底）后加上 */
    animation-play-state: paused;
}

.cwf-lane.is-on .cwf-tape {
    animation-play-state: running;
}

.cwf-run {
    display: flex;
    flex: none;
}

/* 偶数轨反向：五条全往同一个方向跑会变成一张横向抽动的壁纸，
   交错方向才像多条各自运行的通道 */
.cwf-lane.is-rev .cwf-tape {
    animation-direction: reverse;
}

@keyframes cwfRun {
    to {
        transform: translateX(-50%);
    }
}

/* 格子本身不画任何东西：无底、无边、无投影。
   统一的 176px 格宽加上两侧 padding 就是节拍，比任何线都干净 */
.cwf-cell {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176px;
    height: 76px;
    padding: 0 26px;
    border-radius: 12px;
    transition: background .25s ease;
}

/* logo 默认就是品牌原色，不做灰度、不降透明度。
   多色混排带来的噪点，靠统一格宽与更宽的两侧留白（26px）去收，
   而不是靠把品牌色去掉 —— 客户 logo 展示本身就是要让人认得出来 */
.cwf-cell img {
    /* 宽高写死而不用 max-*：img 在图片到达前的尺寸是 0，flex 居中下
       会先挤成一条线、图一到又突然撑开，一百多个格子先后这样抽一下
       就是用户看到的「一个个蹦出来」。盒子从第一帧就稳住，只是内容后到 */
    width: 100%;
    height: 40px;
    object-fit: contain;
    transition: transform .25s ease;
}

/* ---------- logo 到达时的淡入（首页流带与合作伙伴页共用）----------
   注意默认态是不带类的 —— 不写 img { opacity: 0 }。
   一旦 JS 没跑成、或者 loading="lazy" 的判定失手，那种写法会直接把
   logo 永久藏掉。这里反过来：只有 JS 确认「这张图确实还没加载」才加 .nl
   把它藏起来，加载完换成 .ld 淡入，最差的情况也只是没有淡入效果 */
.cwf-cell img.nl,
.pt-cell img.nl,
.pt-logos:not(.is-tape) img.nl {
    opacity: 0;
}

.cwf-cell img.ld,
.pt-cell img.ld,
.pt-logos:not(.is-tape) img.ld {
    animation: logoFade .45s ease both;
}

@keyframes logoFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 悬停暂停整条轨：流带最大的风险是「看到了但拦不住」，
   所以鼠标一进来就停，想看哪家就能看清。
   带 .is-on 是为了特异性能盖过上面的 running */
.cwf-lane.is-on:hover .cwf-tape {
    animation-play-state: paused;
}

.cwf-cell:hover {
    background: rgba(18, 87, 224, .05);
}

.cwf-cell:hover img {
    transform: scale(1.06);
}

.cwf-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.cwf-tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-4);
}

.cwf-tip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(18, 87, 224, .55);
    animation: cwfDot 2.4s ease-in-out infinite;
}

@keyframes cwfDot {

    0%,
    100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}

.cwf-note {
    font-size: 12.5px;
    color: var(--ink-4);
}

/* 中等屏：标签列抽不出 208px 了，改成轨道上方一行 */
@media (max-width: 900px) {
    .cwf-lane {
        grid-template-columns: 1fr;
    }

    .cwf-lane-hd {
        padding: 0 22px 8px 30px;
    }

    .cwf-lane-hd::before {
        top: 2px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .cwf-cell {
        width: 144px;
        height: 66px;
        padding: 0 18px;
    }

    .cwf-cell img {
        height: 36px;
    }
}

/* 系统层面已关动画：停流带、撑掉重复的那份，改成可手动横向滚动的轨道 */
@media (prefers-reduced-motion: reduce) {

    .cwf-tape {
        animation: none;
    }

    .cwf-run[aria-hidden="true"] {
        display: none;
    }

    .cwf-vp {
        overflow-x: auto;
    }

    .cwf-tip::before {
        animation: none;
        opacity: 1;
    }
}

/* ---------- 客户留言栏：六条真实留言一次全部铺开，无任何切换交互。
   区头沿用全站统一的 sec-head，六张卡样式完全一致。
   区域底色从上方 logo 墙的淡青白接手，向下渐变到白，两区看上去是连着的 ---------- */
/* 留言区底：顶部给一团极淡的蓝光，接住上方客户墙，
   不致于一下子白到底、把中间那块面板扒得无依无靠 */
.voice-sec {
    position: relative;
    background:
        radial-gradient(92% 58% at 50% 0%, rgba(18, 87, 224, .07), transparent 64%),
        linear-gradient(180deg, #f4f8fd 0%, #fafcfe 46%, #fff 100%);
}

/* 客户留言是一面墙，但它不应该是一块布纹公告板 —— 那一版底色只有
   冷蓝布纹加白画框，读下来就是学校走廊里的软木板，与全站的 AI 语言无关。
   现在把墙面本身换成一块 AI 面板：
     ① 顶沿一道往复扫描的光（不再是钉在那里的静止渐变）；
     ② 墙面上两团缓慢漂移的蓝 / 青光晕，让面板是「开着的」而不是印刷品。
   （两样东西试过且已剔除：四角取景框角标 —— 四个孤零零的直角挂在空白上，
     既不参与构图也不回应内容；32px 坐标网格 —— 正交网格碰上六张歪斜
     便签，网格线与纸边到处对不齐，只把干净的墙面搞成了格子本）。
   布局回到三列两行的等高网格：之前用 columns 瀑布流，列高自动平衡会把卡片
   推到奇怪的位置，图钉跟着跑到墙面边缘变成无主的半圆；
   固定三列两行后每枚图钉都在自己卡片的正上方，底边也齐了。
   六条留言仍然是钉在上面的便利贴——纸感留给内容，科技感给底板，两层不抢 */
.vc-wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 26px;
    padding: 44px 34px 40px;
    border: 1px solid rgba(18, 87, 224, .16);
    border-radius: 20px;
    background: linear-gradient(180deg, #eff5fd 0%, #e7effa 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .66),
        inset 0 -22px 54px rgba(18, 87, 224, .06),
        inset 0 3px 16px rgba(12, 30, 74, .1),
        0 30px 64px rgba(12, 30, 74, .12);
    overflow: hidden;
}

/* 顶沿扫描光：一段 42% 宽的亮条从左跑到右，周期故意做得长，
   只在余光里能感到面板在工作，不把注意力从留言里抢走 */
.vc-wall::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(18, 87, 224, .45) 32%,
            rgba(90, 180, 255, .95) 50%,
            rgba(18, 87, 224, .45) 68%,
            transparent 100%);
    background-size: 42% 100%;
    background-repeat: no-repeat;
    animation: vcScan 9s linear infinite;
}

@keyframes vcScan {
    from {
        background-position: -45% 0;
    }

    to {
        background-position: 145% 0;
    }
}

/* 墙面上两团缓慢呼吸的蓝 / 青光晕：靠 transform 动，不触发重排；
   inset 给负值是为了光晕放大时边缘不会露出硬口 */
.vc-wall::after {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(340px 240px at 24% 22%, rgba(90, 180, 255, .32), transparent 70%),
        radial-gradient(380px 270px at 78% 76%, rgba(47, 196, 178, .2), transparent 72%);
    animation: vcAura 24s ease-in-out infinite;
}

@keyframes vcAura {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .85;
    }

    50% {
        transform: translate3d(3%, -2%, 0) scale(1.09);
        opacity: 1;
    }
}

/* 一张便利贴：对角圆角不一样、打破方正的直角，纸感投影、轻微歪斜地钉在板上。
   网格下六张等高，所以用 flex 纵向排，署名那行靠 margin-top:auto 统一沉底。
   z-index 必须给 1：墙面光晕在 ::after（z-index:0），不抬一层会被光晕盖住 */
.vc-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 22px;
    border-radius: 2px 10px 2px 10px;
    background: #eef4ff;
    box-shadow: 0 12px 24px rgba(12, 30, 74, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
    transform: rotate(-1.4deg);
    transition: transform .22s ease, box-shadow .22s ease;
}

/* 便签右下角卷起一个小折角：露出纸背面的浅三角 + 朝里的投影，把方正的轮廓打破 */
.vc-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent rgba(255, 255, 255, .88) transparent;
    filter: drop-shadow(-2px -2px 3px rgba(12, 30, 74, .16));
    border-bottom-right-radius: 2px;
}

/* 便签顶部中央一枚图钉：高光收小、主体色压深，再加一圈深色描边。
   上一版高光从 34% 就开始转白，青与黄两种钉帽的上半圆直接融进浅墙面，
   看起来就只剩下半圈 —— 描边一加，三种钉帽都是完整的圆珠 */
.vc-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .92) 0%, #4a90ff 30%, #0f49bd 100%);
    box-shadow:
        0 3px 6px rgba(12, 30, 74, .3),
        0 0 0 1px rgba(12, 30, 74, .16);
    z-index: 3;
}

/* 六张便签的颜色与歪斜各不相同：主体沿用蓝白冷调，另掺极淡的青与暖，图钉换几种钉帽色 */
.vc-card:nth-child(6n+2) { background: #fdf8ec; transform: rotate(1.2deg) }
.vc-card:nth-child(6n+3) { background: #e9f6f3; transform: rotate(1.5deg) }
.vc-card:nth-child(6n+4) { background: #eff3fc; transform: rotate(-1.1deg) }
.vc-card:nth-child(6n+5) { background: #fef5ea; transform: rotate(-1.7deg) }
.vc-card:nth-child(6n+6) { background: #eaf1fe; transform: rotate(1.7deg) }

.vc-card:nth-child(6n+2)::before,
.vc-card:nth-child(6n+5)::before {
    background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .92) 0%, #e59a2c 30%, #a86713 100%);
}

.vc-card:nth-child(6n+3)::before {
    background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .92) 0%, #23a5a8 30%, #076a75 100%);
}

/* 鼠标上去，这张便签回正并轻轻抬起，纸感投影加深，浮到其它便签之上 */
.vc-card:hover {
    transform: rotate(0) translateY(-5px);
    box-shadow: 0 22px 44px rgba(12, 30, 74, .18);
    z-index: 4;
}

.vc-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 编号做成一枚等宽小徽标，和右侧标签在同一条水平线上收口 */
.vc-ix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(158deg, rgba(18, 87, 224, .12) 0%, rgba(90, 160, 255, .16) 100%);
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--brand);
}

.vc-tag {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(18, 87, 224, .16);
    background: rgba(255, 255, 255, .5);
    font-style: normal;
    font-size: 11.5px;
    color: var(--brand);
}

.vc-say {
    position: relative;
    margin-top: 12px;
    padding-top: 20px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink-2);
}

/* 引号悬挂在引文左上角，不再把它当背景水印摆到右上 */
.vc-say::before {
    content: "\201C";
    position: absolute;
    left: -2px;
    top: 0;
    font-family: var(--font-en);
    font-size: 42px;
    line-height: .8;
    color: rgba(18, 87, 224, .26);
}

.vc-by {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    column-gap: 13px;
    align-items: center;
    /* 等高卡里署名统一沉到底，六张的公司名才在同一条线上 */
    margin-top: auto;
    padding-top: 18px;
}

.vc-bar {
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1257e0 0%, #5aa0ff 100%);
    transition: height .24s ease;
}

.vc-card:hover .vc-bar {
    height: 26px;
}

.vc-by b {
    font-size: 13.8px;
    line-height: 1.5;
    color: var(--ink);
}

.voice-note {
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--ink-4);
}

/* 固定三列之后必须自己给断点（columns 时代是浏览器代劳的） */
@media (max-width: 980px) {
    .vc-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .vc-wall {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding: 40px 20px 32px;
    }
}

/* 系统层面已关动画：扫描光停在中间，光晕停在初始位置 */
@media (prefers-reduced-motion: reduce) {

    .vc-wall::before {
        animation: none;
        background-position: 29% 0;
    }

    .vc-wall::after {
        animation: none;
    }
}

/* 区块标题里的年数单独拿出来做成 en 数字，不再用深墨到蓝的渐变（与旁边黑字挤在一起发脏），
   改成一整段蓝系渐变，字号收到与标题相安的尺寸，两侧给出空隙 */
.whx-yr {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 3px;
    vertical-align: -1px;
    background: linear-gradient(150deg, #1257e0 0%, #0b3a97 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- 为什么选择洞悉：01 / 02 / 03 / 04 四段做成一台 3D 卡片轮播（coverflow）。
   当前段正面居中、完整可读；相邻两段带透视旋转、后退、变暗地斜在左右两侧，其余藏在正后方。
   每 6 秒自动往右转一张（正面卡底缘读秒线同步），鼠标停在区内即暂停；
   点左右的侧卡 / 底部圆点 / 键盘 ←→ 都能切换。四段同一条冷色蓝→青渐变族（主蓝 / 天蓝 / 蓝青 / 青），
   落在编号、标题、侧色条与圆点上。窄屏退回竖向堆叠一次看全。 ---------- */
.whx {
    --cw: 68%;
    /* 正面卡宽度（占台内宽的比例），两侧卡同宽，只是被推远、转斜、变暗 */
    /* 台高原先写死 528px（按英文态最高的那层取的值）。中文文案短得多，
       每层都空出 53~137px，被 .whx-body 的居中一分为二，标题底下就撑出一道大缝。
       现在台子改为按最高那层自适应（见 .whx-pans 的 grid 叠放），中英各自收敛 */
    position: relative;
    padding: 22px 0 10px;
    /* 不再套硬边框面板：去掉 border / 实底渐变 / 重投影，让卡片直接浮在版块背景上（coverflow 本色）；
       overflow 放开，侧卡不再被框边生硬裁断 */
    overflow: visible;
}

/* 只留一团柔和的中心光晕 + 极淡坐标网格，四边用遮罩完全消掉 ——
   把正面卡轻轻“托”住、养一点科技底，却不再构成一个有边界的矩形盒子 */
.whx::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 58% at 50% 42%, rgba(18, 87, 224, .1) 0%, transparent 70%),
        linear-gradient(rgba(18, 87, 224, .04) 1px, transparent 1px) 0 0 / 100% 34px,
        linear-gradient(90deg, rgba(18, 87, 224, .04) 1px, transparent 1px) 0 0 / 34px 100%;
    -webkit-mask-image: radial-gradient(58% 66% at 50% 46%, #000 0%, transparent 100%);
    mask-image: radial-gradient(58% 66% at 50% 46%, #000 0%, transparent 100%);
}

/* 轮播台：给一个透视，四张卡都绝对定位在台中心，靠 transform 摆到各自的 3D 位置。
   台子比版心各边宽出 60px：正面卡要大、两侧卡又要露多，两个诉求都得占宽度，
   台子不加宽就只能二者相互抢。超出的那点由 body 的 overflow-x:hidden 兼下 */
.whx-pans {
    position: relative;
    z-index: 1;
    width: calc(100% + 120px);
    margin-left: -60px;
    /* 四张卡全部叠在同一个 grid 格子里：台高 = 最高那层的自然高度，
       不再写死数字。绝对定位做不到这一点（脱流的卡撑不起台子） */
    display: grid;
    perspective: 2000px;
    perspective-origin: 50% 46%;
}

/* 每张卡都绝对定位在正中，默认藏起来；JS 按与当前卡的相对位置挂
   is-active / is-prev / is-next / is-hidden，位置、旋转、缩放、明暗全由下面的状态类完成 */
.whx-pan {
    --c: 18, 87, 224;
    position: relative;
    grid-area: 1 / 1;
    justify-self: center;
    width: var(--cw);
    transform-origin: 50% 50%;
    opacity: 0;
    cursor: pointer;
    transition:
        transform .74s cubic-bezier(.34, .12, .18, 1),
        opacity .55s ease;
    will-change: transform, opacity;
}

/* 四段同一条冷色蓝→青渐变族：01 锤定品牌主蓝，后三段顺势滞向蓝青/青。
   同家族逐级微移，轮播切换时观感连贯、专业（不再用 dlv 那套含暖琥珀的四分区色，
   因为分区色适合并排同现，不适合一次只露一张的轮播），只落在编号 / 标题 / 侧条 / 圆点上 */
.whx-pan:nth-child(2) {
    --c: 20, 112, 196;
}

.whx-pan:nth-child(3) {
    --c: 18, 130, 168;
}

.whx-pan:nth-child(4) {
    --c: 16, 142, 150;
}

/* 正面：居中、正对、最亮、投影最重，压在最上层 */
.whx-pan.is-active {
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 5;
    cursor: default;
}

/* 左侧卡：左移 + 向右转面朝中心 + 后退 + 缩小 + 变暗。
   侧卡整体往外、往前、往大调了一档（转角也收得更平），
   两侧露出的面积明显变宽，不再是只剔下两条细边 */
.whx-pan.is-prev {
    transform: translateX(-47%) translateZ(-160px) rotateY(30deg) scale(.88);
    opacity: .6;
    z-index: 3;
}

/* 右侧卡：镜像 */
.whx-pan.is-next {
    transform: translateX(47%) translateZ(-160px) rotateY(-30deg) scale(.88);
    opacity: .6;
    z-index: 3;
}

/* 正后方那张：退到最远、缩小、透明，不接收点击 */
.whx-pan.is-hidden {
    transform: translateZ(-380px) scale(.72);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* 侧卡划过时提亮一点，明确「点它能转到正面」 */
.whx-pan.is-prev:hover,
.whx-pan.is-next:hover {
    opacity: .82;
}

/* 卡面：一块有厚度的白板，内部上下排布（标题条在上、内容在下）。
   边线一律只给 1px，不加粗 —— 白卡浮在浅底上边界读不出来，
   靠的是把同一根细线的不透明度提上去（对比度），而不是把线撑宽 */
.whx-face {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid rgba(var(--c), .3);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 60%, #f7fbff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 10px 26px rgba(12, 30, 74, .08);
    overflow: hidden;
    transition: box-shadow .5s ease, border-color .5s ease;
}

/* 正面卡：边线同样 1px，只把不透明度再提一档；
   原来那圈 3px 柔光环改成 1px 同色描边，边缘更干净不发胖，厚度改用投影拉 */
.whx-pan.is-active .whx-face {
    border-color: rgba(var(--c), .46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px rgba(var(--c), .16),
        0 34px 66px rgba(12, 30, 74, .18);
}

/* 卡顶一道本段色光缝 */
.whx-face::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--c), .9) 0%, rgba(var(--c), .4) 46%, rgba(var(--c), .05) 100%);
}

/* 正面卡底缘的读秒线：按本段色从左往右拉满，拉到头就转下一张 */
.whx-pan.is-active .whx-face::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(var(--c), .9) 0%, rgba(var(--c), .3) 100%);
    animation: whxBar 6s linear both;
    pointer-events: none;
}

.whx.is-hold .whx-pan.is-active .whx-face::after {
    animation-play-state: paused;
}

@keyframes whxBar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* 卡头：本段色标编号 + 标题（正常横排）+ 一行小摘要。整张卡都可点，点侧卡即转到正面 */
.whx-hd {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    width: 100%;
    padding: 22px 30px 0 34px;
    border: 0;
    background: none;
    text-align: left;
    cursor: inherit;
    font: inherit;
}

/* 标题左侧一小段本段色竖条 */
.whx-hd::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(var(--c), .95), rgba(var(--c), .45));
}

/* 编号色标（chip） */
.whx-no {
    flex: none;
    padding: 4px 8px;
    border-radius: 7px;
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    color: rgb(var(--c));
    background: rgba(var(--c), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--c), .2);
}

.whx-tt {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* 小摘要：另起一行，浅灰 */
.whx-sub {
    flex-basis: 100%;
    margin-top: 2px;
    font-style: normal;
    font-size: 12.8px;
    letter-spacing: .01em;
    color: var(--ink-3);
}

/* 内容区：说明 + 横向铺开的要点 + 图组 / 案例。
   原先 justify-content:center，卡高固定而内容短时，剩下的空间一半跑到标题底下，
   副标题与正文之间就裂出一道缝。现在文字紧跟标题，图组靠 margin-top:auto 沉到卡底，
   剩余空间全部落在「文字块与图块」之间（本来就该分开的两块） */
.whx-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 30px 26px;
    overflow: hidden;
}

.whx-lead,
.whx-vis {
    min-width: 0;
}

.whx-vis {
    margin-top: auto;
}

/* 说明：一段本段概述 */
.whx-desc {
    max-width: 900px;
    font-size: 14.6px;
    line-height: 1.8;
    color: var(--ink-2);
}

/* 要点横向铺开（宽就多列、窄就换行），方点用本段业务色 + 一圈同色柔光 */
.whx-keys {
    margin-top: 14px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 9px 28px;
    border-top: 1px dashed rgba(var(--c), .24);
}

/* 底部圆点导航：每点一个本段色（JS 逐点设定 --c），当前段那点拉长填实 */
.whx-nav {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.whx-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--c), .28);
    cursor: pointer;
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
}

.whx-dot.is-on {
    width: 28px;
    border-radius: 5px;
    background: rgb(var(--c));
}

.whx-key {
    position: relative;
    padding-left: 22px;
    font-size: 13.4px;
    line-height: 1.66;
    color: var(--ink-3);
}

.whx-key::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: rgb(var(--c));
    box-shadow: 0 0 0 3px rgba(var(--c), .14);
}

.whx-key b {
    font-weight: 700;
    color: var(--ink-2);
}

/* 图组占满整个展开宽度，列数由 --n 控制均分（因为已经是整宽，均分才能把一行填满、图也够大） */
.whx-pics {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: 14px 18px;
}

.whx-pic {
    min-width: 0;
}

/* 图片占位：与后续真实图片同比例，底色与描边跟本层业务色走（--c），
   四层四色同时体现在图组上；内嵌一圈取景框描边多一点科技感 */
.whx-shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--c), .28);
    background:
        radial-gradient(70% 60% at 24% 18%, rgba(var(--c), .14), transparent 70%),
        linear-gradient(158deg, rgba(var(--c), .06) 0%, rgba(var(--c), .12) 62%, rgba(var(--c), .05) 100%);
    box-shadow: 0 10px 24px rgba(12, 30, 74, .07);
    transition: transform .24s ease, box-shadow .24s ease;
}

.whx-shot::before {
    content: "HOLOX";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(var(--c), .3);
}

/* 占位块内嵌一圈扫描框描边 + 内侧高光，多一点仪器盘 / 取景框的科技感（真实图片放进来后也不违和） */
.whx-shot::after {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: 2;
    border-radius: 9px;
    border: 1px solid rgba(var(--c), .24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    pointer-events: none;
}

.whx-shot img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 放了真实证书图的格子：证书有横版（高新、等保）也有竖版 A4（ISO），
   cover 会把大半张裁掉，所以整幅装进来（contain）；底色换白、留一圈内边距，
   证书就像嵌在展框里，取景框描边正好压在这圈白边上。
   占位的 HOLOX 字样也要让位，否则会透在证书底下 */
.whx-shot.is-img {
    padding: 12px;
    background: #fff;
}

.whx-shot.is-img::before {
    content: none;
}

.whx-pic:hover .whx-shot {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(12, 30, 74, .12);
}

.whx-pic figcaption {
    margin-top: 9px;
    text-align: center;
    font-size: 12.2px;
    line-height: 1.55;
    color: var(--ink-3);
}

/* 出海服务：不放占位图，两块真实案例清单拼成一面面板，
   分界线与留言墙同一做法：本层色底 + 1px 缝隙 */
.whx-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--c), .26) 0%, rgba(var(--c), .1) 100%);
    box-shadow: 0 18px 44px rgba(12, 30, 74, .08);
    overflow: hidden;
}

.whx-case {
    padding: 20px 20px 18px;
    background: linear-gradient(180deg, #fdfeff 0%, #fff 60%, #fbfdff 100%);
}

.whx-case h4 {
    padding-left: 12px;
    border-left: 3px solid;
    border-image: linear-gradient(180deg, rgba(var(--c), 1) 0%, rgba(var(--c), .45) 100%) 1;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

.whx-case ul {
    margin-top: 13px;
    display: grid;
    gap: 10px;
}

.whx-case li {
    position: relative;
    padding-left: 18px;
    font-size: 13.2px;
    line-height: 1.74;
    color: var(--ink-3);
}

.whx-case li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: linear-gradient(158deg, rgba(var(--c), 1) 0%, rgba(var(--c), .5) 100%);
}

/* 中屏（901–1180px）：轮播台略收，正面卡放宽一点、两侧卡的横移/后退幅度收一收，
   免得在窄一点的视口里侧卡被挤出面板外 */
@media (max-width: 1180px) and (min-width: 901px) {
    .whx {
        --cw: 74%;
        padding: 22px 22px 20px;
        border-radius: 22px;
    }

    .whx-pan.is-prev {
        transform: translateX(-47%) translateZ(-130px) rotateY(22deg) scale(.88);
    }

    .whx-pan.is-next {
        transform: translateX(47%) translateZ(-130px) rotateY(-22deg) scale(.88);
    }

    .whx-keys {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 窄屏（≤ 900px）：3D 轮播在手机上转不开，退回竖向堆叠 ——
   取消透视、所有卡改为静态常规流，四段一次全部平铺看全；
   读秒线、圆点导航都不再需要，隐藏掉 */
@media (max-width: 900px) {
    .whx {
        padding: 16px 14px 18px;
        border-radius: 20px;
    }

    .whx-pans {
        height: auto;
        perspective: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* 所有卡（含各状态类）一律回到常规流、正对、全宽、全亮 */
    .whx-pan,
    .whx-pan.is-active,
    .whx-pan.is-prev,
    .whx-pan.is-next,
    .whx-pan.is-hidden {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        transform: none;
        opacity: 1;
        z-index: auto;
        cursor: default;
        pointer-events: auto;
    }

    .whx-face,
    .whx-pan.is-active .whx-face {
        height: auto;
    }

    /* 竖向堆叠时不需要读秒线与圆点导航 */
    .whx-pan.is-active .whx-face::after {
        display: none;
    }

    .whx-nav {
        display: none;
    }

    .whx-hd {
        padding: 20px 22px 0 26px;
    }

    .whx-hd::before {
        left: 16px;
        top: 22px;
    }

    .whx-body {
        justify-content: flex-start;
        padding: 14px 22px 22px;
    }

    .whx-keys {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whx-pics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .whx-tt {
        font-size: 16.5px;
    }

    .whx-keys {
        grid-template-columns: minmax(0, 1fr);
    }

    .whx-pics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whx-cases {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 委托交付清单：拼成一块四列两行的整面面板，面板底色是蓝调渐变，
   1px 缝隙就是分界线，顶部一道 2px 静态光缝。
   四列各自一个业务色（主蓝 / 青 / 灰蓝 / 琥珀，同一列上下两格同色），色相都压在低饱和的
   专业区间；颜色只落在序号与标签上（不再在格子左上角额外加一道色条，那里跟标题撑在一起显得突兀），
   标题正文仍是黑白灰，这样一屏里有清楚的分区标记，又不会变成花花绿绿 ---------- */
.dlv {
    position: relative;
    counter-reset: dlv;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    border-radius: 22px;
    background: linear-gradient(180deg,
            rgba(18, 87, 224, .26) 0%,
            rgba(18, 87, 224, .15) 48%,
            rgba(18, 87, 224, .09) 100%);
    box-shadow: 0 26px 60px rgba(12, 30, 74, .1);
    overflow: hidden;
}

.dlv::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(18, 87, 224, .5) 26%,
            rgba(90, 180, 255, .78) 50%,
            rgba(18, 87, 224, .5) 74%,
            transparent 100%);
}

.dlv-item {
    --c: 18, 87, 224;
    position: relative;
    counter-increment: dlv;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #fdfeff 0%, #fff 46%, #fbfdff 100%);
    transition: background .24s ease;
}

/* 按列取色：第二列青、第三列灰蓝（比主蓝更沉更灰，不会与第一列撑在一起）、
   第四列琥珀，第一列沿用主蓝 */
.dlv-item:nth-child(4n+2) {
    --c: 13, 133, 143;
}

.dlv-item:nth-child(4n+3) {
    --c: 61, 90, 128;
}

.dlv-item:nth-child(4n+4) {
    --c: 176, 122, 44;
}

/* 序号压在格右上角，颜色跟本列的业务色走，鼠标进来才略微加深 */
.dlv-item::after {
    content: counter(dlv, decimal-leading-zero);
    position: absolute;
    right: 16px;
    top: 12px;
    font-family: var(--font-en);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(var(--c), .16);
    pointer-events: none;
    transition: color .24s ease;
}

/* 顶部不再额外画业务色条（用户反馈格子左上角那道条显得突兀），分区颜色交给序号与标签去表达 */
.dlv-item b {
    position: relative;
    padding-right: 42px;
    font-size: 15.5px;
    color: var(--ink);
}

.dlv-item p {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-3);
}

/* 标签静态就带本列的业务色（淡底 + 同色描边 + 同色字），
   不再是八颗一模一样的蓝胶囊，也不再是一片灰字 */
.dlv-tag {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(var(--c), .24);
    border-radius: 999px;
    background: rgba(var(--c), .055);
    font-size: 12px;
    color: rgb(var(--c));
    transition: border-color .2s ease, background .2s ease;
}

/* 悬停：只给本格一层极淡的本列业务色底 */
.dlv-item:hover {
    background: linear-gradient(180deg, rgba(var(--c), .05) 0%, rgba(var(--c), .016) 44%, #fff 100%);
}

.dlv-item:hover::after {
    color: rgba(var(--c), .3);
}

.dlv-item:hover .dlv-tag {
    border-color: rgba(var(--c), .42);
    background: rgba(var(--c), .1);
}

/* ---------- 产品矩阵（行式，非卡片堆叠） ---------- */
.plat-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 220px;
    gap: 32px;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    transition: background-color .18s ease;
}

.plat-row:first-child {
    border-top: 1px solid var(--line);
}

.plat-row:hover {
    background: linear-gradient(90deg, var(--brand-050), transparent 60%);
}

.plat-code {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.plat-code span {
    display: block;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: .04em;
}

.plat-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.plat-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-3);
}

.plat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.plat-act {
    display: flex;
    justify-content: flex-end;
}

/* ---------- 能力 Tabs ---------- */
.tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.tabs-nav button {
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease;
}

.tabs-nav button:hover {
    color: var(--ink);
}

.tabs-nav button.on {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.tab-pane {
    display: none;
    padding-top: 36px;
}

.tab-pane.on {
    display: block;
}

.tab-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
}

/* ---------- 客户评价（引述行） ---------- */
.quote {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.quote-mark {
    font-family: var(--font-en);
    font-size: 34px;
    line-height: 1;
    color: var(--brand-100);
    font-weight: 700;
}

.quote p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-2);
    flex: 1;
}

.quote-by {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.quote-by span {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-4);
}

/* ---------- 资质认证 ---------- */
.certs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
}

.cert svg {
    width: 26px;
    height: 26px;
    color: var(--brand);
    flex: none;
}

.cert b {
    display: block;
    font-size: 15px;
    color: var(--ink);
}

.cert span {
    font-size: 13px;
    color: var(--ink-4);
}

/* ---------- 内页 Hero ---------- */
/* ---------- 页面 Hero：深色科技横幅（与首页开场 / 顶栏同源的深空靓蓝） ---------- */
.page-hero {
    position: relative;
    padding: 104px 0 66px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(122% 88% at 50% -8%,
            #17264e 0%,
            #111b3a 26%,
            #0b1228 52%,
            #070a18 78%,
            #03050c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* 呼吸色雾：大半径冷蓝色斑，三团彼此错动 + 慢慢换色（与首页 stg 同调，但按内页降一档）。
   about / service / global 这三页是综合叙述页，取四套里的中间档：18s、色相 9deg。
   background-size 必须 >100%，否则关键帧里的 background-position 位移根本不生效 */
.page-hero::before {
    --bl: 54px;
    --hb-h: 9deg;
    --hb-o0: .42;
    --hb-o1: 1;
    content: "";
    position: absolute;
    inset: -24% -6% auto -6%;
    height: 150%;
    pointer-events: none;
    background:
        radial-gradient(60% 42% at 50% -4%, rgba(112, 164, 255, .56), transparent 70%),
        radial-gradient(52% 40% at 14% 16%, rgba(52, 110, 232, .46), transparent 72%),
        radial-gradient(52% 40% at 88% 8%, rgba(70, 124, 242, .42), transparent 72%);
    background-size: 150% 150%, 160% 160%, 160% 160%;
    background-position: 50% 0%, 0% 20%, 100% 10%;
    filter: blur(54px);
    opacity: .95;
    will-change: transform, opacity, filter, background-position;
    animation: heroBreath 18s ease-in-out infinite;
}

/* 科技同心环焦点（右上） */
.page-hero::after {
    content: "";
    position: absolute;
    top: -150px;
    right: -90px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 1px solid rgba(126, 166, 255, .22);
    box-shadow:
        0 0 0 38px rgba(90, 140, 240, .05),
        inset 0 0 92px rgba(110, 160, 255, .18);
    pointer-events: none;
}

.page-hero .wrap {
    position: relative;
    z-index: 1;
}

.crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-4);
}

.crumb a {
    color: var(--ink-3);
}

.crumb a:hover {
    color: var(--brand);
}

/* Hero 内的面包屑：深底浅字 */
.page-hero .crumb {
    color: rgba(255, 255, 255, .5);
}

.page-hero .crumb a {
    color: rgba(255, 255, 255, .74);
}

.page-hero .crumb a:hover {
    color: #fff;
}

.page-hero .crumb span {
    color: rgba(255, 255, 255, .34);
}

.page-hero h1 {
    color: #fff;
    margin-top: 18px;
    max-width: 900px;
    text-shadow: 0 0 46px rgba(122, 168, 255, .26);
}

.page-hero .lead {
    color: rgba(255, 255, 255, .72);
    margin-top: 18px;
    max-width: 760px;
}

.page-hero .eyebrow {
    color: #9fc0ff;
}

.page-hero .eyebrow::before {
    background: #5aa0ff;
}

.page-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 56px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.page-hero-metrics div b {
    display: block;
    font-family: var(--font-en);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(96deg, #7fb2ff 0%, #c2d8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-hero-metrics div span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    color: rgba(255, 255, 255, .58);
}

/* ---------- 关于页：世界地图背景 + 双列卡片 ---------- */
.page-hero-about {
    padding: 48px 0 36px;
    border-bottom: 0;
    position: relative;
    overflow: hidden;
}

.page-hero-about::after {
    display: none;
}

/* 世界地图背景层：它的身份是「氛围底纹」，不是主角。
   之前 opacity:1 + 两层 drop-shadow 发光，把素材里本就存在的经纬线全部描亮成
   一条条贯穿画面的横线，抢戏又显脏。这里回到底纹做法：
   压低不透明度、去掉外发光、并用双向 mask 让四周渐隐，
   线条没有硬端点之后自然融进深空背景 */
.ab-map-bg {
    position: absolute;
    top: 50%;
    right: 4.5%;
    transform: translateY(-50%);
    width: 66%;
    height: 100%;
    pointer-events: none;
    background: url('../img/worldmap.svg') right center / contain no-repeat;
    opacity: .38;
    -webkit-mask:
        linear-gradient(90deg, transparent 0%, #000 28%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
        linear-gradient(90deg, transparent 0%, #000 28%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-composite: intersect;
}

/* 首屏左右分域。
   上一版 .ab-hero-l 是 max-width:680px 的单栏，四项文化使命通栏排在它下面，
   于是标题那一行右边一大片只剩地图底纹，空。
   现在左栏定宽收文字、右栏 1fr 承四条光条，右侧被内容占住；
   两栏 center 对齐，左栏比右栏矮一截时不会吊在顶上 */
.ab-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 0 58px;
    align-items: center;
}

.ab-hero-l {
    min-width: 0;
}

.ab-hero-h {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 4px;
}

.ab-hero-h2 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    margin-bottom: 20px;
}

/* text-wrap: balance 把多行段落的行长拉平。不加的话首句会填满第一行再
   硬掉到第二行，断点刚好落在「AI科学|家团队」这种词中间；
   拉平后断点会落在词边界上。不支持的浏览器退回普通折行，无副作用 */
.ab-hero-p {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .6);
    text-wrap: balance;
}

/* ========== 首屏里的文化使命 ==========
   文化使命原来是独立一屏的浅色文化墙（.ab-mission 那一整套），DOM 已整段移除，
   二级菜单里的「文化使命」入口也一并去掉。原因：使命 / 定位 / 愿景 / 理念
   本身就是「洞悉是谁」的一部分，并进首屏公司简介比单独占一屏更顺。

   排布上走过两版：一版四项一行靠 1px 竖线分隔，在深色底上读成表格；
   二版改四块并排的切角玻璃面板，格子感又回来了，而且它通栏压在标题下面，
   把标题右侧整片留成空地。
   现版拆左右：题眉、口号、五条标语跟着标题留在左栏，四项去右栏纵向排开 */

/* 题眉与上方公司简介的分界：不用等宽灰线，改一道从左往右淡出的蓝线。
   等宽灰线是「表格线」，渐变线才是「区段起始」 */
.ab-hc-hd {
    position: relative;
    margin-top: 34px;
    padding-top: 30px;
    margin-bottom: 18px;
}

.ab-hc-hd::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(110, 185, 255, .55) 0%, rgba(110, 185, 255, .12) 42%, rgba(110, 185, 255, 0) 82%);
}

/* 英文题眉。全站深色区的小题眉都是这套：11px + 大字距 + 低透青 */
.ab-hc-en {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .42em;
    color: rgba(126, 196, 240, .52);
}

/* 口号。两句之间那颗点不给固定尺寸不行 —— 用中文标点的话
   它会跟着字体跑，对不齐。但也不能是独立元素：独立元素在 flex 里
   自己算一项，英文态两句折行时点会留在上行末尾。
   现在点是第二句自带的 ::before，点与句子绑成不可拆的一项 */
.ab-hc-slogan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}

.ab-hc-slogan span+span::before {
    content: '';
    display: inline-block;
    vertical-align: .18em;
    width: 5px;
    height: 5px;
    margin-right: 14px;
    border-radius: 50%;
    background: #4ba8e8;
    box-shadow: 0 0 8px rgba(75, 168, 232, .9);
}

/* ---------- 右栏：四条文化光条 ---------- */
.ab-hero-r {
    position: relative;
    min-width: 0;
}

/* 背景光场。上一版是 repeating-radial-gradient 画的一组等距同心环，
   环说到底就是一圈圈细线：它带着硬几何轮廓压在光条后面，既突兀又没体积，
   跟地图底纹的细线也在打架。
   现在是三层全是「面」的光：品牌蓝团落右上、青团落左下、
   再压一道斜向宽高光带给整片光方向感。边缘都由渐变自己化开，
   叠在地图上是「光」而不是「图形」。
   慢呼吸只改亮度不做缩放 —— 缩放会把光斑边缘露成一条看得出来的边。
   最外面那层 mask 是必需的：斜光带是 linear-gradient，它在容器四边
   还有值，不化开的话整个右栏会被读成一块亮矩形，又回到「取景框」了 */
.ab-hero-r::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -16%;
    top: -20%;
    bottom: -20%;
    pointer-events: none;
    background:
        linear-gradient(114deg,
            transparent 24%,
            rgba(150, 210, 255, .13) 43%,
            rgba(180, 230, 255, .05) 57%,
            transparent 74%),
        radial-gradient(56% 50% at 70% 24%, rgba(46, 132, 255, .58) 0%, rgba(46, 132, 255, .22) 36%, rgba(46, 132, 255, 0) 70%),
        radial-gradient(46% 42% at 30% 62%, rgba(18, 190, 210, .26) 0%, rgba(18, 190, 210, .09) 40%, rgba(18, 190, 210, 0) 74%);
    -webkit-mask: radial-gradient(74% 68% at 58% 44%, #000 0%, rgba(0, 0, 0, .68) 54%, transparent 90%);
    mask: radial-gradient(74% 68% at 58% 44%, #000 0%, rgba(0, 0, 0, .68) 54%, transparent 90%);
    animation: abGlowBreath 16s ease-in-out infinite;
}

/* 光里再浮一片点云。点阵是全站在用的语言（世界地图本身就是点阵拼的），
   它比圆环那种线框更像「数据」，而且点是面不是线、不会出硬轮廓。
   跟光条内那层点阵拉开区别：这里 22px 一颗、点更大更亮（疏而亮），
   光条内是 18px、暗（密而暗），两层读起来不是同一个东西。
   mask 中心敲在光条右端：光条底色到右端已经淡成透明，点云正好从那里
   透出来向右散掉 —— 读起来是数据从四条光条尾端洒出去 */
.ab-hero-r::after {
    content: '';
    position: absolute;
    left: -6%;
    right: -14%;
    top: -14%;
    bottom: -14%;
    pointer-events: none;
    background-image: radial-gradient(rgba(154, 214, 255, .7) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask: radial-gradient(52% 48% at 78% 34%, #000 0%, rgba(0, 0, 0, .4) 44%, transparent 78%);
    mask: radial-gradient(52% 48% at 78% 34%, #000 0%, rgba(0, 0, 0, .4) 44%, transparent 78%);
}

@keyframes abGlowBreath {

    0%,
    100% {
        opacity: .74;
    }

    50% {
        opacity: 1;
    }
}

.ab-hc-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 一条光条 = 竖轴 + 大号编号 + 题头 + 释义，三列一行读完。
   底色左浓右淡：右端直接化进地图底纹，四条就不会读成四个方块，
   也不用边框把自己框起来。左侧那层深底是必需的 ——
   地图在右侧正好是大陆亮块，没有深底文字会糊在上面 */
/* 题头列收到 60px：中文就两个字，上一版给 140px 是为了讲英文的
   Positioning，结果中文态白白向释义列抢了 80px，释义只能断成两行。
   现在中文按中文的宽度给，英文态在 .is-en 里单独抬回去 */
.ab-hc-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 60px) minmax(0, 1fr);
    align-items: center;
    gap: 0 18px;
    padding: 17px 22px 17px 20px;
    transition: background .28s ease;
    background: linear-gradient(90deg,
            rgba(8, 17, 37, .74) 0%,
            rgba(8, 17, 37, .46) 52%,
            rgba(8, 17, 37, .04) 100%);
}

/* 竖轴：颜色按 01→04 从蓝走到青，四条连起来是一条递进的序列。
   轴色抽成 --ax，题头前那颗点也共用它 */
.ab-hc-item:nth-child(1) {
    --ax: #1257e0;
}

.ab-hc-item:nth-child(2) {
    --ax: #1b74d6;
}

.ab-hc-item:nth-child(3) {
    --ax: #128fb8;
}

.ab-hc-item:nth-child(4) {
    --ax: #0f93aa;
}

.ab-hc-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
            rgba(160, 210, 255, .1) 0%,
            var(--ax) 46%,
            rgba(160, 210, 255, .1) 100%);
}

/* 点阵底纹：18px 一颗，跟着底色一起从左往右淡掉，
   不铺成一整层灰点 */
.ab-hc-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(150, 205, 255, .18) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 46%, transparent 80%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 46%, transparent 80%);
}

.ab-hc-item:hover {
    background: linear-gradient(90deg,
            rgba(17, 36, 70, .84) 0%,
            rgba(13, 28, 56, .52) 52%,
            rgba(8, 17, 37, .06) 100%);
}

/* 编号进 grid 第一列，26px 英文体压低透明度：
   它是序号不是数据，别抢题头 */
.ab-hc-no {
    position: relative;
    z-index: 2;
    font-family: var(--font-en);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(150, 208, 255, .3);
}

/* 题头白色大字：四个词是这一区的主角 */
.ab-hc-k {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-left: 15px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
}

/* 题头前一颗轴色亮点，和左侧竖轴同色，把编号跟词绑在一起。
   静态就发光，不靠悬浮才出现 */
.ab-hc-k::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--ax);
    box-shadow: 0 0 8px rgba(75, 168, 232, .85);
}

.ab-hc-v {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
}

/* 五条标语：原来挤成一行灰字，现在拆成一排胶囊标。
   同一句话切成五个词，横排读得快，也把这一区收了口 */
.ab-hc-pursuit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

/* 领词不再单占一行。上一版给它 flex:0 0 100% 是怕胶囊排不下，
   结果中文态白白多占一行、领词自己吊在上面。
   重新算过：领词 13.5px 约 102px，五颗胶囊按 padding 12 各 77px，
   加上四道间隙总共 542px，560px 左栏一行装得下。
   英文态胶囊本来就必折两行，领词跟着流进第一行，
   三行变两行且领词不再孤立 */
.ab-hc-pl {
    margin-bottom: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .8);
}

.ab-hc-tag {
    padding: 6px 12px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: rgba(196, 226, 255, .82);
    background: rgba(120, 190, 255, .07);
    border: 1px solid rgba(120, 190, 255, .2);
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}

/* 中屏：左右两栏拆不开了，落回上下单栏；
   单栏后右栏宽度变通栏，背景光场会把文字洗白，关掉 */
@media (max-width: 1180px) {
    .ab-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px 0;
    }

    .ab-hero-r::before,
    .ab-hero-r::after {
        display: none;
    }
}

/* 窄屏：光条内部三列排不开，编号单独占左侧，题头与释义叠成两行 */
@media (max-width: 900px) {
    .ab-hc-hd {
        margin-top: 26px;
        padding-top: 24px;
    }

    .ab-hc-slogan {
        font-size: 18px;
    }

    .ab-hc-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 5px 14px;
        padding: 15px 16px 16px 16px;
    }

    .ab-hc-no {
        grid-row: 1 / span 2;
        align-self: start;
        font-size: 22px;
        line-height: 1.1;
    }

    .ab-hc-k {
        grid-column: 2;
        padding-left: 0;
        font-size: 17px;
    }

    .ab-hc-k::after {
        display: none;
    }

    .ab-hc-v {
        grid-column: 2;
        font-size: 14px;
    }
}

/* ========== 内容网格区 ==========
   这一片是「一整块浅色拼图」：底色不该露出来，所以给白色。
   原先是 #0b1a36 深藏青，配上四格里唯一一格深色，整片读起来像棋盘漏底 */
.ab-grid-sec {
    background: #fff;
    padding: 0;
    position: relative;
    border-top: 0;
    /* 拼合动效期间卡片会从外侧滑入，裁掉溢出避免出现横向滚动条 */
    overflow: hidden;
}

/* 卡片底色全宽铺满、互相无缝拼接 */
.ab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* 卡片基础：白色拼块（严丝合缝，靠缝线划分）。缝线统一走 --line，
   不再用 #e5e9f0 这种和 token 差一档的近似值 */
/* 卡片基础：白色拼块（严丝合缝，靠缝线划分）。
   四格已经统一成白底，缝线就是拼图唯一的轮廓语言，
   再用 --line(#e4e9f0) 那么浅会相当于没有轮廓，所以加深一档 */
.ab-card {
    position: relative;
    padding: 28px 40px;
    background: #fff;
    border-bottom: 1px solid #c5d3e8;
    border-right: 1px solid #c5d3e8;
        /* 切割感：缝线内侧再贴一道 1px 白高光，把单线做成「沟」——
           一根深线读作切面、高光读作切口倒角，拼块才有厚度 */
        box-shadow: inset -2px -2px 0 #fff;
}

/* 文字向内适度让出一些：左列拉开左边距、右列拉开右边距 */
.ab-card:nth-child(odd) {
    padding-left: 72px;
}

.ab-card:nth-child(even) {
    padding-right: 72px;
    border-right: 0;
}

.ab-card:nth-last-child(-n+3) {
    border-bottom: 0;
}

/* ---- 拼图榫头：细颈 + 圆头的真拼图轮廓（SVG 描边，卡片仍无缝紧贴） ----
   描边从 .26/1px 提到 .34/1.2px：全白底下卡片之间没有色差，
   榫头全靠这条描边被读出来，太淡就等于白画 */
.ab-card::before,
.ab-card::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
}

/* 竖缝：缝线向右绕出一个拼图凸口 */
.ab-card::before {
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 16px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M0 0 C6 3 2 8 8 8 A7 7 0 1 1 8 22 C2 22 6 27 0 30 Z' fill='%23ffffff'/%3E%3Cpath d='M0 0 C6 3 2 8 8 8 A7 7 0 1 1 8 22 C2 22 6 27 0 30' fill='none' stroke='%231257e0' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* 横缝：缝线向下绕出一个拼图凸口 */
.ab-card::after {
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 30px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M0 0 C3 6 8 2 8 8 A7 7 0 1 0 22 8 C22 2 27 6 30 0 Z' fill='%23ffffff'/%3E%3Cpath d='M0 0 C3 6 8 2 8 8 A7 7 0 1 0 22 8 C22 2 27 6 30 0' fill='none' stroke='%231257e0' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ---- 榫头朝向交错：真拼图不会每个凸口都朝同一侧，
   一律右凸+下凸会读成「重复贴图」。这里用镜像让每条缝上凸凹各一：
   竖缝：上行凸口向右，下行凸口向左
   横缝：左上/右下凸口向下，右上/左下凸口向上

   关键：镜像必须连定位一起翻。伪元素原本占「缝线 → 邻格 +15px」这一段，
   只加 scaleX(-1) 的话形状的直边会被甩到离缝线 15px 远的地方，
   凸口就整个脱离缝线浮在旁边（上一版凹凸「跑出去」就是这个原因）。
   把偏移从 -15px 收到 -1px，元素改占「本格 -15px → 缝线」这一段，
   镜像后直边正好压在缝线上，凸口向本格内侧凹进去 ---- */
.ab-grid>.ab-card:nth-child(3)::before {
    right: -1px;
    transform: translateY(-50%) scaleX(-1);
}

.ab-grid>.ab-card:nth-child(2)::after,
.ab-grid>.ab-card:nth-child(3)::after {
    bottom: -1px;
    transform: translateX(-50%) scaleY(-1);
}

/* ---- 拼图组装动效：滚动到这一区时，四块从各自的对角方向合拢咬紧，
   团队横条最后从下方压上来。复用全站 .rv → .in 观察器（一次性，不回弹）。
   位移方向刻意与各自所处的象限一致，读起来才是「四块拼回原位」
   而不是「四个卡片一起往上飘」 ---- */
.ab-grid>.rv {
    transition: opacity .66s cubic-bezier(.22, .7, .2, 1), transform .66s cubic-bezier(.22, .7, .2, 1);
}

.ab-grid>.ab-card:nth-child(1).rv {
    transform: translate(-46px, -26px) scale(.985);
}

.ab-grid>.ab-card:nth-child(2).rv {
    transform: translate(46px, -26px) scale(.985);
    transition-delay: .07s;
}

.ab-grid>.ab-card:nth-child(3).rv {
    transform: translate(-46px, 26px) scale(.985);
    transition-delay: .14s;
}

.ab-grid>.ab-card:nth-child(4).rv {
    transform: translate(46px, 26px) scale(.985);
    transition-delay: .21s;
}

.ab-grid>.ab-team-bar.rv {
    transform: translateY(34px) scale(.99);
    transition-delay: .28s;
}

/* 归位规则必须写得比上面的偏移规则更重：
   偏移选择器 .ab-grid>.ab-card:nth-child(n).rv 是 (0,4,0)，
   若归位只写 .ab-grid>.rv.in (0,3,0) 会被压住，
   结果卡片永久停在偏移态——看起来就像拼图永远没拼回去 */
.ab-grid>.ab-card:nth-child(1).rv.in,
.ab-grid>.ab-card:nth-child(2).rv.in,
.ab-grid>.ab-card:nth-child(3).rv.in,
.ab-grid>.ab-card:nth-child(4).rv.in,
.ab-grid>.ab-team-bar.rv.in {
    transform: none;
}

/* base.css 里 .rv 的 reduced-motion 兜底优先级低于上面这些选择器，
   这里必须用同等量级的选择器再兜一次，
   否则关掉动效的用户会看到卡片永久偏移 */
@media (prefers-reduced-motion: reduce) {

    .ab-grid>.ab-card:nth-child(1).rv,
    .ab-grid>.ab-card:nth-child(2).rv,
    .ab-grid>.ab-card:nth-child(3).rv,
    .ab-grid>.ab-card:nth-child(4).rv,
    .ab-grid>.ab-team-bar.rv {
        transform: none;
        transition: none;
    }
}

/* 右列已贴版面右缘，无右缝 */
.ab-card:nth-child(even)::before {
    display: none;
}

.ab-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 16px;
    line-height: 1.4;
}

.ab-card p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink-3);
    margin-bottom: 10px;
}

.ab-card p:last-of-type {
    margin-bottom: 0;
}

.ab-card p strong {
    color: var(--ink);
    font-weight: 700;
    /* 数据型强调不允许被拆行，避免“60%+”单独落下一行把卡片拉高 */
    white-space: nowrap;
}

/* 强调拼块（AI 平台）：四格里需要有一格是重点，但「给一格换底色」这条路走不通——
   三白夹一色，无论那一色是深藏青还是淡蓝，都会被读成棋盘缺格/渲染没加载完。
   正确做法是整片保持同一块白，重点交给排版层级：
   标题走品牌深蓝 + 标题左侧品牌竖标记 + 右上角一层几乎看不出的品牌光晕。
   这样它是「同一张纸上语气更重的一段」，而不是「另一张纸」 */
.ab-card-hl {
    background:
        radial-gradient(118% 88% at 100% 0%, rgba(18, 87, 224, .05) 0%, rgba(18, 87, 224, 0) 62%),
        #fff;
    border-color: var(--line);
}

.ab-card-hl h3 {
    color: var(--brand-700);
    font-size: 22px;
    position: relative;
}

/* 竖标记挂在标题文字左外侧（负偏移），因此该格标题的起始位置
   与其它三格严格对齐，不会被推右 */
.ab-card-hl h3::before {
    content: '';
    position: absolute;
    left: -16px;
    top: .2em;
    bottom: .2em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand) 0%, #4da6ff 100%);
}

.ab-card-hl p {
    color: var(--ink-3);
}

.ab-card-hl p strong {
    color: var(--brand-700);
}

/* AI产品矩阵：这一格已经不是深底了，文字必须从白字改回深字 */
.ab-products {
    display: flex;
    gap: 28px;
    margin-top: 16px;
    position: relative;
}

.ab-products::before {
    display: none;
}

.ab-prod-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

/* 站内强调色只有品牌蓝一条线，原先的 #7c5cff 紫是体系外的颜色，
   它让这一区的小圆点、大数字、徒章各自偏一个色相，是「配色奇怪」的主因之一 */
.ab-prod-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #4da6ff);
    flex-shrink: 0;
}

.ab-prod-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-700);
    letter-spacing: .02em;
}

.ab-prod-desc {
    font-size: 11px;
    color: var(--ink-4);
}

/* 客户列表 */
.ab-client-list {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.8;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
    letter-spacing: .05em;
}

.ab-client-list::before {
    display: none;
}

.ab-client-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #4da6ff);
    margin: 0 20px;
    flex-shrink: 0;
}

.ab-client-list .ab-client-dot:first-child {
    margin-left: 0;
}

/* 资质指标条 */
.ab-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 20px;
}

.ab-stats::before {
    display: none;
}

/* 分隔圆点改成每项自带的前置伪元素。
   上一版是独立的 .ab-stat-dot span，在 flex 里它自己就是一项：
   行尾放不下下一项时，点已经排上去了，于是点留在上行末尾、
   文字掉到下行 —— 英文态 5 项必然折行，这个毛病每次都会出来。
   点归给项之后，折行时两者不会被拆开；首项也带点，
   跟卡片里 eClins 那一行的写法一致 */
.ab-stat-item {
    font-size: 15px;
    color: var(--ink-2);
    letter-spacing: .02em;
}

.ab-stat-item::before {
    content: '';
    display: inline-block;
    vertical-align: .14em;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #4da6ff);
}

.ab-stat-item strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand);
}

.ab-stat-item.ab-stat-badge {
    font-weight: 700;
    color: var(--brand);
}

/* 团队能力横条 - 全宽展示（缝线跟卡片同一档） */
.ab-team-bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border-top: 1px solid #c5d3e8;
}

.ab-team-item {
    padding: 24px 40px;
}

/* 首尾项文字与上方卡片对齐 */
.ab-team-item:first-child {
    padding-left: 72px;
}

.ab-team-item:last-child {
    padding-right: 72px;
}

.ab-team-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.ab-team-item p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-3);
    margin: 0;
}

/* ========== 文化使命（已作废：整段下面都是死代码，可整段删除）==========
   .ab-mission* 对应的那一屏（浅色文化墙）已从 about.html 整段移除，
   内容并到了首屏的 .ab-hero-culture 里（见上方「首屏里的文化使命」）。
   下面这些规则已经没有任何 DOM 命中，保留只为便于日后回查这一系列版本的做法。

   以下为原注释与规则：
   原先这一区自带一整套「混凝土墙」皮肤：水泥灰底(#c8cdd8) + 噪声纹理 +
   灰蓝深块(#2a3f5e) + 天蓝发光线(rgba(100,170,255))。
   全站没有第二处用这套材质，而且这几个色都不在品牌蓝谱系里，
   所以它读起来像从另一个站点贴过来的一块——这就是「格格不入」的来源。
   这里全部收回站内既有语言：品牌蓝 + --ink 文字，
   左侧深色块改用与 Hero / 页脚同一支深空渐变。

   后续几轮都是实拍后被否掉的，记在这里避免回头路：
     v2 浅底 + 圆角白卡  → 上下都是通栏深色带，中间夹一张明信片，被包裹又空旷
     v3 通栏满幅 + 纯深底 → 上接深色标语带、下接黑色胶片区，三段深色连成一片
     v4 深蓝墙面 + 拼缝 + 洗墙灯 → 设计看得见了，但底色仍是深的，
        上（.ab-banner 深色）下（.ab-timeline #0a0a0a）夹着一块深蓝，依旧不协调
     v5 浅墙 + clip-path 斜切板 → 斜边只是把矩形削了一刀，不是文化墙的做法

     v6 浅墙 + 封口的立柱 + 一整块白展板
        → 柱子上下各一条横条，读成挂轴的轴杆（卷轴）；
           右侧一整块白板切田字格，读成网页表格。两件都不是墙。

     v7 贯通壁柱 + 错落白展板 + 拼图榫头
        → 柱子不管怎么调都是墙上一块深色竖板，仍与上下两段深色连片；
           展板之间再加榫头，又多出一套分割语言。

   v8（本版，整区重做）：不再走「左边一块深色 + 右边一块白色」这条路。
   照真实企业文化墙的现场做法排版——墙上先做一排立体字，字下面挂几块亚克力板：
     ① 墙：浅色墙面 + 三盏筒灯下洗光 + 细砂墙灰质感 + 墙裙踢脚 + 两侧墙角暗影；
     ② 立体字：「文化使命」用多层 text-shadow 逐层挤出字厚，再落一层墙面投影。
        文化墙上最标志性的就是这排凸出来的字，比任何 CSS 假立柱都直观；
     ③ 亚克力展板：四块独立展板横向排开，板面有上下厚度高光、四角有亚克力钉、
        板下有接触阴影 + 远距柔影；
     ④ 底部丝带从展板后面穿过，把整排板串成一体。
   横排同时解决了「使命内容太多」：使命独占下面一整行，五条追求一行排开。

   v9（v8 实拍后的修正，三处硬伤）：
     ① CULTURE 水印 168px 压在立体字右边，两者笔画交叠，标题读起来是脏的
        → 水印整块去掉，改成墙顶一道 LED 灯槽（灯带 + 向下扩散的洗墙光）。
           墙上有灯，比墙上有淡字更像文化墙，也不会和任何文字打架；
     ② 墙 #e8edf5 与板面 #fff 只差一点点，四块板几乎融进墙里，
        「挂在墙上」全靠影子撑，实拍看就是浅色底上的浅色卡片
        → 墙压深到 #dbe3f0、板面提到纯白、投影再加一档，先把明暗差做出来；
     ③ 丝带 margin-top:-36px 压到板下沿上，把板底的接触影切断了
        → 改成正值，丝带完全走在展板下方的墙裙上。

   v10（「方向对、视觉怪」的修正）：横向布局本身留着不动，怪的是压在上面的
   一整套拟物质感 —— 它们各自都在模仿一件现实物品，堆在一个浅色科技站里就出戏：
     ① 78px 标题挂 8 层递进深色 + 两层重投影，这是 WordArt 立体字的做法，
        字越大越土 → 改成扁平渐变填充字（深蓝→墨蓝），只留一层极淡 drop-shadow；
     ② 墙面 #dbe3f0 灰蓝 + .055 颗粒 + 三盏高亮筒灯，整片读出来是「发灰发脏」，
        和全站白净的浅色底不是一套 → 墙提亮到 #eef3fa、颗粒和筒灯各降一半；
     ③ 每块板四角四颗 5.5px 金属螺钉，等于在界面里插了四个五金件
        → 全部删除；
     ④ 板的四档重投影 + 板下沿 3px 切面厚度，让每块板边缘发浑、浮得过高
        → 收成「1px 内描边 + 一层接触影 + 一层远影」，圆角从 2px 回到全站的 12px。

   v11（「我还是要拟物质感」的回补）：v10 把拟物一次性删干净了，剩下一片扁平浅蓝。
   用户要的从来不是扁平，是拟物 —— 只是不要 WordArt 立体字和金属螺钉那种
   「往界面里塞一件五金件」的拟物。这一版把它换成材质拟物，全部落在材质与光上：
     ① 墙：色压回半档到 #e7edf7，颗粒回到 .036，再加一层 3px 周期的横向拉丝
        （清水混凝土 / 铝板的肌理）。墙要摸得出材质，但不能发脏；
     ② 标题：金属浮雕字 —— 深蓝竖向渐变填充 + 上沿 1px 亮边 + 下沿 1px 暗边
        + 一层落在墙面上的柔影。三层 drop-shadow 就够，不再堆 8 层字厚；
     ③ 展板：磨砂亚克力板 —— 半透明白 + backdrop-filter 毛玻璃，
        墙的拉丝与颗粒会隐隐透过板面，这是「板是一层材料」最真的信号；
        板厚只留上亮下暗各 1px（不是 3px 大切面），四角不放钉；
     ④ 科技 / AI 细节：板顶压条右端一颗发光点、右下角一片淡点阵、
        hover 时一道斜向光扫过板面并上浮 2px。

   v12（「重新给我整体设计」）：v11 的材质方向没错，垮在结构和几处过头的装饰上：
     ① 四张各自独立的板 = 四张卡片，而卡片是这个站一直在避的东西。
        更要命的是排布：三块短的在上排、使命独占下排，
        于是编号在屏上读出来是 01 02 04 / 03，像漏了一格；
     ② 每块板都铺了一层 10px 点阵，四块板一起铺就是四片网点纸，发脏；
     ③ 墙上那层 3px 周期的横向拉丝，在 1× 屏上直接渲染成一片密横条纹
        （摩尔纹 / 扫描线），不是材质是噪音；
     ④ 70px 标题挂一层 20px 落影，又滑回 PPT 阴影那一路。
   这一版换成「一整块料」的结构 ——
     ① 四条内容不再是四张卡，而是一整块横向磨砂亚克力长板上铣出的四栏。
        分栏不用描边、不用底色，用一道刻槽：左侧 1px 暗 + 紧贴右侧 1px 亮，
        这是「同一块材料被切开一道口子」最省的表达，也是本区最实的拟物；
     ② 四栏从左到右就是 01 02 03 04，编号顺序自然对；
     ③ 点阵全删；墙上的拉丝换成 9px 周期的 135° 斜线、只留一条极淡亮线；
     ④ 标题收到 60px，落影从 20px 收到 12px，浮雕的两笔 1px 亮 / 暗边留着；
     ⑤ 科技 / AI 细节收敛成三处：板顶一条贯通压条（蓝→青）、压条右端一颗
        工作指示灯、每栏 hover 时栏底升起一层极淡蓝光 + 栏顶一条短线推开。

   v13（「艺术字效果不明显 / 图钉根本不像 / 合在一个卡片肯定不行」）：
     ① 结构退回多块，但排法换成 2×2。v12 把四条并进一整块长板，
        每栏只剩 270px，比拆开更闷；v11 的「三短一长」又让编号在屏上
        读成 01 02 04 / 03。2×2 之下 DOM 顺序就是屏上顺序，
        每块板还有约 600px 宽，使命那块的五条追求排三列只占两行；
     ② 那颗被当成「图钉」的指示灯整个删掉 —— 一颗孤零零的小圆点
        既不像灯也不像钉，只会让人去猜它是什么。
        器械感只留板顶一条压条（蓝 → 青），hover 时从左亮到右；
     ③ 标题改真正的立体艺术字：厚度层（6 层 1px 递进的冷灰蓝挤出）
        + 渐变正面 + 只留上半截的金属受光带，三层叠出来才看得见立体，
        v12 那三层 drop-shadow 在 1× 屏上几乎是平的；
     ④ 墙面底纹从「拉丝」彻底换成技术图纸网格 —— 拉丝无论 3px 还是 9px
        周期，1× 屏上一律渲染成一片条纹，周期再放大只是把条纹拉宽。

   v14（「艺术字能看得清吗，字体颜色是个啥 / 2×2 你看协调吗，
        使命本身内容很多到底该如何排版」）：
     ① 立体字整个反过来配色。v13 三层一起把字泡白了：正面渐变 42% 以上
        都是中浅蓝、受光带又盖住上半截、连厚度层的侧面都比墙更亮
        （#b9c9e4 亮于墙面 #e7edf7 的暗部），于是一整块字浮在浅墙上没有一处深色
        可以立住。v14 定死一条：正面必须是深墨蓝（#1d4796 → #071733），
        侧面必须比墙暗（#93a9cd → #7088b4）—— 深字、中调侧面、浅墙，
        三档由深到浅才读得出「凸起」；受光带从「上半截」收到「字顶 28%」，
        只当一道金属反光，不参与识别；
     ② badge 与 h2 都是 inline-block，实拍里「Since 2016」直接贴在
        「文化使命」左边挤成一行 —— badge 改 display:table 强制独占一行；
     ③ 2×2 均分作废。四条内容的体量差了一个数量级：定位 / 愿景 / 文化理念
        各只有一句话，使命是「一句引题 + 五条并列追求」。均分格子等于
        逼一句话的板去撑满使命那块的高度，上排两块空、下排一块挤一块更空。
        v14 按体量给版位：上排 01 02 两块短板并排，中间 03 使命通栏（五条
        一行排开，本区的主板），底部 04 文化理念通栏矮条做成横排题词。
        DOM 顺序仍然等于屏上顺序，编号 01 02 / 03 / 04 照旧不乱。 */
/* v19。v18 拿参照图照抄了「深色水泥墙」，用户当场否掉三件事：
     ① 「整个大背景你用这个深色肯定不行」
        —— 参照图那面墙确实是深灰水泥，但那是一张 1:1 的实景照片，
        墙面只占画面、四周还有环境。放进网页里，上面是深蓝 banner、
        下面是纯黑胶片区，中间再插一段深灰，整条页面就成了三段黑。
        这一版把墙改成浅灰水泥：质感（颗粒 / 竖向色差 / 筒灯洗墙 / 四周压暗）
        一样不少，只是把明度整体提上来，回到全站的浅色调里。
        牌子照样立得住 —— 因为立起来靠的不是「深墙白牌」，
        而是牌子左边那枚实彩色题头块：彩色对浅灰的对比比白对浅灰强得多。
     ② 「整的华丽呼哨」—— v18 在墙上堆了灯带光管、青蓝踢脚缝、蓝青双色
        环境光、九支渐变题头 + 每支再加 inset 高光。全部删掉：
        墙只留水泥本身 + 三盏筒灯，题头改实色，厚度层从 4 层收到 2 层。
     ③ 「内容又非常拥挤」—— gap 从 24/22 拉到 40/26，牌子内边距加大，
        并让牌宽逐块不等（见 .ab-mission-item 的 nth-child margin），
        参照图上的牌子本来就是大小不一、随手贴上去的，不是一张网格表。 */
/* 现行版本 = 回退到 V16 那一版（标题在上方整行，定位 / 愿景 / 理念 一行三格，
   使命独占一整行，五条追求一行五格）。V16 之后那几版的做法全部作废：
     ① 标题的白色底托（text-stroke 描一圈白料）+ 逐字歪斜错位 —— 白料在浅墙上
        与墙糊成一片，歪斜又把标题做成手作招牌。改回 V16 的三层立体艺术字：
        深墨蓝字面 + 右下递进的深色侧面 + 上半截白色受光带。
     ② 12 栏网格自由摆位 + 九块独立白牌 + 九支杂色题头 —— 白底板加圆角加投影
        必然被读成网页卡片，九支色又杂。改回 V16 的整墙开格：
        格与格之间只有 1px 雕刻缝，格面淡白半透，墙的网格与颗粒从底下透出来；
        题头色统一锁在品牌蓝 → 青这一条色带上。
     ③ 墙面在 V16 的浅灰水泥基础上加回 80px 正交网格 —— 半透的格面必须有东西
        可透，否则格子看起来还是一块块白板。
   墙面明度不动：上面是深蓝 ab-banner、下面是纯黑胶片区，这一段必须是浅的
   （深墙那版已经翻过一次），但也不能提到近白（近白那版什么都立不起来）。 */
.ab-mission {
    position: relative;
    overflow: hidden;
    padding: 96px 0 104px;
    background-color: #cfd3d9;
    background-image:
        /* 水泥拉毛颗粒：浅面上颗粒要收，给多了就是一层脏 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23w)' opacity='.075'/%3E%3C/svg%3E"),
        /* 80px 正交网格：墙面的分格线。它的作用不只是纹理 ——
           下面每一格的格面是淡白半透（.34/.2）+ 2px 模糊，网格会从格面底下
           透上来。透得出来，格子才读成「墙上开的格」；透不出来就又是白卡片。
           线色压到 .07：再深一档就成了技术图纸，不是水泥墙 */
        linear-gradient(0deg, rgba(58, 74, 102, .07) 1px, rgba(58, 74, 102, 0) 1px),
        linear-gradient(90deg, rgba(58, 74, 102, .07) 1px, rgba(58, 74, 102, 0) 1px),
        /* 墙顶三盏筒灯往下洗出的三段弧光（参照图顶部那三道扇形亮斑）。
           墙落到中间调之后洗墙光才有意义 —— v19 的墙本来就快是白的，
           再打 .92 的白光等于什么也没发生 */
        radial-gradient(31% 48% at 21% -7%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(27% 42% at 50% -9%, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, 0) 76%),
        radial-gradient(27% 42% at 79% -9%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 76%),
        /* 四周压暗：中间亮、边角暗，墙才有转角而不是一块底色 */
        radial-gradient(118% 84% at 50% 34%, rgba(62, 70, 84, 0) 38%, rgba(62, 70, 84, .3) 100%),
        /* 水泥竖向色差 */
        linear-gradient(180deg, #dcdfe4 0%, #cfd3d9 46%, #c0c4cb 100%);
    /* 层序与上面 background-image 一一对应：颗粒 / 网格横 / 网格竖 / 三盏灯 / 压暗 / 色差 */
    background-size: auto, 80px 80px, 80px 80px, auto, auto, auto, auto, auto;
}

/* 天花阴影：墙顶那道由上往下淡出的暗带。上面紧挨着深蓝 ab-banner，
   有这道阴影，两段的交界读起来是「墙和天花的转角」，而不是两块色块拼缝 */
.ab-mission::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(58, 66, 80, .3) 0%, rgba(58, 66, 80, 0) 100%);
}

/* 墙裙：底部压深，给下方纯黑的胶片区做一段过渡。
   v18 那条青蓝踢脚灯缝已删 —— 就是「华丽呼哨」的来源之一 */
.ab-mission::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(74, 82, 96, 0) 0%, rgba(74, 82, 96, .3) 100%);
}

.ab-mission>.wrap {
    max-width: none;
    padding: 0;
}

/* 版位 v21：上下布局 —— 标题占上方整行，墙面开格在下。
   左右分栏（左标题定宽 + 右牌区）作废：标题被挤在 300px 里，
   大字只能竖着摞，右边又剩一大片空墙摆不平。
   改成标题占满上方一行，下面整面墙按内容体量开格。 */
.ab-mission-wall {
    display: block;
    margin: 0 max(24px, calc((100vw - var(--maxw)) / 2));
    position: relative;
    z-index: 1;
}

/* 标题区：左边立体大字 + 英文年份，右边口号与引言靠右收边，
   两边落在同一条底线上。底下那道缝是「上白下暗」两条 1px，
   是墙面上刻出来的一道线，不是网页里的分隔线 */
.ab-mission-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 28px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 1px 0 rgba(46, 54, 68, .18);
}

.ab-mission-hd {
    display: flex;
    align-items: flex-end;
    gap: 26px;
}

/* 四个字横排一行，字距 2px。规整排一行，不再逐字歪斜错位 ——
   错位那套是后来加的，一歪就成了手作招牌；文化墙的标题是端正上墙的 */
.ab-mission-art {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2px;
}

/* 立体艺术字三层结构（第一层：正面）。
   正面走竖向渐变，上浅下深，颜色锁在品牌蓝 → 深墨蓝这条带子上 ——
   白色底托那套（text-stroke 描一圈白料）作废：白料在浅墙上和墙糊成一片，
   字反而更看不清。改回「深色字面 + 深色侧面 + 白色高光」，
   深字压在浅墙上，辨识度才立得住。
   z-index 0 立层叠上下文，厚度层的 -1 才只沉到字面之下 */
.ab-mission-art i {
    position: relative;
    z-index: 0;
    display: block;
    font-style: normal;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    color: transparent;
    background: linear-gradient(180deg, #3d86ea 0%, #1257e0 42%, #12305f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 第二层：厚度（字的侧面）。同一个字往右下递进 6 层，一层比一层深，
   露在字面外那一条就是料厚；末层一道大模糊是整块料落在墙上的影。
   每层只挪 1px：挪大了六层就散成六个字。
   -webkit-text-fill-color 会从 i 继承成 transparent，这里必须显式改回来 */
.ab-mission-art i::before {
    content: attr(data-t);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    color: #0f2748;
    -webkit-text-fill-color: #0f2748;
    text-shadow:
        1px 1px 0 #143560,
        2px 2px 0 #123057,
        3px 3px 0 #102a4d,
        4px 4px 0 #0e2543,
        5px 5px 0 #0c2039,
        6px 6px 0 #0a1b30,
        11px 15px 16px rgba(20, 32, 52, .3);
}

/* 第三层：受光带。一道白色渐变只盖字的上半截，往下淡出到透明。
   立体感是靠这道高光才立住的 —— 少了它，字面只是一块渐变色。
   压在字面之上（z-index 1），同样用 background-clip:text 裁进字形里 */
.ab-mission-art i::after {
    content: attr(data-t);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    color: transparent;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .74) 0%,
            rgba(255, 255, 255, .2) 40%,
            rgba(255, 255, 255, 0) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 英文与年份：竖着摆在大字右侧，跟大字底线对齐 */
.ab-mission-en {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 8px;
}

/* CORPORATE / CULTURE 上下两行横排，直接印在墙上的深色字，不是牌子。
   标题上了上方整行，竖排英文就不合用了 —— 竖文字会把整个标题区抽高 */
.ab-mission-vt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 0;
}

.ab-mission-vt span {
    writing-mode: horizontal-tb;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3em;
    color: #4d5665;
}

/* Since 2016：钉在水泥墙上的一枚小铭牌。墙回浅色后影要收（原本 .5 的黑影
   在浅灰墙上是一坨脏），只留 1px 料厚 + 一层淡影 */
.ab-mission-badge {
    display: table;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #16407e;
    background: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0;
    box-shadow:
        1px 2px 0 #d3d8e0,
        4px 7px 12px -5px rgba(58, 68, 84, .3);
}

/* v14–v17 那套 h2 浮雕字（.ab-mission-wall-left h2 / h2::before）与
   .ab-mission-entit 已随 DOM 一起删除：标题现在是四块独立的立体切割字
   （.ab-mission-art），英文小标改成竖排小牌（.ab-mission-vt），
   都在上面，不再需要一个横排大标题。 */

/* 右半边：两句口号 + 一段引言，靠右收边。
   竖线换到右沿 —— 文字靠右时线要跟字的起笔侧在一起，
   它是墙面丝印的做法，不是分隔线 */
.ab-mission-lead {
    flex: 0 1 auto;
    text-align: right;
    padding-bottom: 6px;
}

.ab-mission-slogan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin: 0 0 12px;
    padding: 0 13px 0 0;
    border-left: 0;
    border-right: 2px solid rgba(18, 87, 224, .42);
}

.ab-mission-slogan span {
    font-size: 19px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: .08em;
}

/* 墙落到中间调，说明文字从 --ink-3 提到 --ink-2：#8a94a6 一类的浅灰
   放到 #cfd3d9 的墙上已经快读不出来了。靠右收边，宽度封到 400px
   —— 不封就会被拉成整行长句，跟标题抢分量 */
.ab-mission-desc {
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink-2);
    margin: 0 0 0 auto;
    max-width: 400px;
}

/* 内容区 v21：整面墙按行开格，不再是一堆独立牌子摆位。

   一格 = 一块墙面，格与格之间只有一道 1px 雕刻缝（左上白、右下暗），
   格面自身是淡白半透 + 2px 模糊，墙的颗粒、网格与灯晕会从格面底下透出来。
   这是它读起来是「墙上开的格」而不是「网页卡片」的全部原因：
   没有圆角、没有投影、没有独立白底板、格与格之间也没有留白。

   行的划分按内容体量走：定位 / 愿景 / 理念 三格一行，
   使命是主句独占整行，五条追求体量最轻、一行五格。 */
.ab-mission-rows {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* 行内开格。gap 给 0 —— 缝是画出来的 1px 刻线，不是留白；
   一留白就又回到一堆牌子摆在墙上了 */
.ab-mission-row {
    display: grid;
    gap: 0;
}

.ab-mission-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-mission-row-1 {
    grid-template-columns: minmax(0, 1fr);
}

.ab-mission-row-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 一格墙面。inset 两道：左上一道白、右下一道暗，
   四边都有，格子拼起来缝就连成整面墙的刻线 */
.ab-mission-item {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 26px 28px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, .62),
        inset -1px -1px 0 rgba(46, 54, 68, .17);
    transition: background .36s ease;
}

/* hover 只把格面提一点亮。不动位置、不动影 —— 墙上的格不会浮起来 */
.ab-mission-item:hover {
    background: rgba(255, 255, 255, .44);
}

/* 格顶压条：一道品牌蓝 → 青的短金属条，压在格子的左上角起笔处。
   真实文化墙上的展板都是靠一条压条固定在墙面上的，这道条就是那个物件。
   只给 3px 高、64px 宽 —— 通宽拉满就成了网页里的顶栏色带 */
.ab-mission-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #1257e0 0%, #0f93aa 100%);
}

/* 丝印编号：印在格子右上角的小号数字，压得很淡（.28），
   是墙面上的丝印，不是需要被读的信息 */
.ab-mission-no {
    position: absolute;
    right: 15px;
    top: 12px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    color: rgba(18, 48, 95, .28);
}

/* 使命那一格是这面墙的主句：格面提一档亮、内距放宽、文案给到 20px。
   它独占整行，只有一句话，不提就读不出主次 */
.ab-mission-row-1 .ab-mission-item {
    padding: 30px 28px;
    background: rgba(255, 255, 255, .46);
}

.ab-mission-row-1 .ab-mission-item:hover {
    background: rgba(255, 255, 255, .54);
}

.ab-mission-row-1 .ab-mission-body p {
    font-size: 20px;
    letter-spacing: .04em;
}

/* 五条追求：一格只占五分之一宽，题头与文案横排会把两行文案挤成四行，
   所以改上下排，格子也矮一档。格面再透一档到 .2 —— 这五格是配角，
   透得更多，墙的网格与颗粒就更明显，跟上面三格与使命格分出层次；
   压条也去掉，五枚压条一排会把这行做成一条彩带 */
.ab-mission-row-5 .ab-mission-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 22px;
    background: rgba(255, 255, 255, .2);
}

.ab-mission-row-5 .ab-mission-item:hover {
    background: rgba(255, 255, 255, .3);
}

.ab-mission-row-5 .ab-mission-item::before {
    display: none;
}

/* 题头方块：墙上一枚实色亚克力小块，只在右下露一道料厚 */
.ab-mission-plate {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 2px;
    background: #1257e0;
    box-shadow: 1px 2px 0 rgba(11, 23, 41, .16);
}

.ab-mission-plate h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
}

/* 题头色走品牌蓝 → 青这一条色带：颜色可以多，但必须在同一条带子上。
   九支蓝青绿墨橙琥珀红紫各一色那种做法，在一面墙上就是杂。
   三格主张由深墨蓝渐次到青，使命取品牌蓝本色，五条追求统一压到墨蓝 */
.ab-mission-row-3 .ab-mission-item:nth-child(1) .ab-mission-plate {
    background: #12305f;
}

.ab-mission-row-3 .ab-mission-item:nth-child(2) .ab-mission-plate {
    background: #1257e0;
}

.ab-mission-row-3 .ab-mission-item:nth-child(3) .ab-mission-plate {
    background: #0f93aa;
}

.ab-mission-row-1 .ab-mission-plate {
    background: #1257e0;
}

.ab-mission-row-5 .ab-mission-plate {
    width: 44px;
    height: 44px;
    background: #2a4364;
}

.ab-mission-row-5 .ab-mission-plate h3 {
    font-size: 15px;
}

/* 文案区：它不需要自己的底、边与影 —— 那些属于整块牌子，
   这也是它不会被读成「卡片里再嵌一张卡片」的原因 */
.ab-mission-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* v17 那套旧规则已随 DOM 删尽：
   · .ab-mission-list / li / li::before —— 「使命」下面那五条并列追求
     不再是一块大牌里的列表，而是各自独立成牌（创新/品质/服务/卓越/责任），
     牌子从 4 块变 9 块，错落摆开才是文化墙，也一并解掉了历史上那个「空旷」；
   · nth-child(-n+3) / (3) / (4) 三套版位规则 —— 不再有「使命通栏」这回事，
     九块牌同规格，区别只在题头颜色与错落位置。 */

/* 牌上文案：两行，断行由 HTML 里的 <br> 控，不交给浏览器自由换行
   （用户一直强调「每一方的这段文字不要换行」）。
   牌面是白的，字回到 --ink 一系，与全站正文同色 */
.ab-mission-item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    font-weight: 600;
    margin: 0;
    text-align: left;
    letter-spacing: .02em;
}

/* 中屏：立体字降到 62px，厚度层从 6 层收到 5 层
   （字小了还给 6 层侧面，笔画之间会被侧面填死）；
   标题区两边的间距收紧，引言宽度跟着收。
   下方开格的行结构不变，只把内距与字号收一档 */
@media (max-width: 1180px) {
    .ab-mission-top {
        gap: 32px;
        padding-bottom: 24px;
        margin-bottom: 28px;
    }

    .ab-mission-hd {
        gap: 20px;
    }

    .ab-mission-art i {
        font-size: 62px;
    }

    .ab-mission-art i::before {
        text-shadow:
            1px 1px 0 #143560,
            2px 2px 0 #123057,
            3px 3px 0 #102a4d,
            4px 4px 0 #0e2543,
            5px 5px 0 #0c2039,
            9px 13px 14px rgba(20, 32, 52, .3);
    }

    .ab-mission-desc {
        max-width: 330px;
    }

    .ab-mission-item {
        padding: 22px;
        gap: 14px;
    }

    .ab-mission-row-1 .ab-mission-item {
        padding: 26px 22px;
    }

    .ab-mission-row-1 .ab-mission-body p {
        font-size: 18.5px;
    }

    .ab-mission-row-5 .ab-mission-item {
        padding: 17px 16px 19px;
        gap: 10px;
    }

    .ab-mission-plate {
        width: 48px;
        height: 48px;
    }

    .ab-mission-plate h3 {
        font-size: 16px;
    }

    .ab-mission-row-5 .ab-mission-plate {
        width: 42px;
        height: 42px;
    }

    .ab-mission-item p {
        font-size: 14.5px;
    }
}

/* 窄屏：标题区上下堆，三格与五格都塌成单列。
   刻缝仍然连着，所以视觉上还是一整面墙从上往下开格 */
@media (max-width: 900px) {
    .ab-mission {
        padding: 56px 0 66px;
    }

    .ab-mission-wall {
        margin: 0 16px;
    }

    /* 墙没那么高了，天花阴影和墙裙都要按比例收，否则窄屏上这两道
       会把中间可用的墙面吃掉一半 */
    .ab-mission::before {
        height: 60px;
    }

    .ab-mission::after {
        height: 56px;
    }

    .ab-mission-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding-bottom: 22px;
        margin-bottom: 24px;
    }

    .ab-mission-hd {
        gap: 16px;
    }

    /* 46px 的字只能配三层侧面：再往右下挤，侧面就宽得把笔画糊成一团 */
    .ab-mission-art i {
        font-size: 46px;
    }

    .ab-mission-art i::before {
        text-shadow:
            1px 1px 0 #143560,
            2px 2px 0 #123057,
            3px 3px 0 #102a4d,
            7px 10px 11px rgba(20, 32, 52, .3);
    }

    .ab-mission-vt span {
        font-size: 11px;
        letter-spacing: .16em;
    }

    /* 标题区堆成上下之后，引言不再靠右 —— 单列里靠右读起来是断的，
       竖线也跟着换回左沿 */
    .ab-mission-lead {
        text-align: left;
        padding-bottom: 0;
    }

    .ab-mission-slogan {
        align-items: flex-start;
        padding: 0 0 0 13px;
        border-right: 0;
        border-left: 2px solid rgba(18, 87, 224, .42);
    }

    .ab-mission-slogan span {
        font-size: 17px;
    }

    .ab-mission-desc {
        max-width: none;
        margin: 0;
    }

    /* 三格与五格全塌成单列；五条追求不再上下排，
       单列宽度够，横排才不会把每格抽得过高 */
    .ab-mission-row-3,
    .ab-mission-row-5 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-mission-item {
        min-height: 0;
        padding: 16px;
        gap: 13px;
    }

    .ab-mission-row-1 .ab-mission-item {
        padding: 18px 16px;
    }

    .ab-mission-row-1 .ab-mission-body p {
        font-size: 16.5px;
    }

    .ab-mission-row-5 .ab-mission-item {
        flex-direction: row;
        align-items: center;
        gap: 13px;
        padding: 16px;
    }

    .ab-mission-plate {
        width: 46px;
        height: 46px;
    }

    .ab-mission-plate h3 {
        font-size: 15px;
    }

    .ab-mission-row-5 .ab-mission-plate {
        width: 46px;
        height: 46px;
    }

    .ab-mission-item p {
        font-size: 14px;
    }
}

/* 发展历程时间轴 */
/* 发展历程时间轴 - 阶梯攻登布局 */
/* ============ 发展历程 - 老电影胶片风格 ============ */
.ab-timeline {
    background: #0a0a0a;
    padding: 72px 0 48px;
    overflow: hidden;
    position: relative;
}

/* 顶部接色层。上方标语横幅（.ab-banner）收尾是带蓝的 #0a1020，
   本区是中性黑 #0a0a0a，两者亮度接近但色相不同 —— 直接相邻就会在
   分界处看到一道脏的横向硬边。这里把蓝调接过边界（顶端完全等于横幅末色），
   再在 130px 内淡入黑底。过渡距离从 220px 收到 130px：拉得太长两区亮度差
   就没了，反而读不出是两个区；收短后上亮下暗的台阶能看出来，但仍不是硬切。
   z-index 给 0：胶片粒子遮罩是 1、内容是 2，不会被盖住 */
.ab-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 130px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #0a1020 0%, rgba(10, 16, 32, .5) 38%, rgba(10, 16, 32, 0) 100%);
}

/* 胶片粒子遮罩 */
.ab-film-grain {
    position: absolute;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    z-index: 1;
}

/* 标题区 */
.ab-film-header {
    text-align: center;
    margin-bottom: 44px;
    position: relative;
    z-index: 2;
}

.ab-film-en {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .5em;
    color: rgba(255,255,255,.35);
    margin-bottom: 14px;
    text-transform: uppercase;
    padding: 6px 20px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 2px;
}

.ab-film-title {
    font-size: 42px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    font-family: 'Georgia', 'Noto Serif SC', serif;
    letter-spacing: .08em;
    line-height: 1.3;
}

.ab-film-title strong {
    font-weight: 700;
    background: linear-gradient(90deg, #fff 0%, #c8a96a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ab-film-sub {
    display: block;
    font-size: 10px;
    letter-spacing: .35em;
    color: rgba(255,255,255,.25);
    margin-top: 14px;
}

/* 胶片带视口 - 全宽滚动区 */
.ab-film-viewport {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    padding: 0 0;
}

/* 中央投影幕布 - 年代感花边设计 */
.ab-film-viewport::before {
    content: '';
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    z-index: 0;
    border-radius: 4px;
    background: #faf8f4;
    border: none;
    /* 多层边框模拟复古相框 */
    box-shadow:
        inset 0 0 0 8px #faf8f4,
        inset 0 0 0 10px rgba(180,150,90,.3),
        inset 0 0 0 14px rgba(180,150,90,.08),
        inset 0 0 0 16px rgba(180,150,90,.25),
        0 0 0 2px rgba(140,120,70,.4),
        0 0 0 5px #2a2418,
        0 0 0 7px rgba(180,150,90,.3),
        0 8px 40px rgba(0,0,0,.5);
    /* 幕布纹理背景 */
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(200,180,140,.03) 3px,
            rgba(200,180,140,.03) 4px
        ),
        radial-gradient(ellipse at 50% 0%, rgba(200,180,130,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(200,180,130,.05) 0%, transparent 50%);
    background-color: #faf8f4;
}

/* 幕布左右穿梭立体效果 */
.ab-film-viewport::after {
    content: '';
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(248,245,240,1) 0%,
            rgba(250,248,244,.75) 3%,
            rgba(250,248,244,.3) 7%,
            transparent 15%),
        linear-gradient(-90deg,
            rgba(248,245,240,1) 0%,
            rgba(250,248,244,.75) 3%,
            rgba(250,248,244,.3) 7%,
            transparent 15%);
}

/* 幕布装饰花边 */
.ab-film-border-decor {
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    z-index: 9;
    pointer-events: none;
    border-radius: 4px;
}

/* 四角花饰 */
.ab-fb-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(200,170,90,.6);
    border-style: solid;
}

.ab-fb-corner::before,
.ab-fb-corner::after {
    content: '';
    position: absolute;
    background: rgba(200,170,90,.5);
}

.ab-fb-tl {
    top: 8px; left: 8px;
    border-width: 2px 0 0 2px;
    border-radius: 4px 0 0 0;
}
.ab-fb-tl::before { top: 8px; left: -1px; width: 2px; height: 16px; background: rgba(200,170,90,.35); }
.ab-fb-tl::after { top: -1px; left: 8px; width: 16px; height: 2px; background: rgba(200,170,90,.35); }

.ab-fb-tr {
    top: 8px; right: 8px;
    border-width: 2px 2px 0 0;
    border-radius: 0 4px 0 0;
}
.ab-fb-tr::before { top: 8px; right: -1px; width: 2px; height: 16px; background: rgba(200,170,90,.35); }
.ab-fb-tr::after { top: -1px; right: 8px; width: 16px; height: 2px; background: rgba(200,170,90,.35); }

.ab-fb-bl {
    bottom: 8px; left: 8px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 4px;
}
.ab-fb-bl::before { bottom: 8px; left: -1px; width: 2px; height: 16px; background: rgba(200,170,90,.35); }
.ab-fb-bl::after { bottom: -1px; left: 8px; width: 16px; height: 2px; background: rgba(200,170,90,.35); }

.ab-fb-br {
    bottom: 8px; right: 8px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 4px 0;
}
.ab-fb-br::before { bottom: 8px; right: -1px; width: 2px; height: 16px; background: rgba(200,170,90,.35); }
.ab-fb-br::after { bottom: -1px; right: 8px; width: 16px; height: 2px; background: rgba(200,170,90,.35); }

/* 上下花边线 */
.ab-fb-edge {
    position: absolute;
    left: 60px;
    right: 60px;
    height: 2px;
    background:
        repeating-linear-gradient(90deg,
            rgba(200,170,90,.45) 0px,
            rgba(200,170,90,.45) 8px,
            transparent 8px,
            transparent 12px,
            rgba(200,170,90,.25) 12px,
            rgba(200,170,90,.25) 14px,
            transparent 14px,
            transparent 20px
        );
}

.ab-fb-top { top: 6px; }
.ab-fb-bot { bottom: 6px; }

/* 穿孔 */
.ab-film-perf {
    height: 22px;
    background: #0a0a0a;
    position: relative;
    z-index: 7;
}

.ab-film-perf::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.1) 0px,
        rgba(255,255,255,.1) 14px,
        transparent 14px,
        transparent 24px
    );
}

.ab-film-perf-top {
    border-radius: 0;
}

.ab-film-perf-bot {
    border-radius: 0;
}

/* 滚动胶片带 */
.ab-film-strip {
    display: flex;
    gap: 20px;
    animation: filmScroll 50s linear infinite;
    width: max-content;
    padding: 16px 0;
    position: relative;
    z-index: 2;
}

.ab-film-strip:hover {
    animation-play-state: paused;
}

@keyframes filmScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 单帧 */
.ab-film-frame {
    flex-shrink: 0;
    width: 300px;
    padding: 40px 30px 36px;
    background: linear-gradient(165deg, rgba(32,30,26,.96) 0%, rgba(22,20,18,.98) 100%);
    border: 1px solid rgba(200,169,106,.12);
    border-radius: 10px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 4px 16px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* 年份 - 大号衬线体 */
.ab-film-year {
    display: block;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 46px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.02em;
    position: relative;
}

.ab-film-year::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,.2);
    margin-top: 12px;
    border-radius: 1px;
}

/* 事件标题 */
.ab-film-frame h3 {
    font-size: 15px;
    font-weight: 600;
    color: #c8a96a;
    margin: 0 0 10px;
    letter-spacing: .02em;
    padding-top: 12px;
    line-height: 1.4;
}

/* 事件描述 */
.ab-film-frame p {
    font-size: 13.5px;
    line-height: 1.85;
    color: rgba(255,255,255,.88);
    margin: 0;
    flex: 1;
}

/* 当前年份帧 */
.ab-film-frame-now {
    background: rgba(28,26,20,.95);
    border-color: rgba(200,169,106,.3);
}

.ab-film-frame-now .ab-film-year {
    color: #c8a96a;
}

.ab-film-frame-now .ab-film-year::after {
    background: #c8a96a;
}

.ab-film-frame-now h3 {
    color: #dbb96a;
}

/* 控制提示 */
.ab-film-hint {
    text-align: center;
    margin-top: 28px;
    font-size: 10px;
    letter-spacing: .3em;
    color: rgba(255,255,255,.3);
    position: relative;
    z-index: 2;
}

/* 清除旧样式 */
.ab-tl-mountains,
.ab-tl-waves,
.ab-tl-slogan,
.ab-tl-header,
.ab-tl-bird,
.ab-tl-flag,
.ab-tl-track,
.ab-tl-river,
.ab-tl-runner,
.ab-tl-grid,
.ab-tl-node {
    display: none;
}


/* 底部标语横幅：收尾的深色带。原先的 #0b1a36 是另一支蓝，
   与顶部 Hero 的深空渐变不同族，一页两种深蓝就是配色奇怪。
   这里改成与 Hero 同一谱系的渐变，首尾两段深色带成为同一个场景 */
/* 底部标语横幅：收尾的深色带。它紧贴在全站 footer 上方，
   先前用的 #0b1228→#050813 是只在本页出现的第三支深蓝，
   与 footer 的 #070c18→#0a1020→#05070d 差一个色温，两段接在一起就是一道脏接缝。
   这里直接对齐全站 footer 的深色谱系，标语带与页脚连成一体 */
/* 收尾色必须和下方发展历程区的顶部接色层对上（都是 #0a1020），
   否则两区交界处会出一道硬边。中段亮蓝的位置也往上提了，
   原来 55% 才到亮处、接着短距掉到近黑，下半截压得太深。
   注意：去硬边不等于去分界 —— 分界改由下面那道发光细线明确标出来 */
.ab-banner {
    position: relative;
    background: linear-gradient(180deg, #060b16 0%, #0a1020 34%, #0c1530 62%, #0a1020 100%);
    padding: 56px 0;
    text-align: center;
    border-top: 0;
}

/* 区段分界线。中间亮、两端淡出，并叠一层很矮的向上蓝光，
   看起来是「两区之间的分界」而不是「两块背景没对上色」。
   之前只把两区颜色接平，结果分界也一并消失了 —— 过渡要顺，分界要看得见 */
.ab-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 3;
    background: linear-gradient(90deg, rgba(110, 185, 255, 0) 0%, rgba(110, 185, 255, .42) 20%, rgba(196, 228, 255, .88) 50%, rgba(110, 185, 255, .42) 80%, rgba(110, 185, 255, 0) 100%);
    box-shadow: 0 -9px 22px -5px rgba(70, 140, 230, .58);
}

/* 分界线中心的菱形节点。全站分隔处都是这颗菱形，
   有了它，一眼就知道上下是两个区 */
.ab-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3.5px;
    width: 7px;
    height: 7px;
    z-index: 4;
    transform: translateX(-50%) rotate(45deg);
    background: #7fc9ee;
    box-shadow: 0 0 12px rgba(127, 201, 238, .95);
}

.ab-banner-txt {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(96deg, #7fb2ff 0%, #e0ecff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .04em;
}

/* ---------- 步骤流 ---------- */
.steps {
    counter-reset: st;
}

.step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.step:first-child {
    border-top: 1px solid var(--line);
}

.step-no {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--brand-100);
    background: var(--brand-050);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 15px;
}

/* ---------- 表格（服务矩阵 / 对比） ---------- */
.tbl-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

table.tbl th,
table.tbl td {
    text-align: left;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: top;
}

table.tbl thead th {
    background: var(--bg-soft);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

table.tbl tbody tr:last-child td {
    border-bottom: 0;
}

table.tbl tbody tr:hover {
    background: #fafbfe;
}

table.tbl td.k {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

table.tbl td.m {
    color: var(--ink-3);
}

/* ---------- 时间轴 ---------- */
.tl {
    position: relative;
    padding-left: 28px;
}

.tl::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
}

.tl-item {
    position: relative;
    padding-bottom: 34px;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-item::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
}

.tl-year {
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .02em;
}

.tl-item h4 {
    margin-top: 4px;
    font-size: 17px;
}

.tl-item p {
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 15px;
}

/* ---------- 使命/愿景 ---------- */
.mvv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.mvv>div {
    padding: 34px 30px;
    border-right: 1px solid var(--line-2);
}

.mvv>div:last-child {
    border-right: 0;
}

.mvv h4 {
    margin-top: 18px;
    font-size: 19px;
}

.mvv p {
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 15px;
}

.mvv .en-sub {
    margin-top: 10px;
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--ink-4);
    line-height: 1.6;
}

/* ---------- 案例（国际化） ---------- */
.case {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.case:first-child {
    border-top: 1px solid var(--line);
}

.case-side .tag {
    margin-bottom: 10px;
}

.case-side b {
    display: block;
    font-size: 16px;
    color: var(--ink);
}

.case-side span {
    font-size: 13px;
    color: var(--ink-4);
}

.case-flow {
    display: grid;
    gap: 12px;
}

.case-step {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-left: 2px solid var(--brand-100);
    border-radius: 0 6px 6px 0;
}

.case-step b {
    font-family: var(--font-en);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
}

.case-step p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.8;
}

/* ---------- 地区标签云 ---------- */
.regions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.regions span {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ink-3);
    background: #fff;
}

/* ---------- 折叠面板 ---------- */
.acc-item {
    border-bottom: 1px solid var(--line);
}

.acc-item:first-child {
    border-top: 1px solid var(--line);
}

.acc-hd {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.acc-hd svg {
    width: 18px;
    height: 18px;
    color: var(--ink-4);
    flex: none;
    transition: transform .2s ease;
}

.acc-item.on .acc-hd svg {
    transform: rotate(180deg);
    color: var(--brand);
}

.acc-bd {
    display: none;
    padding: 0 4px 24px;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1.85;
}

.acc-item.on .acc-bd {
    display: block;
}

/* ---------- 双栏图文 ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.split.reverse .split-media {
    order: -1;
}

.media-frame {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-soft);
    padding: 22px;
}

/* ---------- 招聘 ---------- */
.job {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 140px 120px;
    gap: 20px;
    align-items: center;
    padding: 20px 4px;
    border-bottom: 1px solid var(--line);
}

.job:first-of-type {
    border-top: 1px solid var(--line);
}

.job b {
    font-size: 16px;
    color: var(--ink);
}

.job span {
    font-size: 14px;
    color: var(--ink-3);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1280px) {
    .h-display {
        font-size: 44px;
    }

    .side-dock {
        display: none;
    }
}

@media (max-width: 1024px) {
    .hero {
        padding: 56px 0 0;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-sub {
        max-width: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat {
        padding: 24px 20px;
        border-bottom: 1px solid var(--line-2);
    }

    .stat:nth-child(2n) {
        border-right: 0;
    }

    .stat b {
        font-size: 32px;
    }

    .logowall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cw-claim {
        font-size: 22px;
    }

    .cw-claim b {
        font-size: 28px;
    }

    /* 窄屏：留言板改两列；交付清单改两列，业务色改成两色交替 */
    .vc-wall {
        columns: 2;
    }

    .dlv-item:nth-child(2n+1) {
        --c: 18, 87, 224;
    }

    .dlv-item:nth-child(2n) {
        --c: 13, 133, 143;
    }

    /* 窄屏：优势区仍是纵深牌堆（结构本身就是纵向叠的），只把出海案例两列并成一列 */
    .whx-cases {
        grid-template-columns: minmax(0, 1fr);
    }

    .dlv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plat-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 26px 0;
    }

    .plat-act {
        justify-content: flex-start;
    }

    .certs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tab-split,
    .split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .split.reverse .split-media {
        order: 0;
    }

    .mvv {
        grid-template-columns: 1fr;
    }

    .mvv>div {
        border-right: 0;
        border-bottom: 1px solid var(--line-2);
    }

    .case {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .job {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .page-hero {
        padding: 48px 0;
    }
}

@media (max-width: 680px) {
    .mock-kpis {
        grid-template-columns: 1fr;
    }

    .logowall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        /* 手机：留言板改单列，便签内边距收一点；交付清单也堆成单列 */
    .vc-wall {
        columns: 1;
    }

    .vc-card {
        padding: 24px 20px 18px;
    }

    .vc-say {
        font-size: 14.5px;
    }

    .whx-pics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* 手机上五张图组回到两列 */
    .whx-pics-23 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dlv {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .certs {
        grid-template-columns: 1fr;
    }

    .step,
    .case-step {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mock-row {
        grid-template-columns: minmax(0, 1fr) 60px;
    }

    .mock-row>*:nth-child(3) {
        display: none;
    }

    table.tbl th,
    table.tbl td {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ========================================================================
   关于洞悉 · 三版块（公司介绍 / 文化使命 / 加入洞悉）
   通透浅色科技面板，与全站浅色内容区一脉相承；科技感靠精致排版与克制交互体现
   ======================================================================== */
.ab-hd {
    max-width: 880px;
    margin-bottom: 44px;
}

.ab-hd .h2 {
    margin-top: 12px;
}

/* ---------- 文化使命：定位 / 愿景 双联 ---------- */
.ab-vp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ab-vp-card {
    position: relative;
    padding: 40px 40px 42px 44px;
    border: 1px solid rgba(18, 87, 224, .14);
    border-radius: 18px;
    background:
        radial-gradient(70% 80% at 92% 0%, rgba(90, 170, 255, .1), transparent 72%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    box-shadow: 0 20px 44px rgba(12, 30, 74, .08);
    overflow: hidden;
}

.ab-vp-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 30px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brand), #5aa0ff);
}

.ab-vp-k {
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--brand);
    font-weight: 600;
}

.ab-vp-tx {
    margin-top: 14px;
    font-size: 26px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
}

.ab-vp-tx em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(120deg, #1257e0 0%, #4b8bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 使命：清单 */
.ab-mis {
    padding: 34px 36px 30px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.ab-mis-hd {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-2);
}

.ab-mis-hd h3 {
    font-size: 20px;
    color: var(--ink);
}

.ab-mis-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.ab-mis-list li {
    padding: 24px 20px 6px 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

.ab-mis-list li span {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .06em;
}

/* 文化理念 */
.ab-phi {
    position: relative;
    padding: 44px 40px;
    border: 1px solid rgba(18, 87, 224, .14);
    border-radius: 18px;
    text-align: center;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(90, 170, 255, .09), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    box-shadow: 0 20px 44px rgba(12, 30, 74, .07);
}

.ab-phi-k {
    display: block;
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 22px;
}

.ab-phi-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 44px;
}

.ab-phi-w {
    position: relative;
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .08em;
}

.ab-phi-w+.ab-phi-w::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: rgba(18, 87, 224, .4);
}

/* ---------- 加入洞悉 ---------- */
.ab-join-sec {
    padding-top: 80px;
    padding-bottom: 80px;
}

.ab-join-hero {
    max-width: 840px;
    margin-bottom: 64px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ab-join-hero .eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--brand);
    padding: 6px 18px;
    border: 1px solid rgba(18,87,224,.15);
    border-radius: 999px;
    margin-bottom: 18px;
}

.ab-join-hero .h2 {
    margin-top: 12px;
    font-size: 36px;
    line-height: 1.4;
}

.ab-join-hero .lead {
    margin-top: 16px;
    font-size: 16px;
    color: var(--ink-3);
    line-height: 1.8;
}

/* ---- 维度1：工作在洞悉 - 双行滚动图片墙 ---- */
.ab-work {
    margin-bottom: 80px;
}

.ab-work-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.ab-work-hd h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.ab-work-wall {
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.ab-work-wall::before,
.ab-work-wall::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.ab-work-wall::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.ab-work-wall::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}

.ab-work-row {
    display: flex;
    width: max-content;
    gap: 14px;
    margin-bottom: 14px;
}

.ab-work-row-1 {
    animation: workScroll1 30s linear infinite;
}
.ab-work-row-2 {
    animation: workScroll2 35s linear infinite;
}

.ab-work-wall:hover .ab-work-row {
    animation-play-state: paused;
}

@keyframes workScroll1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes workScroll2 {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.ab-work-img {
    flex-shrink: 0;
    width: 280px;
    height: 180px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 70% at 30% 20%, rgba(120,168,255,.2), transparent 70%),
        linear-gradient(135deg, #e8f0fe 0%, #dce8fa 40%, #eaf2fd 100%);
    border: 1px solid rgba(18,87,224,.08);
    transition: transform .35s ease, box-shadow .35s ease;
    cursor: pointer;
}

.ab-work-img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 36px rgba(12,30,74,.15);
}

.ab-work-img::before {
    content: 'HoloX';
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(18,87,224,.18);
}

/* 装了真照片的格子：底纹与右下角的 HoloX 占位水印都不要，照片自己铺满。
   照片是按 280x180 的比例（14:9）预裁好的，cover 只是兜底，不会二次裁 */
.ab-work-img.is-img {
    background: none;
    border-color: rgba(18, 87, 224, .12);
}

.ab-work-img.is-img::before {
    content: none;
}

.ab-work-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- 章节头：安静的编辑式排版（左侧竖线锚点 + 中文标题 / 下方弱读英文） ---- */
.ab-sec-hd {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 56px;
    padding-bottom: 18px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(18, 87, 224, .12);
}

/* 标题在上、英文小标在下，左缘一根渐变细竖线统一对齐 */
.ab-sec-l {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    padding-left: 16px;
}

.ab-sec-l::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1257e0 0%, rgba(18, 87, 224, .18) 100%);
}

.ab-sec-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    color: rgba(12, 30, 74, .4);
    margin-top: 9px;
}

.ab-sec-tag i {
    display: none;
}

.ab-sec-l h3 {
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* 描述不换行，与标题同行右对齐 */
.ab-sec-desc {
    flex-shrink: 0;
    max-width: none;
    white-space: nowrap;
    text-align: right;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-3);
    padding-bottom: 4px;
}

/* ---- 维度2：成长在洞悉 ----
   第六版，按用户给的案例走：三列两行、每格上方一个视觉件、标题与描述居中。
   案例这个版式的好处是六项一眼可数、每项自带一个图形入口，
   不像第五版的清单行那样六条字上下挤在一起。
   前五版（面板切六格 / 独立细线卡 / Bento 跨列 / 双栏宽卡 / 贯通清单行）
   被否的共同原因是都在给六个方块加描边，所以这一版格子本体
   一条边、一点底色、一层投影都不给 —— 分列全靠留白，靠视觉件立层次。

   案例用的是彩色扁平插画。站里没有这套素材，药械警戒站上也不该出现卡通人物，
   改成纯 CSS 画的「全息投影台」，科技 + AI 的质感全落在这个件上：
     ① 外圈 36 格仪表刻度环（repeating-conic-gradient + 环形 mask 裁出 6px 圈）；
     ② 刻度环上叠一道约 1/3 圈的品牌蓝光弧 —— AI 正在处理时的那种进度环，
        hover 时转满一圈；
     ③ 中心一枚浅蓝玻璃圆面（径向高光 + 1px 内描边）托住符号；
     ④ 台下一片扁椭圆地面光，整个件读起来是悬浮的，不是贴在纸上的图标。
   hover：光弧转一圈 + 符号变实色 + 标题变蓝 + 标题下一条 40px 短线展开
   + 整格透一层径向蓝光（径向没有边界，所以不会读成卡片底色）。 */
.ab-grow {
    margin-bottom: 96px;
}

/* 三列两行。列间 44px、行间 58px 的大留白就是唯一的分隔手段。
   顶部保留一道刻度轴（1px 基线 + 一行 26px 等距短竖线）收住整组的起笔 */
.ab-perk {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 58px;
    padding-top: 12px;
    /* v7：顶部那条 1px 渐变细线加一行刻度已删。
       上方的区段头自己就带一条分隔细线，这里再来一条，
       屏上就是两根平行横线夹着一条空白，是多出来的一根线 */
}

/* 六格各给一支色。同一个蓝重复六遍，六项就只是「六段字」，
   区分不出来也记不住；但色不能杂 —— 取的是一条
   蓝 → 靛 → 青蓝 → 青绿 → 松绿 → 琥珀 的连续光谱，
   六支色的明度与饱和度都压在同一档，读起来是有序的色阶而不是彩虹。
   每格三个变量：--pk 主色、--pk2 亮端（光弧尾）、
   --pkr 主色的 rgb 三元组（渐变里要用 rgba() 调透明度，hex 变量做不到）*/
.ab-perk-col:nth-child(1) { --pk: #1257e0; --pk2: #6aaeff; --pkr: 18, 87, 224 }
.ab-perk-col:nth-child(2) { --pk: #5548d9; --pk2: #9d93ff; --pkr: 85, 72, 217 }
.ab-perk-col:nth-child(3) { --pk: #0b7fc4; --pk2: #5cc4f2; --pkr: 11, 127, 196 }
.ab-perk-col:nth-child(4) { --pk: #0e9a8e; --pk2: #56d9c7; --pkr: 14, 154, 142 }
.ab-perk-col:nth-child(5) { --pk: #2c8f5b; --pk2: #72d29a; --pkr: 44, 143, 91 }
.ab-perk-col:nth-child(6) { --pk: #a8761f; --pk2: #edbb63; --pkr: 168, 118, 31 }

/* 一格 = 编号 / 全息台 / 标题 / 描述 四行居中。
   HTML 顺序是 sym → n → h4 → p，用 grid-row 把编号提到最上面 */
.ab-perk-col {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    justify-items: center;
    align-content: start;
    text-align: center;
    padding: 0 10px;
    border: 0;
    background: none;
    box-shadow: none;
}

/* 整格 hover 的那层光是径向的、没有边界，所以不会读成一张卡的底色 */
.ab-perk-col::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -18px;
    width: 330px;
    height: 330px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--pkr), .085) 0%, rgba(var(--pkr), 0) 70%);
    opacity: 0;
    transition: opacity .42s ease;
    pointer-events: none;
    z-index: -1;
}

.ab-perk-col:hover::after {
    opacity: 1;
}

/* 编号：默认就是本格的实色，不靠 hover 才显色 */
.ab-perk-n {
    grid-row: 1;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .24em;
    color: var(--pk);
    margin: 0 0 15px;
}

/* 全息投影台：96px。自身 background 画三层 ——
   最上一层是玻璃面的 1px 内描边、中间是玻璃面本体、最下是台下的地面光椭圆。
   环形的刻度和光弧交给两个伪元素（它们在最外 6px 圈上，和 64px 的玻璃面不重叠） */
.ab-perk-sym {
    grid-row: 2;
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    margin: 0 0 20px;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    color: var(--pk);
    pointer-events: none;
    /* 注：closest-side 的圆之外会拿最后一个色停往外延伸，不手动截成透明，
       64×64 背景框的四角也会被填满 —— 玻璃面就读成一个方块了。
       两层都在 100% 处多接一段零宽度的透明色停，圆外才真空 */
    background:
        radial-gradient(circle closest-side, rgba(var(--pkr), 0) calc(100% - 1.5px), rgba(var(--pkr), .24) calc(100% - 1.5px), rgba(var(--pkr), .24) 100%, rgba(var(--pkr), 0) 100%) 50% 46% / 64px 64px no-repeat,
        radial-gradient(circle closest-side, #fff 0%, #fafcff 56%, rgba(var(--pkr), .1) 100%, rgba(var(--pkr), 0) 100%) 50% 46% / 64px 64px no-repeat,
        radial-gradient(closest-side, rgba(var(--pkr), .2) 0%, rgba(var(--pkr), 0) 100%) 50% 97% / 56px 11px no-repeat;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* hover 只让台子再浮高 2px，不再变色 —— 色已经是默认状态了 */
.ab-perk-col:hover .ab-perk-sym {
    transform: translateY(-2px);
}

/* 刻度环：36 格等距短刻度 + 最外一条 1px 圆线。
   mask 只留最外 6px 的一圈，中间全部掏空 */
.ab-perk-sym::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 1px), rgba(var(--pkr), .18) calc(100% - 1px)),
        repeating-conic-gradient(from 0deg, rgba(var(--pkr), .26) 0 1.1deg, rgba(var(--pkr), 0) 1.1deg 10deg);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 calc(100% - 6px));
}

/* 光弧：约 1/3 圈的品牌蓝渐变弧，压在刻度环上。hover 时整圈转一周 */
.ab-perk-sym::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -100deg, rgba(var(--pkr), 0) 0deg, var(--pk) 24deg, var(--pk2) 104deg, rgba(var(--pkr), 0) 128deg, rgba(0, 0, 0, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 calc(100% - 6px));
}

.ab-perk-col:hover .ab-perk-sym::after {
    animation: ab-perk-arc 1.15s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ab-perk-arc {
    to {
        transform: rotate(360deg);
    }
}

/* 标题：下方一条短线。默认就是本格的实色、只是短一截，
   hover 才展满 —— “浮上去才有颜色”是上一版的毛病 */
.ab-perk-col h4 {
    grid-row: 3;
    position: relative;
    font-size: 19.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 0 0 13px;
    padding-bottom: 13px;
    transition: color .3s ease;
}

.ab-perk-col h4::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--pk) 0%, var(--pk2) 100%);
    transform: translateX(-50%) scaleX(.5);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.ab-perk-col:hover h4 {
    color: var(--pk);
}

.ab-perk-col:hover h4::after {
    transform: translateX(-50%) scaleX(1);
}

.ab-perk-col p {
    grid-row: 4;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--ink-3);
    margin: 0;
    max-width: 330px;
    text-wrap: pretty;
}

/* 降动效偏好下不转光弧（弧本身仍在，只是不动） */
@media (prefers-reduced-motion: reduce) {
    .ab-perk-col:hover .ab-perk-sym::after {
        animation: none;
    }
}

/* 中屏收两列、窄屏收单列。两处都要把 grid 显式置位留着不动 ——
   行号是按 HTML 顺序重排用的，任何断点都不能收回 */
@media (max-width: 1100px) {
    .ab-perk {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 34px;
        row-gap: 52px;
    }
}

@media (max-width: 720px) {
    .ab-perk {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 44px;
        padding-top: 38px;
    }

    .ab-perk-sym {
        width: 82px;
        height: 82px;
        font-size: 22px;
        background:
            radial-gradient(circle closest-side, rgba(var(--pkr), 0) calc(100% - 1.5px), rgba(var(--pkr), .24) calc(100% - 1.5px), rgba(var(--pkr), .24) 100%, rgba(var(--pkr), 0) 100%) 50% 46% / 54px 54px no-repeat,
            radial-gradient(circle closest-side, #fff 0%, #fafcff 56%, rgba(var(--pkr), .1) 100%, rgba(var(--pkr), 0) 100%) 50% 46% / 54px 54px no-repeat,
            radial-gradient(closest-side, rgba(var(--pkr), .2) 0%, rgba(var(--pkr), 0) 100%) 50% 97% / 48px 10px no-repeat;
    }

    .ab-perk-col h4 {
        font-size: 18px;
    }
}

/* ---- 维度3：在招职位 — 明晰表格式，信息全展开 ---- */
.ab-jobs {
    margin-top: 8px;
}

/* 顶部信息条：左侧三项数据 / 右侧投递邮箱 */
.ab-jobs-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding: 0 4px 24px;
}

.ab-jobs-stats {
    display: flex;
    gap: 50px;
}

/* 简历投递：与左侧数据同构的「标签 + 值」文本组，不再用色块胶囊 */
.ab-jobs-post {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
}

.ab-jobs-post-k {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--ink-3);
    white-space: nowrap;
}

.ab-jobs-meta-i {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ab-jobs-meta-i strong {
    font-family: var(--font-en);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--brand);
}

.ab-jobs-meta-i span {
    font-size: 14px;
    color: var(--ink-3);
}

/* 表格容器 */
.ab-jobs-tb {
    border: 1px solid rgba(18, 87, 224, .18);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 34px rgba(12, 30, 74, .06);
}

/* 表头 */
.ab-jobs-th {
    display: grid;
    grid-template-columns: 62px 1fr 190px 132px;
    align-items: center;
    gap: 22px;
    padding: 15px 26px;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border-bottom: 1px solid rgba(18, 87, 224, .14);
}

.ab-jobs-th span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-3);
}

.ab-jobs-th span:nth-child(4) {
    text-align: center;
}

/* 数据行 */
.ab-jobs-tr {
    position: relative;
    display: grid;
    grid-template-columns: 62px 1fr 190px 132px;
    align-items: center;
    gap: 22px;
    padding: 24px 26px;
    border-bottom: 1px solid rgba(18, 87, 224, .1);
    transition: background .28s ease;
}

.ab-jobs-tr:last-child {
    border-bottom: 0;
}

.ab-jobs-tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #6eb4ff, #1257e0);
    opacity: 0;
    transition: opacity .28s ease;
}

.ab-jobs-tr:hover {
    background: linear-gradient(90deg, rgba(18, 87, 224, .045) 0%, rgba(18, 87, 224, .012) 70%, transparent 100%);
}

.ab-jobs-tr:hover::before {
    opacity: 1;
}

.ab-jobs-n {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    color: rgba(12, 30, 74, .22);
    transition: color .28s ease;
}

.ab-jobs-tr:hover .ab-jobs-n {
    color: var(--brand);
}

.ab-jobs-info h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

/* 职责描述常驻可见，无需 hover / 点击 */
.ab-jobs-info p {
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--ink-3);
    max-width: 640px;
    margin-bottom: 12px;
}

.ab-jobs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ab-jobs-tags span {
    padding: 4px 11px;
    border-radius: 6px;
    background: rgba(18, 87, 224, .06);
    border: 1px solid rgba(18, 87, 224, .1);
    font-size: 12px;
    color: #2a55a8;
    white-space: nowrap;
}

.ab-jobs-city {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ab-jobs-city span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    color: var(--ink-2);
}

.ab-jobs-city span::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(18, 87, 224, .45);
}

/* 投递按钮：默认描边，明确可点 */
.ab-jobs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(18, 87, 224, .3);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
    transition: background .26s ease, color .26s ease, border-color .26s ease, box-shadow .26s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.ab-jobs-btn:hover,
.ab-jobs-tr:hover .ab-jobs-btn {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px rgba(18, 87, 224, .22);
}

.ab-jobs-btn:hover {
    transform: translateY(-1px);
}

/* 表格内置页脚提示（不再单独弄一个浅蓝块） */
.ab-jobs-note {
    padding: 15px 26px;
    background: linear-gradient(180deg, #f9fbff 0%, #f2f7ff 100%);
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

.ab-jobs-mailto {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(18, 87, 224, .32);
    transition: color .25s ease, border-color .25s ease;
}

.ab-jobs-mailto:hover {
    color: #0c3fa8;
    border-bottom-color: #0c3fa8;
}

/* ---------- 关于洞悉：响应式 ---------- */
@media (max-width: 1024px) {
    .ab-hero-h {
        font-size: 38px;
    }

    .ab-hero-h2 {
        font-size: 30px;
    }

    .ab-grid {
        grid-template-columns: 1fr;
    }

    /* 单列时只保留纵向咬合口 */
    .ab-card::before {
        display: none;
    }

    .ab-card,
    .ab-card:nth-child(odd),
    .ab-card:nth-child(even) {
        padding-left: 34px;
        padding-right: 34px;
        border-right: 0;
        border-bottom: 1px solid #e5e9f0;
    }

    .ab-card:nth-last-child(2) {
        border-bottom: 0;
    }

    .ab-team-bar {
        grid-template-columns: 1fr;
    }

    .ab-team-item,
    .ab-team-item:first-child,
    .ab-team-item:last-child {
        padding-left: 34px;
        padding-right: 34px;
    }

    .ab-team-item:not(:last-child) {
        border-bottom: 1px solid #e5e9f0;
    }

    .ab-vp {
        grid-template-columns: 1fr;
    }

    .ab-vp-tx {
        font-size: 22px;
    }

    .ab-mis-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 章节头：改为纵向堆叠 */
    .ab-sec-hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 30px;
    }

    .ab-sec-l h3 {
        font-size: 27px;
    }

    .ab-sec-desc {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        font-size: 14px;
    }

    /* 福利分栏：3 -> 2 列 */
    .ab-perk {
        grid-template-columns: repeat(2, 1fr);
    }

    .ab-perk-col:nth-child(3n) {
        border-right: 1px solid rgba(18, 87, 224, .09);
    }

    .ab-perk-col:nth-child(2n) {
        border-right: 0;
    }

    .ab-perk-col:nth-last-child(-n+3) {
        border-bottom: 1px solid rgba(18, 87, 224, .09);
    }

    .ab-perk-col:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .ab-perk-col {
        padding-right: 92px;
    }

    .ab-perk-col p {
        max-width: 100%;
    }

    .ab-grow {
        margin-bottom: 72px;
    }

    /* 职位表：城市列并入职位列 */
    .ab-jobs-th,
    .ab-jobs-tr {
        grid-template-columns: 48px 1fr 132px;
        gap: 18px;
        padding: 20px 20px;
    }

    .ab-jobs-th span:nth-child(3) {
        display: none;
    }

    .ab-jobs-city {
        display: none;
    }

    .ab-jobs-meta {
        gap: 34px;
    }
}

@media (max-width: 680px) {
    .page-hero-about {
        padding: 56px 0 36px;
    }

    .ab-hero-h {
        font-size: 30px;
    }

    .ab-hero-h2 {
        font-size: 24px;
    }

    .ab-card,
    .ab-card:nth-child(odd),
    .ab-card:nth-child(even) {
        padding: 30px 22px;
    }

    .ab-team-item,
    .ab-team-item:first-child,
    .ab-team-item:last-child {
        padding: 20px 22px;
    }

    .ab-card::before {
        width: 13px;
        height: 25px;
        right: -12px;
    }

    .ab-card::after {
        width: 25px;
        height: 13px;
        bottom: -12px;
    }

    .ab-banner-txt {
        font-size: 17px;
    }

    .ab-card-hl h3 {
        font-size: 20px;
    }

    .ab-mis {
        padding: 26px 22px 22px;
    }

    .ab-mis-list {
        grid-template-columns: 1fr;
    }

    .ab-mis-list li {
        padding: 16px 0 6px;
        border-top: 1px solid var(--line-2);
    }

    .ab-mis-list li span {
        margin-bottom: 6px;
    }

    .ab-vp-card {
        padding: 30px 26px 32px 30px;
    }

    .ab-phi {
        padding: 34px 24px;
    }

    .ab-phi-w {
        font-size: 21px;
    }

    .ab-work-img {
        width: 220px;
        height: 140px;
    }

    .ab-sec-l h3 {
        font-size: 23px;
    }

    .ab-sec-l {
        padding-left: 13px;
    }
    
    .ab-sec-tag {
        font-size: 10.5px;
        letter-spacing: .12em;
        margin-top: 7px;
    }
    
    /* 福利分栅：单列 */
    .ab-perk {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }
    
    .ab-perk-col,
    .ab-perk-col:nth-child(2n),
    .ab-perk-col:nth-child(3n) {
        border-right: 0;
        padding: 26px 84px 30px 22px;
    }
    
    .ab-perk-col:not(:last-child) {
        border-bottom: 1px solid rgba(18, 87, 224, .09);
    }
    
    .ab-perk-col:last-child {
        border-bottom: 0;
    }
    
    .ab-perk-sym {
        font-size: 48px;
        right: 16px;
    }
    
    /* 职位表：纵向铺开 */
    .ab-jobs-meta {
        gap: 18px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ab-jobs-stats {
        gap: 22px;
        flex-wrap: wrap;
    }

    .ab-jobs-post {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .ab-jobs-meta-i strong {
        font-size: 26px;
    }

    .ab-jobs-th {
        display: none;
    }

    .ab-jobs-tr {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 18px;
    }

    .ab-jobs-n {
        font-size: 15px;
    }

    .ab-jobs-city {
        display: flex;
    }

    .ab-jobs-btn {
        width: 100%;
        height: 42px;
    }

    .ab-jobs-note {
        padding: 14px 18px;
        font-size: 12.5px;
    }

    .ab-jobs-mailto {
        font-size: 14px;
        word-break: break-all;
        white-space: normal;
    }
}

/* ==========================================================================
   eClins 产品页（ec-*）：临床药物警戒专属版式
   设计基调：主蓝 + 临床青（小面积点缀）；只有 HERO 用深色，其后一路浅底推进
   信息形态取舍：同构对照数据用表，并列叙述用清单，只有需要独立成块时才用卡片
   ========================================================================== */
.ec-hero,
.ec-what,
.ec-cap,
.ec-reg,
.ec-scene,
.ev-mod {
    --ec-teal: #2fc4b2;
    --ec-teal-d: #17b5a4;
}

/* ---------- 1. HERO ---------- */
.ec-hero {
    position: relative;
    overflow: hidden;
    padding: 42px 0 0;
    color: #fff;
    background:
        radial-gradient(120% 92% at 76% -14%, #16295a 0%, #101c3f 24%, #0a1130 50%, #06091c 76%, #03050d 100%);
}

/* 冷蓝呼吸雾：只做空间，不做霓虹（工程网格已按要求拆除）。
   四个产品页取四套里最活跃的一档：15s、色相 11deg——雾里本来就埋了一团青，
   色相摆动能把「蓝 ↔ 青」的流转带出来，对应产品页该有的技术活力。
   这层的底色本身就亮（hero 渐变起手 #16295a），雾要能读出来，色斑得比其他三套再厚一点 */
.ec-hero-mesh {
    --bl: 58px;
    --hb-h: 11deg;
    --hb-x: 2.4%;
    --hb-o0: .42;
    --hb-o1: 1;
    position: absolute;
    inset: -18% -8% auto -8%;
    height: 150%;
    pointer-events: none;
    background:
        radial-gradient(50% 40% at 76% 4%, rgba(104, 158, 255, .54), transparent 72%),
        radial-gradient(44% 36% at 12% 22%, rgba(38, 104, 226, .44), transparent 74%),
        radial-gradient(40% 34% at 58% 54%, rgba(30, 166, 166, .32), transparent 76%);
    background-size: 150% 150%, 160% 160%, 160% 160%;
    background-position: 50% 0%, 0% 20%, 100% 10%;
    filter: blur(58px);
    opacity: .98;
    will-change: transform, opacity, filter, background-position;
    animation: heroBreath 15s ease-in-out infinite;
}

/* 极淡工程网格：已按要求拆除（网格线在深底上显脏，与呼吸雾互相干扰） */

.ec-hero .wrap {
    position: relative;
    z-index: 1;
}

/* 首屏：通栏无框，左右两栏开阔排版 */
.ec-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 64px;
    align-items: center;
    padding: 4px 0 58px;
}

.ec-hero-l {
    min-width: 0;
}

.ec-hero-h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.026em;
    color: #fff;
}

.ec-hero-h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #ffffff 0%, #b9d4ff 46%, #6ee7d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 主张句：紧随标题的第二声部，渐变竖线引出 */
.ec-hero-note {
    position: relative;
    margin-top: 22px;
    padding-left: 18px;
    max-width: 680px;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.66;
    color: rgba(255, 255, 255, .93);
}

.ec-hero-note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #7ea6ff 0%, var(--ec-teal) 100%);
}

.ec-hero-note em {
    font-style: normal;
    background: linear-gradient(96deg, #b9d4ff 0%, #6ee7d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 描述区：一条横线切开层级，正文双栏排版，不用要点列表 */
.ec-hero-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.ec-hero-p {
    position: relative;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.98;
    color: rgba(255, 255, 255, .6);
}

.ec-hero-p.is-lead {
    color: rgba(255, 255, 255, .78);
}

/* 双栏之间的发丝线，把两段正文分出结构 */
.ec-hero-p + .ec-hero-p::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, rgba(126, 166, 255, .05) 0%, rgba(126, 166, 255, .4) 42%, rgba(126, 166, 255, .05) 100%);
}

/* 全球监管中枢：实心自转球体 + 监管节点 */
.ec-globe {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
}

.ec-globe-svg {
    display: block;
    width: 100%;
    height: auto;
}

.ec-gl-edge {
    fill: none;
    stroke: rgba(176, 226, 255, .72);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 6px rgba(110, 190, 255, .55));
}

/* 球面纹理与各洲版图同速横移 = 自转 */
.ec-gl-spin {
    animation: ecGlobeSpin 44s linear infinite;
}

@keyframes ecGlobeSpin {
    to {
        transform: translateX(-592px);
    }
}

/* 各洲版图：真实陆地数据（land-110m）栅格取样的点阵贴图，两幅拼接无缝横移 */
.ec-gl-map {
    filter: drop-shadow(0 0 4px rgba(120, 214, 255, .5));
}

/* 雷达扫描带：贴纬度弧度自上而下扫过球面 */
.ec-gl-scan {
    animation: ecGlobeScan 7.5s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes ecGlobeScan {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        transform: translateY(300px);
        opacity: 0;
    }
}

.ec-gl-lat ellipse {
    fill: none;
    stroke: rgba(175, 215, 255, .26);
    stroke-width: 1;
}

/* 经线：rx 周期收缩，与球面横移同步（半周）*/
.ec-gl-mers ellipse {
    fill: none;
    stroke: rgba(185, 220, 255, .26);
    stroke-width: 1;
    animation: ecMeridian 22s linear infinite;
}

.ec-gl-mers ellipse:nth-child(1) {
    animation-delay: 0s;
}

.ec-gl-mers ellipse:nth-child(2) {
    animation-delay: -3.66s;
}

.ec-gl-mers ellipse:nth-child(3) {
    animation-delay: -7.33s;
}

.ec-gl-mers ellipse:nth-child(4) {
    animation-delay: -11s;
}

.ec-gl-mers ellipse:nth-child(5) {
    animation-delay: -14.66s;
}

.ec-gl-mers ellipse:nth-child(6) {
    animation-delay: -18.33s;
}

@keyframes ecMeridian {
    0% {
        rx: 148px;
    }

    50% {
        rx: 0;
    }

    100% {
        rx: 148px;
    }
}

/* 外层轨道：两段渐变弧而非完整圆环，缓慢扫过 */
.ec-gl-arc {
    transform-origin: 220px 220px;
    animation: ecArcSpin 34s linear infinite;
}

.ec-gl-arc path {
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
}

@keyframes ecArcSpin {
    to {
        transform: rotate(360deg);
    }
}

.ec-gl-node line {
    stroke: rgba(47, 196, 178, .36);
    stroke-width: 1;
}

.ec-gl-node circle.d {
    fill: var(--ec-teal);
}

.ec-gl-node circle.h {
    fill: rgba(47, 196, 178, .08);
    stroke: rgba(47, 196, 178, .32);
    stroke-width: 1;
    animation: ecPulse 6s ease-in-out infinite;
}

@keyframes ecPulse {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

.ec-gl-node text {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    fill: #cbdcff;
}

/* 能力链路条：轴线 + 菱形节点 + 流转箭头，编号与下方能力详解一一对应 */
.ec-chain {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(126, 166, 255, .14);
    background: linear-gradient(180deg, rgba(7, 13, 32, .2) 0%, rgba(2, 5, 16, .8) 100%);
}

.ec-chain::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(47, 196, 178, 0) 0%, rgba(47, 196, 178, .58) 24%, rgba(126, 166, 255, .5) 66%, rgba(126, 166, 255, 0) 100%);
}

/* 流水光：沿轴线循环流动 */
.ec-chain::after {
    content: '';
    position: absolute;
    left: -240px;
    top: -1px;
    width: 240px;
    height: 1px;
    background: linear-gradient(90deg, rgba(160, 255, 240, 0) 0%, rgba(190, 255, 246, .95) 50%, rgba(160, 255, 240, 0) 100%);
    animation: ecChainFlow 5.4s linear infinite;
}

@keyframes ecChainFlow {
    to {
        transform: translateX(calc(100vw + 240px));
    }
}

.ec-chain-in {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ec-chain-i {
    position: relative;
    padding: 26px 18px 32px 0;
}

.ec-chain-i + .ec-chain-i {
    padding-left: 22px;
}

.ec-chain-i > * {
    position: relative;
    z-index: 1;
}

/* 菱形节点：压在顶部轴线上 */
.ec-chain-nd {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--ec-teal);
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px rgba(47, 196, 178, .13);
    transition: box-shadow .28s ease;
}

.ec-chain-i + .ec-chain-i .ec-chain-nd {
    left: 22px;
}

.ec-chain-i:hover .ec-chain-nd {
    box-shadow: 0 0 0 6px rgba(47, 196, 178, .2);
}

/* 流转箭头：代替生硬的分割竖线 */
.ec-chain-i + .ec-chain-i::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 36px;
    width: 5px;
    height: 5px;
    border-top: 1px solid rgba(160, 190, 255, .3);
    border-right: 1px solid rgba(160, 190, 255, .3);
    transform: rotate(45deg);
}

.ec-chain-i::after {
    content: '';
    position: absolute;
    left: 0;
    right: 14px;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(47, 196, 178, .1) 0%, rgba(47, 196, 178, 0) 74%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.ec-chain-i + .ec-chain-i::after {
    left: 22px;
}

.ec-chain-i:hover::after {
    opacity: 1;
}

.ec-chain-i i {
    display: block;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(110, 231, 212, .82);
}

.ec-chain-i b {
    display: block;
    margin-top: 12px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.008em;
    color: rgba(255, 255, 255, .9);
    transition: color .24s ease;
}

.ec-chain-i:hover b {
    color: #fff;
}

.ec-chain-d {
    display: block;
    margin-top: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .45);
}

/* 末项：能力持续演进，节点呼吸表达“持续升级中” */
.ec-chain-i.is-next i {
    color: rgba(190, 214, 255, .6);
    letter-spacing: .2em;
}

.ec-chain-i.is-next .ec-chain-d {
    color: rgba(110, 231, 212, .72);
}

.ec-chain-i.is-next .ec-chain-nd {
    background: transparent;
    border: 1px solid var(--ec-teal);
    box-shadow: none;
    animation: ecNextPulse 2.8s ease-out infinite;
}

@keyframes ecNextPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(47, 196, 178, .42);
    }

    72% {
        box-shadow: 0 0 0 9px rgba(47, 196, 178, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(47, 196, 178, 0);
    }
}

/* ---------- 2. WHAT IS eClins：宣言层 + 全宽数据带 + 五维底座，三层锤成一个区块 ---------- */
.ec-what {
    padding: 92px 0 96px;
    background: #fff;
}

/* A 宣言层：左右两列信息量对等，左列由大标题与长副句撑满，不再留大片空白 */
.ec-wt {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 0;
}

.ec-wt-l {
    display: flex;
    flex-direction: column;
    padding-right: 58px;
}

/* 区块眼眸：给它一层浅蓝底色与品牌色文字，不再是一行快看不见的淡灰小字 */
.ec-wt-k {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 26px;
    padding: 0 11px;
    border-radius: 4px;
    background: var(--brand-050);
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--brand);
}

.ec-wt-t {
    margin-top: 22px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.026em;
    color: var(--ink);
}

.ec-wt-t em {
    font-style: normal;
    color: var(--brand);
}

.ec-wt-sub {
    position: relative;
    margin-top: 26px;
    padding-top: 24px;
    font-size: 16px;
    line-height: 1.92;
    color: var(--ink-2);
}

.ec-wt-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
}

.ec-wt-sign {
    margin-top: auto;
    padding-top: 30px;
    font-family: var(--font-en);
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--ink-4);
}

.ec-wt-r {
    padding-left: 58px;
    border-left: 1px solid var(--line-2);
}

.ec-wt-p {
    font-size: 15.5px;
    line-height: 1.98;
    color: var(--ink-3);
}

.ec-wt-p.is-lead {
    font-size: 17.5px;
    line-height: 1.9;
    color: var(--ink-2);
}

.ec-wt-p + .ec-wt-p {
    margin-top: 18px;
}

/* B 事实锚点：横贯全宽的数据带，把宣言层与底座层钉在一起 */
.ec-wt-stat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 54px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    list-style: none;
}

.ec-wt-stat li {
    padding-left: 28px;
    border-left: 1px solid var(--line-2);
}

.ec-wt-stat li:first-child {
    padding-left: 0;
    border-left: 0;
}

.ec-wt-stat b {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: var(--font-en);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.024em;
    color: var(--brand);
}

.ec-wt-stat b i {
    font-family: var(--font);
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: rgba(18, 87, 224, .62);
}

.ec-wt-stat span {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--ink-4);
}

/* C 底座层：四根能力立柱 + 一整块合规基石，形式直接说出「底座」 */
.ec-base {
    margin-top: 56px;
    padding: 32px 32px 34px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fafd 0%, #edf2fa 100%);
}

.ec-base-hd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
    gap: 36px;
    align-items: flex-end;
    padding-bottom: 28px;
}

.ec-base-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--brand);
}

.ec-base-k::before {
    content: '';
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
}

.ec-base-t {
    margin-top: 13px;
    font-size: 27px;
    line-height: 1.36;
    letter-spacing: -.018em;
    color: var(--ink);
}

.ec-base-d {
    padding-bottom: 7px;
    font-size: 14.5px;
    line-height: 1.86;
    color: var(--ink-3);
}

.ec-base-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ec-bcol {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 20px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: #fff;
    transition: border-color .28s ease, box-shadow .28s ease;
}

/* 默认就带颜色：每根立柱顶部一条品牌渐变承重面，不靠鼠标浮上去才亮 */
.ec-bcol::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
    opacity: .55;
    transition: opacity .28s ease;
}

.ec-bcol:hover {
    border-color: var(--brand-100);
    box-shadow: 0 12px 28px rgba(11, 23, 41, .07);
}

.ec-bcol:hover::before {
    opacity: 1;
}

/* 立柱底部落到基石上的承重短线 */
.ec-bcol::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 1px;
    height: 14px;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(18, 87, 224, .05) 0%, rgba(18, 87, 224, .36) 100%);
}

.ec-bn {
    display: block;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--brand);
}

.ec-bcol h4 {
    margin-top: 13px;
    font-size: 17.5px;
    line-height: 1.44;
    color: var(--ink);
    transition: color .28s ease;
}

.ec-bcol:hover h4 {
    color: var(--brand);
}

.ec-bcol p {
    margin-top: 11px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.82;
    color: var(--ink-3);
}

/* 能力标签默认就是一枚底色胶囊，悬停时转品牌色 */
.ec-btag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 25px;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bg-soft);
    font-family: var(--font-en);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--ink-3);
    transition: background-color .28s ease, color .28s ease;
}

.ec-bcol:hover .ec-btag {
    background: var(--brand-050);
    color: var(--brand);
}

/* 基石：横贯一整行，左叙述右三条递交通道 */
.ec-brock {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 36px;
    margin-top: 14px;
    padding: 28px 30px 26px;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #12224a 0%, #0b1330 58%, #080d22 100%);
}

.ec-brock::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 58%, transparent 100%);
}

.ec-brock-hd {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.ec-brock .ec-bn {
    color: rgba(159, 192, 255, .74);
}

.ec-brock h4 {
    font-size: 22px;
    letter-spacing: -.014em;
    color: #fff;
}

.ec-brock-b {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 24px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid rgba(110, 231, 212, .34);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9beade;
}

.ec-brock p {
    max-width: 620px;
    margin-top: 14px;
    font-size: 14.8px;
    line-height: 1.88;
    color: rgba(255, 255, 255, .68);
}

.ec-brock-t {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 20px;
}

.ec-brock-t span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 13px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    color: rgba(255, 255, 255, .64);
}

.ec-brock-r {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding-left: 36px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.ec-lane {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

.ec-lane:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ec-lane i {
    align-self: center;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ec-teal);
    box-shadow: 0 0 10px rgba(47, 196, 178, .7);
}

.ec-lane em {
    margin-left: auto;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .5);
}

/* ---------- 3. 通用章节头 ---------- */
.ec-hd {
    max-width: 740px;
    margin-bottom: 46px;
}

.ec-hd-k {
    display: block;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(11, 23, 41, .36);
}

.ec-hd-t {
    margin-top: 15px;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -.018em;
    color: var(--ink);
}

.ec-hd-d {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-3);
}

.ec-hd-on .ec-hd-k {
    color: rgba(255, 255, 255, .42);
}

.ec-hd-on .ec-hd-t {
    color: #fff;
}

.ec-hd-on .ec-hd-d {
    color: rgba(255, 255, 255, .62);
}

/* 原独立的「核心价值」区已并入 .ec-what 的底座层，本族样式整体清除 */

/* ---------- 5. 能力实机：3D coverflow 舞台（浅底，放真实工作台截图） ----------
   中央卡不加任何 transform，保证正文与截图绝对清晰；只有两侧陪体卡做旋转后退 */
.ec-cap {
    position: relative;
    overflow: hidden;
    padding: 92px 0 84px;
    background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
}

.ec-cap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--line);
}

/* 舞台收回 wrap 的 1176 内容宽：中央卡与上下区块共用左右基线，
   两侧陪体卡的位移与缩放一并收敛，保证 1440 视口下整组仍完整落在屏内 */
.ec-cf {
    position: relative;
    width: 100%;
    margin-top: 50px;
}

/* 卡高不再写死（原先中文 436 / 英文 575）：一个值要同时侍候四个产品页、
   每页五到六张卡、两种语言，结果两头都不对——ePross 中文第 01 张实需 514px 被切掉近 80px，
   而英文态 eLiterSeek 只要 423px，底下白空 150px。
   改法：所有卡叠进同一个 grid 格子，台高 = 本页最高那张卡的自然高度，
   每页、每语言各自收敛，媒体查询与 .is-en 里的高度覆盖全部可以删掉。
   台子本身不加底板（垫一块深色板只是把卡圈起来，不是立体感），
   冲击力全部交给卡片自己：中央卡浮起、侧卡真的往后退（见下方 translateZ）*/
.ec-cf-stage {
    position: relative;
    display: grid;
    perspective: 1800px;
    perspective-origin: 50% 46%;
}

/* 统一左文右图：左栏定宽承载结构化描述，右栏整块交给实机截图。
   边框从 --line-2（几乎看不见的浅灰）改成品牌蓝细线：
   线宽仍是 1px，只抬 rgba 透明度来提清楚度，不用 2px/3px 粗线 */
.ec-cf-pan {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    border: 1px solid rgba(18, 87, 224, .26);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11, 23, 41, .12);
    transition: transform .68s cubic-bezier(.22, .72, .24, 1), opacity .5s ease, border-color .4s ease, box-shadow .4s ease;
    will-change: transform;
}

/* 侧卡需要看起来真的在远处：遮罩回到浅蓝灰（跟区块底色同一支语言，
   相当于隆下来的空气透视），不给它们深底——深色块在浅底上反而往前跳。
   不透明度取 .5：再高侧卡就白成一片、看不出里面有内容了 */
.ec-cf-pan::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #e8eefa 0%, #dbe4f3 100%);
    opacity: .5;
    pointer-events: none;
    transition: opacity .5s ease;
}

/* 当前卡：不靠底板，靠卡自己“浮起来”——
     · 向上抬 6px（不用 translateZ 拉近：那会把卡放大到超出 wrap 的左右基线）；
     · 四层投影：贴地的接触阴影 + 中近 + 远场弥散 + 一层品牌蓝辉光，
       辉光让整张卡像在发亮，这是不动背景就能抬出冲击力的办法；
     · 边框仍是 1px，只抬 rgba，再叠一道 inset 内框 */
.ec-cf-pan.is-active {
    transform: translateY(-6px);
    opacity: 1;
    z-index: 5;
    border-color: rgba(18, 87, 224, .46);
    box-shadow:
        inset 0 0 0 1px rgba(18, 87, 224, .10),
        0 2px 6px rgba(11, 23, 41, .10),
        0 16px 32px rgba(11, 23, 41, .12),
        0 48px 90px -18px rgba(11, 23, 41, .30),
        0 24px 70px -20px rgba(18, 87, 224, .38);
}

.ec-cf-pan.is-active::after {
    opacity: 0;
}

/* 当前卡顶边一道横贯的 1px 渐变亮线（两头渐隐）——设备面板上那条
   通电指示光的语言，一根线就让整张卡看起来是「开着的设备」。
   绝对定位，不会变成 grid 项；线宽仍是 1px */
.ec-cf-pan.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(18, 87, 224, .9) 20%,
        rgba(0, 194, 199, .9) 62%,
        transparent 100%);
}

/* 侧卡：上一版压得太狠（opacity .72 + 遮罩 .66 + 边框 .14），两边几乎看不见，
   三张卡的轮播关系就断了。现在回抬：尺寸抬到 .8、不透明度 .88、
   边框回到 .2、投影也给回一层——侧卡看得出是张卡，又不抢中央卡的注意力。
   scale 取 .8 是按 1440 视口算的上限：透视缩放 .96 后视觉宽约 906，
   偏移 23%（270px）后外边缘刚好与屏边齐平 */
.ec-cf-pan.is-prev {
    transform: translateX(-23%) translateZ(-70px) rotateY(22deg) scale(.8);
    opacity: .88;
    z-index: 3;
    cursor: pointer;
    border-color: rgba(18, 87, 224, .2);
    box-shadow: 0 14px 32px rgba(11, 23, 41, .1);
}

.ec-cf-pan.is-next {
    transform: translateX(23%) translateZ(-70px) rotateY(-22deg) scale(.8);
    opacity: .88;
    z-index: 3;
    cursor: pointer;
    border-color: rgba(18, 87, 224, .2);
    box-shadow: 0 14px 32px rgba(11, 23, 41, .1);
}

.ec-cf-pan.is-prev:hover,
.ec-cf-pan.is-next:hover {
    opacity: .96;
}

.ec-cf-pan.is-prev:hover::after,
.ec-cf-pan.is-next:hover::after {
    opacity: .3;
}

.ec-cf-pan.is-hidden {
    transform: translateZ(-160px) scale(.72);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* 实机截图铺满右栏：无内边距、无圆角、无外框，直接嵌到卡片边缘上，不留缝隙。
   这一栏里装的就是产品自己的深色界面，所以不必另外造科技感：
   把它当成一块「亮着的屏」——屏边沿向左溢出一层冷蓝背光，白栏靠近屏的一侧
   因此带上淡淡的蓝，两栏之间就有了光的关系，而不是两张拼在一起的图 */
.ec-cf-media {
    position: relative;
    order: 2;
    overflow: hidden;
    border-left: 1px solid rgba(18, 87, 224, .15);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(56,116,232,.06) 0%, transparent 60%),
        linear-gradient(160deg, #f2f6fc 0%, #e6edf8 100%);
}

/* 截图边缘微光晕：仅在图片外围轻轻收口，不遮挡内容 */
.ec-cf-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent 82%, rgba(236, 241, 249, .7) 100%),
        linear-gradient(to bottom, transparent 80%, rgba(236, 241, 249, .65) 100%),
        linear-gradient(to left, transparent 95%, rgba(236, 241, 249, .4) 100%);
}

/* 屏幕背光：只在当前卡上亮，侧卡不亮。
   向左打蓝光 + 内侧柔和发光 */
.ec-cf-pan.is-active .ec-cf-media {
    border-left-color: rgba(56, 116, 232, .45);
    box-shadow:
        -18px 0 36px -14px rgba(18, 87, 224, .25),
        inset 1px 0 0 rgba(126, 176, 255, .3);
}

.ec-cf-media img {
    position: absolute;
    inset: 6px 5px 6px 10px;
    display: block;
    width: calc(100% - 15px);
    height: calc(100% - 12px);
    object-fit: cover;
    object-position: left top;
    border-radius: 8px;
    box-shadow:
        0 12px 48px rgba(18, 87, 224, .25),
        0 4px 14px rgba(0, 0, 0, .12),
        0 0 0 1px rgba(18, 87, 224, .10);
    z-index: 1;
}

/* 左：结构化文字栏——编号带 / 标题 / 导语 / 要点轴，四层递进，不再是一堆平铺的文字。
   底色不是死白：右上角（靠屏那一侧）渗一层极淡的冷蓝，
   和右栏屏幕的背光接上，两栏读起来是同一个光环境里的两面 */
.ec-cf-info {
    display: flex;
    flex-direction: column;
    padding: 32px 34px 28px;
    min-width: 0;
    background:
        radial-gradient(130% 78% at 100% 0%, rgba(18, 87, 224, .055) 0%, transparent 62%),
        #fff;
}

/* 编号带：大号品牌色序号 + 总数 + 一条渐隐横线，占满整行做阅读起点 */
.ec-cf-n {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-en);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--brand);
}

.ec-cf-n em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ink-4);
}

.ec-cf-n::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

.ec-cf-info h3 {
    margin-top: 15px;
    font-size: 21.5px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -.016em;
    color: var(--ink);
}

/* 导语：顶一条品牌渐变短线，与标题拉开层级 */
.ec-cf-info > p {
    position: relative;
    margin-top: 13px;
    padding-top: 13px;
    font-size: 14px;
    line-height: 1.82;
    color: var(--ink-3);
}

.ec-cf-info > p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
}

/* 要点区：前后试过两版都不行——竖轴串圆点像流程图零件，01/02/03 编号又把
   注意力拉到数字上。现在改成仪器刻度轴：
     · 整区左侧一道上下渐隐的 1px 冷蓝竖线，把三条要点真的连成一串；
     · 每条要点处从竖线向右伸出一段 12px 的 1px 刻度，节点感交给刻度而不是圆点；
     · 纯线条语言，不占文字宽度，所以不管中文四字还是英文长短参差都站得住。
   卡高改成「本页最高那张说话」之后，文案短的卡会剩下几十像素余量，
   让要点区吃掉这份余量（flex:1 + space-between，刻度之间自然摊开），
   而不是全堆在底部标签上方憋出一个洞 */
.ec-cf-pts {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 18px;
    padding-left: 22px;
    list-style: none;
}

/* 刻度轴本体：1px 细线，两端渐隐到透明，不做成一根硬棍 */
.ec-cf-pts::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(18, 87, 224, .42) 12%,
        rgba(56, 116, 232, .42) 88%,
        transparent 100%);
}

.ec-cf-pts li {
    position: relative;
    padding: 4px 0;
}

/* 刻度：从竖轴向右伸出的一段 1px 短线，左亮右隐，
   看上去是轴上引出的一笔，而不是一颗贴上去的圆点 */
.ec-cf-pts li::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 12px;
    width: 12px;
    height: 1px;
    background: linear-gradient(90deg, var(--brand) 0%, rgba(18, 87, 224, 0) 100%);
}

.ec-cf-pts b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.ec-cf-pts span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-4);
}

/* margin-top 原为 auto（靠自由空间把标签顶到卡底）。现在自由空间已被 .ec-cf-pts
   的 flex:1 吸收，auto 会退化成 0，所以改成显式间距 */
.ec-cf-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 26px;
    margin-top: 18px;
    padding: 4px 11px;
    border: 1px solid rgba(18, 87, 224, .24);
    border-radius: 4px;
    background: var(--brand-050);
    font-family: var(--font-en);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--brand);
}

/* 左右切换按钮：白底圆钮骑在卡片边缘上。
   台高改自适应后不能再写死 194px，改成按台高居中 */
.ec-cf-arw {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 23, 41, .15);
    transition: background-color .24s ease, border-color .24s ease;
}

.ec-cf-arw:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.ec-cf-arw.is-l {
    left: -24px;
}

.ec-cf-arw.is-r {
    right: -24px;
}

.ec-cf-arw::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -6px;
    border-top: 2px solid var(--ink-2);
    border-left: 2px solid var(--ink-2);
    transform: rotate(-45deg);
    transition: border-color .24s ease;
}

.ec-cf-arw:hover::before {
    border-top-color: #fff;
    border-left-color: #fff;
}

.ec-cf-arw.is-r::before {
    margin-left: -4px;
    transform: rotate(135deg);
}

/* 底部编号导航：五项能力同时可见，当前项顶部上色 */
.ec-cf-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    margin: 40px auto 0;
    border-top: 1px solid var(--line);
}

.ec-cf-nav button {
    position: relative;
    padding: 18px 18px 0 0;
    text-align: left;
}

.ec-cf-nav button::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.ec-cf-nav button i {
    font-style: normal;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-4);
    transition: color .24s ease;
}

.ec-cf-nav button b {
    display: block;
    margin-top: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-3);
    transition: color .24s ease;
}

.ec-cf-nav button:hover b {
    color: var(--brand);
}

.ec-cf-nav button.is-on::before {
    opacity: 1;
}

.ec-cf-nav button.is-on i {
    color: var(--brand);
}

.ec-cf-nav button.is-on b {
    color: var(--ink);
}

/* 能力区的界面示意已改用真实工作台截图，原模拟组件样式已清除 */

/* ---------- 6. 全球监管：一份数据 → 多辖区对照表（浅底 + 淡世界地图底纹） ---------- */
.ec-reg {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background: #fff;
}

/* 地图退到水印级别：白底上再加发光只会显脏，去掉滤镜只留淡蓝轮廓 */
.ec-reg-map {
    position: absolute;
    top: 50%;
    right: -4%;
    transform: translateY(-50%);
    width: 62%;
    height: 104%;
    pointer-events: none;
    background: url('../img/worldmap.svg') right center / contain no-repeat;
    opacity: .26;
}

.ec-reg .wrap {
    position: relative;
    z-index: 1;
}

/* 这一屏横向就是主角，章节头不该再被 740px 的通用栏宽管着：
   二级描述一句话说完一件事，折成两行反而读得碎 */
.ec-reg .ec-hd {
    max-width: none;
}

.ec-reg .ec-hd-d {
    white-space: nowrap;
}

/* 一份数据 → 多辖区：上方一条横向的源数据摘要，下方对照表通栏铺满。
   原先左右分栏把四列挤在屏幕左半边、右侧空出一大片，
   源数据没必要竖着占一整栏，它横着一行就说得完 */
.ec-reg-flow {
    display: block;
}

/* 摘要条：左侧「1 份个例数据」立题，中间一句口径，
   右侧三条构成字段与向下的出口指向，一行读完就交代清「源只有一份」 */
.ec-reg-src {
    position: relative;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) auto;
    grid-template-areas:
        'line line line'
        'k    p    p'
        't    f    a';
    gap: 0 52px;
    align-items: start;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.ec-reg-src::before {
    content: '';
    grid-area: line;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
}

/* 分发干线去掉：它从左栅中部横穿出去，正好压在字段清单旁边，
   白底上读起来像一条多余的杂线；分隔改由摘要条的底线单独承担 */

.ec-reg-src-k {
    grid-area: k;
    margin-top: 18px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ink-4);
}

/* 「1」是这一条的主角：唯一事实来源就只有一份，数字放到跟下方表头等量 */
.ec-reg-src-t {
    grid-area: t;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.ec-reg-src-t em {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--brand);
}

.ec-reg-src > p {
    grid-area: p;
    max-width: none;
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.86;
    color: var(--ink-3);
}

/* 三条字段横排成一行浅底标签：它们是这份数据的构成，
   不必各占一行把摘要条抽高 */
.ec-reg-src-f {
    grid-area: f;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
    list-style: none;
}

.ec-reg-src-f li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 5px;
    background: var(--bg-soft-2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.ec-reg-src-f li + li {
    margin-top: 0;
}

.ec-reg-src-f li::before {
    content: '';
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .55;
}

.ec-reg-src-a {
    grid-area: a;
    justify-self: end;
    align-self: end;
    margin-top: 20px;
    padding-top: 0;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--brand);
}

/* 表格改到摘要条下方，指向也跟着转成向下 */
.ec-reg-src-a::after {
    content: ' \2193';
}

/* 辖区对照表：五个辖区是同一组同构数据（通道 / 时限 / 要点），
   横向对齐一眼读完，比拆成五张卡片来回跳视线快得多 */
.ec-reg-tb {
    margin-top: 34px;
}

/* 四列改成按比例分配整个通栏宽度：写死 px 时前三列全挤在左边、
   末列文字完了右侧再空一大片；按比例铺满后每列都有余量，
   gap 拉到 40px、行高 46px，横向扫读不会串行 */
.ec-reg-tr {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.04fr) minmax(0, 1fr) minmax(0, 2.46fr);
    gap: 40px;
    align-items: center;
    padding: 23px 0;
    border-bottom: 1px solid var(--line-2);
}

/* 对照表的价值就在于横向一眼扫完：任何一格折行都会把行高撑开、把列对齐打散，
   所以大屏下四列一律锁死单行，列宽按最长内容预留 */
.ec-reg-tr > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-reg-tr:last-child {
    border-bottom: 0;
}

/* 表头只负责说明列义，压到最小视觉重量，不参与信息竞争 */
.ec-reg-tr.is-hd {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line);
}

.ec-reg-tr.is-hd span {
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--ink-4);
}

.ec-reg-j {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ec-reg-j i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

/* 次要辖区用空心点：主次靠圆点填充区分，不靠背景块或边框 */
.ec-reg-tr.is-sub .ec-reg-j i {
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(18, 87, 224, .42);
}

.ec-reg-j b {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}

.ec-reg-j em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--ink-4);
}

.ec-reg-c {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--brand);
}

.ec-reg-d {
    font-size: 12.5px;
    color: var(--ink-4);
}

.ec-reg-d b {
    margin-right: 5px;
    font-family: var(--font-en);
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
}

/* 没有统一固定时限的辖区不硬凑数字，用一行灰字说明 */
.ec-reg-d em {
    font-style: normal;
    font-size: 13px;
    color: var(--ink-4);
}

/* 时限后面的口径限定（严重 / 一般、GVP 时限）跟在同一行，
   列宽已按它预留，不再另起一行做小注 */
.ec-reg-d b + em {
    margin-left: 2px;
    font-size: 12.5px;
}

.ec-reg-x {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

.ec-reg-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    list-style: none;
}

.ec-reg-foot li {
    padding-left: 24px;
    border-left: 1px solid var(--line-2);
}

.ec-reg-foot li:first-child {
    padding-left: 0;
    border-left: 0;
}

.ec-reg-foot b {
    display: block;
    font-size: 15px;
    color: var(--ink);
}

.ec-reg-foot span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink-3);
}

/* ---------- 7. 适用场景：三列同构的处境栏（浅底，三栏各带语义色） ---------- */
.ec-scene {
    padding: 92px 0;
    background: linear-gradient(180deg, #f7f9fd 0%, #f2f6fc 100%);
}

/* 三类处境是同一层级的并列关系，上下堆成三条长短不一的横条时，
   右侧标签会悬在空处、首条又比其余两条长出一大截，读起来就是三段散文；
   改成横排三栏，逐列按同一结构对齐（编号+标签 / 标题 / 说明 / 两条要点） */
.ec-scenes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

/* 三栏各领一个色相（主蓝 / 靛 / 青），与四模块区同一套语义色体系；
   顶部一段色带 + 一层往下淡出的同色底，把“三个处境”分成三片可辨认的区域，
   底色到中段就消失，不会围成三张卡片 */
.ec-sc {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    border-left: 1px solid var(--line-2);
    --sc-c: var(--brand);
    --sc-c-s: var(--brand-050);
}

.ec-sc.t-indigo {
    --sc-c: #5a5fd6;
    --sc-c-s: #eeeffc;
}

.ec-sc.t-teal {
    --sc-c: var(--ec-teal-d);
    --sc-c-s: #e4f7f4;
}

.ec-sc::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62%;
    pointer-events: none;
    background: linear-gradient(180deg, var(--sc-c-s) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: .9;
}

.ec-sc > * {
    position: relative;
    z-index: 1;
}

.ec-sc:first-child {
    padding-left: 0;
    border-left: 0;
}

.ec-sc:last-child {
    padding-right: 0;
}

/* 每栏都在顶线上压一段自己的色带：最典型的那一栏用渐变实色，
   其余两栏降透明度，主次用浓淡交代，不靠把标题字号放大抢读 */
.ec-sc::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    z-index: 2;
    height: 2px;
    background: var(--sc-c);
    opacity: .34;
}

.ec-sc.is-main::before {
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
    opacity: 1;
}

.ec-sc-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ec-sc-n {
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--sc-c);
    opacity: .42;
}

.ec-sc.is-main .ec-sc-n {
    opacity: 1;
}

.ec-sc-t {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 10px;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(18, 87, 224, .1);
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-c);
}

/* 主项的标签直接用实色底：三栏里只这一处抢一下注意力 */
.ec-sc.is-main .ec-sc-t {
    background: var(--sc-c);
    box-shadow: none;
    color: #fff;
}

.ec-sc h3 {
    margin-top: 16px;
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: -.012em;
    color: var(--ink);
}

.ec-sc > p {
    margin-top: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.86;
    color: var(--ink-3);
}

/* 三栏说明长短不一（一栏三行、两栏两行），要点区用 auto 上边距推到各栏底部：
   三条分隔线因此在同一水平线上收口，不会一栏高一栏低 */
.ec-sc-l {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    list-style: none;
}

.ec-sc-l li {
    position: relative;
    padding-left: 14px;
}

.ec-sc-l li + li {
    margin-top: 13px;
}

.ec-sc-l li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sc-c);
    opacity: .45;
}

.ec-sc.is-main .ec-sc-l li::before {
    opacity: 1;
}

.ec-sc-l b {
    display: block;
    font-size: 13.5px;
    color: var(--ink-2);
}

.ec-sc-l span {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-4);
}

/* ---------- 9. 响应式 ---------- */

/* 1440 以下：默认 ±23% / .74 的侧卡组合横向要占约 1410px，窗口再窄一点就会被屏幕
   边缘切掉；而把位移与缩放继续收敛，侧卡只能露出四五十像素，恰好被箭头按钮压住，
   只剩一条被截断的文字残影。两边都不成立，此档干脆只保留中央卡，
   翻页交给左右箭头与底部编号导航（五项能力本来就同时可见） */
@media (max-width: 1439px) {
    /* 侧卡已隐，不必再留纵深余地 */
    .ec-cf-pan.is-prev,
    .ec-cf-pan.is-next {
        transform: translateX(0) translateZ(-80px) scale(.94);
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 1080px) {
    .ec-hero-h1 {
        font-size: 38px;
    }

    .ec-hero-top {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 16px 0 64px;
    }

    .ec-hero-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
        margin-top: 30px;
        padding-top: 26px;
    }

    .ec-hero-p + .ec-hero-p::before {
        left: -18px;
    }

    .ec-globe {
        margin: 0 auto;
        max-width: 400px;
    }

    .ec-chain-in {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ec-chain-i {
        padding: 24px 20px 26px 0;
    }

    .ec-chain-i:nth-child(4) {
        padding-left: 0;
    }

    .ec-chain-i:nth-child(4) .ec-chain-nd {
        left: 0;
    }

    .ec-chain-i:nth-child(4)::after {
        left: 0;
    }

    .ec-chain-i:nth-child(4)::before {
        display: none;
    }

    .ec-chain-i:nth-child(n + 4) {
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .ec-wt {
        grid-template-columns: 1fr;
    }

    .ec-wt-l {
        padding-right: 0;
    }

    .ec-wt-t {
        font-size: 34px;
    }

    .ec-wt-sign {
        display: none;
    }

    .ec-wt-r {
        margin-top: 30px;
        padding-left: 0;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px solid var(--line-2);
    }

    .ec-wt-stat {
        margin-top: 42px;
    }

    .ec-base-hd {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: flex-start;
    }

    .ec-base-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 两列时只保留下排两根柱子落到基石上，避免竖线悬空 */
    .ec-bcol:nth-child(-n + 2)::after {
        display: none;
    }

    .ec-brock {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ec-brock-r {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 30px;
        padding-left: 0;
        padding-top: 20px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    /* 三条通道改横排后，逐条下划线与尾部推开均不再适用 */
    .ec-lane {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .ec-lane em {
        margin-left: 0;
    }

    .ec-cf-pan {
        width: 100%;
        grid-template-columns: 376px minmax(0, 1fr);
    }

    .ec-cf-info {
        padding: 26px 26px 24px;
    }

    .ec-cf-n {
        font-size: 23px;
    }

    .ec-cf-info h3 {
        font-size: 19.5px;
    }

    .ec-cf-info > p {
        margin-top: 11px;
        padding-top: 11px;
        font-size: 13.5px;
        line-height: 1.78;
    }

    .ec-cf-pts {
        margin-top: 14px;
    }

    .ec-cf-pts b {
        font-size: 13px;
    }

    .ec-cf-pts span {
        font-size: 12px;
        line-height: 1.55;
    }

    /* 空间不够时舍掉末尾标签，优先保证三条要点排得开 */
    .ec-cf-tag {
        display: none;
    }

    .ec-cf-nav button b {
        font-size: 13px;
    }

    /* 摘要条在此档摊不开三列：口径句占一行，字段标签与出口指向各归一行 */
    .ec-reg-src {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas:
            'line line'
            'k    p'
            't    f'
            'a    a';
        gap: 0 40px;
        padding-bottom: 26px;
    }

    .ec-reg-src-a {
        margin-top: 16px;
    }

    .ec-reg-tb {
        margin-top: 28px;
    }

    .ec-reg-tr {
        gap: 28px;
        padding: 19px 0;
    }

    /* 此档整表同样通栏，按比例分列仍留得住余量，四列继续保持单行 */

    /* 三栏并列在此档仍站得住，只收紧栏距与字号 */
    .ec-sc {
        padding: 26px 20px 22px;
    }

    .ec-sc.is-main::before {
        right: 0;
    }

    .ec-sc-n {
        font-size: 26px;
    }

    .ec-sc h3 {
        margin-top: 14px;
        font-size: 17.5px;
    }

    .ec-sc > p {
        font-size: 13.5px;
    }
}

@media (max-width: 680px) {
    .ec-hero {
        padding: 54px 0 0;
    }

    .ec-hero-top {
        gap: 34px;
        padding: 8px 0 48px;
    }

    .ec-hero-h1 {
        font-size: 30px;
        line-height: 1.34;
    }

    .ec-hero-note {
        margin-top: 18px;
        padding-left: 15px;
        font-size: 16px;
    }

    .ec-hero-split {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .ec-hero-p {
        font-size: 15px;
        line-height: 1.9;
    }

    .ec-hero-p + .ec-hero-p::before {
        display: none;
    }

    .ec-globe {
        max-width: 300px;
    }

    .ec-chain-in {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-chain-i {
        padding: 20px 14px 22px 0;
    }

    .ec-chain-i + .ec-chain-i {
        padding-left: 20px;
    }

    .ec-chain-i + .ec-chain-i .ec-chain-nd {
        left: 20px;
    }

    .ec-chain-i + .ec-chain-i::after {
        left: 20px;
    }

    .ec-chain-i:nth-child(odd) {
        padding-left: 0;
    }

    .ec-chain-i:nth-child(odd) .ec-chain-nd {
        left: 0;
    }

    .ec-chain-i:nth-child(odd)::after {
        left: 0;
    }

    .ec-chain-i:nth-child(odd)::before {
        display: none;
    }

    .ec-chain-i:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .ec-chain-i b {
        font-size: 14.5px;
    }

    .ec-chain-d {
        font-size: 11.5px;
    }

    .ec-what,
    .ec-cap,
    .ec-reg,
    .ec-scene {
        padding: 62px 0;
    }

    .ec-wt-t {
        font-size: 27px;
        line-height: 1.42;
    }

    .ec-wt-sub {
        margin-top: 20px;
        padding-top: 20px;
        font-size: 15px;
        line-height: 1.86;
    }

    .ec-wt-p.is-lead {
        font-size: 15.5px;
    }

    .ec-wt-p {
        font-size: 15px;
    }

    .ec-wt-stat {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
        margin-top: 34px;
        padding-top: 24px;
    }

    .ec-wt-stat li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .ec-wt-stat li {
        padding-left: 18px;
    }

    .ec-wt-stat b {
        font-size: 29px;
    }

    .ec-wt-stat span {
        margin-top: 9px;
        font-size: 12px;
    }

    .ec-hd {
        margin-bottom: 34px;
    }

    .ec-hd-t {
        font-size: 26px;
    }

    .ec-hd-d {
        font-size: 15px;
    }

    .ec-base {
        margin-top: 40px;
        padding: 22px 18px 24px;
        border-radius: 16px;
    }

    .ec-base-t {
        font-size: 22px;
    }

    .ec-base-d {
        font-size: 14px;
    }

    .ec-base-cols {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ec-bcol {
        padding: 20px 18px 18px;
    }

    .ec-bcol::after {
        display: none;
    }

    .ec-bcol h4 {
        font-size: 16.5px;
    }

    .ec-btag {
        padding-top: 14px;
    }

    .ec-brock {
        margin-top: 12px;
        padding: 22px 18px 22px;
    }

    .ec-brock-hd {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .ec-brock h4 {
        font-size: 19px;
    }

    .ec-brock p {
        font-size: 14.2px;
    }

    .ec-brock-r {
        flex-direction: column;
        gap: 12px;
        padding-top: 18px;
    }

    .ec-cf {
        width: 100%;
        margin-top: 30px;
    }

    /* 单列顺排：撤掉 grid 叠放，卡片按文档流一张张往下落 */
    .ec-cf-stage {
        display: block;
        perspective: none;
    }

    .ec-cf-pan {
        position: relative;
        grid-area: auto;
        width: 100%;
        margin: 0 0 16px;
        grid-template-columns: 1fr;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
        transition: none;
        box-shadow: 0 14px 34px rgba(11, 23, 41, .12);
    }

    .ec-cf-pan::after {
        display: none;
    }

    /* 单列时截图回到文字上方，按原始比例满宽展示不再裁切 */
    .ec-cf-media {
        order: 0;
        height: auto;
        border-left: 0;
        border-bottom: 1px solid var(--line-2);
    }

    .ec-cf-media::after {
        display: none;
    }

    /* 桌面档 img 是绝对定位铺满（配合自适应卡高）；单列时要回到文档流按原比例撑开 */
    .ec-cf-media img {
        position: static;
        height: auto;
    }

    .ec-cf-info {
        padding: 22px 20px 20px;
    }

    .ec-cf-n {
        font-size: 23px;
    }

    .ec-cf-info h3 {
        font-size: 19px;
    }

    .ec-cf-arw,
    .ec-cf-nav {
        display: none;
    }

    /* 窄屏下一行放不下那句描述，锁单行只会溢出，此档放开 */
    .ec-reg .ec-hd-d {
        white-space: normal;
    }

    /* 摘要条彻底竖排：一栏宽已不够并任何两段 */
    .ec-reg-src {
        grid-template-columns: 1fr;
        grid-template-areas:
            'line'
            'k'
            't'
            'p'
            'f'
            'a';
        gap: 0;
        padding-bottom: 24px;
    }

    .ec-reg-src > p {
        margin-top: 14px;
    }

    .ec-reg-src-a {
        justify-self: start;
    }

    /* 窄屏下表格改成逐行自述：列头已无意义，去掉后靠缩进分主次，
       头行上方补一条顶线把表格整体收住 */
    .ec-reg-tr.is-hd {
        display: none;
    }

    .ec-reg-tb {
        margin-top: 26px;
        border-top: 1px solid var(--line);
    }

    .ec-reg-tr {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 16px 0;
    }

    /* 逐行自述后一行只剩一列，长句必须允许换行，否则会被截成省略号 */
    .ec-reg-tr > span {
        white-space: normal;
        overflow: visible;
    }

    .ec-reg-c,
    .ec-reg-d,
    .ec-reg-x {
        padding-left: 16px;
    }

    .ec-reg-foot {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ec-reg-foot li {
        padding-left: 0;
        border-left: 0;
    }

    /* 窄屏下三栏改竖排：分栏线从竖转横 */
    .ec-scenes {
        grid-template-columns: 1fr;
    }

    .ec-sc {
        padding: 24px 0 26px;
        border-left: 0;
        border-bottom: 1px solid var(--line-2);
    }

    /* 竖排后色底改成只铺顶部一小段，避免三片色块首尾相接连成一条 */
    .ec-sc::after {
        height: 128px;
    }

    .ec-sc:last-child {
        border-bottom: 0;
    }

    .ec-sc.is-main::before {
        right: 0;
    }

    .ec-sc-n {
        font-size: 26px;
    }

    .ec-sc h3 {
        font-size: 18px;
    }

    .ec-reg-map {
        opacity: .16;
    }
}

/* ==========================================================================
   临床药物警戒委托服务（cpv-*）
   纯文字资料的版式策略：
   1) 首屏深色，把「国家级专家团队 + 四地 local + 中英双语」做成可读的服务网络面板；
   2) 中段一律浅底推进，靠编号轴、阶梯层级、分族网格建立阅读节奏，不堆同尺寸卡片；
   3) 只有质量体系与结尾行动区回到深色，形成 深—浅—深 的三段呼吸；
   4) 正文容器不使用 3D 变换 / blur / text-shadow，保证字体清晰。
   ========================================================================== */
/* 委托服务与真实世界研究两类页面共用同一套 cpv-* 版式语言，因此变量作用域一并声明 */
body[data-page="service"],
body[data-page="research"],
body[data-page="partners"] {
    --cv-teal: #2fc4b2;
    --cv-teal-d: #17b5a4;
}

/* ---------- 通用章节头（浅底） ---------- */
.cpv-hd {
    max-width: 780px;
}

.cpv-hd-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.cpv-hd-k::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--cv-teal));
}

.cpv-hd-t {
    margin-top: 14px;
    font-size: 33px;
    line-height: 1.3;
}

.cpv-hd-t em {
    font-style: normal;
    color: var(--brand);
}

.cpv-hd-d {
    margin-top: 15px;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* ---------- 1. HERO：呼吸色雾 + 大字声明 ---------- */
.cpv-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 0;
    background:
        radial-gradient(122% 92% at 50% -12%,
            #16274f 0%,
            #101a3a 26%,
            #0a1126 56%,
            #06090f 84%,
            #03050b 100%);
}

.cpv-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 世界地图作为底纹：四周渐隐，避免出现矩形硬边 */
.cpv-hero-bg::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 2%;
    width: 76%;
    height: 92%;
    background: url('../img/worldmap.svg') right center / contain no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
    opacity: .34;
}

/* 冷光：把视线压到左上标题起点 */
.cpv-hero-bg::after {
    content: "";
    position: absolute;
    left: 26%;
    top: -260px;
    width: 1240px;
    height: 620px;
    margin-left: -620px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(112, 158, 248, .26), rgba(40, 84, 190, .1) 54%, transparent 76%);
}

/* 呼吸色雾：partners / research / service-clinical / service-post 四页共用。
   这里刻意不用 .cpv-hero::before —— 伪元素先于子元素绘制，会被上面的世界地图与
   静态冷光整片洗掉，前两版就是因此「完全看不到呼吸」。改挂在 .cpv-hero-bg 的
   真实子元素上并给 z-index: 1，雾就压在地图与冷光之上；文字所在的 .wrap 在 DOM 里
   排在 -bg 之后，同为 z-index: 1，依然稳在最顶层。
   周期 18s、色相 8deg —— 这四页信息密度最高（大字声明 + 事实带大号数字），取最克制的一档 */
.cpv-breath {
    --bl: 62px;
    --hb-h: 8deg;
    --hb-x: 2.2%;
    --hb-y: 1.6%;
    --hb-s1: 1.07;
    --hb-o0: .42;
    --hb-o1: 1;
    position: absolute;
    inset: -22% -8% auto -8%;
    z-index: 1;
    height: 140%;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 30% 0%, rgba(110, 162, 255, .5), transparent 72%),
        radial-gradient(50% 38% at 82% 14%, rgba(56, 116, 232, .4), transparent 74%),
        radial-gradient(44% 34% at 56% 56%, rgba(40, 148, 170, .3), transparent 76%);
    background-size: 150% 150%, 160% 160%, 160% 160%;
    background-position: 50% 0%, 0% 20%, 100% 10%;
    filter: blur(62px);
    opacity: .96;
    will-change: transform, opacity, filter, background-position;
    animation: heroBreath 18s ease-in-out infinite;
}

.cpv-hero .wrap {
    position: relative;
    z-index: 1;
}

.cpv-hero-in {
    padding: 0 0 48px;
}

/* 顶部状态行：左标识 / 右在线态，交代「这是一个持续运转的交付网络」 */
.cpv-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.cpv-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(178, 200, 255, .86);
}

.cpv-k::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-ai);
}

.cpv-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(110, 231, 212, .88);
    white-space: nowrap;
}

.cpv-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cv-teal);
    animation: cpvBlink 2.6s ease-in-out infinite;
}

@keyframes cpvBlink {

    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: 1;
    }
}

.cpv-hero-h1 {
    margin-top: 34px;
    max-width: 15em;
    font-size: 54px;
    line-height: 1.18;
    color: #fff;
    letter-spacing: -0.025em;
}

.cpv-hero-h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #a8c0ff 0%, #7fe6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cpv-hero-lead {
    margin-top: 26px;
    max-width: 880px;
    font-size: 17.5px;
    line-height: 1.88;
    color: var(--on-dark);
}

.cpv-hero-p {
    margin-top: 14px;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.88;
    color: var(--on-dark-3);
}

/* 交付网络拓扑：四地 local 团队挂在同一条链路上，取代原来的面板卡片 */
.cpv-topo {
    margin-top: 46px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.cpv-topo-hd {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.cpv-topo-hd b {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #fff;
}

.cpv-topo-hd em {
    font-style: normal;
    font-size: 13.5px;
    color: var(--on-dark-3);
}

.cpv-topo-hd span {
    margin-left: auto;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(110, 231, 212, .82);
    white-space: nowrap;
}

.cpv-topo-l {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 30px;
}

/* 一条贯通的链路线：蓝端是国内中心，青端是海外 Global */
.cpv-topo-l::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(143, 168, 255, .2) 0%,
            rgba(143, 168, 255, .55) 16%,
            rgba(110, 231, 212, .55) 84%,
            rgba(110, 231, 212, .18) 100%);
}

.cpv-topo-l li {
    position: relative;
    padding: 26px 26px 0 0;
}

.cpv-topo-l li > i {
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0a1020;
    border: 2px solid rgba(143, 168, 255, .8);
}

.cpv-topo-l li.is-hq > i {
    border-color: var(--cv-teal);
    background: var(--cv-teal);
    animation: cpvBlink 3s ease-in-out infinite;
}

/* 节点向下的引线，把线上的点和下面的文字锁在一起 */
.cpv-topo-l li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    height: 14px;
    width: 1px;
    background: linear-gradient(180deg, rgba(143, 168, 255, .55), transparent);
}

.cpv-topo-l b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.cpv-topo-l em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(178, 200, 255, .58);
}

.cpv-topo-l span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--on-dark-3);
}

.cpv-topo-ft {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13.5px;
    color: var(--on-dark-2);
}

.cpv-topo-ft i {
    font-style: normal;
    flex: none;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #0a1020;
    background: linear-gradient(96deg, #a8c0ff, #7fe6d4);
}

/* 首屏底部事实带 */
.cpv-band {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}

.cpv-band-l {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cpv-band-l li {
    padding: 26px 26px 26px 0;
    border-left: 1px solid rgba(255, 255, 255, .09);
    padding-left: 26px;
}

.cpv-band-l li:first-child {
    border-left: 0;
    padding-left: 0;
}

.cpv-band-l b {
    display: block;
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.02em;
}

.cpv-band-l b i {
    font-style: normal;
    margin-left: 4px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: rgba(110, 231, 212, .9);
}

.cpv-band-l span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--on-dark-2);
}

/* ---------- 2. 全生命周期：大字声明 + 横向四段进阶轴 + 出海对向轴 ---------- */
.cpv-life {
    padding: 92px 0;
    background: #fff;
}

/* 定位声明：整幅大字引述 + 右侧评注，不做卡片，下沿一条细线收住 */
.cpv-claim {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
    margin-top: 42px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
}

.cpv-claim-q {
    font-size: 29px;
    line-height: 1.56;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.cpv-claim-q em {
    font-style: normal;
    color: var(--brand);
}

.cpv-claim-p {
    font-size: 15.5px;
    line-height: 1.92;
    color: var(--ink-3);
}

.cpv-claim-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-4);
}

.cpv-claim-tag::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--cv-teal);
}

/* 四段进阶：一条横向渐变轴串起四个阶段，列间只用一条竖线 */
.cpv-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 46px;
    padding-top: 34px;
}

.cpv-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, #2b7fd6 52%, var(--cv-teal) 100%);
}

.cpv-stage li {
    position: relative;
    padding: 0 28px;
}

.cpv-stage li:first-child {
    padding-left: 0;
}

.cpv-stage li:last-child {
    padding-right: 0;
}

.cpv-stage li + li {
    border-left: 1px solid var(--line);
}

/* 轴上的方形节点，对齐每段正文左缘 */
.cpv-stage li::before {
    content: "";
    position: absolute;
    left: 28px;
    top: -5px;
    width: 10px;
    height: 10px;
    background: var(--brand);
}

.cpv-stage li:first-child::before {
    left: 0;
}

.cpv-stage li:last-child::before {
    background: var(--cv-teal);
}

.cpv-stage-n {
    display: block;
    font-family: var(--font-en);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #d3dcec;
    transition: color .2s ease;
}

.cpv-stage li:hover .cpv-stage-n {
    color: var(--brand);
}

.cpv-stage li:last-child:hover .cpv-stage-n {
    color: var(--cv-teal-d);
}

.cpv-stage-t {
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
}

.cpv-stage-d {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* 出海委托：两侧纯排版对照，中间一条竖线，不再包卡片底 */
.cpv-cross {
    margin-top: 58px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.cpv-cross-hd {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.cpv-cross-hd b {
    font-size: 20px;
    color: var(--ink);
}

.cpv-cross-hd span {
    font-size: 14.5px;
    color: var(--ink-3);
}

.cpv-cross-hd em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink-4);
    white-space: nowrap;
}

.cpv-cross-b {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 30px;
}

.cpv-cross-b > div {
    padding-right: 44px;
}

.cpv-cross-b > div + div {
    padding-right: 0;
    padding-left: 44px;
    border-left: 1px solid var(--line);
}

.cpv-dir {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--brand);
}

.cpv-dir::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--brand), rgba(18, 87, 224, .05));
}

.cpv-cross-b > div + div .cpv-dir {
    color: var(--cv-teal-d);
}

.cpv-cross-b > div + div .cpv-dir::after {
    background: linear-gradient(90deg, var(--cv-teal), rgba(47, 196, 178, .05));
}

.cpv-cross-b h4 {
    margin-top: 16px;
    font-size: 18.5px;
    line-height: 1.45;
}

.cpv-cross-b p {
    margin-top: 11px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

.cpv-cross-l {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 24px;
    margin-top: 18px;
}

.cpv-cross-l li {
    position: relative;
    padding-left: 14px;
    font-size: 13.5px;
    color: var(--ink-2);
}

.cpv-cross-l li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 1px;
    background: var(--ink-4);
}

/* ==========================================================================
   eVigil 产品页（ev-*）：整体沿用 eClins 的 ec-* 版式与配色，保持产品线一致
   只补两处 eVigil 专属形态：
   1) HERO 右侧的信号监测面板 —— 先定内容再定形态：上市后真正在跑的动作是
      「个例持续汇入 → 医学信号趋势与批次聚集双轨扫描 → 越过阈值触发评价」，
      本质是时序 + 阈值 + 触发，所以用趋势折线 + 阈值线 + 批号热区，而不是绕圈雷达
   2) 个例之外的四个智能管理模块 —— 左栏立题、右栏脊线串链，四块各带语义色
   ========================================================================== */

/* ---------- HERO 视觉：运转中的安全中枢（圆心构图，与 ec-globe 同位可互换） ---------- */
/* 为什么不再用折线图：折线图讲的是「某个指标的历史」，本质是一张 BI 截图；
   而这一屏的标题是「智能安全管理中枢」——四个环节围着一个心连续流转、
   两条信号轨各自绕圈扫、个例从八方汇入，这层意思只有圆心构图撑得住。
   面板标题与图例仍交给 HTML 文字：SVG 等比缩放时内嵌字号会跟着缩糊。

   动效总纲：全图只有三个母节拍，且刻意互不整除 ——
   --ev-turn 6.4s：光弹沿流转环走一圈，走到哪一站那一站亮（业务在流转）
   --ev-scan 4.2s：雷达指针绕刻度环一圈（监测在扫）
   告警扇区 5.2s 独立走（风险是偶发的，本就不该跟节拍对齐）
   三个周期错开，画面不会「整齐地卡在同一帧」，这才是不死板的根源 */
/* 不再给面板包一层框：HERO 本身已经是一层深色渐变，再套一个带边框的深底卡片，
   图就变成“贴在背景上的一个控件”，且方框又把圆形构图卡得很死。
   去框后图直接站在渐变上，同时省下的内边距全还给图形，直径反而变大 */
.ev-core {
    --ev-turn: 6.4s;
    --ev-scan: 4.2s;
    position: relative;
    width: 100%;
    max-width: 470px;
    margin-left: auto;
    padding: 0;
}

.ev-core-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ev-core-k {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(203, 220, 255, .62);
}

.ev-core-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ec-teal);
}

.ev-core-live i {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-teal);
    box-shadow: 0 0 8px rgba(47, 196, 178, .9);
    animation: evBlink 2.4s ease-in-out infinite;
}

@keyframes evBlink {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

.ev-core-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 4px;
}

.ev-core-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(176, 226, 255, .12);
}

.ev-core-lg span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(203, 220, 255, .66);
}

.ev-core-lg i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ev-core-lg .is-s i {
    background: var(--ec-teal);
    box-shadow: 0 0 7px rgba(110, 240, 220, .8);
}

.ev-core-lg .is-c i {
    background: #ffd28a;
}

.ev-core-lg .is-m i {
    background: rgba(180, 214, 255, .55);
}

/* 圆周上的旋转统一以 view-box 为参照系、原点锁在 230,230（viewBox 正中），
   这样每个图层写 rotate 都是绕同一个圆心转，不会各自偏心 */
.ev-cr-sweep,
.ev-cr-tr,
.ev-cr-comet,
.ev-cr-halo,
.ev-cr-core-r,
.ev-cr-orbit {
    transform-box: view-box;
    transform-origin: 230px 230px;
}

@keyframes evTurn {
    to {
        transform: rotate(360deg);
    }
}

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

/* 蚁行虚线：多处共用，交代「这条通路一直通着」 */
@keyframes evAnt {
    to {
        stroke-dashoffset: -9;
    }
}

/* 同心圈只作空间刻度：静止且极淡。满屏都在动，等于什么都没在动 */
.ev-cr-ring {
    fill: none;
    stroke: rgba(176, 226, 255, .14);
    stroke-width: 1;
}

.ev-cr-ring.is-dim {
    stroke: rgba(176, 226, 255, .08);
    stroke-dasharray: 2 7;
}

/* 刻度环：用 dasharray 在 r=208 的圆上生成 72 个短齿，比手写 72 条线可靠 */
.ev-cr-tick {
    fill: none;
    stroke: rgba(176, 226, 255, .2);
    stroke-width: 7;
    stroke-dasharray: 2.5 15.65;
}

/* 雷达指针：同半径再叠一段四分之一亮弧绕整圈推进。渐变走 objectBoundingBox，
   会随元素一起转，所以永远是「头亮尾淡」的拖尾，而不是一段匀亮的弧 */
.ev-cr-sweep {
    fill: none;
    stroke: url(#evTrail);
    stroke-width: 7;
    stroke-dasharray: 300 1007;
    filter: drop-shadow(0 0 6px rgba(110, 240, 220, .45));
    animation: evTurn var(--ev-scan) linear infinite;
}

/* 个例汇入：八条径向短线的虚线朝圆心方向流，并错峰亮起 ——
   读的是「个例从各来源陆续到达」，不是八条一起匀速抖 */
.ev-cr-in line {
    stroke: rgba(180, 214, 255, .6);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 6;
    animation: evAnt 1.1s linear infinite, evFeed 2.6s ease-in-out infinite;
}

.ev-cr-in line:nth-child(2) {
    animation-delay: 0s, .32s;
}

.ev-cr-in line:nth-child(3) {
    animation-delay: 0s, .64s;
}

.ev-cr-in line:nth-child(4) {
    animation-delay: 0s, .96s;
}

.ev-cr-in line:nth-child(5) {
    animation-delay: 0s, 1.28s;
}

.ev-cr-in line:nth-child(6) {
    animation-delay: 0s, 1.6s;
}

.ev-cr-in line:nth-child(7) {
    animation-delay: 0s, 1.92s;
}

.ev-cr-in line:nth-child(8) {
    animation-delay: 0s, 2.24s;
}

@keyframes evFeed {

    0%,
    100% {
        opacity: .16;
    }

    22% {
        opacity: 1;
    }

    62% {
        opacity: .38;
    }
}

/* ---- 双轨扫描：两条 r=118 的对置弧，医学信号轨顺时针、批次聚集轨逆时针 ----
   反向是刻意的：同向同速会被读成一个转盘在转，反向才读得出「两套判据各自在扫」；
   7.6s / 9.8s 也不整除，两条轨的相对位置一直在变，不会摆出固定图案 */
.ev-cr-tr path {
    fill: none;
    stroke: url(#evTrail);
    stroke-width: 3;
    stroke-linecap: round;
}

.ev-cr-tr {
    animation: evTurn 7.6s linear infinite;
}

.ev-cr-tr.is-batch {
    animation: evTurnBack 9.8s linear infinite;
}

.ev-cr-tr.is-batch path {
    stroke: url(#evTrailW);
}

/* 流转环：四站串成的闭环本体，蚁行虚线交代链路一直通着 */
.ev-cr-orbit {
    fill: none;
    stroke: rgba(110, 240, 220, .26);
    stroke-width: 1;
    stroke-dasharray: 3 7;
    animation: evAnt 1.6s linear infinite;
}

/* 光弹：顺时针 6.4s 一圈，是全图唯一的「主语」——
   个例就是它，转到哪一站，那一站就被点亮 */
.ev-cr-comet {
    animation: evTurn var(--ev-turn) linear infinite;
}

.ev-cr-comet circle {
    fill: #eafffb;
    filter: drop-shadow(0 0 7px rgba(110, 240, 220, .95));
}

/* 四站：站圈在光弹经过的那一刻扩散一次，delay 就是光弹走到该站的时间。
   顺时针 个例接收(0) → AI 规整(1/4) → 医学评价(1/2) → 直报递交(3/4) */
.ev-cr-st circle {
    fill: none;
    stroke: var(--ec-teal);
    stroke-width: 1.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: evStn var(--ev-turn) ease-out infinite;
}

.ev-cr-st circle:nth-child(2) {
    animation-delay: calc(var(--ev-turn) * .25);
}

.ev-cr-st circle:nth-child(3) {
    animation-delay: calc(var(--ev-turn) * .5);
}

.ev-cr-st circle:nth-child(4) {
    animation-delay: calc(var(--ev-turn) * .75);
}

@keyframes evStn {
    0% {
        opacity: .95;
        transform: scale(.55);
    }

    16% {
        opacity: 0;
        transform: scale(1.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

/* 站心实点常显（四站是常设环节，不能只在被点到时才存在），被点到时才提亮 */
.ev-cr-sd circle {
    fill: rgba(203, 220, 255, .55);
    transform-box: fill-box;
    transform-origin: center;
    animation: evStd var(--ev-turn) ease-out infinite;
}

.ev-cr-sd circle:nth-child(2) {
    animation-delay: calc(var(--ev-turn) * .25);
}

.ev-cr-sd circle:nth-child(3) {
    animation-delay: calc(var(--ev-turn) * .5);
}

.ev-cr-sd circle:nth-child(4) {
    animation-delay: calc(var(--ev-turn) * .75);
}

@keyframes evStd {

    0%,
    5% {
        opacity: 1;
        transform: scale(1.65);
    }

    26%,
    100% {
        opacity: .55;
        transform: scale(1);
    }
}

/* ---- 中央中枢：一切在这里汇合 ---- */
/* 光晕的呼吸周期 = 光弹走一站的时间（turn / 4）：每完成一站，中枢吞吸一次。
   这一下把「转圈」和「中枢」接成因果，而不是两个各转各的装饰 */
.ev-cr-halo {
    fill: url(#evCoreG);
    animation: evHalo calc(var(--ev-turn) / 4) ease-in-out infinite;
}

@keyframes evHalo {

    0%,
    100% {
        transform: scale(.9);
        opacity: .55;
    }

    45% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.ev-cr-core {
    fill: url(#evCoreB);
    stroke: rgba(176, 226, 255, .3);
    stroke-width: 1;
}

/* 内环反向慢转：中枢自己也在运算，但慢到不抢主线索 */
.ev-cr-core-r {
    fill: none;
    stroke: rgba(110, 240, 220, .5);
    stroke-width: 1;
    stroke-dasharray: 24 14;
    animation: evTurnBack 14s linear infinite;
}

.ev-cr-core-k {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .01em;
    fill: #eafffb;
}

.ev-cr-core-t {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    fill: rgba(203, 220, 255, .74);
}

/* 四站标牌：压在刻度环上，所以必须自带深色底衬才读得清。
   标牌一律静止 —— 会动的是流程，不是它的名字；标签跟着闪只会让人读不完 */
.ev-cr-tag rect {
    fill: rgba(9, 19, 46, .78);
    stroke: rgba(176, 226, 255, .22);
    stroke-width: 1;
}

.ev-cr-tag text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    fill: rgba(214, 230, 255, .92);
}

/* ---- 告警：外圈右上一段扇区被点亮，引线接到标牌 ----
   5.2s 独立周期、且带一大段几乎全暗的间歇：告警是偶发事件，
   一直亮着就等于没有告警；跟主节拍对齐反倒像是排好的动画 */
.ev-cr-alert {
    fill: none;
    stroke: #ffc46e;
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(255, 196, 110, .7));
    animation: evAlert 5.2s ease-out infinite;
}

.ev-cr-alert-l {
    stroke: rgba(255, 196, 110, .6);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    animation: evAnt 1.1s linear infinite, evAlert 5.2s ease-out infinite;
}

.ev-cr-tag.is-alert {
    animation: evAlert 5.2s ease-out infinite;
}

.ev-cr-tag.is-alert rect {
    fill: rgba(48, 27, 8, .82);
    stroke: rgba(255, 196, 110, .5);
}

.ev-cr-tag.is-alert text {
    fill: #ffd9a3;
}

@keyframes evAlert {

    0%,
    34% {
        opacity: .12;
    }

    41% {
        opacity: 1;
    }

    70%,
    100% {
        opacity: .12;
    }
}

/* 系统层面关掉动画时，整张图必须仍然是一张读得懂的静态图：
   雷达拖尾与光弹直接撑掉，其余全部回到常显终态 */
@media (prefers-reduced-motion: reduce) {

    .ev-cr-sweep,
    .ev-cr-comet {
        display: none;
    }

    .ev-cr-in line,
    .ev-cr-tr,
    .ev-cr-tr.is-batch,
    .ev-cr-orbit,
    .ev-cr-halo,
    .ev-cr-core-r,
    .ev-cr-sd circle,
    .ev-cr-alert,
    .ev-cr-alert-l,
    .ev-cr-tag.is-alert,
    .ev-core-live i {
        animation: none;
        opacity: 1;
    }

    .ev-cr-st circle {
        animation: none;
        opacity: .45;
    }
}

/* ---------- 个例之外的四个智能管理模块：通栏标题区 + 下方脊线串链 ---------- */
/* 这一屏前后都是浅底，再换背景色只会糊在一起；区域感交给版式本身：
   标题区通栏占满一段并用一条线收住，下方用一条纵向脊线把四块串成一条链 */
.ev-mod {
    padding: 92px 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

/* 与下一屏同为白底，用一条发丝线交代边界，不靠加深背景硬分区 */
.ev-mod + .ec-reg {
    border-top: 1px solid var(--line);
}

/* 标题区：短线 → 英文标签 → 主标题占满通栏，下面把背景句与结论句并成两列，
   横向展开才接得住通栏宽度，不至于变成一条孤零零的长句 */
.ev-mod-hd {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.ev-mod-hd::before {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--ec-teal) 100%);
}

.ev-mod-k {
    display: block;
    margin-top: 20px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ink-4);
}

.ev-mod-t {
    margin-top: 14px;
    font-size: 34px;
    line-height: 1.34;
    letter-spacing: -.022em;
    color: var(--ink);
}

.ev-mod-sub {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 22px;
}

.ev-mod-d {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--ink-3);
}

/* 结论句用一道品牌左线拎出来，不做成卡片 */
.ev-mod-note {
    padding-left: 14px;
    border-left: 2px solid var(--brand);
    font-size: 13.5px;
    line-height: 1.84;
    color: var(--ink-2);
}

.ev-mod-note b {
    color: var(--brand);
}

.ev-mods {
    margin-top: 44px;
}

/* 四块各自领一个语义色，不再是通篇黑灰；
   03 用信号青、 04 用聚集橙，与 HERO 面板里的两条轨道同色，跨屏对得上 */
.ev-md {
    position: relative;
    padding: 0 0 34px 66px;
    --md-c: var(--brand);
    --md-c-l: var(--brand-100);
    --md-c-s: var(--brand-050);
}

.ev-md.t-indigo {
    --md-c: #5a5fd6;
    --md-c-l: #cdd0f7;
    --md-c-s: #eeeffc;
}

.ev-md.t-teal {
    --md-c: var(--ec-teal-d);
    --md-c-l: #b8ece5;
    --md-c-s: #e6f8f5;
}

.ev-md.t-amber {
    --md-c: #c9761a;
    --md-c-l: #f2d9b4;
    --md-c-s: #fdf3e6;
}

.ev-md:last-child {
    padding-bottom: 0;
}

/* 脊线：从当前编号圈底部一直连到下一块 */
.ev-md::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.ev-md:last-child::before {
    display: none;
}

.ev-md-n {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--md-c-l);
    background: #fff;
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 800;
    color: var(--md-c);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.ev-md:hover .ev-md-n {
    border-color: var(--md-c);
    box-shadow: 0 0 0 4px var(--md-c-s);
}

.ev-md-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.ev-md-hd h3 {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--ink);
}

.ev-md-t {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--md-c-s);
    font-size: 12px;
    font-weight: 700;
    color: var(--md-c);
}

/* 「国内独有」是这一屏唯一值得抢一下注意力的信息，直接用实色底 */
.ev-md-t.is-hl {
    background: var(--md-c);
    color: #fff;
}

.ev-md-b > p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.88;
    color: var(--ink-2);
}

.ev-md-l {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    list-style: none;
}

/* 要点前缀换成一小截语义色竖条：既分条，也把这一块的颜色贯到最细一层 */
.ev-md-l li {
    position: relative;
    padding-left: 12px;
}

.ev-md-l li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 2px;
    height: 13px;
    border-radius: 1px;
    background: var(--md-c);
    opacity: .75;
}

.ev-md-l b {
    display: block;
    font-size: 14px;
    color: var(--ink);
}

.ev-md-l span {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--ink-4);
}

/* ---------- ev-* 响应式：跟随 ec-* 的三档断点 ---------- */
@media (max-width: 1080px) {

    /* 此档 HERO 由两列并排改为上下堆叠，面板不再靠右贴齐，居中才不偏 */
    .ev-core {
        margin: 0 auto;
    }

    .ev-mod {
        padding: 76px 0;
    }

    .ev-mod-t {
        font-size: 27px;
    }

    /* 两列副文在此档已经太窄，改成上下两段 */
    .ev-mod-sub {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ev-mods {
        margin-top: 36px;
    }

    .ev-md-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 22px;
    }
}

@media (max-width: 680px) {
    .ev-core {
        max-width: 100%;
    }

    /* 面板整体缩窄后 SVG 内的字跟着等比变小，但 680 档下面板已拉成满宽，
       缩放比反而大于 1，字号不能在这一档动；真正需要反向放大的是手机竖屏 */

    .ev-mod {
        padding: 58px 0;
    }

    .ev-mod-t {
        font-size: 24px;
    }

    .ev-mod-hd {
        padding-bottom: 26px;
    }

    .ev-mods {
        margin-top: 30px;
    }

    .ev-md {
        padding: 0 0 26px 48px;
    }

    .ev-md::before {
        left: 17px;
        top: 38px;
    }

    .ev-md-n {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .ev-md-hd {
        flex-wrap: wrap;
        gap: 8px;
        min-height: 36px;
    }

    .ev-md-l {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* 手机竖屏：面板宽度降到 viewBox 的 0.7 左右，图内标牌要在 viewBox 里反向放大 */
@media (max-width: 460px) {

    .ev-cr-tag text,
    .ev-cr-core-t {
        font-size: 15px;
    }

    .ev-cr-core-k {
        font-size: 26px;
    }
}

/* ==========================================================================
   ePross 产品页（ep-*）：整体沿用 eClins / eVigil 的 ec-* 版式与配色，
   六个模块直接复用 eVigil 的脊线串链（ev-mod / ev-md），
   只补一处 ePross 专属形态：HERO 右侧的证据锻造台。

   为什么不再用“五入三出的管线框图”：那张图把每个环节都画成了方框，
   方框一多就只剩下“模块很多”一个印象，而图上永远不会“发生事情”。

   去掉面板外框之后的修正（关键）：上一版是“满宽横条堆叠”——一条 460 宽的
   治理带压着三根横条。有外框时它读作面板里的分层，外框一撤就散成几根
   漂在渐变上的横杠，因为图形自己没有轮廓，全靠那个方框在收。
   这一版改成让轮廓自己成立：
     顶部五路撑到最宽处散开 → 斜向汇聚进中间的治理棱镜（两端斜切的六边形）
     → 再顺着一个上宽下窄的漏斗腔体逐层收窄，收成一份报告。
   整图外轮廓是一个居中的塔形，最宽处只占 272/460，左右自然留白，
   所以不需要任何边框来界定它；
   与 eVigil 的圆形中枢也仍是两种语言：一个绕圈转，一个往下收
   ========================================================================== */

/* 两层节拍：小拍 2.4s = 一颗数据从源头落到治理带；
   大拍 7.2s = 一轮证据生产（三层结晶依次长出再复位）。
   大拍恰好是小拍的 3 倍：落料不停、产出成轮 —— 这是真实世界研究的节奏，
   数据一直在进，证据是一轮一轮出的 */
.ep-core {
    --ep-drop: 2.4s;
    --ep-cyc: 7.2s;
    position: relative;
    width: 100%;
    max-width: 470px;
    margin-left: auto;
    padding: 0;
}

.ep-core-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ep-core-k {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(203, 220, 255, .62);
}

.ep-core-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ec-teal);
}

.ep-core-live i {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-teal);
    box-shadow: 0 0 8px rgba(47, 196, 178, .9);
    animation: evBlink 2.4s ease-in-out infinite;
}

.ep-core-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 12px;
}

.ep-core-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(176, 226, 255, .12);
}

.ep-core-lg span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(203, 220, 255, .66);
}

.ep-core-lg i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ep-core-lg .is-m i {
    background: rgba(180, 214, 255, .55);
}

.ep-core-lg .is-s i {
    background: var(--ec-teal);
    box-shadow: 0 0 7px rgba(110, 240, 220, .8);
}

.ep-core-lg .is-c i {
    background: #ffd28a;
}

/* 三个事实数字：从 SVG 里搬出来改用 HTML 排，缩放时不会跟着变糊 */
.ep-core-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.ep-core-kpi b {
    display: block;
    font-family: var(--font-en);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #eaf3ff;
}

.ep-core-kpi span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: rgba(203, 220, 255, .6);
}

.ep-core-ft {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: rgba(203, 220, 255, .5);
}

/* ---- 上层：落料区 ---- */
.ep-cy-src text {
    font-size: 11px;
    fill: rgba(203, 220, 255, .7);
}

.ep-cy-rail line {
    stroke: rgba(176, 226, 255, .14);
    stroke-width: 1;
    stroke-dasharray: 2 6;
}

/* 数据粒：十颗共用同一个 2.4s 拍子，但每路的位移方向不同（外侧斜得多、
   中路垂直），所以要一路一套关键帧 —— 位移必须与导轨的斜率一致，
   否则粒子会脱轨飘在导轨旁边。相位刻意洗乱：若按列序依次递增，
   五列会读成一道从左向右的波，反而更像装饰动画 */
.ep-cy-fall rect {
    fill: #bcd8ff;
    filter: drop-shadow(0 0 4px rgba(120, 180, 255, .8));
    animation-duration: var(--ep-drop);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ep-cy-fall .r1 {
    animation-name: epF1;
}

.ep-cy-fall .r2 {
    animation-name: epF2;
    animation-delay: .74s;
}

.ep-cy-fall .r3 {
    animation-name: epF3;
    animation-delay: .28s;
}

.ep-cy-fall .r4 {
    animation-name: epF4;
    animation-delay: 1.12s;
}

.ep-cy-fall .r5 {
    animation-name: epF5;
    animation-delay: .5s;
}

/* 每路的第二颗：整体推后约半拍，同一条导轨上永远有两颗前后跟着 */
.ep-cy-fall .r1.is-b {
    animation-delay: 1.2s;
}

.ep-cy-fall .r2.is-b {
    animation-delay: 1.94s;
}

.ep-cy-fall .r3.is-b {
    animation-delay: 1.48s;
}

.ep-cy-fall .r4.is-b {
    animation-delay: 2.32s;
}

.ep-cy-fall .r5.is-b {
    animation-delay: 1.7s;
}

/* 行程：纵向统一 90（导轨 22→116 减去粒子自身高），横向按各路斜率配 —— */
@keyframes epF1 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    12%,
    84% {
        opacity: 1;
    }

    100% {
        transform: translate(90px, 90px);
        opacity: 0;
    }
}

@keyframes epF2 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    12%,
    84% {
        opacity: 1;
    }

    100% {
        transform: translate(45px, 90px);
        opacity: 0;
    }
}

@keyframes epF3 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    12%,
    84% {
        opacity: 1;
    }

    100% {
        transform: translate(0, 90px);
        opacity: 0;
    }
}

@keyframes epF4 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    12%,
    84% {
        opacity: 1;
    }

    100% {
        transform: translate(-45px, 90px);
        opacity: 0;
    }
}

@keyframes epF5 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    12%,
    84% {
        opacity: 1;
    }

    100% {
        transform: translate(-90px, 90px);
        opacity: 0;
    }
}

/* ---- 中层：治理棱镜。两端斜切，宽度只占 272/460，
     所以它是图中的一个「器件」而不是一根横贯全宽的杠 ---- */
.ep-cy-prism {
    fill: url(#epBandG);
    stroke: rgba(110, 240, 220, .5);
    stroke-width: 1;
    animation: epBand var(--ep-drop) ease-in-out infinite;
}

@keyframes epBand {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(110, 240, 220, .18));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(110, 240, 220, .45));
    }
}

/* 棱镜内高光往右掠过，行程 490 = 棱镜右缘 366 加上自身 120，首尾都在棱镜外，
   看不到“凭空出现 / 凭空消失”。周期 3.4s 与落料的 2.4s 不整除，
   治理扫描和落料不会总在同一位置碰面 */
.ep-cy-sweep {
    fill: url(#epSweepG);
    opacity: .5;
    animation: epSweep 3.4s linear infinite;
}

@keyframes epSweep {
    to {
        transform: translateX(490px);
    }
}

.ep-cy-bk {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    fill: #eafffb;
}

/* 四道工序拆到棱镜第二行：棱镜收窄到 272 之后一行放不下，
   而这四个词是真要被读的内容，不能压成一行挤字 */
.ep-cy-bs {
    font-size: 10px;
    letter-spacing: .02em;
    fill: rgba(226, 245, 255, .74);
}

/* 漏斗腔体：把三层结晶收进一个上宽下窄的形里 ——
   去掉面板外框后，全图的「形体」就靠这条轮廓与上方的汇聚斜线撑住，
   填充刻意压到极淡，它是收口，不是又一个色块 */
.ep-cy-fn {
    fill: url(#epFunnelG);
    stroke: rgba(176, 226, 255, .17);
    stroke-width: 1;
}

/* 出料口：三条短线的虚线向下流，交代治理完的数据真在往下送 */
.ep-cy-out line {
    stroke: rgba(110, 240, 220, .55);
    stroke-width: 1.4;
    stroke-dasharray: 3 4;
    animation: epAnt 1s linear infinite;
}

@keyframes epAnt {
    to {
        stroke-dashoffset: -7;
    }
}

/* ---- 下层：结晶三层 ---- */
/* 三层错峰长出（队列 → 分析 → 报告），走完一轮回到淡底再来。
   注意复位不是归零而是归到 .14：彼此递进的层次得一直存在，
   否则每轮末尾下半张图会空掉，反而像渲染出错。
   scaleX 必须配 transform-box: fill-box，否则会拿整个视口做基准而飞出画面 */
.ep-cy-ly rect {
    fill: url(#epLayerG);
    stroke: rgba(110, 240, 220, .38);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: epGrow var(--ep-cyc) ease-out infinite;
}

.ep-cy-ly rect:nth-child(2),
.ep-cy-lt text:nth-child(2) {
    animation-delay: calc(var(--ep-cyc) * .16);
}

.ep-cy-ly rect:nth-child(3),
.ep-cy-lt text:nth-child(3) {
    animation-delay: calc(var(--ep-cyc) * .32);
}

@keyframes epGrow {
    0% {
        opacity: .14;
        transform: scaleX(.74);
    }

    13%,
    78% {
        opacity: 1;
        transform: scaleX(1);
    }

    95%,
    100% {
        opacity: .14;
        transform: scaleX(.74);
    }
}

.ep-cy-lt text {
    font-size: 11.5px;
    fill: rgba(226, 245, 255, .94);
    animation: epLt var(--ep-cyc) ease-out infinite;
}

@keyframes epLt {
    0% {
        opacity: .22;
    }

    15%,
    80% {
        opacity: 1;
    }

    96%,
    100% {
        opacity: .22;
    }
}

/* 系统层面已关动画时：撑掉落料与扫描（这两样静止后没有意义），
   其余一律固定在“已跑完一轮”的终态，图仍然读得完 */
@media (prefers-reduced-motion: reduce) {

    .ep-cy-fall,
    .ep-cy-sweep {
        display: none;
    }

    .ep-cy-prism,
    .ep-cy-out line,
    .ep-cy-ly rect,
    .ep-cy-lt text,
    .ep-core-live i {
        animation: none;
        opacity: 1;
    }

    .ep-cy-ly rect {
        transform: none;
    }
}

/* ==========================================================================
   ePross 六大模块：3D coverflow 立体轮播（复用 eClins 的 ec-cap / ec-cf 骨架）
   六个模块一次只把一张推到正前方，两侧陪体卡旋转后退，读的是
   「同一个平台里，六块能力轮番站到台前」。中央卡不加任何 transform，
   正文与右栏截图保持锐利；这里只写 ePross 专属的差异：
   ① 标签栏六项而非五项；② 右栏用各模块的实机示意图（ep-01~06.png）
   ========================================================================== */

.ep-cap .ec-cf {
    margin-top: 46px;
}

.ep-cap .ec-cf-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 中等屏：轮播上移，贴紧标题；HERO 面板改为居中（此档两列已堆叠） */
@media (max-width: 1080px) {
    .ep-cap .ec-cf {
        margin-top: 34px;
    }

    .ep-core {
        margin: 0 auto;
    }
}

@media (max-width: 680px) {
    .ep-core {
        max-width: 100%;
    }

    .ep-core-kpi {
        gap: 8px;
    }

    .ep-core-kpi b {
        font-size: 19px;
    }
}

/* 手机竖屏：面板宽度降到 viewBox 的 0.7 左右，图内文字要反向放大才读得清 */
@media (max-width: 460px) {

    .ep-cy-src text,
    .ep-cy-lt text {
        font-size: 14.5px;
    }

    .ep-cy-bk {
        font-size: 13px;
    }
}

/* ---------- 3. 十项服务范围：全宽族头横幅 + 三列表格式清单 ---------- */
.cpv-scope {
    padding: 92px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line-2);
}

.cpv-fam {
    margin-top: 48px;
}

.cpv-fam + .cpv-fam {
    margin-top: 58px;
}

/* 族头横贯全宽：左侧编号与族名，右侧一句话靠右，底部一条主色粗线收住 */
.cpv-fam-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--brand);
}

.cpv-fam:last-of-type .cpv-fam-hd {
    border-bottom-color: var(--cv-teal);
}

.cpv-fam-i {
    display: block;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--brand);
}

.cpv-fam:last-of-type .cpv-fam-i {
    color: var(--cv-teal-d);
}

.cpv-fam-t {
    margin-top: 9px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.cpv-fam-d {
    max-width: 640px;
    padding-bottom: 5px;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--ink-2);
    text-align: right;
    /* 族头右侧这句话不允许折行：它右对齐，折行后第二行只剩几个字
       吊在右下角，读起来是断的。窄屏断点里会改回 normal */
    white-space: nowrap;
}

/* 清单：编号 / 名称 / 说明 三列对齐成表，只用行间细线分条。
   行高与列间距又放开了一档：原来上下 21px 、列间 24px，
   四条叠在族头细线下面读起来是挤的 ——
   这种三列清单的呼吸全靠行高，行高不够就只剩密度 */
.cpv-svs {
    margin-top: 12px;
}

.cpv-sv {
    position: relative;
    display: grid;
    grid-template-columns: 66px 196px minmax(0, 1fr);
    gap: 0 34px;
    align-items: baseline;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

/* hover 时行左出一条主色竖标，不改背景不动布局 */
.cpv-sv::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--brand);
    opacity: 0;
    transition: opacity .18s ease;
}

.cpv-fam:last-of-type .cpv-sv::before {
    background: var(--cv-teal);
}

.cpv-sv:hover::before {
    opacity: 1;
}

.cpv-sv-n {
    font-family: var(--font-en);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: rgba(18, 87, 224, .44);
    transition: color .18s ease;
}

.cpv-fam:last-of-type .cpv-sv-n {
    color: rgba(23, 181, 164, .58);
}

.cpv-sv-t {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
    transition: color .18s ease;
}

.cpv-sv-d {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ink-3);
}

.cpv-sv:hover .cpv-sv-n,
.cpv-sv:hover .cpv-sv-t {
    color: var(--brand);
}

.cpv-fam:last-of-type .cpv-sv:hover .cpv-sv-n,
.cpv-fam:last-of-type .cpv-sv:hover .cpv-sv-t {
    color: var(--cv-teal-d);
}

/* ---------- 4. 良好服务的质量体系 QMS（保留深色：全页中段唯一的视觉重心，
   若改浅底，白→灰→白→白 连续四屏会彻底平掉） ---------- */
.cpv-qms {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background: linear-gradient(180deg, #070b16 0%, #0b1224 46%, #05070f 100%);
}

/* 顶缘一条冷光细线，与首屏同语系，交代浅→深的切换 */
.cpv-qms::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(143, 168, 255, .55), rgba(110, 231, 212, .55), transparent);
}

.cpv-qms::after {
    content: "";
    position: absolute;
    inset: -20% -6%;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 24% 12%, rgba(46, 104, 226, .22), transparent 72%),
        radial-gradient(38% 44% at 82% 84%, rgba(24, 132, 140, .16), transparent 74%);
}

.cpv-qms .wrap {
    position: relative;
    z-index: 1;
}

.cpv-qms .cpv-hd-t {
    color: #fff;
}

.cpv-qms .cpv-hd-t em {
    color: transparent;
    background: linear-gradient(96deg, #a8c0ff, #7fe6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cpv-qms .cpv-hd-d {
    color: var(--on-dark-2);
}

.cpv-qms .cpv-hd-k {
    color: rgba(178, 200, 255, .86);
}

.cpv-qms .cpv-hd-k::before {
    background: var(--grad-ai);
}

/* 超大英文水印：深色区的科技底噪，不参与阅读 */
.cpv-qms-wm {
    position: absolute;
    right: 2%;
    top: 54px;
    z-index: -1;
    font-family: var(--font-en);
    font-size: 132px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, .045);
    pointer-events: none;
    user-select: none;
}

/* 监管口径刻度带：FDA / EMA / NMPA 挂在同一条发光线上 */
.cpv-cov {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cpv-cov-k {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(110, 231, 212, .82);
}

.cpv-cov-t {
    margin-top: 12px;
    max-width: 820px;
    font-size: 15.5px;
    line-height: 1.88;
    color: var(--on-dark-2);
}

.cpv-cov-l {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
}

.cpv-cov-l::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: linear-gradient(90deg, rgba(143, 168, 255, .6), rgba(110, 231, 212, .6));
}

.cpv-cov-l li {
    position: relative;
    padding: 26px 30px 0 0;
}

.cpv-cov-l li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(143, 168, 255, .9);
}

.cpv-cov-l li:last-child::before {
    background: var(--cv-teal);
}

.cpv-cov-l b {
    display: block;
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}

.cpv-cov-l span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--on-dark-3);
}

/* 四个管理域：列间只用一条竖线，不切卡片 */
.cpv-qms-l {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 52px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cpv-qms-l li {
    padding: 0 28px;
}

.cpv-qms-l li:first-child {
    padding-left: 0;
}

.cpv-qms-l li:last-child {
    padding-right: 0;
}

.cpv-qms-l li + li {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.cpv-qms-l em {
    font-style: normal;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(143, 168, 255, .82);
}

.cpv-qms-l b {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.45;
    color: #fff;
}

.cpv-qms-l span {
    display: block;
    margin-top: 11px;
    font-size: 13.5px;
    line-height: 1.82;
    color: var(--on-dark-2);
}

/* 双地团队动态维护：收尾一行 */
.cpv-keep {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 50px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cpv-keep i {
    font-style: normal;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(178, 198, 246, .32);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.cpv-keep span {
    font-size: 14px;
    line-height: 1.78;
    color: var(--on-dark-2);
}

/* ---------- 5. Global 与稽查实证 ---------- */
.cpv-gl {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background: #fff;
}

.cpv-gl::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    width: 66%;
    height: 100%;
    pointer-events: none;
    background: url('../img/worldmap.svg') right center / contain no-repeat;
    opacity: .2;
}

.cpv-gl .wrap {
    position: relative;
    z-index: 1;
}

/* 区域覆盖：一条横向刻度带，不用胶囊标签 */
.cpv-reg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 40px;
    padding-top: 24px;
}

.cpv-reg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--brand), var(--cv-teal));
    opacity: .55;
}

.cpv-reg li {
    position: relative;
    padding-right: 18px;
}

.cpv-reg li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -28px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
}

.cpv-reg li:nth-child(n+4)::before {
    background: var(--cv-teal);
}

.cpv-reg b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.cpv-reg em {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ink-4);
}

/* 两个案例：左右对照，中间一条竖线，去掉边框阴影与圆角 */
.cpv-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.cpv-case {
    padding-right: 48px;
}

.cpv-case + .cpv-case {
    padding-right: 0;
    padding-left: 48px;
    border-left: 1px solid var(--line);
}

.cpv-case-k {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink-4);
}

.cpv-case-k b {
    color: var(--brand);
}

.cpv-case-k::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.cpv-case + .cpv-case .cpv-case-k b {
    color: var(--cv-teal-d);
}

.cpv-case h3 {
    margin-top: 16px;
    font-size: 22px;
    line-height: 1.46;
    letter-spacing: -0.015em;
}

.cpv-case p {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-3);
}

/* 横向时间轴：2019 → 逐步全委 → AI 战略合作 */
.cpv-step {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 32px;
    padding-top: 24px;
}

.cpv-step::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(18, 87, 224, .5), rgba(18, 87, 224, .12));
}

.cpv-step li {
    position: relative;
    padding-right: 18px;
}

.cpv-step li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -28px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
}

.cpv-step b {
    display: block;
    font-family: var(--font-en);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand);
}

.cpv-step span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-3);
}

/* 稽查成绩：超大数字直接说话，不包框 */
.cpv-score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.cpv-score li {
    padding: 0 24px;
}

.cpv-score li:first-child {
    padding-left: 0;
}

.cpv-score li:last-child {
    padding-right: 0;
}

.cpv-score li + li {
    border-left: 1px solid var(--line-2);
}

.cpv-score b {
    display: block;
    font-family: var(--font-en);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--cv-teal-d);
}

.cpv-score b i {
    font-style: normal;
    margin-left: 4px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-3);
}

.cpv-score span {
    display: block;
    margin-top: 11px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

.cpv-case-ft {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 26px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.cpv-case-ft::before {
    content: "";
    flex: none;
    width: 18px;
    height: 2px;
    margin-top: 9px;
    background: var(--cv-teal);
}

/* ---------- 6. 响应式 ---------- */
@media (max-width: 1180px) {
    .cpv-hero-h1 {
        font-size: 44px;
    }

    .cpv-topo-l li {
        padding-right: 18px;
    }

    .cpv-sv {
        grid-template-columns: 56px 172px minmax(0, 1fr);
        gap: 0 20px;
    }

    .cpv-qms-wm {
        font-size: 104px;
    }

    .cpv-stage li {
        padding: 0 20px;
    }

    .cpv-stage li::before {
        left: 20px;
    }

    .cpv-stage-n {
        font-size: 38px;
    }
}

@media (max-width: 1024px) {
    .cpv-hero {
        padding: 40px 0 0;
    }

    .cpv-hero-h1 {
        font-size: 34px;
        max-width: none;
    }

    .cpv-hero-in {
        padding-bottom: 38px;
    }

    .cpv-hero-lead {
        font-size: 16.5px;
    }

    /* 拓扑带压成两列：横链路线失意，改用每列的节点自说明 */
    .cpv-topo-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 0;
    }

    .cpv-topo-l::before {
        display: none;
    }

    .cpv-topo-l li {
        padding-top: 24px;
    }

    .cpv-band-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cpv-band-l li {
        padding: 20px 20px 20px 22px;
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .cpv-band-l li:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .cpv-life,
    .cpv-scope,
    .cpv-qms,
    .cpv-gl {
        padding: 64px 0;
    }

    .cpv-hd-t {
        font-size: 27px;
    }

    .cpv-claim {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .cpv-claim-q {
        font-size: 24px;
    }

    /* 四段进阶→两行：横轴仍在顶部，行间补一条横线 */
    .cpv-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    .cpv-stage li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .cpv-stage li:nth-child(odd)::before {
        left: 0;
    }

    .cpv-stage li:nth-child(n+3) {
        padding-top: 30px;
        border-top: 1px solid var(--line);
    }

    .cpv-stage li:nth-child(n+3)::before {
        display: none;
    }

    .cpv-cross-b {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cpv-cross-b > div {
        padding-right: 0;
    }

    .cpv-cross-b > div + div {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    /* 三列表压不下时，说明掉到名称下方另起一行 */
    .cpv-sv {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 0 20px;
    }

    .cpv-sv-d {
        grid-column: 2;
        margin-top: 8px;
    }

    .cpv-fam-d {
        max-width: none;
        text-align: left;
        white-space: normal;
    }

    .cpv-cov-l,
    .cpv-qms-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .cpv-qms-l li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .cpv-qms-wm {
        display: none;
    }

    /* 换行后横刻度线失效，改成每项左侧小圆点 */
    .cpv-reg {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 26px;
        padding-top: 0;
    }

    .cpv-reg::before {
        display: none;
    }

    .cpv-reg li {
        padding-left: 16px;
    }

    .cpv-reg li::before {
        top: 6px;
    }

    .cpv-cases {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    .cpv-case {
        padding-right: 0;
    }

    .cpv-case + .cpv-case {
        padding-left: 0;
        padding-top: 36px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 680px) {
    .cpv-hero-h1 {
        font-size: 27px;
    }

    .cpv-topo-l,
    .cpv-band-l,
    .cpv-stage,
    .cpv-cov-l,
    .cpv-qms-l,
    .cpv-score,
    .cpv-step {
        grid-template-columns: 1fr;
    }

    .cpv-band-l li {
        border-left: 0;
        padding-left: 0;
    }

    .cpv-stage li {
        padding: 0;
        border-left: 0;
    }

    .cpv-stage li::before,
    .cpv-stage li:nth-child(n+3)::before {
        display: none;
    }

    .cpv-stage li + li {
        padding-top: 26px;
        border-top: 1px solid var(--line);
    }

    .cpv-sv {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 0 14px;
    }

    .cpv-sv-n {
        font-size: 20px;
    }

    .cpv-fam-t {
        font-size: 22px;
    }

    .cpv-qms-l li {
        padding: 0;
    }

    .cpv-qms-l li + li {
        padding-top: 26px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .cpv-reg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 时间轴竖起来：横线改成每段左侧节点 */
    .cpv-step {
        padding-top: 0;
    }

    .cpv-step::before {
        display: none;
    }

    .cpv-step li {
        padding-left: 16px;
        padding-right: 0;
    }

    .cpv-step li::before {
        top: 5px;
    }

    .cpv-score li,
    .cpv-score li + li {
        padding: 0;
        border-left: 0;
    }

    .cpv-score li + li {
        margin-top: 22px;
    }

    .cpv-step li + li {
        margin-top: 24px;
    }

    .cpv-gl::before {
        opacity: .12;
    }
}

/* ==========================================================================
   上市后药物警戒委托服务（service-post.html）
   完全沿用临床页的 cpv-* 版式语言，只补三个本页独有的组件：
   1) 首屏的客户市场覆盖带（拓扑骨架改 5 列）；
   2) INBOUND 案例的深色主张 + 深色时间轴；
   3) OUTBOUND 案例的表式两条（左列平台索引，右列场景与能力）。
   节奏是 深—浅—深—浅，案例一律用刻度带与表式清单表达，不做卡片。
   ========================================================================== */

/* 首屏客户覆盖：五个市场挂在同一条链路上 */
.cpv-topo-l.is-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------- INBOUND 案例：深色，整页第二个视觉重心 ---------- */
.cpv-inb {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background: linear-gradient(180deg, #070b16 0%, #0b1224 46%, #05070f 100%);
}

/* 顶缘冷光细线，与首屏同语系，交代浅→深的切换 */
.cpv-inb::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(143, 168, 255, .55), rgba(110, 231, 212, .55), transparent);
}

.cpv-inb::after {
    content: "";
    position: absolute;
    inset: -20% -6%;
    pointer-events: none;
    background:
        radial-gradient(40% 44% at 20% 14%, rgba(46, 104, 226, .2), transparent 72%),
        radial-gradient(38% 44% at 84% 82%, rgba(24, 132, 140, .16), transparent 74%);
}

.cpv-inb .wrap {
    position: relative;
    z-index: 1;
}

.cpv-inb .cpv-hd-t {
    color: #fff;
}

.cpv-inb .cpv-hd-t em {
    color: transparent;
    background: linear-gradient(96deg, #a8c0ff, #7fe6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cpv-inb .cpv-hd-d {
    color: var(--on-dark-2);
}

.cpv-inb .cpv-hd-k {
    color: rgba(178, 200, 255, .86);
}

.cpv-inb .cpv-hd-k::before {
    background: var(--grad-ai);
}

/* 案例主张：一句大字 + 右侧评注，下沿一条发丝线收住 */
.cpv-ib {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
    margin-top: 42px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.cpv-ib-q {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.58;
    letter-spacing: -0.02em;
    color: #fff;
}

.cpv-ib-q em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(96deg, #a8c0ff 0%, #7fe6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cpv-ib-p {
    font-size: 15.5px;
    line-height: 1.92;
    color: var(--on-dark-2);
}

.cpv-ib-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(178, 200, 255, .78);
}

.cpv-ib-tag::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--cv-teal);
}

/* 深色时间轴：2019 → 三条线全委 → 亚太 AI 战略合作 */
.cpv-tl {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 46px;
    padding-top: 34px;
}

.cpv-tl::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(143, 168, 255, .22) 0%,
            rgba(143, 168, 255, .6) 20%,
            rgba(110, 231, 212, .6) 82%,
            rgba(110, 231, 212, .2) 100%);
}

.cpv-tl li {
    position: relative;
    padding-right: 40px;
}

.cpv-tl li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -39px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0a1020;
    border: 2px solid rgba(143, 168, 255, .8);
}

/* 最后一段是当前状态，用青色实心点收口 */
.cpv-tl li:last-child::before {
    background: var(--cv-teal);
    border-color: var(--cv-teal);
}

.cpv-tl b {
    display: block;
    font-family: var(--font-en);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
}

.cpv-tl b i {
    font-style: normal;
    margin-left: 5px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: rgba(110, 231, 212, .9);
}

.cpv-tl em {
    display: block;
    margin-top: 13px;
    font-style: normal;
    font-size: 16.5px;
    font-weight: 700;
    color: #fff;
}

.cpv-tl span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.78;
    color: var(--on-dark-3);
}

/* ---------- OUTBOUND 案例：左列平台索引 + 右列场景，区域划分靠色轨而不是灰线 ---------- */
.cpv-ob {
    padding: 92px 0;
    background: #fff;
}

.cpv-ob-l {
    margin-top: 46px;
}

/* 每条案例自带一支色：临床走蓝、上市后走青，同一支色贯穿色轨、编号、平台名、刻度点 */
.cpv-ob-i {
    --c: var(--brand);
    --c-w: rgba(18, 87, 224, .34);
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 0 56px;
    padding: 34px 0 44px;
}

.cpv-ob-i + .cpv-ob-i {
    margin-top: 24px;
}

.cpv-ob-i:last-child {
    --c: var(--cv-teal-d);
    --c-w: rgba(23, 181, 164, .36);
    border-bottom: 1px solid var(--line);
}

/* 开条色轨：2px 起笔后向右淡出，一眼分清两条案例，替代原来上下夹的灰线 */
.cpv-ob-i::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c) 0%, var(--c-w) 44%, rgba(15, 23, 42, .06) 100%);
}

/* 左列索引：右侧一条竖向渐变线划开索引与正文，顺带把左列下方的空白撑住 */
.cpv-ob-k {
    position: relative;
}

.cpv-ob-k::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, var(--c-w) 0%, rgba(15, 23, 42, .05) 100%);
}

.cpv-ob-k > span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--c);
}

.cpv-ob-k > span::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--c);
}

.cpv-ob-k > b {
    display: block;
    margin-top: 15px;
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--c);
}

.cpv-ob-k > em {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

/* 索引栏收尾一句：填住左列下方的空白，用色点起头而不是再加横线 */
.cpv-ob-k > i {
    position: relative;
    display: block;
    margin-top: 24px;
    padding-left: 15px;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.78;
    color: var(--ink-4);
}

.cpv-ob-k > i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c);
    opacity: .6;
}

.cpv-ob-b > h3 {
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

.cpv-ob-b > p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-3);
}

/* 三项能力：改成挂点式刻度带，和首屏市场带、INBOUND 时间轴同一套语言，不再用竖线切格 */
.cpv-ob-s {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    margin-top: 30px;
    padding-top: 30px;
}

.cpv-ob-s::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--c-w), rgba(15, 23, 42, .07) 78%);
}

.cpv-ob-s li {
    position: relative;
    padding-left: 16px;
}

.cpv-ob-s li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -34px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 4px #fff;
}

.cpv-ob-s b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.cpv-ob-s span {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-3);
}

/* ==========================================================================
   国际化二级页（global-apac.html / global-outbound.html）· gs-* 视觉体系
   节奏：HERO 深 → 中段浅底推进 → 收束区回到深色
   约束：正文容器不使用 3D / blur / text-shadow，保证字体清晰；动画只用 transform / opacity
   ========================================================================== */
body[data-page="global"] {
    --gt: #2fc4b2;
    --gt-d: #17b5a4;
}

/* ---------- 通用章节头 ---------- */
.gs-hd {
    max-width: 800px;
}

.gs-hd-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.gs-hd-k::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--gt));
}

.gs-hd-t {
    margin-top: 14px;
    font-size: 33px;
    line-height: 1.3;
}

.gs-hd-t em {
    font-style: normal;
    color: var(--brand);
}

.gs-hd-d {
    margin-top: 15px;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* 宽版章节头：标题占左，右侧补一枚定性标记，导语因此可以单行铺满 */
.gs-hd.is-wide {
    max-width: none;
}

.gs-hd-r {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: flex-end;
    gap: 0 46px;
}

.gs-hd-c {
    min-width: 0;
}

.gs-hd-b {
    padding: 0 0 4px 20px;
    border-left: 2px solid var(--brand);
    text-align: left;
}

.gs-hd-b > b {
    display: block;
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ink-2);
}

.gs-hd-b > em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--brand);
}

.gs-hd.is-wide .gs-hd-d {
    margin-top: 18px;
    max-width: none;
    font-size: 15.5px;
    line-height: 1.8;
}

/* 深底反相 */
.gs-hd.is-dark .gs-hd-k {
    color: rgba(178, 200, 255, .88);
}

.gs-hd.is-dark .gs-hd-k::before {
    background: var(--grad-ai);
}

.gs-hd.is-dark .gs-hd-t {
    color: #fff;
}

.gs-hd.is-dark .gs-hd-t em {
    background: linear-gradient(96deg, #a8c0ff 0%, #7fe6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gs-hd.is-dark .gs-hd-d {
    color: var(--on-dark-3);
}

/* 深底区块水印：只做背景纹理，不能和标题抢读 */
.gs-wm {
    position: absolute;
    right: 0;
    top: 12px;
    white-space: nowrap;
    font-family: var(--font-en);
    font-size: 62px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    color: rgba(255, 255, 255, .03);
    pointer-events: none;
    user-select: none;
}

/* 水印之上的正文统一抬一层，避免堆叠顺序意外 */
.gs-ai > .wrap > *:not(.gs-wm) {
    position: relative;
    z-index: 1;
}

/* ---------- 1. HERO ---------- */
.gs-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 0;
    background:
        radial-gradient(122% 92% at 50% -12%,
            #16274f 0%,
            #101a3a 26%,
            #0a1126 56%,
            #06090f 84%,
            #03050b 100%);
}

.gs-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gs-hero-bg::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 2%;
    width: 76%;
    height: 92%;
    background: url('../img/worldmap.svg') right center / contain no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
    opacity: .34;
}

.gs-hero-bg::after {
    content: "";
    position: absolute;
    left: 26%;
    top: -260px;
    width: 1240px;
    height: 620px;
    margin-left: -620px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(112, 158, 248, .26), rgba(40, 84, 190, .1) 54%, transparent 76%);
}

/* 呼吸色雾：与 .cpv-breath 同一套套路（挂在真实子元素 + z-index: 1，才能压在
   世界地图与静态冷光之上）。global-apac / global-outbound 两页讲的是多区域流转，
   取 17s、色相 10deg，雾心偏右、色调往靓蓝走，与 cpv 那四页拉开身份差异
   （两套骨架完全一样，若参数也一样就成了同一个页） */
.gs-breath {
    --bl: 62px;
    --hb-h: 10deg;
    --hb-x: 2.4%;
    --hb-y: 1.8%;
    --hb-s1: 1.075;
    --hb-o0: .42;
    --hb-o1: 1;
    position: absolute;
    inset: -22% -8% auto -8%;
    z-index: 1;
    height: 140%;
    pointer-events: none;
    background:
        radial-gradient(56% 42% at 46% 0%, rgba(116, 158, 255, .5), transparent 72%),
        radial-gradient(48% 36% at 12% 18%, rgba(64, 108, 226, .38), transparent 74%),
        radial-gradient(48% 36% at 88% 10%, rgba(92, 118, 244, .4), transparent 74%);
    background-size: 150% 150%, 160% 160%, 160% 160%;
    background-position: 50% 0%, 0% 20%, 100% 10%;
    filter: blur(62px);
    opacity: .96;
    will-change: transform, opacity, filter, background-position;
    animation: heroBreath 17s ease-in-out infinite;
}

.gs-hero .wrap {
    position: relative;
    z-index: 1;
}

.gs-hero-in {
    padding: 0 0 48px;
}

.gs-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gs-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(178, 200, 255, .86);
}

.gs-k::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-ai);
}

.gs-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(110, 231, 212, .88);
    white-space: nowrap;
}

.gs-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gt);
    animation: gsBlink 2.6s ease-in-out infinite;
}

@keyframes gsBlink {

    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: 1;
    }
}

.gs-h1 {
    margin-top: 34px;
    max-width: 15em;
    font-size: 54px;
    line-height: 1.18;
    color: #fff;
    letter-spacing: -0.025em;
}

.gs-h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #a8c0ff 0%, #7fe6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gs-lead {
    margin-top: 26px;
    max-width: 900px;
    font-size: 17.5px;
    line-height: 1.88;
    color: var(--on-dark);
}

.gs-p {
    margin-top: 14px;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.88;
    color: var(--on-dark-3);
}

/* 市场链路拓扑 */
.gs-topo {
    margin-top: 46px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.gs-topo-hd {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.gs-topo-hd b {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #fff;
}

.gs-topo-hd em {
    font-style: normal;
    font-size: 13.5px;
    color: var(--on-dark-3);
}

.gs-topo-hd span {
    margin-left: auto;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(110, 231, 212, .82);
    white-space: nowrap;
}

.gs-topo-l {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 30px;
}

.gs-topo-l.is-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gs-topo-l::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(143, 168, 255, .2) 0%,
            rgba(143, 168, 255, .55) 16%,
            rgba(110, 231, 212, .55) 84%,
            rgba(110, 231, 212, .18) 100%);
}

.gs-topo-l li {
    position: relative;
    padding: 26px 26px 0 0;
}

.gs-topo-l li > i {
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0a1020;
    border: 2px solid rgba(143, 168, 255, .8);
}

.gs-topo-l li.is-hq > i {
    border-color: var(--gt);
    background: var(--gt);
    animation: gsBlink 3s ease-in-out infinite;
}

.gs-topo-l li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    height: 14px;
    width: 1px;
    background: linear-gradient(180deg, rgba(143, 168, 255, .55), transparent);
}

.gs-topo-l b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.gs-topo-l em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(178, 200, 255, .58);
}

.gs-topo-l span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--on-dark-3);
}

.gs-topo-ft {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13.5px;
    color: var(--on-dark-2);
}

.gs-topo-ft i {
    font-style: normal;
    flex: none;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #0a1020;
    background: linear-gradient(96deg, #a8c0ff, #7fe6d4);
}

/* 首屏底部事实带 */
.gs-band {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}

.gs-band-l {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gs-band-l li {
    padding: 26px 26px 26px 26px;
    border-left: 1px solid rgba(255, 255, 255, .09);
}

.gs-band-l li:first-child {
    border-left: 0;
    padding-left: 0;
}

.gs-band-l b {
    display: block;
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.02em;
}

.gs-band-l b i {
    font-style: normal;
    margin-left: 5px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(110, 231, 212, .9);
}

.gs-band-l span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--on-dark-2);
}

/* ---------- 深底收束条 / 浅底提示条 ---------- */
.gs-keep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    line-height: 1.8;
    color: var(--on-dark-2);
}

.gs-keep i {
    flex: none;
    font-style: normal;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #0a1020;
    background: linear-gradient(96deg, #a8c0ff, #7fe6d4);
}

.gs-note {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

.gs-note b {
    flex: none;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--brand);
}

/* ==========================================================================
   页 A：跨国外资企业亚太地区药物警戒服务
   ========================================================================== */
/* ---------- 2. 六年四步演进轴 + 受托范围累积矩阵 ---------- */
.gs-evo-sec {
    padding: 92px 0;
    background: #fff;
}

.gs-evo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    padding-top: 34px;
}

/* 一条横向渐变轴：蓝端起步，青端是当下 */
.gs-evo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, #2b7fd6 52%, var(--gt) 100%);
}

.gs-evo li {
    position: relative;
    padding: 0 30px;
}

.gs-evo li:first-child {
    padding-left: 0;
}

.gs-evo li:last-child {
    padding-right: 0;
}

.gs-evo li + li {
    border-left: 1px solid var(--line);
}

/* 轴上方节点，对齐每段正文左缘 */
.gs-evo li::before {
    content: "";
    position: absolute;
    left: 30px;
    top: -5px;
    width: 10px;
    height: 10px;
    background: var(--brand);
}

.gs-evo li:first-child::before {
    left: 0;
}

.gs-evo li.is-now::before {
    background: var(--gt);
    box-shadow: 0 0 0 4px rgba(47, 196, 178, .18);
}

.gs-evo b {
    display: block;
    font-family: var(--font-en);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.gs-evo li.is-now b {
    color: var(--gt-d);
}

.gs-evo em {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.gs-evo span {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.78;
    color: var(--ink-3);
}

.gs-evo i {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink-4);
}

/* 累积矩阵：四条业务线 × 四个年份，形成阶梯 */
.gs-mx {
    margin-top: 58px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.gs-mx-hd,
.gs-mx-l li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, minmax(96px, 148px));
    align-items: center;
    gap: 0 18px;
}

.gs-mx-hd {
    padding-bottom: 12px;
}

.gs-mx-lb {
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.gs-mx-hd b {
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink-2);
    text-align: center;
}

.gs-mx-l li {
    padding: 17px 0;
    border-top: 1px solid var(--line);
}

.gs-mx-n {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}

.gs-mx-n em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink-4);
}

/* 未生效：一条极淡的占位轨 */
.gs-mx-l i {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: var(--bg-soft-2, #eef1f6);
}

/* 已生效：实心色轨，连续年份自然连成一条 */
.gs-mx-l i.is-on {
    background: linear-gradient(90deg, rgba(18, 87, 224, .82), rgba(43, 143, 214, .82));
}

/* 起始年份加一个方形起笔，标出「这一年开始委托」 */
.gs-mx-l i.is-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 4px;
    height: 18px;
    border-radius: 1px;
    background: var(--brand);
}

.gs-mx-l i.is-ai {
    background: linear-gradient(90deg, rgba(43, 143, 214, .85), var(--gt));
}

.gs-mx-l i.is-ai.is-head::before {
    background: var(--gt-d);
}

.gs-mx-ft {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--ink-4);
}

/* ---------- 3. AI Intake Agent（深色） ---------- */
.gs-ai {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background:
        radial-gradient(88% 120% at 88% 6%, rgba(47, 196, 178, .12), transparent 62%),
        radial-gradient(78% 96% at 8% 0%, rgba(112, 158, 248, .16), transparent 60%),
        linear-gradient(180deg, #070c18 0%, #0a1020 46%, #05070d 100%);
}

.gs-ai .wrap {
    position: relative;
}

.gs-ai-b {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
    margin-top: 42px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gs-ai-q {
    font-size: 27px;
    line-height: 1.58;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.gs-ai-q em {
    font-style: normal;
    color: #7fe6d4;
}

.gs-ai-p {
    font-size: 15px;
    line-height: 1.92;
    color: var(--on-dark-3);
}

.gs-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--on-dark-2);
}

.gs-ai-tag::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--gt);
}

/* 三项能力：编号 + 标题 + 说明，列间只用一条细竖线 */
.gs-cap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px;
}

.gs-cap li {
    padding: 0 30px;
}

.gs-cap li:first-child {
    padding-left: 0;
}

.gs-cap li:last-child {
    padding-right: 0;
}

.gs-cap li + li {
    border-left: 1px solid rgba(255, 255, 255, .09);
}

.gs-cap span {
    display: block;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(110, 231, 212, .8);
}

.gs-cap b {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.gs-cap p {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--on-dark-3);
}

/* ---------- 4. 三条线同源交付（浅底） ---------- */
.gs-ln-sec {
    padding: 92px 0;
    background: var(--bg-soft, #f6f8fc);
    border-top: 1px solid var(--line);
}

.gs-ln-l {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 46px;
}

.gs-ln-l li {
    position: relative;
    padding: 26px 30px 0;
    border-top: 2px solid var(--gl, var(--brand));
}

.gs-ln-l li:first-child {
    padding-left: 0;
}

.gs-ln-l li:last-child {
    padding-right: 0;
}

.gs-ln-l li + li {
    border-left: 1px solid var(--line);
}

.gs-ln-k {
    display: block;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gl, var(--brand));
}

.gs-ln-l b {
    display: block;
    margin-top: 12px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
}

.gs-ln-l em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-4);
}

.gs-ln-l p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* ---------- 上市后页响应式 ---------- */
@media (max-width: 1180px) {
    .cpv-tl li {
        padding-right: 26px;
    }

    .cpv-ob-i {
        grid-template-columns: 172px minmax(0, 1fr);
        gap: 0 36px;
    }
}

@media (max-width: 1024px) {

    .cpv-inb,
    .cpv-ob {
        padding: 64px 0;
    }

    /* 五个市场压成三列，横链路线失效，改成每项左侧节点 */
    .cpv-topo-l.is-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cpv-ib {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .cpv-ib-q {
        font-size: 24px;
    }

    .cpv-tl {
        grid-template-columns: 1fr;
        padding-top: 0;
        row-gap: 28px;
    }

    .cpv-tl::before {
        display: none;
    }

    .cpv-tl li {
        padding-left: 22px;
        padding-right: 0;
    }

    .cpv-tl li::before {
        top: 6px;
    }

    .cpv-ob-i {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 36px;
    }

    /* 单列后索引竖线失去分区意义，直接撤掉 */
    .cpv-ob-k::after {
        display: none;
    }

    .cpv-ob-s {
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding-top: 22px;
    }

    .cpv-ob-s li::before {
        top: 7px;
        box-shadow: none;
    }
}

@media (max-width: 680px) {
    .cpv-topo-l.is-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cpv-ib-q {
        font-size: 21px;
    }

    .cpv-tl b {
        font-size: 28px;
    }
}

/* ==========================================================================
   真实世界研究（research.html）
   本页沿用委托服务页的 cpv-* 版式语言（深色首屏 + 刻度带 + 族头清单 + 色轨案例条），
   只补本页独有的三个部位：
   1) 案例条奇偶分色（本页四条案例，蓝青交替）；
   2) 医药集团名录带（纯文字网格，不做 logo 墙卡片）；
   3) 学术活动的议程编号清单与参与单位名录。
   ========================================================================== */

/* 四条案例蓝青交替，颜色统一由局部变量驱动 */
.cpv-ob-i:nth-child(even) {
    --c: var(--cv-teal-d);
    --c-w: rgba(23, 181, 164, .36);
}

/* 大数字里的单位跟一小号，别把「‱」拉到和数字一样高 */
.cpv-ob-k > b i {
    font-style: normal;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------- 立场区：只保留一个大标题，眉标单独成行 ---------- */
body[data-page="research"] .cpv-life .cpv-claim {
    margin-top: 26px;
    align-items: start;
}

body[data-page="research"] .cpv-life .cpv-claim-tag {
    margin-top: 26px;
}

/* ---------- 案例三项结论：单列表式，一行一条，右侧说明不折行 ---------- */
.cpv-ob-s.rws-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 26px;
    padding-top: 20px;
}

.cpv-ob-s.rws-kv li {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 0 24px;
    align-items: baseline;
    padding: 13px 0 13px 16px;
}

.cpv-ob-s.rws-kv li + li {
    border-top: 1px solid var(--line-2);
}

/* 挂点从横向刻度带改为每行左侧的行首点 */
.cpv-ob-s.rws-kv li::before {
    top: 20px;
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.cpv-ob-s.rws-kv span {
    margin-top: 0;
}

/* ---------- 医药集团名录：四列文字网格，只留行线 ---------- */
.rws-names {
    position: relative;
    margin-top: 58px;
    padding-top: 34px;
}

.rws-names::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, rgba(23, 181, 164, .36) 44%, rgba(15, 23, 42, .06) 100%);
}

.rws-names-k {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--brand);
}

.rws-names-k::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--brand);
}

.rws-names-t {
    margin-top: 14px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.rws-names-d {
    margin-top: 10px;
    max-width: 880px;
    font-size: 14.5px;
    line-height: 1.82;
    color: var(--ink-3);
}

/* 客户名录：每行是「logo 图位 + 1px 竖线 + 企业名」。
   图位固定 86×30、object-fit:contain 左对齐 —— 各家 logo 的原始长宽比
   差得很远，只有把它们统一装进同一个固定图位，右边那条竖线和企业名
   才会逐列对齐，不会因为某个宽 logo 把整行推歪 */
/* 客户 logo 墙：只摆 logo，不再配企业名。
   每格是一块白底 logo 位（固定 86px 高），图片 contain 居中 ——
   各家 logo 原始长宽比差得很远（司太立是 645×279、正清几乎是方的），
   只有装进同一个固定图位才能摆成一堵整墙而不是高低不平的一排 */
.rws-names-l {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.rws-names-l li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    padding: 14px 18px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* hover 只把边提成品牌蓝并微抬 1px，不动 logo 本身（客户商标不能变形） */
.rws-names-l li:hover {
    border-color: rgba(18, 87, 224, .34);
    box-shadow: 0 6px 16px -8px rgba(11, 23, 41, .2);
    transform: translateY(-1px);
}

.rws-names-l li img {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- 学术活动：沿用案例条骨架，只换底色并补议程与单位名录 ---------- */
.rws-ev {
    background: var(--bg-soft);
}

.rws-ag {
    position: relative;
    counter-reset: ag;
    margin-top: 28px;
    padding-top: 26px;
}

.rws-ag::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--c-w), rgba(15, 23, 42, .07) 78%);
}

.rws-ag-k {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
}

.rws-ag li {
    position: relative;
    padding: 8px 0 8px 32px;
    font-size: 14.5px;
    line-height: 1.74;
    color: var(--ink-2);
}

.rws-ag li::before {
    counter-increment: ag;
    content: counter(ag, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 9px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c);
}

.rws-org {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-2);
    font-size: 13.5px;
    line-height: 1.84;
    color: var(--ink-3);
}

.rws-org b {
    margin-right: 8px;
    font-weight: 700;
    color: var(--ink-2);
}

.rws-ev .link-arrow {
    margin-top: 20px;
}

/* ---------- 真实世界研究页响应式 ---------- */
@media (max-width: 1180px) {
    .rws-names-l {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .rws-names-l {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rws-names {
        margin-top: 44px;
    }
}

@media (max-width: 680px) {
    .rws-names-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .rws-names-l li {
        height: 72px;
        padding: 12px 14px;
    }

    .rws-names-l li img {
        max-height: 38px;
    }

    .rws-names-t {
        font-size: 20px;
    }

    .cpv-ob-s.rws-kv li {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* ==========================================================================
   页 B：中国企业出海药物警戒服务（global-outbound.html）
   ========================================================================== */
/* ---------- 2. 出海底座：两个平台 + 两条通道（白底） ---------- */
.gs-eng-sec {
    padding: 92px 0;
    background: #fff;
}

.gs-eng {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 46px;
}

.gs-eng-i {
    position: relative;
    padding: 28px 42px 0;
    border-top: 2px solid var(--gl, var(--brand));
}

.gs-eng-i:first-child {
    padding-left: 0;
}

.gs-eng-i:last-child {
    padding-right: 0;
}

.gs-eng-i + .gs-eng-i {
    border-left: 1px solid var(--line);
}

.gs-eng-k {
    display: block;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gl, var(--brand));
}

.gs-eng-i b {
    display: block;
    margin-top: 12px;
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.gs-eng-i em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-2);
}

.gs-eng-i p {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.86;
    color: var(--ink-3);
}

.gs-eng-tag {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--ink-4);
}

.gs-eng-tag::before {
    content: "";
    flex: none;
    margin-top: 10px;
    width: 18px;
    height: 2px;
    background: var(--gl, var(--brand));
}

/* 两条跨境通道：横向双栏，起笔一条渐变细轴 */
.gs-ch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 58px;
    padding-top: 30px;
}

.gs-ch::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--gt) 62%, rgba(15, 23, 42, .07) 100%);
}

.gs-ch li {
    position: relative;
    padding: 0 42px;
}

.gs-ch li:first-child {
    padding-left: 0;
}

.gs-ch li:last-child {
    padding-right: 0;
}

.gs-ch li + li {
    border-left: 1px solid var(--line);
}

.gs-ch span {
    display: block;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--gt-d);
}

.gs-ch b {
    display: block;
    margin-top: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.gs-ch p {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.88;
    color: var(--ink-3);
}

/* ---------- 3. 三个出海案例（浅底）---------- */
.gs-cs-sec {
    padding: 92px 0;
    background: var(--bg-soft, #f6f8fc);
    border-top: 1px solid var(--line);
}

.gs-cs {
    margin-top: 46px;
}

.gs-cs-i {
    position: relative;
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 0 52px;
    padding: 30px 0 42px;
    border-top: 2px solid var(--gl, var(--brand));
}

.gs-cs-i + .gs-cs-i {
    margin-top: 12px;
}

/* 最后一条案例不再留底边，免得和区块 padding 叠成一大块空白 */
.gs-cs-i:last-child {
    padding-bottom: 0;
}

/* 左侧索引栅：右边一条上浓下淡的竖线划分区域 */
.gs-cs-k {
    position: relative;
}

.gs-cs-k::after {
    content: "";
    position: absolute;
    right: -26px;
    top: 2px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, var(--gl, var(--brand)), rgba(15, 23, 42, .06) 82%);
    opacity: .5;
}

.gs-cs-k > span {
    display: block;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--gl, var(--brand));
}

.gs-cs-k b {
    display: block;
    margin-top: 12px;
    font-family: var(--font-en);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.gs-cs-k em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink-2);
}

.gs-cs-k i {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ink-4);
}

.gs-cs-b h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.gs-cs-b > p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-3);
}

/* 三项能力：挂点式刻度带，底色纯白 */
.gs-cs-s {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
    margin-top: 26px;
    padding: 24px 26px 22px;
    background: #fff;
    border-radius: 3px;
}

.gs-cs-s::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gl, var(--brand)) 0%, rgba(15, 23, 42, .08) 100%);
}

.gs-cs-s li {
    position: relative;
    padding-left: 15px;
}

.gs-cs-s li + li {
    padding-left: 30px;
    border-left: 1px solid var(--line-2);
}

.gs-cs-s li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gl, var(--brand));
}

.gs-cs-s li + li::before {
    left: 15px;
}

.gs-cs-s b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.gs-cs-s span {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-3);
}

/* 时间轴变体（案例 C）：年份为重心，下接区域名 */
.gs-cs-s.is-tl b {
    font-family: var(--font-en);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--gl, var(--brand));
}

.gs-cs-s.is-tl em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.gs-cs-s.is-tl li::before {
    top: 5px;
}

/* ---------- 4. 西非法属 17 国全委（浅底收束） ---------- */
.gs-geo {
    position: relative;
    overflow: hidden;
    padding: 92px 0 84px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border-top: 1px solid var(--line);
}

/* 极淡的冷光底噪，不影响正文对比 */
.gs-geo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(56% 72% at 90% 4%, rgba(47, 196, 178, .07), transparent 62%),
        radial-gradient(50% 66% at 2% 98%, rgba(18, 87, 224, .05), transparent 60%);
    pointer-events: none;
}

.gs-geo .wrap {
    position: relative;
}

/* 左侧立论点 + 右侧覆盖面板 */
.gs-geo-in {
    display: grid;
    grid-template-columns: minmax(0, 372px) minmax(0, 1fr);
    gap: 0 48px;
}

.gs-geo-s {
    align-self: start;
    padding-right: 10px;
}

.gs-geo-t {
    margin-top: 14px;
    font-size: 24px;
    line-height: 1.5;
}

.gs-geo-t em {
    font-style: normal;
    color: var(--brand);
}

/* 17 作为左列视觉锚点 */
.gs-geo-n {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.gs-geo-n b {
    font-family: var(--font-en);
    font-size: 76px;
    font-weight: 800;
    line-height: .82;
    letter-spacing: -0.04em;
    background: linear-gradient(150deg, var(--brand) 0%, var(--gt-d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gs-geo-n span {
    padding-bottom: 5px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--ink-4);
}

.gs-geo-d {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-3);
}

.gs-geo-f {
    margin-top: 22px;
}

.gs-geo-f li {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 11px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.gs-geo-f li + li {
    border-top: 1px dashed var(--line);
}

.gs-geo-f b {
    flex: none;
    width: 20px;
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand);
}

.gs-geo-f li:nth-child(3) b {
    color: var(--gt-d);
}

/* 右侧名录面板：一张规整的 3×6 网格，行高等分把右列填满 */
.gs-geo-m {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(16, 26, 51, .045);
    overflow: hidden;
}

.gs-geo-mh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, #f6f9fe 0%, #f9fbfd 100%);
}

.gs-geo-mh span {
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.gs-geo-mh i {
    flex: none;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gt-d);
}

.gs-geo-g {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(66px, 1fr);
}

.gs-geo-g li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    gap: 0 9px;
    padding: 10px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background .2s ease;
}

.gs-geo-g li:nth-child(3n) {
    border-right: 0;
}

.gs-geo-g li:nth-child(n+16) {
    border-bottom: 0;
}

.gs-geo-g li:hover {
    background: #f5f9ff;
}

.gs-geo-g li > span {
    flex: none;
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(18, 87, 224, .5);
}

/* 后一半转青，名录不致于一片同色 */
.gs-geo-g li:nth-child(n+10) > span {
    color: rgba(23, 181, 164, .62);
}

/* 国旗图位：固定 22×15（3:2），外套一圈 1px 描边环 ——
   马达加斯加、科特迪瓦这种带白条的旗帮在白面板上会“流”出去，
   靠这圈环才能看出旗子的边界；li 是 baseline 对齐，
   SVG 的基线在它自己底边，所以往下押 2px 才与国名的字眼齐平 */
.gs-geo-g li > svg {
    flex: none;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(11, 23, 41, .16);
    transform: translateY(2px);
}

.gs-geo-g li > b {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.gs-geo-g li > em {
    flex: 1 1 100%;
    margin-top: 5px;
    font-style: normal;
    font-family: var(--font-en);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
    color: var(--ink-4);
}

/* 第 18 格：把网格补成整块，同时做一句收束 */
.gs-geo-g li.is-sum {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(18, 87, 224, .05) 0%, rgba(47, 196, 178, .09) 100%);
}

.gs-geo-g li.is-sum:hover {
    background: linear-gradient(135deg, rgba(18, 87, 224, .07) 0%, rgba(47, 196, 178, .12) 100%);
}

.gs-geo-g li.is-sum > b {
    flex: none;
    font-family: var(--font-en);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    background: linear-gradient(120deg, var(--brand) 0%, var(--gt-d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gs-geo-g li.is-sum > em {
    flex: none;
    margin-top: 0;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--ink-3);
}

/* ==========================================================================
   国际化二级页响应式
   ========================================================================== */
@media (max-width: 1180px) {
    .gs-h1 {
        font-size: 46px;
    }

    .gs-wm {
        font-size: 48px;
    }

    .gs-cs-i {
        grid-template-columns: 196px minmax(0, 1fr);
        gap: 0 38px;
    }

    .gs-cs-k::after {
        right: -19px;
    }

    .gs-mx-hd,
    .gs-mx-l li {
        grid-template-columns: minmax(0, 1fr) repeat(4, minmax(74px, 120px));
        gap: 0 14px;
    }

    .gs-geo-in {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: 0 34px;
    }

    .gs-geo-s {
        padding-right: 6px;
    }

    .gs-hd-r {
        gap: 0 32px;
    }
}

@media (max-width: 1024px) {

    .gs-evo-sec,
    .gs-ln-sec,
    .gs-ai,
    .gs-eng-sec,
    .gs-cs-sec,
    .gs-geo {
        padding: 64px 0;
    }

    .gs-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .gs-hero {
        padding-top: 44px;
    }

    /* 宽版章节头改纵向，右侧标记落到标题下方 */
    .gs-hd-r {
        grid-template-columns: 1fr;
        row-gap: 18px;
        align-items: start;
    }

    .gs-hd-b {
        padding-bottom: 0;
    }

    .gs-hd.is-wide .gs-hd-d {
        margin-top: 16px;
    }

    .gs-h1 {
        font-size: 38px;
        max-width: none;
    }

    .gs-hd-t {
        font-size: 27px;
    }

    .gs-wm {
        display: none;
    }

    /* 链路横线失效，改成每项左侧节点 */
    .gs-topo-l,
    .gs-topo-l.is-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 22px;
    }

    .gs-topo-hd {
        flex-wrap: wrap;
    }

    .gs-topo-hd span {
        margin-left: 0;
    }

    .gs-band-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gs-band-l li:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .gs-band-l li:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    /* 四段演进轴改纵向，横轴与节点改为左对齐 */
    .gs-evo {
        grid-template-columns: 1fr;
        row-gap: 30px;
        padding-top: 0;
    }

    .gs-evo::before {
        display: none;
    }

    .gs-evo li {
        padding: 0 0 0 22px;
        border-left: 2px solid var(--line);
    }

    .gs-evo li + li {
        border-left: 2px solid var(--line);
    }

    .gs-evo li.is-now {
        border-left-color: var(--gt);
    }

    .gs-evo li::before,
    .gs-evo li:first-child::before {
        left: -6px;
        top: 4px;
    }

    .gs-evo b {
        font-size: 28px;
    }

    /* 矩阵改为逐行堆叠：业务线在上，四个年份轨在下 */
    .gs-mx-hd {
        display: none;
    }

    .gs-mx-l li {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        padding: 18px 0;
    }

    .gs-mx-n {
        grid-column: 1 / -1;
    }

    .gs-ai-b,
    .gs-eng,
    .gs-ch {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .gs-ai-q {
        font-size: 23px;
    }

    .gs-eng-i,
    .gs-ch li {
        padding-left: 0;
        padding-right: 0;
    }

    .gs-eng-i + .gs-eng-i,
    .gs-ch li + li {
        border-left: 0;
        padding-top: 24px;
    }

    .gs-ch li + li {
        border-top: 1px solid var(--line);
    }

    .gs-cap,
    .gs-ln-l {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    .gs-cap li,
    .gs-ln-l li {
        padding-left: 0;
        padding-right: 0;
    }

    .gs-cap li + li {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
        padding-top: 24px;
    }

    .gs-ln-l li + li {
        border-left: 0;
    }

    .gs-cs-i {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 34px;
    }

    /* 单列后索引竖线失去分区意义，直接撑掉 */
    .gs-cs-k::after {
        display: none;
    }

    .gs-cs-s {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    .gs-cs-s li + li {
        padding-left: 15px;
        border-left: 0;
    }

    .gs-cs-s li + li::before {
        left: 0;
    }

    /* 左右两栏收成上下，竖分割线改为水平线 */
    .gs-geo-in {
        grid-template-columns: 1fr;
        gap: 34px 0;
    }

    .gs-geo-s {
        padding-right: 0;
        padding-bottom: 30px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .gs-geo-n b {
        font-size: 64px;
    }

    /* 面板改 2 列，18 格正好 9 行 */
    .gs-geo-g {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .gs-geo-g li {
        padding: 14px 18px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .gs-geo-g li:nth-child(2n) {
        border-right: 0;
    }

    .gs-geo-g li:nth-child(n+17) {
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    .gs-h1 {
        font-size: 31px;
    }

    .gs-lead {
        font-size: 16px;
    }

    .gs-hd-t {
        font-size: 23px;
    }

    .gs-topo-l,
    .gs-topo-l.is-5,
    .gs-band-l {
        grid-template-columns: 1fr;
    }

    .gs-band-l li {
        border-left: 0;
        padding-left: 0;
    }

    .gs-band-l li + li {
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .gs-mx-l li {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gs-ai-q {
        font-size: 20px;
    }

    .gs-cs-k b {
        font-size: 22px;
    }

    .gs-cs-b h3 {
        font-size: 19px;
    }

    .gs-geo-n b {
        font-size: 54px;
    }

    .gs-geo-mh {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .gs-geo-g {
        grid-template-columns: 1fr;
    }

    .gs-geo-g li {
        border-right: 0;
    }

    .gs-geo-g li:last-child {
        border-bottom: 0;
    }

    .gs-keep,
    .gs-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==========================================================================
   页 C：合作伙伴 —— 按领域抽样的客户矩阵 + 深色引文带
   壳沿用 cpv-* 版式语言（hero / band / hd / qms / scope / fam / sv），
   本页独有组件统一 pt- 前缀。核心表达：这不是完整名录，是抽样示例。
   ========================================================================== */

/* ---------- 领域带：一条一个领域，顶部起笔色轨 + 抽样计数 + logo 矩阵 ---------- */
.pt-secs {
    margin-top: 44px;
}

.pt-sector {
    --c: var(--brand);
    --c-w: rgba(18, 87, 224, .34);
    position: relative;
    padding: 28px 0 34px;
}

/* 奇偶交替蓝青，和出海案例条同一套色轨语言 */
.pt-sector:nth-child(even) {
    --c: var(--cv-teal-d);
    --c-w: rgba(23, 181, 164, .36);
}

.pt-sector::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c) 0%, var(--c-w) 38%, rgba(15, 23, 42, .06) 100%);
}

.pt-sector-hd {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 0 22px;
    align-items: baseline;
}

.pt-sector-ix {
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c);
}

.pt-sector-t {
    display: flex;
    align-items: baseline;
    gap: 13px;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.pt-sector-t em {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-4);
}

/* 右侧只留一个「持续更新中」标识，不报数字 */
.pt-sector-more {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-self: end;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--ink-4);
}

.pt-sector-more::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}

.pt-sector-d {
    grid-column: 2 / -1;
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ink-3);
}

/* logo 矩阵：10 列密集网格 —— 只剥给不足 8 格的领域（JS 不接管）。
   8 格以上由 initPtLogos 改造成 .is-tape 双行反向流带，见下一节。
   网格线由每格自带的内描边画，而不是用 gap 透底色。 */
.pt-logos {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    margin: 22px 0 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 52, 112, .13);
}

.pt-logos:not(.is-tape) li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    padding: 10px 11px;
    box-shadow: inset -1px -1px 0 rgba(24, 52, 112, .11);
    transition: background .2s ease, box-shadow .2s ease;
}

/* logo 保留品牌原色，不做灰度处理。
   宽高写死的理由同 .cwf-cell img：避开图片到达前后的横向撑开 */
.pt-logos img {
    width: 100%;
    height: 36px;
    object-fit: contain;
    transition: transform .22s ease;
}

.pt-logos:not(.is-tape) li:hover {
    position: relative;
    z-index: 1;
    background: #f5f8ff;
    box-shadow: inset 0 0 0 2px var(--c-w);
}

.pt-logos:not(.is-tape) li:hover img {
    transform: scale(1.06);
}

/* ---------- 双行反向流带（.is-tape 由 initPtLogos 加上）----------
   一个领域两条带：上行向左、下行向右。两行对着跑比同向双行
   更像「两条各自独立的带」，也把静止时两行对齐的表格感打掉。 */
.pt-logos.is-tape {
    display: block;
    grid-template-columns: none;
}

.pt-logos.is-tape>li {
    display: flex;
    height: 74px;
    padding: 0;
    overflow: hidden;
    /* 两端渐隐：logo 跑出视口是淡出而不是被一条硬边切断，
       这一点是「流带」和「横向滚动条」的分界 */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 84px, #000 calc(100% - 84px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 84px, #000 calc(100% - 84px), rgba(0, 0, 0, 0) 100%);
}

/* 两行之间一条内描边，和静态网格的格线同一套 */
.pt-logos.is-tape>li+li {
    box-shadow: inset 0 1px 0 rgba(24, 52, 112, .11);
}

/* 两份内容并排、各自平移自身宽度的 100%：走到终点时第二份
   正好落在第一份的起始像素上，不需要 JS 逐帧算位置 */
.pt-run {
    display: flex;
    flex: 0 0 auto;
    animation: pt-tape var(--pt-dur, 60s) linear infinite;
    /* 同首页流带：图没就绪不开跑 */
    animation-play-state: paused;
}

.pt-logos.is-on .pt-run {
    animation-play-state: running;
}

.pt-lane.is-rev .pt-run {
    animation-direction: reverse;
}

/* 悬停整行停住，方便看清某一家 */
.pt-logos.is-on .pt-lane:hover .pt-run {
    animation-play-state: paused;
}

@keyframes pt-tape {
    to {
        transform: translateX(-100%);
    }
}

.pt-cell {
    flex: 0 0 auto;
    width: 132px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    box-shadow: inset -1px 0 0 rgba(24, 52, 112, .09);
    transition: background .2s ease;
}

.pt-cell:hover {
    background: #f5f8ff;
}

.pt-cell:hover img {
    transform: scale(1.06);
}

/* 降动效偏好下直接停住：流带是装饰性动效，不能强动 */
@media (prefers-reduced-motion: reduce) {
    .pt-run {
        animation: none;
    }
}

/* 本页事实带与领域说明避免末行孤字，不影响其他页 */
body[data-page="partners"] .cpv-band-l span,
body[data-page="partners"] .pt-sector-d {
    text-wrap: pretty;
}

/* ==========================================================================
   客户原话：两列引文面板
   原先是无容器的行式排版（序号 + 一条竖线 + 三层文字），信息层次没错，
   但整区除了字就只有两条细线，读出来是一份 Word 文档而不是产品页。
   改成一条一块引文面板，科技感全部交给四层细节、不靠深色底也不靠霓虹色：
     ① 面板顶部一条 46px 品牌色压条，hover 拉通整卡宽（改 background-size）；
     ② 右下角一片 10px 间距的点阵，用 315° mask 向左上渐隐；
     ③ 完整原文包成引用块：左侧 2px 上浓下淡的竖线，和上方摘句分开；
     ④ hover 一道 18° 斜向白光从卡上扫过一次，同时抬起 3px。
   左列蓝、右列青（--qc），横向不会出现半行换色。
   ========================================================================== */
.pt-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
    counter-reset: q;
}

.pt-quote {
    --qc: var(--brand);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px 26px 24px;
    border: 1px solid rgba(24, 52, 112, .11);
    border-radius: 12px;
    background-image:
        linear-gradient(90deg, var(--qc) 0%, rgba(110, 180, 255, .32) 100%),
        linear-gradient(180deg, #fff 0%, #f9fbff 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-size: 46px 2px, 100% 100%;
    box-shadow: 0 1px 2px rgba(11, 23, 41, .04);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .3s ease, background-size .55s cubic-bezier(.22, 1, .36, 1);
}

.pt-quote:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--qc) 34%, transparent);
    background-size: 100% 2px, 100% 100%;
    box-shadow:
        0 1px 2px rgba(11, 23, 41, .05),
        0 24px 40px -26px rgba(11, 23, 41, .28);
}

/* 按列分色：左列蓝、右列青 */
.pt-quote:nth-child(even) {
    --qc: var(--cv-teal-d);
}

/* 序号：面板左上角，英文字体实色，六八张面板摞下来就是一条编号轴 */
.pt-quote::before {
    counter-increment: q;
    content: counter(q, decimal-leading-zero);
    position: absolute;
    left: 26px;
    top: 18px;
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--qc);
}

/* 右下角点阵：科技细节交给点而不是加粗线。315° mask 让它向
   卡内逐渐消失，不会在正文下方留一块硬边色块 */
.pt-quote::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 62px;
    background-image: radial-gradient(color-mix(in srgb, var(--qc) 24%, transparent) 1px, transparent 1.3px);
    background-size: 10px 10px;
    -webkit-mask-image: linear-gradient(315deg, #000 0%, rgba(0, 0, 0, 0) 74%);
    mask-image: linear-gradient(315deg, #000 0%, rgba(0, 0, 0, 0) 74%);
    pointer-events: none;
    z-index: -1;
}

/* hover 光扫：一道 18° 斜向白光从左扫到右。用 .pt-quote-hd 的
   ::before 而不是再开一层 div —— HTML 一行不动 */
.pt-quote-hd::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .78) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.pt-quote:hover .pt-quote-hd::before {
    animation: pt-sheen .85s cubic-bezier(.4, 0, .2, 1);
}

@keyframes pt-sheen {
    0% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    100% {
        transform: translateX(320%) skewX(-18deg);
        opacity: 0;
    }
}

/* 摘句：本区块的扫读层，直接取自原文并加引号 */
.pt-quote-lead {
    position: relative;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: pretty;
}

.pt-quote-lead::before {
    content: "「";
    color: var(--qc);
}

.pt-quote-lead::after {
    content: "」";
    color: var(--qc);
}

/* 署名行：企业名 + 合作方式同行，中点分隔 */
.pt-quote-by {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 9px;
}

.pt-quote-by b {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink-2);
}

.pt-quote-by em {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--ink-4);
}

.pt-quote-by em::before {
    content: "·";
    color: var(--line);
}

/* 完整原文：包成引用块 —— 左侧一道上浓下淡的 2px 竖线，
   字号明确退到摘句之下，两层不会读成同一句 */
.pt-quote-full {
    position: relative;
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, color-mix(in srgb, var(--qc) 55%, transparent), rgba(15, 23, 42, .04)) 1;
    font-size: 13px;
    line-height: 1.86;
    color: var(--ink-4);
    text-wrap: pretty;
}
/* 眉标与「持续更新中」同行：状态标识放在章节顶部，浅底上用品牌蓝而不是白字 */
.pt-hd-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.pt-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(18, 87, 224, .22);
    background: rgba(18, 87, 224, .05);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--brand);
    white-space: nowrap;
}

.pt-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cv-teal-d);
    box-shadow: 0 0 0 3px rgba(23, 181, 164, .18);
}

/* ---------- 合作伙伴页响应式 ---------- */
@media (max-width: 1180px) {
    .pt-logos {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .pt-quotes {
        gap: 16px;
    }

    .pt-quote-lead {
        font-size: 16.5px;
    }
}

@media (max-width: 1024px) {
    .pt-sector-hd {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .pt-sector-more {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }

    .pt-sector-d {
        grid-column: 2;
    }

    .pt-logos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* 窄屏流带渐隐区收窄，否则两端各淡掉 84px 后中间剩不下多少 logo */
    .pt-logos.is-tape>li {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, 0) 100%);
    }

    /* 窄屏收成单列，面板全部回品牌蓝（单列下奇偶分色会变成逐行换色） */
    .pt-quotes {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .pt-quote:nth-child(even) {
        --qc: var(--brand);
    }
}

@media (max-width: 680px) {
    .pt-sector-hd {
        grid-template-columns: 1fr;
    }

    .pt-sector-more,
    .pt-sector-d {
        grid-column: 1;
    }

    .pt-logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pt-logos:not(.is-tape) li {
        height: 64px;
    }

    .pt-logos.is-tape>li,
    .pt-cell {
        height: 64px;
    }

    .pt-cell {
        width: 112px;
    }

    .pt-quote {
        padding: 40px 20px 20px;
    }

    .pt-quote::before {
        left: 20px;
    }

    /* 窄屏去掉右下点阵：面板宽度收窄后它会压到正文最后一行 */
    .pt-quote::after {
        display: none;
    }

    .pt-quote-lead {
        font-size: 16.5px;
    }
}

/* ==========================================================================
   eLiterSeek 产品页（els-*）：沿用 eClins 的版式语言（深色 HERO → 一路浅底推进、
   ec-hd 章节头、ec-cap 立体能力舞台、ec-reg 对照表、ec-scene 三栏场景全部复用），
   这里只补两件本页专属的部件：
     1) HERO 右侧的「文献汇聚动态图」—— 多源被持续巡检、流线汇入语义内核，
        底部三格交代收敛量级。静态表格说不出「一直在跑」，这一屏要的是动势
     2) 能力舞台右栏的界面示意面板（els-vz 系列）—— 站内没有本产品实机截图，
        一律用 DOM 构造，不引用不存在的图片资源
   ========================================================================== */
.els-cap {
    --ec-teal: #2fc4b2;
    --ec-teal-d: #17b5a4;
}

/* ---------- HERO 右侧：文献汇聚动态图 ---------- */
/* 同 eVigil / ePross：去掉外框与面板底，图直接站在 HERO 渐变上。
   原来的顶部渐变粗线与内部工程网格都是“器物感”的配件，
   器物不存在了，这两层也一并撑掉，否则就是悬在背景里的一条线和一块网格 */
.els-orb {
    position: relative;
    padding: 0;
}

.els-orb > * {
    position: relative;
    z-index: 1;
}

.els-orb-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.els-orb-hd span {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(110, 231, 212, .84);
}

.els-orb-hd em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

.els-orb-hd em i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ee7d4;
    animation: elsPulse 1.9s ease-out infinite;
}

@keyframes elsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 212, .55); opacity: 1; }
    70% { box-shadow: 0 0 0 7px rgba(110, 231, 212, 0); opacity: .45; }
}

/* 图形就是这一屏右侧的主体，去框后不再需要向外拉出框内边距 */
.els-orb-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 2px 0 -8px;
}

/* 两把反向扫描扇：数据源是被持续巡检的，不是一次性检索 */
.els-orb-scan {
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 9s linear infinite;
}

.els-orb-scan.is-b {
    animation-duration: 15s;
    animation-direction: reverse;
}

@keyframes elsSpin {
    to { transform: rotate(360deg); }
}

/* 外圈刻度环：粗 stroke + 极短 dash，等于一圈径向刻度条 */
.els-orb-rl {
    fill: none;
    stroke: rgba(126, 166, 255, .16);
    stroke-width: 9;
    stroke-dasharray: 1.8 17.9;
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 92s linear infinite;
}

/* 游走弧：在刻度环内侧跑两道亮弧，读起来就是「巡检进度」 */
.els-orb-arc {
    fill: none;
    stroke: rgba(150, 196, 255, .5);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 150 1151;
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 11s linear infinite;
}

.els-orb-arc.is-b {
    stroke: rgba(110, 231, 212, .56);
    stroke-dasharray: 68 1233;
    animation-duration: 17s;
    animation-direction: reverse;
}

.els-orb-tk {
    fill: none;
    stroke: rgba(126, 166, 255, .26);
    stroke-width: 1;
    stroke-dasharray: 3 7;
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 56s linear infinite;
}

.els-orb-tk.is-b {
    stroke: rgba(110, 231, 212, .24);
    stroke-dasharray: 2 6;
    animation-duration: 34s;
    animation-direction: reverse;
}

/* 绕行卫星：只是一颗小点，但它让整张图在任何一瞬都不是静的 */
.els-orb-st circle {
    fill: #bcd6ff;
}

.els-orb-st {
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 21s linear infinite;
}

.els-orb-st.is-b {
    animation-duration: 29s;
    animation-direction: reverse;
}

.els-orb-st.is-b circle {
    fill: #8ff2e4;
}

.els-orb-st.is-c {
    animation-duration: 38s;
}

.els-orb-ln line {
    stroke: rgba(126, 166, 255, .3);
    stroke-width: 1;
}

/* 流光沿线跑向内核：线长 74，dash 周期 148（正好两倍），
   一个动画周期就是一道流光完整跑完全程 */
.els-orb-fl line {
    stroke: #6ee7d4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 18 130;
    animation: elsFlow 2.4s linear infinite;
}

@keyframes elsFlow {
    from { stroke-dashoffset: 148; }
    to { stroke-dashoffset: 0; }
}

.els-orb-fl line:nth-child(2) { animation-delay: .4s; }
.els-orb-fl line:nth-child(3) { animation-delay: .8s; }
.els-orb-fl line:nth-child(4) { animation-delay: 1.2s; }
.els-orb-fl line:nth-child(5) { animation-delay: 1.6s; }
.els-orb-fl line:nth-child(6) { animation-delay: 2s; }

.els-orb-nd .h {
    fill: rgba(110, 231, 212, .12);
    stroke: rgba(110, 231, 212, .42);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: elsBeat 2.6s ease-in-out infinite;
}

@keyframes elsBeat {
    0%, 100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.3); opacity: 1; }
}

.els-orb-nd .d {
    fill: #8ff2e4;
}

.els-orb-nd text {
    fill: rgba(255, 255, 255, .66);
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
}

.els-orb-nd text.cn {
    font-family: var(--font);
    font-size: 12.5px;
    letter-spacing: 0;
}

/* 六个源的脉动依次错开，读起来是「轮巡」而不是「齐闪」 */
.els-orb-nd:nth-of-type(4) .h { animation-delay: .42s; }
.els-orb-nd:nth-of-type(5) .h { animation-delay: .84s; }
.els-orb-nd:nth-of-type(6) .h { animation-delay: 1.26s; }
.els-orb-nd:nth-of-type(7) .h { animation-delay: 1.68s; }
.els-orb-nd:nth-of-type(8) .h { animation-delay: 2.1s; }

.els-orb-cr .rg {
    fill: none;
    stroke: rgba(126, 166, 255, .3);
    stroke-width: 1;
    stroke-dasharray: 6 10;
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsSpin 26s linear infinite reverse;
}

/* 呼吸波：内核在持续吐出判定结果 */
.els-orb-cr .w {
    fill: none;
    stroke: rgba(110, 231, 212, .5);
    stroke-width: 1.2;
    transform-box: view-box;
    transform-origin: 260px 240px;
    animation: elsWave 3.6s ease-out infinite;
}

@keyframes elsWave {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.72); opacity: 0; }
}

.els-orb-cr .w.is-2 {
    animation-delay: 1.8s;
}

/* 经纬线：把平面圆读成一颗球，不用多余的渐变 */
.els-orb-gl ellipse {
    fill: none;
    stroke: rgba(180, 214, 255, .2);
    stroke-width: 1;
}

.els-orb-cr .eg {
    fill: none;
    stroke: rgba(150, 196, 255, .46);
    stroke-width: 1;
}

.els-orb-cr .k {
    fill: #fff;
    font-family: var(--font-en);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: .03em;
}

.els-orb-cr .s {
    fill: rgba(214, 232, 255, .82);
    font-size: 13.5px;
    font-weight: 600;
}

/* ---------- 六项能力：直接套 eClins 的立体舞台（ec-cf） ---------- */
.els-cap {
    position: relative;
    padding: 92px 0 84px;
    background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
}

.els-cap .ec-hd {
    max-width: 860px;
}

/* 六项能力直接用 eClins 的 coverflow 骨架（与 ep-cap 同一做法），
   本页只有一处差异：底部导航是六项而非五项。舞台高度 / 箭头位置 / 右栏截图
   铺满方式全部沿用原生规则，不再覆盖 */
.els-cap .ec-cf {
    margin-top: 46px;
}

.els-cap .ec-cf-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* ---------- els-* 响应式：跟随 ec-* 的断点 ---------- */
@media (max-width: 1080px) {
    .els-orb {
        max-width: 460px;
        margin: 0 auto;
    }

    .els-cap {
        padding: 76px 0;
    }

    .els-cap .ec-cf-nav button b {
        font-size: 12.5px;
    }
}

@media (max-width: 680px) {
    .els-orb {
        max-width: 100%;
    }

    .els-orb-hd span {
        font-size: 10px;
        letter-spacing: .14em;
    }

    .els-cap {
        padding: 58px 0;
    }
}

/* ==========================================================================
   英文版排版兜底（html.is-en）

   切换机制见 assets/js/i18n.js：英文态下 <html> 上挂 is-en。
   这一段只管「英文比中文长」带来的排版问题，不改任何设计：

   1. 断行：中文能在任意两字之间断，英文不行。pharmacovigilance 这类长词
      落在窄格子里会直接顶破边框，所以开词内断行 + 连字符。
   2. 字距：中文标题普遍带 letter-spacing 做呼吸感，英文本身有词距，
      再加字距只会更散、更长。所以正文类元素的字距归零；
      小题眉（.xx-en 那些本来就是英文的元素）不动，它们靠大字距取设计感。
   3. 硬断行：中文文案里大量 <br /> 是人工控制的换行位。英文长度不同，
      沿用同一个断点只会断得莫名其妙 —— 这类格子里的 br 在英文态下关掉，
      让它自然排。只关「格子内两行文案」那种，段落间的 br 不动。
   ========================================================================== */
.is-en body {
    word-break: normal;
    overflow-wrap: break-word;
}

.is-en h1,
.is-en h2,
.is-en h3,
.is-en h4,
.is-en p,
.is-en li,
.is-en td,
.is-en th {
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: normal;
}

/* 导航。中文五个导航项共 20 字，英文同样五个词组就是三十多个字符，
   不收就会把 logo 和右侧按钮挤到一起。字号与内边距各收一档，
   并强制不换行（导航项折行比字小一号难看得多） */
.is-en .nav-link {
    padding: 0 11px;
    font-size: 14px;
    white-space: nowrap;
}

.is-en .nav-menu {
    padding-left: 16px;
    gap: 0;
}

/* 顶部那组按钮：Book a Demo / English 比「预约咨询」「中文」长很多 */
.is-en .btn-sm {
    padding: 0 13px;
    font-size: 13px;
}

.is-en .lang-btn {
    padding: 0 10px;
    font-size: 13px;
}

/* 二级菜单：标题与说明句都会变长，说明句行高放宽一点更好读 */
.is-en .nav-pop {
    letter-spacing: normal;
}

.is-en .np-item b {
    letter-spacing: normal;
}

.is-en .np-item i {
    line-height: 1.6;
}

/* 首屏导语里的硬断行关掉：中文那三段是按中文句读切的，
   英文接成一整句、自己折行更自然 */
.is-en .ab-hero-p br {
    display: none;
}

/* 英文态两栏重分。左栏一路从 500 抬到 560、现在再抬到 600px、
   栏间距 44→40→36：目的只有一个 —— 让底下那排胶囊标一行排完
   （见下面 .ab-hc-pursuit 的算式），顺带口号也能抬回 21px。
   1240 的版心减两侧 32 内边距是 1176 可用，左栏 600 加 36 间距，
   右栏剩 540。释义列不吃亏 —— 下面把题头列、列间距与右内边距
   各再收一点，释义仍有三百六，最长那条 51 字符要 350px，装得下 */
.is-en .ab-hero {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 0 36px;
}

/* 题头列 100px。中文态是 60px（两个字），英文 Positioning 是最长的一个，
   字号从 15 收到 14px 后实测八十八、加题头自己 12px 的左内边距，100 刚好。
   编号列 52→44（「01」实测只 30px）、列间距 18→10、右内边距 22→12：
   四处加起来，左栏又抬宽 40px 让出去的像素基本全数回给释义列。
   释义最长那两条（Positioning 与 Values，各 50 字符）实测要 350px，
   现在有 364px，四条释义各自一行读完 */
.is-en .ab-hc-item {
    grid-template-columns: 44px minmax(0, 100px) minmax(0, 1fr);
    gap: 0 10px;
    padding-right: 12px;
}

.is-en .ab-hc-k {
    padding-left: 12px;
    font-size: 14px;
    letter-spacing: .04em;
}

/* 释义收到 13px（上一版 13.5）。左栏抬到 600 之后右栏剩 540，
   释义列实测 341px；Positioning 那条 51 字符 13.5px 下要 348 ——
   就差七八像素，pharma 被挤到第二行。收一档后约 335px，四条各自一行。
   hyphens 必需关掉：全局 .is-en p 开了自动连字，lifecycle 会被劈开 */
.is-en .ab-hc-v {
    font-size: 13px;
    line-height: 1.7;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 首屏大标题。英文这句 36 字符，48px 下要八百多像素，两行是定局；
   但任它自己折出来是「Let AI Safeguard Medicines / Worldwide」，
   末行只剩一个词，读起来就是突然掉下去一行。balance 把两行拉平；
   自动连字关掉，Safeguard 这种长词在这个字号下一断特别显眼 */
.is-en .ab-hero-h2 {
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 口号抬回 21px、字距归零。上一版收到 19px 是因为左栏只有 500，
   21px 两句加那颗点约 541px 排不下；左栏 600 之后装得开，
   跟中文态 23px 的分量也对得上（英文字母视觉上比汉字大一档） */
.is-en .ab-hc-slogan {
    font-size: 21px;
    letter-spacing: normal;
}

/* 胶囊标那一区，从「3 + 2 两行」改成一行排完。
   一行的账要算得住：五个词收短之后共 54 字符，10.5px 下约 289px，
   五份 16px 内边距 80、四道 8px 间隙 32，胶囊一共约 401px；
   领词 Reaching without limits 13px 粗体约 159px，加一道间隙
   总计约 570px —— 左栏 600 装得下，还剩三十来像素的余量。
   nowrap 是明写的：这一行宁可自己算准也不许它折，折了就又是
   「第二行比第一行长」的样子 */
.is-en .ab-hc-pursuit {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.is-en .ab-hc-pl {
    flex-shrink: 0;
    font-size: 13px;
    letter-spacing: normal;
}

/* 字号、内边距与字距各收一档，五颗加领词才收得进 600px 左栏。
   nowrap 防的是胶囊内部断词（Responsibility 一断就认不出） */
.is-en .ab-hc-tag {
    padding: 5px 8px;
    font-size: 10.5px;
    letter-spacing: normal;
    white-space: nowrap;
}

/* 上市后页首屏那排市场：每个格子本来是「美国 / UNITED STATES」
   中文名加英文注脚。切成英文以后上下两行就是同一个词，读起来像
   重复排版，把注脚收掉 */
.is-en .cpv-topo-l li em {
    display: none;
}

/* 合作伙伴页五个领域标题同理：「外资企业及 CRO / MNC & CRO」
   英文态两行意思重了，注脚收掉，只留主标题 */
.is-en .pt-sector-t em {
    display: none;
}

/* 研究页双向价值那两列标签：「临床用药指南」在首页是句子中间的一段，
   字典里只能存小写 clinical medication guidelines；到这里变成并列标签，
   四个里三个大写一个小写，看着像漏了。首字母单独提大写，不动字典 */
.is-en .cpv-cross-l li::first-letter {
    text-transform: uppercase;
}

/* 同一处那四条标签，中文态四条一行排得下，英文态 flex 折成「三条 + 一条」，
   末尾那条孤零零掉到第二行。四条本来就是两两并列的关系，
   英文态改成两列等宽网格，2 × 2 逐列对齐；中文态照旧一行 */
.is-en .cpv-cross-l {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 20px;
}

/* 十项范围那张清单（研究页的八条链、合作页那四条同一套版式）：
   第二列是范围名，中文两到六个字，196px 绰绰有余；英文最长的
   Individual Case Management 26 字符要两百二十几，于是名字被折两行，
   Quality System Build-Out 还正好断在连字符上，读成 Build- / Out。
   第二列抬到 300px、列间距 34 收到 28、字号 17 收到 16：上市后页十条全部一行，
   研究页八条、合作页四条里只剩 Cross-functional certified database lock
   这种四十字符的长名仍得折，那种长度折两行是应该的，balance 把两行拉平。
   自动连字关掉（全局 .is-en 给 h1..h4 开了，这里是 div 但字号大、
   一旦断词特别显眼）。释义列还剩七百四，本来就有余，不受影响 */
.is-en .cpv-sv {
    grid-template-columns: 66px minmax(0, 300px) minmax(0, 1fr);
    gap: 0 28px;
}

.is-en .cpv-sv-t {
    font-size: 16px;
    line-height: 1.4;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 辖区对照表的二级描述原本锁了 nowrap，因为中文一句话正好一行。
   同一句英文长一倍多，不放开会直接冲出容器右边被裁掉。
   英文态改回可换行，同时把宽度收回正常读宽，折两行也不碎 */
.is-en .ec-reg .ec-hd-d {
    white-space: normal;
    max-width: 1000px;
}

/* ---------- 英文标题的碎行治理 ----------
   中文标题是按字数排的，断行点写在 <br /> 里刚好。英文同一句长一倍多，
   每一半句自己又折一次，结果末行常常只剩一个词（Trials / Work / Command Hub），
   读起来就是“突然掉下去了一行”。三个手法一起上：
     · 字号收一档，把每行能装的字符数从约 28 抬到 34 以上；
     · text-wrap: balance 让浏览器把多行拆得均匀，宁可上一行短一点也不留孤词；
     · hyphens 关掉，Multi-Centre 这种词不再被从连字符处劈开。
   正文段落不在此列（那里的自动连字是有意开的，可以把长段排齐） */
.is-en .ec-hero-h1 {
    font-size: 40px;
    line-height: 1.3;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

.is-en .ec-wt-t {
    font-size: 35px;
    line-height: 1.32;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 内页首屏大标题（国际化 / 服务 / 研究 / 合作伙伴等）：
   900px 是按中文一行二十几字定的，英文同一句在这个宽度里必折，
   而通栏本身还剩着两百多像素空着。把宽度放到接近通栏，再交给 balance 均行 */
.is-en .page-hero h1 {
    max-width: 1060px;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

.is-en .cw-claim {
    text-wrap: balance;
}

/* 首页客户墙左侧的领域标签：这里折行本身就是问题 —— 每条只有两三个词，
   折完第二行常常只剩一个词，五条轨的断点还各不相同，左边一列就花了。
   所以不再想办法「折得均匀」，而是整条不折：列宽 276px（真正能写字的
   从 186px 抬到 224px），配合字典里把最长的两条压短（见 i18n-en.js
   客户墙分组），最长的 Pharma groups & chemicals 连着序号约 205px，装得下还有余量。
   900px 以下标签列本来就通栏独占一行，那一档的单列布局不能被盖掉 */
@media (min-width: 901px) {
    .is-en .cwf-lane {
        grid-template-columns: 276px minmax(0, 1fr);
    }
}

.is-en .cwf-lane-hd b {
    font-size: 13px;
    line-height: 1.42;
    white-space: nowrap;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 「1 份个例数据」那三个字段标签：两列等宽仍然是 2+1 两行，白占一行的高度。
   根子在摘要条本身 —— 宽屏这一档排成「立题 | 字段 | 出口指向」三列，
   留给字段那一栏只有五百多像素，三条无论怎么排都进不去一行。
   1080px 以下的版式早就把出口指向挪到单独一行、字段栏放宽到七百多，
   英文态直接借用那套排法，三条一行排完。宽度锁 720px：
   不锁的话三个等宽格子会各自摊到三百像素，标签里一半是空白 */
@media (min-width: 1081px) {
    .is-en .ec-reg-src {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas:
            'line line'
            'k    p'
            't    f'
            'a    a';
        gap: 0 40px;
    }
}

.is-en .ec-reg-src-f {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
}

/* 产品页各区块的二级标题同一回事：740px 是按中文一行十六七字定的，
   英文一句五十多个字符就会折成“长一行 + 短两个词”。宽度放一档、交给 balance 均行 */
.is-en .ec-hd {
    max-width: 880px;
}

.is-en .ec-hd-t {
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 委托服务（cpv-*）与国际化二级页（gs-*）的首屏大标题：中文是两行，
   断点由 <br /> 定死。英文同样是两句话，却折成四五行 —— 因为宽度上限写的是
   15em，字号越大这个上限反而越窄（54px 时只有 810px，通栏还空着三百多）。
   两页的做法：宽度不再跟字号绑，改为跟着通栏走；cpv 那两句更长，
   再按断点各收一档字号，让每句话正好占满一整行。
   字典那边同步把尾巴 Outsourced End to End 压成 Outsourced、
   Asia-Pacific 收成 APAC（见 i18n-en.js），两头一起才够 */
.is-en .cpv-hero-h1,
.is-en .gs-h1 {
    max-width: none;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

@media (min-width: 1181px) {
    .is-en .cpv-hero-h1 {
        font-size: 46px;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .is-en .cpv-hero-h1 {
        font-size: 38px;
    }
}

/* eClins 五项能力舞台：英文同样几句话要比中文多出两三行，最高的第 02、05
   两张得五百出头。原先靠「舞台 436 → 575」硬顶，结果同一个 575 又要伺候
   只需 423px 的 eLiterSeek，底下白空一大片。现在台高已改为按本页最高那张
   自适应（见 .ec-cf-stage 的 grid 叠放），高度覆盖与圆钮手算居中值一并撤销。
   仍保留的两头让步：
     · 左栏 400 → 440，可写宽度从 332 抬到 372，导语段少折一行；
     · 标题、导语与要点说明各收一档字号、行高收紧，再省两行 */
.is-en .ec-cf-pan {
    grid-template-columns: 440px minmax(0, 1fr);
}

/* 标题必折两行，balance 把两行拉平；
   hyphens 关掉，不然 Internationalisation 会被从中间劈开 */
.is-en .ec-cf-info h3 {
    font-size: 19px;
    line-height: 1.38;
    letter-spacing: normal;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}

.is-en .ec-cf-info > p {
    font-size: 13.5px;
    line-height: 1.7;
}

/* 要点小标题：全局 .is-en li 开了自动连字，b 会继承到，
   One-click 这类词被劈开很难认，这一层关掉 */
.is-en .ec-cf-pts b {
    font-size: 13px;
    -webkit-hyphens: none;
    hyphens: none;
}

.is-en .ec-cf-pts span {
    font-size: 12px;
    line-height: 1.55;
}

/* 要点轴自身再挤出十几像素：英文下三条要点几乎条条都是两行，
   条间的呼吸位可以比中文态紧一档 */
.is-en .ec-cf-pts {
    margin-top: 14px;
}

.is-en .ec-cf-pts li {
    padding: 3px 0;
}