/* ================================================================
   所有 Hero Section 的通用骨架 (移动端性能优化版)
   ================================================================ */

.hero-section { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
    background: #000; /* 兜底黑，防止图片加载前的白屏 */
}

/* 1. 背景层：固定层级 1 */
.hero-bg-layer { 
    position: absolute; 
    inset: 0; 
    z-index: 1;
}

.hero-bg-layer img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: filter 0.5s ease; /* 增加平滑滤镜切换 */
}

/* 2. 3D 容器 (仅在 PC 端运行) */
.hero-3d-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;           
    visibility: hidden;
    background: transparent !important;
    transition: opacity 1.2s ease; 
}

.hero-3d-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    /* 核心修正：确保 3D 模型在缩放时不被挤压变形 */
    object-fit: contain !important; 
    backface-visibility: hidden;
    transform: translateZ(0); /* 开启硬件加速 */
}

/* 3. 文字层：固定最高层级 */
.hero-content-layer { 
    position: relative; 
    z-index: 10; 
    width: 100%; 
    pointer-events: none; /* 防止遮挡 3D 交互 */
    text-align: center;
}

.hero-content { 
    pointer-events: auto; /* 文字本身恢复可交互/可选中 */
    display: inline-block;
    will-change: transform, opacity;
    transform: translateZ(0); /* 强制渲染为独立图层，防止文字在动画中模糊 */
}

/* ================================================================
   响应式适配 (手机端：禁用 3D + 背景滤镜优化)
   ================================================================ */

@media (max-width: 768px) {
    /* 1. 彻底隐藏 Canvas 容器：节省电量，消除移动端卡顿 */
    .hero-3d-canvas {
        display: none !important;
    }

    /* 2. 视觉补偿：大幅压暗背景图 (0.4) 并微调对比度 */
    /* 由于去掉了 3D 模型，通过暗化背景让文字产生“浮现感” */
    .hero-bg-layer img {
        filter: brightness(0.4) contrast(1.1) !important;
    }

    /* 3. 各页面标题字号统一缩减 */
    #products-p .hero-title, 
    #about-p .hero-title, 
    #applications-p .hero-title,
    #contact-p .hero-title, 
    #services-p .hero-title {
        font-size: 38px !important;
        letter-spacing: 2px !important;
    }

    /* 4. 副标题间距与大小优化 */
    #products-p .hero-subtitle, 
    #about-p .hero-subtitle, 
    #applications-p .hero-subtitle,
    #contact-p .hero-subtitle, 
    #services-p .hero-subtitle {
        font-size: 14px !important;
        margin-top: 10px !important;
        line-height: 1.4 !important;
    }
}

/* 针对极小屏幕手机的额外微调 */
@media (max-width: 480px) {
    .hero-title {
        font-size: 32px !important; /* 针对超窄屏幕进一步缩小标题防止换行 */
    }
}

/* --- products.html, Services, about.html, contact.html, applications.html 子页面 Hero 文字系统：全页面统一样式 (对标 Services) --- */ /* 排除index首页，锁定其他所有页面的文字 */
/* ================================================================
   二级页面 Hero 文字系统 (主标题 + 副标题 + 描述文字)
   ================================================================ */
/* ================================================================
   1. 主标题 (Hero Title) - 极高亮电光版
   ================================================================ */
/* ================================================================
   1. 主标题 (Hero Title) - 极高亮电光版 (保持 ID 锁定)
   ================================================================ */
#products-p .hero-title, 
#about-p .hero-title, 
#applications-p .hero-title,
#contact-p .hero-title, 
#services-p .hero-title {
    font-size: 54px !important; 
    font-weight: 800 !important;
    letter-spacing: 4px !important; 
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    text-align: center !important;

    /* 升级版极亮渐变 */
    background: linear-gradient(90deg, #00FFD1, #00CCFF, #00FFD1) !important;
    background-size: 100% auto !important; 
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* 强发光增强：模拟霓虹灯光晕 */
    filter: drop-shadow(0 0 25px rgba(0, 255, 209, 0.8)) !important;
    
    animation: none !important;
    text-shadow: none !important;
    will-change: transform, opacity; 
    transform: translateZ(0); /* 硬件加速 */
}

/* ================================================================
   2. 副标题 (Hero Subtitle) - 继承电光色系
   ================================================================ */
#products-p .hero-subtitle, 
#about-p .hero-subtitle, 
#applications-p .hero-subtitle,
#contact-p .hero-subtitle, 
#services-p .hero-subtitle {
    display: block !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;

    /* 蓝色系渐变 */
    background: linear-gradient(90deg, #00e6c3, #00b8ff, #4cc9f0) !important;
    background-size: 100% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    /* 辅助发光 */
    filter: drop-shadow(0 0 12px rgba(0, 184, 255, 0.5)) !important;
    
    animation: none !important;
    will-change: transform, opacity; 
    transform: translateZ(0);
}

/* ================================================================
   3. 描述文字 (Hero Description)
   ================================================================ */
#products-p .hero-description, 
#about-p .hero-description, 
#applications-p .hero-description,
#contact-p .hero-description, 
#services-p .hero-description {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.7) !important; 
    max-width: 800px !important;
    margin: 30px auto !important;
    font-weight: 400 !important;
    text-align: center !important;

    background: none !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    animation: none !important;
}

/* ================================================================
   中英文语言适配
   ================================================================ */
html[lang="zh-CN"] .hero-subtitle { letter-spacing: 8px !important; }
html[lang="en"] .hero-title { letter-spacing: 0px !important; word-spacing: 6px !important; }
html[lang="en"] .hero-subtitle { letter-spacing: 0px !important; word-spacing: 6px !important; }

/* ================================================================
   响应式适配 (移动端方案：彻底禁用 3D + 背景深色海报化)
   ================================================================ */
@media (max-width: 768px) {
    /* 1. 标题与副标题缩减字号 */
    #products-p .hero-title, #about-p .hero-title, #applications-p .hero-title,
    #contact-p .hero-title, #services-p .hero-title {
        font-size: 38px !important;
        letter-spacing: 2px !important;
    }

    #products-p .hero-subtitle, #about-p .hero-subtitle, #applications-p .hero-subtitle,
    #contact-p .hero-subtitle, #services-p .hero-subtitle {
        font-size: 14px !important;
        margin-top: 10px !important;
        line-height: 1.4 !important;
    }

    /* 2. 彻底隐藏所有子页面的动画容器 */
    #chip-canvas-container, 
    #services-animation-container, 
    #apps-animation-container, 
    #about-globe-container, 
    #contact-animation-container {
        display: none !important;
    }

    /* 3. 背景视觉补偿：压暗背景(0.4)并提高对比度(1.1)，让电光文字像在黑夜中发光 */
    .hero-bg-layer img {
        filter: brightness(0.4) contrast(1.1) !important;
    }
}


/* ============================================================
                       Index 首页专用样式
   ============================================================ */
/* ============================================================
   一：底层容器与视频背景（极致稳定）
   ============================================================ */

#navbar-container { min-height: 80px; position: relative; z-index: 1001; }
.hero { margin-top: -80px; padding-top: 80px; }

.video-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    transform: translateZ(0); 
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    filter: brightness(0.7) contrast(1.1); 
    transform: translateZ(0); 
}

/* ============================================================
   二：内容层（复刻图片原色：清澈电光蓝）
   ============================================================ */

.home-hero-content {
    position: relative !important;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    top: 28px !important; 
    text-align: center;
}

/* 主标题：连接全球芯脉（复刻图片中的高亮蓝色） */
#home-p .hero-title {
    font-size: 58px !important;
    font-weight: 800;
    margin-bottom: 16px;
    display: block;
    /* 使用图片抓取的精准色值 #5BD3FF */
    /* 采用极小范围的线性渐变增加光泽感，但感官上是纯色 */
    background: linear-gradient(135deg, #39FF14 0%, #00d4ff  50%, #1D9BF0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: none !important;
    filter: none !important;
    /* 模拟图片中的文字外发光（Glow Effect） */
    text-shadow: 0 0 20px rgba(91, 211, 255, 0.5);
}

/* 副标题：驱动智能未来（保持感官高度一致） */
#home-p .hero-subtitle {
    display: block !important;
    width: 100% !important;
    margin: 0px auto 24px !important;
    font-size: 42px !important;
    font-weight: 700;
    letter-spacing: 3px;
    /* 使用与主标题完全一致的配色方案 */
    background: linear-gradient(135deg, #1D9BF0 0%, #1D9BF0  50%, #39FF14 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: none !important;
    filter: none !important;
    text-shadow: 0 0 20px rgba(91, 211, 255, 0.4);
}

/* 描述文字：高级灰亮色 */
#home-p .hero-description {
    font-size: 1.05rem !important;
    line-height: 2 !important;
    margin: 20px auto 60px !important;
    max-width: 850px !important;
    font-weight: 500 !important;
    color: rgba(230, 235, 245, 0.85) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

/* 玻璃态按钮：统一使用图片原色 */
.home-btn-glass {
    margin-top: 35px !important; 
    padding: 12px 38px !important;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px !important;      
    color: #ffffff !important;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
    overflow: hidden; 
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s ease;
}

.home-btn-glass::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; 
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #5BD3FF, #ffffff) !important;
    z-index: -1;
    transition: transform 0.5s ease;
}

.home-btn-glass:hover { color: #0f172a !important; transform: translateY(-4px); }
.home-btn-glass:hover::before { transform: translateX(100%); }

/* ============================================================
   三：基础适配
   ============================================================ */

@media screen and (max-width: 768px) {
    #home-p .hero-title { font-size: 34px !important; }
    #home-p .hero-subtitle { font-size: 20px !important; }
}



/* ========================================
         主页Index  Hero以外的内容
   ======================================== */
   
/* =============第1屏：我们 (优化高性能适配版) ================*/   
   
/* ============= 全局变量 ================ */
:root {
    --deep-blue: #0a1128;
    --forest-green: #1c3d3a;
    --accent-teal: #2dd4bf;
    --text-white: #f8fafc;
}

/* 全局布局设定 */
.section { padding: 100px 0; min-height: 80vh; display: flex; align-items: center; }
.container { width: 90%; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }

/* --- 第1屏：我们 --- */
.lim-about-hero {
    width: 100%; 
    min-height: 100vh; 
    display: flex; 
    align-items: center;      /* 【关键修改1】使用 center 替代 flex-start，解决布局乱的问题 */
    overflow: visible; 
    position: relative;
    /* 【关键修改2】删除 fixed，改用 scroll。解决 Ultra 9 显卡在高刷下的卡顿 */
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.88) 0%, 
            rgba(230, 242, 240, 0.82) 50%, 
            rgba(241, 247, 246, 0.88) 100%
        ),
        url('resources/backgrounds/index-aboutus.webp') center/cover no-repeat;
    background-attachment: scroll !important; 
    box-sizing: border-box;
    z-index: 1;
    padding: clamp(72px, 8vh, 110px) 0;
}

/* 网格布局 */
.lim-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    grid-template-rows: auto auto;      
    column-gap: 64px;
    row-gap: 34px; 
    width: 100%;
    align-items: center;
    /* 【关键修改3】删掉 25vh 的 margin。现在由父容器的 flex center 自动帮你对齐到屏幕中心 */
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
}

.lim-text-layout {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.lim-stats-layout {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
}

.btn-pill-small {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: start;
    justify-self: start;
}

/* --- 左侧排版 --- */
.lim-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.lim-year { font-size: 13px; font-weight: 800; color: #10b981; letter-spacing: 2px; }
.lim-divider { width: 40px; height: 1px; background: #10b981; opacity: 0.4; }

.title-sub { font-size: 1.8rem; font-weight: 300; color: #64748b; display: block; margin-bottom: 5px; }
.title-main { font-size: 58px; font-weight: 700; color: #0f172a; line-height: 1.1; margin-bottom: 35px; }
.text-accent { color: #10b981; }

/* 英文标题优化 */
html[lang="en"] .title-main {
    font-size: 32px !important;
    letter-spacing: -1px !important;
    line-height: 1.2 !important;
}
html[lang="en"] .title-sub {
    font-size: 1.2rem !important;
    letter-spacing: 0 !important;
}
html[lang="en"] .title-main .text-accent {
    display: inline !important;
    font-size: inherit !important;
}

html[lang="en"] .lim-description {
    max-width: 700px;
}

html[lang="en"] .lim-description .desc-sub {
    font-size: 0.88rem;
    line-height: 1.55;
}

html[lang="en"] .lim-about-hero .lim-description .desc-sub {
    font-size: 0.95rem;
    line-height: 1.68;
}

@media (min-width: 1440px) and (min-height: 820px) {
    html[lang="en"] .lim-about-hero .lim-description .desc-sub {
        font-size: 1rem;
        line-height: 1.72;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) and (max-height: 860px) {
    html[lang="en"] .lim-about-hero {
        min-height: auto;
        padding: 64px 0 76px;
    }

    html[lang="en"] .lim-hero-grid {
        column-gap: 48px;
        row-gap: 22px;
    }

    html[lang="en"] .lim-meta {
        margin-bottom: 14px;
    }

    html[lang="en"] .title-main {
        font-size: 30px !important;
        line-height: 1.16 !important;
        margin-bottom: 18px;
    }

    html[lang="en"] .title-sub {
        font-size: 1.08rem !important;
    }

    html[lang="en"] .lim-description {
        max-width: 660px;
        padding-left: 20px;
    }

    html[lang="en"] .desc-primary {
        font-size: 1.02rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    html[lang="en"] .lim-description .desc-sub {
        font-size: 0.82rem;
        line-height: 1.42;
    }

    html[lang="en"] .desc-sub + .desc-sub {
        margin-top: 6px;
    }

    html[lang="en"] .stats-refined-grid {
        gap: 18px;
    }

    html[lang="en"] .stat-glass-card {
        padding: 28px 22px;
        border-radius: 20px;
    }

    html[lang="en"] .i2,
    html[lang="en"] .i4 {
        top: 24px;
    }

    html[lang="en"] .stat-number {
        font-size: 2.35rem;
    }
}

.lim-description { max-width: 680px; border-left: 3px solid #e2e8f0; padding-left: 25px; }
.desc-primary { font-size: 1.18rem; color: #1e293b; margin-bottom: 10px; line-height: 1.45; }
.desc-sub { font-size: 0.92rem; color: #64748b; line-height: 1.62; }
.desc-sub + .desc-sub { margin-top: 8px; }

/* 椭圆按钮设计 */
.btn-pill-small {
    display: inline-block;
    padding: 10px 32px;
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-pill-small:hover {
    background: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

.lim-about-hero .btn-pill-small {
    background: #10b981;
    color: #fff;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.18);
}

.lim-about-hero .btn-pill-small:hover {
    background: #059669;
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.24);
}

/* --- 右侧卡片矩阵 --- */
.stats-refined-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.stat-glass-card {
    background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%);
    padding: 38px 28px;
    border-radius: 24px;
    border: 1px solid rgba(16, 185, 129, 0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    transform-origin: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    transition-delay: 0s !important;
}

.stat-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--shine-angle, 120deg), transparent 0%, rgba(255,255,255,0.75) 42%, rgba(16,185,129,0.12) 50%, transparent 62%);
    opacity: 0;
    transform: translate(var(--shine-x-start, -55%), var(--shine-y-start, 0));
    pointer-events: none;
}

/* 错位对齐 */
.i2, .i4 { top: 40px; }
.i1 { --shine-angle: 120deg; --shine-x-start: -60%; --shine-y-start: -40%; --shine-x-end: 70%; --shine-y-end: 48%; }
.i2 { --shine-angle: 60deg; --shine-x-start: 60%; --shine-y-start: -40%; --shine-x-end: -70%; --shine-y-end: 48%; }
.i3 { --shine-angle: 60deg; --shine-x-start: -60%; --shine-y-start: 40%; --shine-x-end: 70%; --shine-y-end: -48%; }
.i4 { --shine-angle: 120deg; --shine-x-start: 60%; --shine-y-start: 40%; --shine-x-end: -70%; --shine-y-end: -48%; }

.stat-glass-card:hover {
    border-color: rgba(16, 185, 129, 0.22);
    transform: scale(1.015);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.stat-glass-card:hover::before {
    animation: stat-card-shine 0.72s ease-out forwards;
}

@keyframes stat-card-shine {
    0% {
        opacity: 0;
        transform: translate(var(--shine-x-start, -55%), var(--shine-y-start, 0));
    }
    28% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(var(--shine-x-end, 55%), var(--shine-y-end, 0));
    }
}

.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.val-group { display: flex; align-items: baseline; gap: 4px; }

.stat-number { font-size: 2.8rem; font-weight: 800; color: #0f172a; letter-spacing: -1.5px; transition: color 0.18s ease; }
.num-prefix { font-size: 14px; font-weight: 700; color: #64748b; margin-right: 2px; transition: color 0.18s ease; }
.num-suffix { font-size: 1.5rem; font-weight: 700; color: #10b981; margin-left: 2px; transition: color 0.18s ease; }

.stat-icon { width: 24px; height: 24px; color: #10b981; stroke-width: 1.8; opacity: 0.8; transition: color 0.18s ease, opacity 0.18s ease; }
.lbl { font-size: 14px; color: #64748b; font-weight: 600; transition: color 0.18s ease; }

/* ========== 移动端适配 ========== */
@media (max-width: 1024px) {
    .lim-about-hero {
        min-height: auto;
        padding: 60px 15px; 
    }
    .lim-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 30px;
    }
    .lim-text-layout, .lim-stats-layout, .btn-pill-small {
        grid-column: auto;
        grid-row: auto;
    }
    .lim-text-layout { text-align: center; }
    .lim-description { border-left: none; padding-left: 0; margin: 0 auto; }
    .stats-refined-grid { grid-template-columns: 1fr; gap: 20px; }
    .i2, .i4 { top: 0; }
    .btn-pill-small { justify-self: center; }
}

@media (max-width: 768px) {
    .lim-description {
        max-width: 100%;
    }

    .desc-primary {
        font-size: 1.05rem;
        line-height: 1.5;
    }

    .desc-sub {
        font-size: 0.92rem;
        line-height: 1.65;
    }
}



/* ===============第2屏：核心优势 ============*/
/* --- 基础容器 --- */
.section-core-values {
    padding: 120px 0;
    /* 改用线性渐变，从底部向上自然淡化 */
    /* #f0fdf4 是非常高级的薄荷白，比纯透明更有质感 */
    background: linear-gradient(
        to top, 
        #f0fdf4 10%, 
        #f9fefc 80%, 
        #ffffff 100%
    );
    position: relative;
}

/* --- 头部（居中排版） --- */
.v-header { text-align: center; margin-bottom: 70px; }
.v-meta { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 12px; }
.v-tag { font-size: 13px; font-weight: 800; color: #10b981; letter-spacing: 2px; }
.v-line { width: 35px; height: 1px; background: #10b981; opacity: 0.3; }
.v-title { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: 15px; }
.v-subtitle { font-size: 0.9rem; color: #64748b; }

/* --- 三卡片一体化平滑渐变 --- */
.v-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.v-card {
    padding: 50px 40px;
    border-radius: 30px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 优化为更平滑的曲线 */
    position: relative;
    background: #ffffff;
    overflow: hidden; /* 为扫光交互做准备 */
}

/* 交互：卡片微动与扫光 */
.v-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
    transform: translateY(-5px);
}

/* 扫光效果线 */
.v-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}
.v-card:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

/* 左卡：极淡向右渐变 */
.v-card:nth-child(1) {
    background: linear-gradient(135deg, #ffffff 75%, #f8fefd 100%);
}

/* 中卡：柔和能量中心 */
.v-card.active {
    background: linear-gradient(90deg, #f8fefd 0%, #f1fdf6 50%, #f8fefd 100%) !important;
    border-color: rgba(16, 185, 129, 0.15);
    transform: translateY(-10px); /* 常驻高度 */
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.05);
}

/* 适配全局动画：确保 visible 后 active 卡片不回落到 0 */
.v-card.active.fade-in-up.visible {
    transform: translateY(-10px); 
}

.v-card.active:hover {
    transform: translateY(-15px);
}

/* 右卡：极淡向左渐变 */
.v-card:nth-child(3) {
    background: linear-gradient(225deg, #ffffff 75%, #f8fefd 100%);
}

/* 卡片内文字与图标 */
.v-icon-container {
    width: 55px; height: 55px;
    background: rgba(16, 185, 129, 0.05);
    color: #10b981;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}
.v-icon { width: 26px; height: 26px; stroke-width: 2; }

/* 鼠标悬停图标反转 */
.v-card:hover .v-icon-container {
    background: #10b981;
    color: #ffffff;
}

.v-card h3 { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin-bottom: 15px; }
.v-card p { font-size: 0.95rem; color: #64748b; line-height: 1.8; }

/* --- 底部数据条：强制居中对齐 --- */
.v-bottom-bar {
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 50px 20px;
    background: #fcfdfe; 
    border-radius: 35px;
    border: 1px solid #f1f5f9;
    max-width: 1100px; 
    margin: 0 auto;
}

.v-stat {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.v-stat:hover .v-num { color: #10b981; }

.v-num { 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: #1e293b; 
    letter-spacing: -0.5px;
    line-height: 1.2;
    transition: color 0.3s ease;
}
.v-unit { color: #10b981; font-weight: 700; margin-left: 2px; font-size: 1rem; }
.v-lbl { 
    font-size: 13px; 
    color: #94a3b8; 
    font-weight: 600; 
    text-transform: uppercase; 
    margin-top: 8px; 
    letter-spacing: 0.5px;
}

.v-sep { 
    width: 1px; 
    height: 35px; 
    background: #e2e8f0; 
    opacity: 0.8;
}

/* --- 移动端适配 --- */
/* --- 移动端适配：紧凑排版，修正图标与文字间距 --- */
@media screen and (max-width: 1024px) {
    /* 容器上下间距进一步压缩 */
    .section-core-values {
        padding: 40px 15px; /* 原为60px 20px，减少留白 */
    }

    /* 标题保持流体，适当减小 */
    .v-title {
        font-size: clamp(1.6rem, 4.5vw, 2rem) !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    .v-subtitle {
        font-size: 0.8rem;
    }

    /* 英文标题优化 */
    html[lang="en"] .v-title {
        letter-spacing: -0.5px !important;
    }

    /* 卡片网格：单列，间隙再缩小 */
    .v-cards-wrapper {
        grid-template-columns: 1fr;
        gap: 12px; /* 原15px，更紧凑 */
        margin-bottom: 40px; /* 减少底部空间 */
    }

    /* 卡片内部 */
    .v-card {
        padding: 25px 20px; /* 原35px 25px，大幅缩减 */
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左对齐，符合阅读习惯 */
        text-align: left;
    }

    /* 图标容器缩小，与标题间距收紧 */
    .v-icon-container {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        margin-bottom: 15px; /* 原25px，减小 */
    }
    .v-icon {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    /* 卡片标题字体适当缩小，行高紧凑 */
    .v-card h3 {
        font-size: 1.2rem; /* 原1.4rem */
        margin-bottom: 8px; /* 原15px */
        line-height: 1.3;
    }

    /* 描述文字缩小，行距调低 */
    .v-card p {
        font-size: 0.85rem; /* 原0.95rem */
        line-height: 1.5; /* 原1.8 */
        color: #64748b;
    }

    /* 移除所有卡片悬浮效果、渐变背景，保持简洁 */
    .v-card:nth-child(1),
    .v-card:nth-child(3),
    .v-card.active,
    .v-card.active.fade-in-up.visible {
        background: #ffffff !important;
        transform: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    }

    /* 底部数据条：进一步压缩纵向间距 */
    .v-bottom-bar {
        flex-direction: column;
        gap: 15px; /* 原30px */
        padding: 25px 15px; /* 原40px 20px */
        border-radius: 20px;
    }

    /* 数据项布局 */
    .v-stat {
        width: 100%;
        padding: 0 5px;
    }

    /* 数字缩小，标签更小 */
    .v-num {
        font-size: 1.4rem !important; /* 原1.6rem */
        letter-spacing: -0.5px;
    }
    .v-unit {
        font-size: 0.9rem;
    }
    .v-lbl {
        font-size: 11px; /* 原13px */
        margin-top: 4px; /* 原8px */
        letter-spacing: 0.3px;
    }

    /* 隐藏垂直分隔线 */
    .v-sep {
        display: none;
    }

    /* 英文描述防溢出 */
    html[lang="en"] .v-card p {
        font-size: 0.8rem !important;
        line-height: 1.5;
        word-break: break-word;
    }
}

/* 极小屏幕额外处理 */
@media screen and (max-width: 380px) {
    .v-title {
        font-size: 1.3rem !important;
    }
    .v-card h3 {
        font-size: 1.1rem !important;
    }
    .v-card p {
        font-size: 0.75rem !important;
    }
    .v-num {
        font-size: 1.2rem !important;
    }
    .v-lbl {
        font-size: 10px !important;
    }
}



/* 第3屏：产品类型（优化版） */

/* --- 全局背景设计 --- */
.section-products-unified {
    padding: 120px 0;
    position: relative;
    background: linear-gradient(to bottom, #bae6fd 0%, #f8fafc 100%);
    overflow: hidden;
}

/* 精细的工业网格（合并两次定义） */
.global-bg-decor {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background-image: 
        linear-gradient(rgba(16, 185, 129, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.relative-content { position: relative; z-index: 2; }

/* --- 居中标题样式 --- */
.v-header { text-align: center; margin-bottom: 70px; }
.v-tag { font-size: 12px; font-weight: 800; color: #10b981; letter-spacing: 2px; }
.v-title { 
    font-size: 2.5rem; 
    font-weight: 800; 
    color: #0f172a; 
    margin-top: 10px; 
}
/* 副标题优化 */
.v-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 8px;
    opacity: 0.85;
}

/* --- 5列卡片网格 --- */
.product-grid-layout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 60px;
}

.p-card-item {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.p-card-item:hover {
    transform: translateY(-10px);
    border-color: #10b981;
    background: linear-gradient(135deg, #ffffff 0%, #f1fef9 100%);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
}

.p-card-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: #10b981;
    margin-bottom: 25px;
    opacity: 0.5;
    width: 100%;
    text-align: center;
}

.p-card-item h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.p-card-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 92%;
}

/* --- 居中 More 按钮 --- */
.v-more-action { display: flex; justify-content: center; }

.v-btn-more {
    padding: 16px 45px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.v-btn-more:hover {
    background: #10b981;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);
}

/* --- 响应式适配 --- */

/* 1200px 以下：3列 */
@media screen and (max-width: 1200px) {
    .product-grid-layout { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px; 
        padding: 0 20px;
    }
    .section-products-unified { padding: 80px 0; }
}

/* 992px 以下：2列 */
@media screen and (max-width: 992px) {
    .product-grid-layout { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .v-title { font-size: 2.2rem !important; }
}

/* 768px 以下：移动端精修 */
@media screen and (max-width: 768px) {
    /* 容器内边距进一步压缩 */
    .section-products-unified { 
        padding: 40px 0; /* 原60px，减至40px更紧凑 */
    }

    /* 标题流体化并减小底部间距 */
    .v-header {
        margin-bottom: 40px; /* 原70px，大幅缩小 */
    }
    .v-title { 
        font-size: clamp(1.4rem, 6vw, 1.8rem) !important; 
        line-height: 1.2;
        margin-top: 5px;
    }
    .v-subtitle {
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        margin-top: 5px;
    }
    
    /* 英文下收紧标题间距 */
    html[lang="en"] .v-title { letter-spacing: -1px !important; }

    /* 网格单列，减小间隙 */
    .product-grid-layout { 
        grid-template-columns: 1fr; 
        gap: 12px; /* 原15px */
        padding: 0 15px; /* 原20px，减小 */
        margin-bottom: 40px; /* 原60px */
    }

    /* 卡片内边距压缩，文字左对齐更易读 */
    .p-card-item {
        padding: 20px 15px !important; /* 原30px 20px */
        border-radius: 18px;
        align-items: center;
        text-align: center;
    }

    /* 减弱悬停位移，防止误触 */
    .p-card-item:hover {
        transform: translateY(-3px); /* 原-5px，更轻微 */
    }

    /* 编号和标题间距调小 */
    .p-card-num {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .p-card-item h4 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .p-card-item p {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    /* 背景网格缩小，更隐晦 */
    .global-bg-decor {
        background-size: 30px 30px;
        opacity: 0.4;
    }

    /* 按钮样式：固定宽度，避免80%过长 */
    .v-btn-more {
        width: 220px; /* 固定精致宽度 */
        max-width: 90%; /* 超小屏幕保护 */
        padding: 12px 0;
        text-align: center;
        font-size: 15px;
        box-sizing: border-box;
        margin: 0 auto;
    }
}

/* 极小屏幕（380px以下）额外微调 */
@media screen and (max-width: 380px) {
    .v-title {
        font-size: 1.2rem !important;
    }
    .p-card-item {
        padding: 15px 12px !important;
    }
    .p-card-item h4 {
        font-size: 0.9rem;
    }
    .p-card-item p {
        font-size: 0.7rem;
    }
    .v-btn-more {
        width: 180px;
        padding: 10px 0;
        font-size: 13px;
    }
}

/* 针对英文长单词防御 */
html[lang="en"] .p-card-item h4 {
    hyphens: auto;
    word-break: break-word;
    line-height: 1.3;
}






/* --- 第4屏：产品线品牌（完整版，含移动端适配） --- */
.section-brands {
    padding: 180px 0;
    background: linear-gradient(
        110deg,
        #e0e7ff 0%,
        #e0e7ff 50%,
        #f3e8ff 50%,
        #f3e8ff 100%
    );
    overflow: hidden;
}

.section-brands .v-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-brands .v-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
}

/* 滚动容器 */
.brand-slider-wrapper {
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden;
}

.brand-track {
    display: flex;
    width: max-content; /* 关键：让所有品牌水平排列 */
    animation: scrollBrands 40s linear infinite;
}

#home-p .brand-item {
    width: 220px;
    height: 100px;
    margin: 0 15px;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex-shrink: 0; /* 防止压缩 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    cursor: pointer;
}

#home-p .brand-item:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

#home-p .brand-item img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

#home-p .brand-item:hover img {
    transform: scale(1.1);
}

/* 鼠标悬停暂停滚动 */
.brand-track:hover {
    animation-play-state: paused;
}

/* 底部按钮 */
.v-more-action {
    display: flex;
    justify-content: center;
}

.v-btn-more {
    padding: 16px 50px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.v-btn-more:hover {
    background: #10b981;
}

/* 滚动动画定义（仅保留一份） */
@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========== 移动端适配（max-width: 1024px） ========== */
@media (max-width: 1024px) {
    .section-brands {
        padding: 60px 0 !important;
        background: linear-gradient(155deg, #e0e7ff 0%, #e0e7ff 45%, #f3e8ff 45%, #f3e8ff 100%) !important;
    }

    .section-brands .v-title {
        font-size: 1.8rem !important;
        text-align: center !important;
    }

    /* 品牌卡片适配 */
    #home-p .section-brands .brand-item {
        flex: 0 0 140px !important;
        width: 140px !important;
        height: 70px !important;
        margin: 0 10px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important; /* 取消悬停浮起 */
    }

    #home-p .section-brands .brand-item img {
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* 滚动轨道保持动画（复用全局定义的 keyframes） */
    .section-brands .brand-track {
        display: flex !important;
        width: max-content !important;
        animation: scrollBrands 25s linear infinite !important;
        will-change: transform;
    }

    /* 按钮容器：增加顶部间距并居中 */
    .section-brands .v-more-action {
        margin-top: 40px !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 20px; /* 可选，防止按钮贴边 */
    }

    /* 按钮本身：固定宽度，精致胶囊 */
    .section-brands .v-more-action .v-btn-more {
        width: 140px !important;          /* 固定宽度，可根据需要调整 */
        max-width: 90% !important;        /* 极小屏幕下自适应 */
        padding: 12px 20px !important;    /* 垂直12px，水平20px（已包含在宽度内） */
        text-align: center !important;
        border-radius: 100px !important;
        font-size: 16px !important;
        box-sizing: border-box !important; /* 确保宽度包含内边距 */
        display: inline-block !important;
        margin: 0 auto !important;
        background: #0f172a;
        color: #ffffff;
        text-decoration: none;
        font-weight: 700;
        transition: 0.3s;
        /* 移除可能的干扰属性 */
        float: none !important;
        flex: none !important;
    }

    /* 移动端取消悬停暂停（避免触摸时卡死） */
    .section-brands .brand-track:hover {
        animation-play-state: running !important;
    }
}



/* 第5屏：行业解决方案 */
/* --- 1. 背景改动：应用浅色渐变 --- */
.section-industry-unified {
    padding: 100px 0;
    /* 显眼的浅色渐变 */
    background: linear-gradient(135deg, #f0fdfa 0%, #eff6ff 100%);
    position: relative;
}

/* --- 2. 标题改动：显眼巨型标题 --- */
.v-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.title-giant {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 1px;
}

/* --- 3. 严格保留你提供的卡片样式和悬停效果 --- */
.i-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.i-card {
    position: relative;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.i-card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.i-card-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.1) 70%);
    transition: all 0.4s ease;
}

.i-card-content {
    position: absolute;
    bottom: 0; left: 0;
    padding: 30px;
    z-index: 2;
    color: #ffffff;
}

/* 交互动效完全保留 */
.i-card:hover .i-card-bg {
    transform: scale(1.1);
}

.i-card:hover .i-card-mask {
    /* 悬停变色点 */
    background: linear-gradient(to top, rgba(16, 185, 129, 0.85) 0%, rgba(15, 23, 42, 0.3) 100%);
}

/* --- 4. 按钮结构不变，仅确保跳转 --- */
.v-more-action { display: flex; justify-content: center; }
.v-btn-more {
    padding: 16px 50px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}
.v-btn-more:hover {
    background: #10b981;
}
/* --- 移动端适配 (针对手机和平板) --- */
/* --- 第五屏：响应式精修补丁 --- */

@media (max-width: 1024px) {
    /* 平板端适配 */
    .i-grid-layout {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 30px; /* 稍微增加侧边距，呼吸感更好 */
        gap: 25px;       /* 增加间距防止卡片内容显得拥挤 */
    }
    
    .title-giant {
        /* 修复：这里真正缩小字号，使用流体字号 */
        font-size: clamp(1.8rem, 4vw, 2.2rem) !important; 
    }
}

@media (max-width: 768px) {
    .section-industry-unified {
        padding: 60px 0;
    }

    .title-giant {
        /* 手机端进一步收敛 */
        font-size: 1.6rem !important;
        line-height: 1.3;
        padding: 0 10px;
    }

    /* 英文环境专项：缩紧间距防止长标题破版 */
    html[lang="en"] .title-giant {
        letter-spacing: -0.5px !important;
    }

    .i-grid-layout {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 20px;
    }

    .i-card {
        height: 200px; /* 进一步降低高度，手机端单列不需要那么高 */
        border-radius: 16px;
    }

    /* 增强手机端文字的可读性：稍微加重底部的阴影遮罩 */
    .i-card-mask {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 80%) !important;
    }

    .i-card-content {
        padding: 20px;
    }

    /* 行业标题在卡片里不能太大 */
    .i-card-content h3 {
        font-size: 1.2rem !important;
        margin-bottom: 5px;
    }

    .v-btn-more {
        width: 85%;
        font-size: 15px;
    }
}

/* 针对英文模式下长单词的极致防御 */
html[lang="en"] .i-card-content h3 {
    word-break: break-word; /* 强制长单词（如Infrastructure）换行 */
    hyphens: auto;          /* 自动添加连字符 */
}




/* 第6屏：“标准化服务流程” */

/* --- 1. 背景设计：增强径向渐变对比度 --- */
.section-service-flow {
    padding: 180px 0;
    
    /* 修改说明：
       1. 中心色提亮至 #2d4470，确保在所有显示器上都有明显的发光感。
       2. 渐变结束点提前至 60%，让四周的 #0f172a 黑色区域更广，形成更强的虚实对比。
    */
    background: radial-gradient(circle at 40% 15%, #134e4a 10%, #0f172a 70%);
    
    position: relative;
    overflow: hidden;
}

.text-white { color: #ffffff !important; }

/* --- 2. 步骤布局 --- */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    position: relative;
}

/* 绘制连接线 (仅在桌面端显示) */
@media (min-width: 992px) {
    .flow-steps::before {
        content: "";
        position: absolute;
        top: 45px; /* 对齐数字中心 */
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(to right, #10b981 0%, rgba(16, 185, 129, 0.1) 100%);
        z-index: 1;
    }
}

/* --- 3. 步骤卡片样式 --- */
.step-card {
    position: relative;
    z-index: 2;
    text-align: center;
}

.step-num {
    width: 90px;
    height: 90px;
    background: #1e293b;
    border: 3px solid #10b981; /* 亮绿色边框 */
    color: #10b981;
    font-size: 24px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
    transition: all 0.4s ease;
}

.step-card h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.step-card p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    padding: 0 10px;
}

/* --- 4. 交互效果 --- */
.step-card:hover .step-num {
    background: #10b981;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.5);
}

.step-card:hover h4 {
    color: #10b981;
}

/* 移动适配 */
/* --- 第六屏：服务流程深度适配 --- */

@media (max-width: 991px) {
    .section-service-flow {
        padding: 100px 0; /* 减小间距 */
        /* 适配手机屏幕：将发光点移至顶部中心，增加扩散范围 */
        background: radial-gradient(circle at 50% 10%, #134e4a 0%, #0f172a 60%);
    }

    .flow-steps { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 50px 20px; /* 增加上下间距，减少左右间距 */
    }

    /* 移动端逻辑增强：虽然横向线没了，但可以给数字球加一个微弱的呼吸感 */
    .step-num {
        width: 70px; /* 缩小球体 */
        height: 70px;
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .flow-steps { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }

    /* 手机端：重新绘制垂直连接线，保持流程感 */
    .flow-steps::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: linear-gradient(to bottom, #10b981 0%, transparent 100%);
        transform: translateX(-50%);
        opacity: 0.3;
        z-index: 1;
    }

    .step-card {
        padding: 0 20px;
    }

    .step-card h4 {
        font-size: 18px !important;
        margin-bottom: 10px;
    }

    /* 暴力调小字号：针对英文模式 */
    html[lang="en"] .step-card h4 {
        font-size: 16px !important;
        letter-spacing: -0.5px;
    }

    .step-card p {
        font-size: 13px;
        padding: 0 15px;
    }
}

/* 针对英文单词过长的全局防御 */
html[lang="en"] .step-card h4 {
    word-break: keep-all; /* 流程标题不建议随机断词 */
    overflow-wrap: break-word;
}

/* ========第7屏：最后一个======= */

.section-final-cta-unified {
    padding: 100px 0 140px;
    background: #ffffff; /* 外部保持清爽白色 */
    position: relative;
    overflow: hidden;
}

/* 动态流光背景 */
.cta-bg-glow {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
    filter: blur(80px);
    z-index: 1;
}

/* 核心玻璃拟态卡片 */
.cta-glass-card {
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
    padding: 80px 40px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 20px auto 40px;
    line-height: 1.6;
}

/* --- 按钮组设计 --- */
.cta-actions-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 48px;
}

/* 主按钮：亮绿色点睛 */
.v-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 45px;
    background: #10b981;
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

.v-btn-primary:hover {
    background: #ffffff;
    color: #064e3b;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4);
}

/* 次按钮：描边风格 */
.v-btn-outline {
    padding: 20px 45px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.v-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* 底部信任信息 */
.cta-footer-note {
    display: flex;
    justify-content: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}

.cta-footer-note .separator { opacity: 0.3; }

/* --- 移动适配 --- */

@media (max-width: 768px) {
    .section-final-cta-unified {
        padding: 60px 20px 100px; /* 减小上下边距，防止页面拉得过长 */
    }

    .cta-glass-card {
        padding: 50px 25px; /* 减小内边距，给文字更多横向空间 */
        border-radius: 30px; /* 圆角稍微收敛，更适合手机屏 */
    }

    /* 标题：使用流体字号，防止英文长标题（如 "Start Your Partnership"）撑破 */
    .cta-glass-card .title-giant {
        font-size: clamp(1.6rem, 8vw, 2rem) !important;
        line-height: 1.2;
    }

    /* 描述文字优化 */
    .cta-desc {
        font-size: 0.95rem;
        padding: 0 10px;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    /* 英文模式下缩小描述文字，防止由于单词长导致的行数过多 */
    html[lang="en"] .cta-desc {
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.6);
    }

    /* 按钮组适配 */
    .cta-actions-group {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* 按钮之间的垂直间距 */
    }

    .v-btn-primary, 
    .v-btn-outline {
        width: 100%;
        max-width: 100%; /* 手机端按钮宽度占满，增加点击热区 */
        justify-content: center; /* 文字居中 */
        padding: 14px 0; /* 统一度高 */
    }

    /* 次按钮在手机端减小边框厚度，显得更精致 */
    .v-btn-outline {
        border-width: 1px;
        padding: 14px 0;
    }

    /* 底部信任信息：在手机端改为上下排列或允许换行 */
    .cta-footer-note {
        flex-direction: column;
        gap: 8px;
        font-size: 0.8rem;
    }

    .cta-footer-note .separator {
        display: none; /* 垂直排列时隐藏分隔符 */
    }
}

/* 极小屏幕微调 */
@media (max-width: 380px) {
    .cta-glass-card .title-giant {
        font-size: 1.4rem !important;
    }
}












/* ============================================================
                     PRODUCTS 页面专用样式
   ============================================================ */
/* Dynamic layer visibility; background dimming lives in products-showcase.css. */
#chip-canvas-container.hero-3d-canvas.is-visible {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

	
 /* ---hero字体样式  复用--- */



/*======页面其他内容代码======*/

/* --- 屏1：产品类型 静态渐变背景 --- */
.products {
    background-color: #f4f7f6 !important;
    background: linear-gradient(180deg, #e9f7ef 0%, #f4f7f6 50%, #ecefef 100%) !important;
    width: 100%;
    padding: 100px 0;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

.products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.3), transparent);
}

.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-list-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 50px;
    width: 100%;
}

/* --- 2. 动画定义 --- */
@keyframes svgPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; stroke-width: 2.5px; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* --- 3. 卡片核心样式：入场只使用透明度和位移，避免滚动时滤镜重绘卡顿 --- */
.product-row-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 35px 45px;
    display: flex;
    align-items: center; /* 桌面端保持居中对齐，确保右侧规格栏视觉平衡 */
    justify-content: space-between;
    box-sizing: border-box; 
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

    /* 【优雅初始态】 */
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    pointer-events: none;
    
    /* 【动画配置】产品分类卡片滚动出现需要更跟手，缩短时长并保留柔和曲线 */
    transition: 
        opacity 0.58s ease-out,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform, opacity;
}

.product-row-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 优雅阶梯延迟 */
.product-row-card.is-visible:nth-child(1) { transition-delay: 0.03s; }
.product-row-card.is-visible:nth-child(2) { transition-delay: 0.08s; }
.product-row-card.is-visible:nth-child(3) { transition-delay: 0.13s; }
.product-row-card.is-visible:nth-child(4) { transition-delay: 0.18s; }
.product-row-card.is-visible:nth-child(5) { transition-delay: 0.23s; }
.product-row-card.is-visible:nth-child(6) { transition-delay: 0.28s; }
.product-row-card.is-visible:nth-child(7) { transition-delay: 0.33s; }
.product-row-card.is-visible:nth-child(8) { transition-delay: 0.38s; }

.product-row-card.is-visible:hover {
    transform: translateY(-8px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.1);
}

/* 仅在英文环境下，将副标题字号下调一号 */
html[lang="en"] .section-subtitle {
    font-size: 0.75rem !important; /* 假设原大小是 1rem (16px)，下调至 0.9rem (约14px) */
    letter-spacing: 0.5px;      /* 英文略微拉开字间距更显精致 */
}

/* 如果是针对具体的 span */
html[lang="en"] .section-subtitle span {
    font-size: 0.7rem !important;
}

/* --- 4. 内容布局：优化中英文比例 --- */
.product-row-left { 
    display: flex; 
    align-items: flex-start; /* 顶部对齐，防止英文文案长时图标由于居中显得突兀 */
    gap: 35px; 
    flex: 1 1 65%; /* 占用 65% 空间，确保左侧文字有足够伸展空间 */
    min-width: 0; 
}

.product-icon-box {
    width: 58px; height: 58px; background: #f8fafc;
    color: var(--primary-blue); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.3s ease;
    margin-top: 5px; /* 视觉微调，对齐标题第一行 */
}
.product-icon-box svg { animation: svgPulse 3s ease-in-out infinite; }
.product-row-card:hover .product-icon-box { background: var(--primary-blue); color: white; }

.product-text-box { flex: 1; min-width: 0; }

.product-title-group { display: flex; flex-direction: column; margin-bottom: 12px; }
.product-title { font-size: 22px; font-weight: 700; color: var(--primary-dark); margin-bottom: 2px; transition: color 0.3s; }
.product-row-card:hover .product-title { color: var(--primary-blue); }
.product-subtitle-en { font-size: 13px; color: #94a3b8; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; }

.product-description { 
    max-width: 90%; /* 增加英文描述的可视宽度 */
    font-size: 14px; 
    line-height: 1.7; 
    color: var(--text-gray); 
    margin: 0; 
}

/* 英文专项适配 */
html[lang="en"] .product-description {
    font-size: 13.5px;
    max-width: 100%;
}

html[lang="en"] .product-row-right {
    flex: 0 0 455px;
}

html[lang="en"] .spec-matrix {
    margin-right: 20px;
    padding-right: 20px;
}

/* --- 5. 技术标签与右侧规格：固定锚点解决空白 --- */
.tech-capability-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; margin-top: 15px; }
.tech-capability-tags span {
    font-size: 11px; font-weight: 600; color: #27ae60; background: rgba(39, 174, 96, 0.08);
    padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(39, 174, 96, 0.15);
}

.product-row-right { 
    display: flex; 
    align-items: center; 
    flex: 0 0 320px; /* 固定宽度，锁死规格栏位置，消灭中间黑洞 */
    justify-content: flex-end;
    flex-shrink: 0; 
}

.spec-matrix { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin-right: 35px; 
    padding-right: 35px; 
    border-right: 1px solid #eee; 
    text-align: right; 
    width: 100%;
}
.spec-item { display: flex; flex-direction: column; }
.spec-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.spec-value { font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; }

/* Desktop English specs should stay in one line like other languages. */
html[lang="en"] .spec-value {
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.35;
}

html[lang="en"] .spec-label {
    font-size: 9.5px;
    letter-spacing: 0.35px;
}

.product-tag { font-size: 12px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 6px 16px; border-radius: 20px; border: 1px solid #e2e8f0; transition: all 0.3s; white-space: nowrap; }
.product-row-card:hover .product-tag { background: #eef5ff; color: var(--primary-blue); border-color: var(--primary-blue); }

/* --- 6. 移动端适配 --- */
@media (max-width: 1024px) {
    .product-row-right { flex: 0 0 280px; }
}

@media (max-width: 768px) {
    .product-row-card { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        padding: 24px 20px !important; 
        height: auto !important; 
        width: 100% !important; 
        overflow: hidden; 
    }
    .product-icon-box {
        display: none !important;
    }
    .product-row-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        flex: none !important;
        padding-top: 30px !important;
    }
    .product-title-group {
        padding-right: 0 !important;
        min-height: 0;
        margin-bottom: 8px !important;
    }
    .tech-capability-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; margin: 15px 0 !important; }
    .product-row-right { 
        width: 100% !important; 
        margin-top: 25px !important; 
        padding-top: 20px !important; 
        border-top: 1px solid #f0f0f0 !important; 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        flex: none !important;
    }
    .spec-matrix { 
        width: 100% !important; 
        display: grid !important; 
        grid-template-columns: 1fr !important; 
        gap: 15px !important; 
        margin: 0 0 20px 0 !important; 
        padding: 0 !important; 
        border: none !important; 
        text-align: left !important; 
    }
    .spec-value { white-space: normal !important; font-size: 13px !important; line-height: 1.5 !important; }
    .product-tag {
        position: absolute !important;
        top: 20px;
        left: 20px;
        right: auto;
        max-width: calc(100% - 40px);
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10px !important;
        line-height: 1.2 !important;
        padding: 3px 9px !important;
        border-radius: 999px !important;
    }
    .product-description { font-size: 13px !important; max-width: 100% !important; margin-top: 10px !important; }
}






/*=============第2屏：品牌展示（完整重构适配版）==============*/

.brands-section-wrapper {
    background: 
        linear-gradient(to bottom, transparent 60%, #ffffff 95%), 
        linear-gradient(var(--deg, 90deg), #00f2fe 0%, #a18cd1 var(--split, 0%), #667eea var(--split, 0%), #302b63 100%);
    
    background-attachment: scroll;
    width: 100%;
    padding: 100px 0 0; 
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1;
    transition: --split 0.1s linear, --deg 0.1s linear;
}
/* --- 5. 背景水印与响应式 --- */
.brand-watermark { position: absolute; top: 150px; right: -20px; font-size: 160px; font-weight: 900; color: rgba(255,255,255,0.05); pointer-events: none; z-index: 0; }
/* 注册 CSS 变量以支持平滑动画 */
@property --split { 
    syntax: '<percentage>'; 
    inherits: false; 
    initial-value: 0%; 
}
@property --deg { 
    syntax: '<angle>'; 
    inherits: false; 
    initial-value: 90deg; 
}

.brands-content-container {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

/* --- 1. 文案排版 --- */
.main-title-block { text-align: center; margin-bottom: 80px; }
.main-title { 
    font-size: 42px; 
    font-weight: 800; 
    color: #1a1a1a; 
    margin-bottom: 20px; 
}
.main-title-line { 
    width: 60px; 
    height: 4px; 
    background: #1a1a1a; 
    margin: 0 auto; 
}

.group-info { max-width: 800px; margin-bottom: 45px; text-align: left; }
.group-badge { 
    font-size: 13px; font-weight: 700; letter-spacing: 2px; 
    color: #00f2fe; 
    text-transform: uppercase; margin-bottom: 10px; 
}
.group-name { 
    font-size: 32px; font-weight: 700; color: #ffffff !important; 
    position: relative; display: inline-block; padding-bottom: 12px; 
}
.u-line { position: absolute; bottom: 0; left: 0; width: 50px; height: 4px; background: #00f2fe; }
.group-desc { margin-top: 20px; font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.6; }

/* --- 2. 品牌网格：解决英文溢出与对齐 --- */
.brands-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 20px;
    align-items: stretch; /* 确保同一行卡片高度一致 */
}

#products-p .brand-item {
    background: #ffffff; border-radius: 12px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; min-height: 100px; padding: 20px 15px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    text-align: center;
}

#products-p .brand-item h4 { font-size: 19px; font-weight: 800; color: #1a1a1a; margin-bottom: 6px; transition: color 0.3s; }
#products-p .brand-item p { font-size: 12px; color: #666; margin: 0; transition: color 0.3s; line-height: 1.3; }

#products-p .brand-item:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); }
#products-p .brand-item:hover h4, #products-p .brand-item:hover p { color: #ffffff !important; }

#products-p .brand-item:not(.domestic):hover { background: linear-gradient(135deg, #00f2fe 0%, #667eea 100%) !important; }
#products-p .brand-item.domestic:hover { background: linear-gradient(135deg, #ff416c 0%, #667eea 100%) !important; }

/* --- 3. 底部滚动墙：修正无缝动画 --- */
.logo-scroller-section { margin-top: 100px; width: 100%; padding: 80px 0; background: transparent; z-index: 10; position: relative; }
.scroller-title-wrap { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 50px; opacity: 0.6; }
.scroller-title-wrap span { font-size: 12px; font-weight: 800; letter-spacing: 5px; color: #1a1a1a; }
.scroller-line { width: 100px; height: 1px; background: linear-gradient(to right, transparent, #0056b3, transparent); }

.logo-slider { overflow: hidden; position: relative; width: 100%; }
#products-p .logo-track { 
    display: flex !important; 
    align-items: center; 
    width: max-content; /* 关键：根据内容自动撑开 */
    animation: scroll-loop 50s linear infinite; 
}
.logo-track:hover { animation-play-state: paused; }

.logo-slide { 
    background: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
    height: 90px; width: 200px; margin: 0 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}
.logo-slide img { height: 38px; width: auto; object-fit: contain; filter: grayscale(0.2); transition: 0.3s; }
.logo-slide:hover img { filter: grayscale(0); transform: scale(1.05); }

@keyframes scroll-loop {  
    0% { transform: translateX(0); }  
    100% { transform: translateX(-50%); } /* 需在HTML中复制一份内容实现真正无缝 */
}

/* --- 4. 移动端深度适配 --- */
@media (max-width: 768px) {
    .brands-section-wrapper { padding: 60px 0 0 !important; }

    .main-title-block { margin-bottom: 40px !important; }
    .main-title { font-size: 28px !important; }

    .group-info { text-align: center !important; margin-bottom: 35px !important; }
    .group-name { font-size: 22px !important; padding-bottom: 8px !important; }
    .u-line { left: 50% !important; transform: translateX(-50%) !important; width: 40px !important; }
    .group-desc { font-size: 14px !important; line-height: 1.5 !important; }

    .brands-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important; 
    }

    #products-p .brand-item {
        min-height: 85px !important;
        padding: 15px 10px !important;
    }
    #products-p .brand-item h4 { font-size: 15px !important; }
    #products-p .brand-item p { font-size: 10px !important; transform: scale(0.95); }

    .logo-scroller-section { margin-top: 40px !important; padding: 40px 0 !important; }
    .scroller-title-wrap { gap: 15px !important; margin-bottom: 30px !important; }
    .scroller-line { width: 40px !important; }

    #products-p .logo-track { animation-duration: 40s !important; } /* 移动端路程短，需加速 */
    .logo-slide { height: 60px !important; width: 130px !important; margin: 0 8px !important; }
    .logo-slide img { height: 24px !important; }
    
    .brand-watermark { display: none !important; }
}

/* 极小屏幕微调 */
@media (max-width: 400px) {
    .brands-grid { grid-template-columns: 1fr !important; }
    .main-title { font-size: 24px !important; }
}






/* --- 屏3：质量 --- 严苛的质量管控体系 --- */

.full-screen-bg {
    width: 100vw !important; 
    min-height: 100vh !important;
    margin-left: calc(50% - 50vw); 
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 80px 0; 
    box-sizing: border-box; 
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #dbe4ee 40%, #adbcd0 100%) !important;
    z-index: 1; 
    clip-path: inset(0 0 0 0);
}

.quality-bg-layer {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-image: url('/resources/backgrounds/product-QTY-BG.webp');
    background-size: cover; 
    background-position: center; 
    z-index: 2;
    opacity: 0; 
    pointer-events: none; 
    transition: none; 
    will-change: opacity;
    transform: translateZ(0);
}

.quality-content-box { 
    position: relative; 
    z-index: 10 !important; 
    width: 100%; 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- 顶部文本：背光雾化设计 --- */
.quality-header-wrap { 
    text-align: center; 
    margin-bottom: 60px; 
    padding: 24px 20px; 
    position: relative;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 85%, transparent 100%);
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
}

.quality-header-wrap h2 { 
    font-size: clamp(24px, 2.5vw, 32px); 
    font-weight: 700; 
    color: #111; 
    margin: 0; 
    letter-spacing: 3px; 
}

.accent-line { 
    width: 40px; 
    height: 3px; 
    background: #0066ff; 
    margin: 15px auto; 
}

.quality-header-wrap p { 
    color: #444; 
    font-size: 1rem; 
    font-weight: 400; 
    max-width: 600px; 
    margin: 0 auto; 
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* --- 卡片基础与悬停效果 --- */
.quality-flex { 
    display: flex; 
    gap: 30px; 
    justify-content: center; 
    width: 100%; 
    align-items: stretch; /* 确保卡片等高 */
}

.quality-focus-card {
    flex: 1; 
    background: rgba(255, 255, 255, 0.95);
    padding: 45px 30px; 
    border-radius: 30px; 
    text-align: center;
    border: 1px solid rgba(0, 102, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    backdrop-filter: none; 
    position: relative; 
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.quality-focus-card:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 102, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.12);
}

/* --- 核心：标题装饰 --- */
.highlight-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.highlight-title::after {
    content: '';
    display: block;
    width: 30%;
    height: 3px;
    background: #0066ff;
    margin: 8px auto 0;
    border-radius: 2px;
    opacity: 0.1;
    transition: all 0.3s ease;
}

.quality-focus-card:hover .highlight-title { color: #0066ff; }
.quality-focus-card:hover .highlight-title::after { width: 60%; opacity: 1; }

/* 流程图样式优化 */
.quality-mini-flow {
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: 15px 0 25px; 
    padding: 12px 8px;
    background: rgba(0, 102, 255, 0.04); 
    border-radius: 12px;
}

.m-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.m-node::before { content: ''; width: 6px; height: 6px; background: #0066ff; border-radius: 50%; margin-bottom: 5px; }
.m-node span { font-size: 10px; color: #0066ff; font-weight: 700; white-space: nowrap; }
.m-line { width: 15px; height: 1px; background: rgba(0, 102, 255, 0.15); margin: 0 5px 15px; flex-shrink: 0; }
.flow-four {
    padding-left: 6px;
    padding-right: 6px;
}
.flow-four .m-line {
    width: 10px;
    margin-left: 4px;
    margin-right: 4px;
}
.flow-four .m-node span {
    font-size: 9.5px;
}
.flow-label .m-node span {
    max-width: 78px;
    white-space: normal;
    line-height: 1.15;
    font-size: 9px;
}
.flow-label .m-line {
    width: 10px;
    margin-left: 4px;
    margin-right: 4px;
}
.flow-storage .m-node span {
    max-width: 82px;
    white-space: normal;
    line-height: 1.15;
    font-size: 9px;
}
.flow-storage .m-line {
    width: 10px;
    margin-left: 4px;
    margin-right: 4px;
}

/* 装饰纹理保持 */
.quality-focus-card:nth-child(1) { background-image: linear-gradient(rgba(0,102,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,102,255,0.02) 1px, transparent 1px); background-size: 15px 15px; }
.quality-focus-card:nth-child(2) { background-image: repeating-linear-gradient(-45deg, rgba(0,102,255,0.015) 0px, rgba(0,102,255,0.015) 1px, transparent 1px, transparent 10px); }
.quality-focus-card:nth-child(3) { background-image: radial-gradient(rgba(0,102,255,0.03) 1px, transparent 1px); background-size: 25px 25px; }

.quality-focus-card .num { color: #0066ff; font-weight: 800; margin-bottom: 15px; font-size: 1.2rem; }
.quality-focus-card p { color: #666; font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* --- 屏3：移动端专项优化 --- */
@media (max-width: 768px) {
    .full-screen-bg { 
        width: 100% !important; 
        margin-left: 0; 
        height: auto !important; 
        min-height: auto !important;
        padding: 60px 15px !important; 
    }
    
    .quality-bg-layer { 
        position: absolute; 
        opacity: 0.2 !important; /* 降低背景干扰 */
    }

    .quality-header-wrap {
        margin-bottom: 35px !important;
        padding: 15px !important;
    }

    .quality-flex { 
        flex-direction: column !important; 
        gap: 20px !important; 
    }

    .quality-focus-card {
        padding: 35px 20px !important;
        border-radius: 20px !important;
    }

    .highlight-title {
        font-size: 1.2rem !important;
    }

    /* 移动端流程图缩放，防止文字溢出 */
    .quality-mini-flow {
        transform: scale(0.9);
        margin: 5px 0 15px !important;
    }

    .quality-focus-card p {
        font-size: 0.9rem !important;
    }
}


/* --- 屏4：BOM 配单服务 --- */

.bg-bom.full-screen-bg {
    width: 100vw !important;
    min-height: 100vh !important;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, #001a33 0%, #004d99 100%) !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* 装饰背景元素（可选，增加高级感） */
.bg-bom.full-screen-bg::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.05) 0%, transparent 70%);
    top: -25%;
    left: -25%;
    pointer-events: none;
}

.bom-flex {
    display: flex;
    align-items: center;
    gap: 80px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.bom-text-content {
    flex: 1.2;
}

.bom-title {
    font-size: clamp(32px, 4vw, 56px); /* 稍微收敛最大字号，更显精致 */
    color: #00ffcc;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 255, 204, 0.2);
}

.bom-subtitle {
    font-size: 1.25rem;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 90%;
}

.bom-list {
    margin-bottom: 40px;
}

.bom-list p {
    margin-bottom: 15px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
}

.bom-list .check {
    color: #00ffcc;
    margin-right: 15px;
    font-size: 1.2rem;
}

/* --- 上传盒样式 --- */
.bom-upload-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    padding: 60px 40px;
    border-radius: 40px;
    text-align: center;
    backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

.bom-upload-box:hover {
    border-color: #00ffcc;
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.bom-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 255, 204, 0.34);
    border-radius: 12px;
    background: rgba(0, 255, 204, 0.08);
    color: #00ffcc;
}

.bom-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.upload-title {
    font-size: 1.4rem;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.bom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border: 0;
    background: #00ffcc;
    color: #001a33;
    padding: 0 34px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.98rem;
    box-shadow: 0 10px 30px rgba(0, 255, 204, 0.3);
    transition: all 0.3s ease;
}

.bom-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 255, 204, 0.5);
    background: #00f0c0;
}

.upload-formats {
    margin-top: 25px;
    font-size: 0.85rem;
    opacity: 0.5;
    font-style: italic;
}

.bom-upload-modal[hidden] {
    display: none;
}

.bom-upload-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.bom-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
}

.bom-modal-panel {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
}

.bom-modal-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 24px 72px;
    background: linear-gradient(100deg, #164a78 0%, #0f5f79 52%, #2c8581 100%);
    color: #ffffff;
}

.bom-modal-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 820;
    line-height: 1.1;
}

.bom-modal-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border: 7px solid rgba(15, 79, 115, 0.42);
    border-radius: 50%;
    background: #ffffff;
    color: #164a78;
    transform: translateY(-50%);
    box-shadow: 0 10px 24px rgba(4, 21, 44, 0.16);
}

.bom-modal-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bom-modal-close {
    position: absolute;
    right: 26px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transform: translateY(-50%);
}

.bom-modal-close svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.bom-upload-form {
    padding: clamp(34px, 5vw, 58px) clamp(28px, 5vw, 56px) 42px;
    text-align: center;
}

.bom-upload-form > p {
    margin: 0 0 28px;
    color: #0f172a;
    font-size: clamp(16px, 1.7vw, 22px);
    line-height: 1.55;
}

.bom-drop-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 118px;
    border: 1px dashed #cbd5e1;
    padding: 24px 26px;
    color: #475569;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.bom-drop-zone:hover,
.bom-drop-zone.is-dragging {
    border-color: rgba(29, 155, 240, 0.42);
    background: #f8fbff;
}

.bom-drop-text {
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.4;
}

.bom-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 194px;
    min-height: 54px;
    border-radius: 10px;
    background: #3f8f86;
    color: #ffffff;
    font-size: 17px;
    font-weight: 620;
    line-height: 1;
    gap: 9px;
}

.bom-file-button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bom-selected-file {
    min-height: 22px;
    margin: 14px 0 26px !important;
    color: #64748b !important;
    font-size: 13px !important;
}

.bom-modal-submit {
    min-width: 220px;
    min-height: 46px;
    border: 1px solid rgba(15, 79, 115, 0.62);
    border-radius: 14px;
    background: #ffffff;
    color: #2c8581;
    cursor: pointer;
    font-size: 18px;
    font-weight: 560;
    letter-spacing: 0.02em;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bom-modal-submit:hover {
    background: rgba(15, 79, 115, 0.06);
    color: #164a78;
    transform: translateY(-1px);
}

/* --- 屏4：移动端/平板适配 --- */
@media (max-width: 1024px) {
    .bom-flex { gap: 40px; padding: 0 25px; }
    .bom-upload-box { padding: 45px 30px; }
}

@media (max-width: 768px) {
    .bg-bom.full-screen-bg {
        min-height: auto !important;
        height: auto !important;
        padding: 80px 20px;
    }

    .bom-flex {
        flex-direction: column !important;
        text-align: center;
        gap: 50px !important;
    }

    .bom-text-content {
        width: 100%;
    }

    .bom-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .bom-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 24px !important;
        max-width: 100%;
    }

    .bom-list {
        display: inline-block; /* 使列表在居中对齐时保持整体居左 */
        text-align: left;
        margin-bottom: 20px;
    }

    .bom-list p {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
        justify-content: flex-start;
    }

    .bom-upload-box {
        width: 100%;
        padding: 40px 20px !important;
        border-radius: 30px !important;
    }

    .upload-title {
        font-size: 1.2rem !important;
        margin-bottom: 20px !important;
    }

    .bom-btn {
        min-height: 52px !important;
        padding: 0 24px !important;
        font-size: 0.96rem !important;
        width: 100% !important; /* 全宽更易于点击 */
        max-width: 280px;
        margin: 0 auto;
    }

    .bom-upload-modal {
        align-items: flex-start;
        padding: 18px;
        overflow-y: auto;
    }

    .bom-modal-head {
        min-height: 82px;
        padding: 22px 56px;
    }

    .bom-modal-icon {
        left: 18px;
        width: 58px;
        height: 58px;
        border-width: 5px;
    }

    .bom-modal-icon svg {
        width: 28px;
        height: 28px;
    }

    .bom-drop-zone {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bom-file-button {
        width: 100%;
        min-width: 0;
    }
}



/* --- 屏5：全球网络 --- */

/* 1. 区域基础容器 */
.network-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    z-index: 1;
    background: 
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 100%),
        radial-gradient(circle at 70% 50%, rgba(232, 242, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%),
        url('/resources/backgrounds/Supply-chain-bg.webp') no-repeat;
    background-size: cover;
    background-position: center;
}

/* 2. 网格布局：解决 3120px 屏幕过大问题 */
.network-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    align-items: stretch;
    max-width: 1200px; /* 宽屏下锁定宽度 */
    margin: 0 auto;    /* 居中对齐 */
    padding: 0 20px;
}

/* 3. 左侧视觉盒子 (地球区域) */
.visual-box {
    position: relative; 
    height: 520px; 
    background: radial-gradient(circle at center, #ffffff 0%, #eef6ff 100%); 
    border-radius: 30px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid rgba(0, 102, 255, 0.1); 
    box-shadow: 0 10px 30px rgba(0, 50, 150, 0.05); 
    overflow: hidden;
}

.radial-glow { 
    position: absolute; 
    width: 100%; height: 100%; 
    background: radial-gradient(circle at center, rgba(0, 168, 255, 0.08) 0%, rgba(255,255,255,0) 75%); 
}

.watermark-globe { 
    position: absolute; 
    font-size: 280px; 
    opacity: 0.3; 
    z-index: 1; 
    filter: drop-shadow(0 0 40px rgba(0, 102, 255, 0.2)); 
    user-select: none;
    pointer-events: none;
}

/* 坐标点样式与动画 */
.map-tag {
    position: absolute; 
    z-index: 3;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%); 
    color: white; border-radius: 50%;
    font-size: 8px; font-weight: 800; 
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
    backdrop-filter: blur(4px);
    animation: mapFloat 3.5s infinite ease-in-out;
}

.tag-us { top: 40%; left: 16%; animation-delay: 1.6s; }
.tag-eu { top: 24%; left: 35%; animation-delay: 1.2s; }
.tag-kr { top: 30%; right: 27%; animation-delay: 0.7s; }
.tag-hk { top: 42% !important; right: 35% !important; animation-delay: 0.2s; }
.tag-sz { top: 52%; right: 24%; animation-delay: 0.4s; }
.tag-sg { bottom: 24%; left: 39%; animation-delay: 0.8s; }
.tag-apac {
    bottom: 30%;
    right: 19%;
    width: auto;
    min-width: 40px;
    padding: 0 7px;
    border-radius: 999px;
    animation-delay: 1.05s;
}

@keyframes mapFloat { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-12px); } 
}

.visual-content-wrapper { position: relative; z-index: 2; text-align: center; }
.title-main { 
    font-family: 'Orbitron', sans-serif; 
    color: #0055ff; font-weight: 800; letter-spacing: 8px; font-size: 1.6rem; 
}
#about-p .title-sub { 
    color: #0066ff; font-size: 0.9rem; margin-top: 15px; letter-spacing: 4px; font-weight: 700; opacity: 0.7; 
}

/* 4. 右侧信息卡片 */
.info-card { 
    display: flex; flex-direction: column; justify-content: center; 
    background: white; padding: 40px; border-radius: 30px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); border: 1px solid #fff; 
    height: 520px; 
}

.info-card h3 { 
    font-size: 36px; 
    color: #111; 
    margin-bottom: 25px; 
    line-height: 1.2; 
    white-space: nowrap; /* 仅新增此行，确保 PC 端不换行 */
}
.info-item { margin-bottom: 25px; }
.info-item h5 { color: #0066ff; font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; }
.blue-bar { width: 6px; height: 22px; background: #0066ff; display: inline-block; margin-right: 12px; border-radius: 3px; }
.info-item p { color: #666; font-size: 0.95rem; line-height: 1.6; }

/* 统计数据 */
.stats-panel { display: flex; gap: 20px; border-top: 1px solid #f0f0f0; padding-top: 30px; text-align: center; }
.stat-box { flex: 1; }
#products-p .network-section .stat-num {
    color: #0066ff;
    font-size: clamp(34px, 3vw, 40px);
    line-height: 1;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    display: block;
}
#products-p .network-section .stat-label {
    font-size: 0.72rem;
    color: #8a94a6;
    margin-top: 8px;
    line-height: 1.35;
    font-weight: 600;
}

/* --- 5. 移动端专项适配 (高度压缩、字体缩小) --- */
@media screen and (max-width: 768px) {
    .network-section { padding: 40px 10px; }
    .network-grid { grid-template-columns: 1fr; gap: 20px; }

    .visual-box {
        min-height: 280px; height: 300px;
        border-radius: 20px; order: 2; /* 图片在下 */
    }

    .info-card {
        padding: 25px 20px; border-radius: 20px;
        height: auto; order: 1; /* 文字在上 */
    }

    /* 移动端字体与间距大幅缩小 */
    .info-card h3 { 
        font-size: 22px !important; 
        margin-bottom: 15px; 
        white-space: normal; /* 移动端恢复换行，防止溢出 */
    }
    .info-item { margin-bottom: 15px; }
    .info-item h5 { font-size: 1.1rem !important; }
    .info-item p { font-size: 0.88rem !important; line-height: 1.5; }
    .watermark-globe { font-size: 180px !important; }
    .title-main { font-size: 1rem !important; letter-spacing: 4px !important; }
    #products-p .network-section .stat-num { font-size: 1.45rem !important; }
    #products-p .network-section .stat-label { font-size: 0.64rem !important; }
    .map-tag { width: 16px !important; height: 16px !important; font-size: 7px !important; }
}





/* ============================================================
                   Services 页面专用样式
   ============================================================ */
/* Establish the photo first, then coordinate its dimming with the WebGL reveal. */
body#services-p .hero-section .hero-bg-layer img {
    filter: brightness(0.9) contrast(1.02) !important;
    transition: filter 4.2s ease-in-out !important;
}

body#services-p .hero-section:has(#services-animation-container.is-visible) .hero-bg-layer img {
    filter: brightness(0.5) contrast(1.06) !important;
}

#services-animation-container.hero-3d-canvas.is-visible {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

/* ---hero字体样式  复用--- */
					
/*======页面其他内容代码======*/

/* ===========屏页1：实验室体系（qc-lab-system）============== */
/* --- 实验室体系核心样式（qc-lab-system） --- */
.qc-lab-system {
    background: 
        linear-gradient(180deg, rgba(224, 231, 255, 0.9) 0%, rgba(240, 247, 255, 0.8) 50%, rgba(226, 232, 240, 0.95) 100%),
        url('/resources/backgrounds/services-testlab-BG.webp') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: scroll;
    padding: 100px 0;
    position: relative;
    overflow: hidden; 
    z-index: 1;
    animation: none;
    contain: paint;
}

@keyframes section-breathe {
    0%, 100% { background-size: 100% auto; }
    50% { background-size: 108% auto; }
}

/* Services 的 QUALITY & ASSURANCE 屏滚动较密集，单独收紧出现动画，减少快速滚动时的掉帧感 */
.qc-lab-system .fade-in-up {
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.55s ease-out,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 1. 顶部标题对齐全站规范 --- */
.qc-lab-system .v-title {
    font-size: 2.5rem !important; /* 对齐全站 40px 规范 */
    color: #1e293b !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.qc-lab-system .v-subtitle {
    font-size: 0.9rem !important; /* 对齐全站 14.4px 规范 */
    color: #64748b !important;
    max-width: 600px;
    margin: 0 auto;
}

/* --- 2. 左侧主卡片布局 --- */
.qc-info-main-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 3.5rem;
    border-radius: 30px;
    height: 100%; /* 关键：强制与右侧四宫格等高 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(30, 41, 59, 0.05);
}

/* 标题结构：强制两行且不换行 */
.qc-dual-title span {
    display: block;
    white-space: nowrap; /* 核心：防止英文自动折行 */
}

.title-top {
    font-size: 2rem !important; /* 约 32px */
    color: #1e293b;
    font-weight: 700;
}

/* 渐变特效文字 */
.text-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    font-size: 2rem !important;
}

/* --- 3. 英文版专项适配：防溢出 --- */
html[lang="en"] .qc-dual-title span {
    /* 使用 clamp 确保在大屏不折行，在窄屏自动缩小 */
    font-size: clamp(1.2rem, 1.8vw, 1.8rem) !important;
    letter-spacing: -0.03em;
}

.blue-divider {
    width: 40px; height: 4px; background: #3b82f6;
    margin: 1.5rem 0; border-radius: 2px;
}

.qc-info-main-card .desc {
    color: #475569; font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem;
}

.badge {
    font-size: 10px; color: #2563eb; font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.2);
    padding: 4px 12px; background: rgba(255, 255, 255, 0.6); border-radius: 4px;
}

/* --- 4. 右侧四宫格步骤卡片 --- */
.qc-step-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 2.2rem; border-radius: 24px;
    transition:
        transform 0.32s cubic-bezier(0.2, 1, 0.3, 1),
        background-color 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.32s ease;
    contain: paint;
}

.qc-step-card:hover {
    background: #fff; transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.08);
}

.qc-num {
    font-size: 20px; font-weight: 900; color: #3b82f6; margin-bottom: 1.2rem;
    display: flex; align-items: center;
}
.qc-num::after {
    content: ''; width: 6px; height: 6px; background: #60a5fa;
    border-radius: 50%; margin-left: 8px; animation: qc-pulse 2s infinite;
}

@keyframes qc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
}

.qc-progress-mini { height: 2px; width: 35px; background: #e2e8f0; border-radius: 2px; }
.qc-progress-mini span { display: block; height: 100%; width: 0%; background: #3b82f6; transition: width 1s ease; }
.qc-step-card:hover .qc-progress-mini span { width: 100%; }

/* --- 5. 底部数据栏 --- */
.qc-live-track { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.5); }
.qc-live-track .val { color: #2563eb !important; }

/* 非中文语言文本更长，统一收紧字号和换行，避免卡片高度抖动和横向溢出 */
html:not([lang="zh-CN"]) .qc-lab-system .v-subtitle {
    max-width: 680px;
    line-height: 1.55;
}

html:not([lang="zh-CN"]) .qc-dual-title span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.18;
    font-size: clamp(1.15rem, 1.65vw, 1.7rem) !important;
    letter-spacing: -0.02em;
}

html:not([lang="zh-CN"]) .qc-info-main-card .desc {
    font-size: 0.95rem;
    line-height: 1.62;
}

html:not([lang="zh-CN"]) .qc-step-card h4 {
    font-size: 0.95rem;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

html:not([lang="zh-CN"]) .qc-step-card p {
    font-size: 0.86rem;
    line-height: 1.55;
}

/* --- 6. 移动端自适应逻辑 --- */
@media screen and (max-width: 1024px) {
    .qc-info-main-card { padding: 3rem 2rem; }
    .title-top, .text-gradient { font-size: 1.7rem !important; }
}

@media screen and (max-width: 768px) {
    .qc-lab-system { padding: 60px 15px; }
    .qc-lab-system .v-title { font-size: 1.8rem !important; } /* 移动端标题稍小防止溢出 */
    .qc-info-main-card { height: auto; text-align: center; margin-bottom: 2rem; padding: 2.5rem 1.5rem; }
    /* 移动端由于宽度有限，允许文字折行 */
    .qc-dual-title span { white-space: normal; } 
    .blue-divider { margin: 1.5rem auto; }
    .qc-trust-badges { justify-content: center; }
}






/* --- 屏页2：品质保障与供应链 --- */
.gsc-SUPPLY-CHAIN {
    position: relative;
    padding: 140px 0 160px 0;
    min-height: 100vh;
    /* 💎 核心修改：亮蓝亮绿渐变，增强页面区分感 */
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 30%, #3bf7b1 70%, #d4ff00 100%) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* 布局控制：桌面端间距 */
.header-main-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 80px;
    margin-bottom: 100px; /* 桌面端保持呼吸感 */
}

.info-left { flex: 1; }
.info-right { flex: 0 0 420px; }

/* 字体对标 Tailwind 规范 */
.hero-primary-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a !important;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.hero-secondary-title {
    font-size: 1.5rem;
    color: #1e40af !important; /* 加深蓝色以在亮色背景下阅读 */
    font-weight: 600;
}

.hero-description-text {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #1e293b !important;
    max-width: 750px;
    font-weight: 500;
}

/* 品类框：毛玻璃适配亮色背景 */
.scope-minimal-box {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
}

.s-label { font-size: 11px; font-weight: 800; color: #475569; display: block; margin-bottom: 12px; letter-spacing: 0.05em; }
.s-list { display: flex; flex-wrap: wrap; gap: 8px; }
.s-list span {
    font-size: 10px; color: #1e40af; background: #fff; padding: 4px 10px; border-radius: 6px; 
    border: 1px solid rgba(255, 255, 255, 0.8); font-weight: 600;
}

/* 卡片阵列与扫光 */
.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card-modern {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 3rem 2.5rem;
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.service-card-modern:hover {
    background: #fff;
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.card-icon { width: 42px; height: 42px; margin-bottom: 24px; color: #2563eb; transition: 0.4s ease; }
.service-card-modern:hover .card-icon { transform: scale(1.1) rotate(5deg); }

.card-h { font-size: 1.35rem; font-weight: 700; color: #0f172a; margin-bottom: 1.25rem; }
.card-p { font-size: 0.95rem; color: #475569; line-height: 1.7; }

/* 扫光效果实现 */
.service-card-modern::after {
    content: ""; position: absolute; top: -50%; left: -150%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg); transition: 0.8s; pointer-events: none;
}
.service-card-modern:hover::after { left: 150%; top: 150%; }

/* 深井背景逻辑 */
.scaffold-background { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scaffold-text { 
    position: absolute; font-family: var(--font-en); font-weight: 900; color: transparent;      
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); line-height: 1; white-space: nowrap;
    animation: deepWellFloat 20s ease-in-out infinite alternate;
}
.text-top { top: -2%; left: -2%; font-size: 22vw; filter: blur(1px); }
.text-bottom { bottom: -2%; right: -2%; font-size: 22vw; filter: blur(0.5px); animation-delay: -5s; }

@keyframes deepWellFloat {
    0% { transform: translate(0, 0) rotate(-0.5deg); opacity: 0.6; }
    100% { transform: translate(20px, 20px) rotate(0.5deg); opacity: 0.9; }
}

/* 蓝点标签 */
.qc-tag-v4 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #1e40af; }
.dot { width: 8px; height: 8px; background: #1e40af; border-radius: 50%; box-shadow: 0 0 10px rgba(30,64,175,0.3); }

/* 📱 移动端适配：解决 CORE SCOPE 距离卡片太远的问题 */
@media (max-width: 1024px) {
    .content-container { padding: 0 30px; }
    .header-main-flex { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 30px; /* 缩小标题与品类框间距 */
        margin-bottom: 50px; /* 🔴 关键：大幅缩小与下方卡片的间距 */
    }
    .info-right { flex: none; width: 100%; }
}

@media (max-width: 768px) {
    .gsc-SUPPLY-CHAIN { padding: 80px 0; min-height: auto; }
    .hero-primary-title { font-size: 2.2rem; }
    .service-cards-grid { grid-template-columns: 1fr; gap: 20px; }
    .scaffold-text { font-size: 35vw; -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.15); }
}




/* ===  屏页3： 核心服务 === */
/* --- 基础背景容器 --- */
.services-section { 
    padding: 160px 0; /* 略微收紧，增加视觉聚拢感 */
    position: relative;
    overflow: hidden;
    background: 
        linear-gradient(180deg, 
            rgba(255, 255, 255, 0.4) 0%,   
            rgba(255, 255, 255, 0.2) 50%,  
            rgba(255, 255, 255, 0.4) 100%
        ),
        url('../resources/backgrounds/services-core-BG.webp') no-repeat !important; 
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important; /* 视差效果增加高端感 */
}

.services-section .container {
    max-width: 1240px; /* 稍微加宽，让横向布局更舒展 */
    margin: 0 auto;
    padding: 0 20px;
    z-index: 10;
}

/* --- 头部标题大气设计 --- */
.section-header {
    margin-bottom: 70px;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;          /* 约 40px，取了 42 和 34 的中间值，大气且适中 */
    font-weight: 800;           /* 保持你想要的硬朗感 */
    color: #0f172a;             /* 统一深蓝色 */
    letter-spacing: -0.02em;    /* 保持科技感缩进 */
    margin-bottom: 20px;        /* 统一间距 */
    line-height: 1.2;           /* 确保多行时不会太拥挤 */
}

.title-accent {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #344e41);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.section-subtitle {
    font-size: 18px;
    text-align: center;
    margin-top: 0.5rem;

    color: #0f172a; /* 深石板色，高级稳重 */

    font-weight: 600;
    letter-spacing: 1px;

    text-transform: uppercase;
}
/* --- 布局优化：更合理的网格 --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应，且最大宽度合理 */
    gap: 24px; /* 缩小间距，使卡片更有整体感 */
}

/* --- 卡片大气设计 (磨砂+微动态) --- */
.service-card {
    background: rgba(255, 255, 255, 0.85); /* 提高白度，确保内容易读 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius: 20px; /* 圆角更大更现代 */
    padding: 50px 30px; /* 增加内边距，更舒展 */
    text-align: center; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
    transform: translateY(-12px); /* 悬浮高度增加，更灵动 */
    background: #ffffff;
    box-shadow: 0 25px 50px rgba(37, 99, 235, 0.1); /* 悬浮时带一点品牌色的投影 */
    border-color: #2563eb;
}

/* 图标容器升级 */
.service-icon {
    width: 70px; 
    height: 70px; 
    background: linear-gradient(135deg, #2563eb, #3b82f6); 
    border-radius: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: 0 auto 25px; 
    color: white;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-title { 
    font-size: 22px; /* 标题稍大，更醒目 */
    font-weight: 700; 
    color: #0f172a; 
    margin-bottom: 15px; 
}

/* 仅修改服务板块的副标题颜色和背景 */
.services-section .section-subtitle {
    color: rgba(15, 23, 42, 0.58);
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(8px);          /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 16px;                   /* 说明性副标题弱化处理，避免抢主标题 */
    border-radius: 40px;                  /* 圆角，与卡片风格统一 */
    display: inline-block;                /* 使背景仅包裹文字内容宽度 */
    font-size: 13px;
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.2px;
    text-transform: none;
}

.service-desc { 
    font-size: 15px; 
    color: #64748b; 
    line-height: 1.7; /* 行高增加，增加阅读舒适度 */
}
/* --- 移动端响应式与动态适配 --- */
@media (max-width: 768px) {
    /* 调整容器间距，防止移动端过长 */
    .services-section {
        padding: 80px 0;
        background-attachment: scroll !important; /* 移动端禁用 fixed 视差以提升滚动流畅度 */
    }

    .section-header {
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .section-title {
        font-size: 1.5rem; /* 标题缩小，避免折行过多 */
    }

    /* 网格动画：改为单列或双列布局 */
    .services-grid {
        grid-template-columns: 1fr; /* 移动端通常单列显示，更具冲击力 */
        gap: 20px;
        padding: 0 10px;
    }

    /* 调整卡片动态效果：移动端减少位移距离，防止误触 */
    .service-card {
        padding: 40px 25px;
        border-radius: 16px;
    }

    .service-card:hover {
        transform: translateY(-5px); /* 移动端悬浮感减弱，更稳重 */
        box-shadow: 0 15px 30px rgba(37, 99, 235, 0.08);
    }

    /* 图标动态调整 */
    .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .service-card:hover .service-icon {
        transform: scale(1.05) rotate(0deg); /* 移动端取消旋转，保持视觉中心 */
    }
}

/* 针对超小屏幕（如 iPhone SE）的极致微调 */
@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
    }
    
    .service-card {
        padding: 30px 20px;
    }
}



        
/* ===========屏4：服务流程=Process Section========*/
.process-section {
    padding: 132px 0 112px;
    min-height: 690px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.055), transparent 38%),
        radial-gradient(circle at 84% 88%, rgba(15, 118, 110, 0.045), transparent 40%),
        linear-gradient(180deg, #fbfdff 0%, #f1f6fb 52%, #ffffff 100%) !important;
    position: relative;
    overflow: hidden;
}

.process-section::before {
    content: none;
}

.process-section .container {
    position: relative;
    z-index: 1;
}

.process-section .section-title {
    color: #0f172a;
}

.process-section .section-subtitle {
    max-width: 760px;
    color: rgba(71, 85, 105, 0.86);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.7;
}

.process-grid {
    display: grid;
    /* 保持 5 个步骤并排 */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 48px;
    align-items: start;
}

.process-step {
    text-align: center; 
    position: relative;
    z-index: 1;
    padding: 0 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.28s ease;
}

.process-step:hover {
    transform: translateY(-3px);
}

/* 步骤间的连接线 */
.process-step::after {
    content: ''; 
    position: absolute; 
    /* 定位于圆圈右侧 */
    top: 27px; /* 对应圆圈中心高度 */
    right: -20px; 
    width: 40px; 
    height: 2px;
    /* 渐变色：从深蓝到透明 */
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.24), rgba(15, 118, 110, 0.14)); 
    transform: translateY(-50%);
    opacity: 1;
}

.process-step:last-child::after { 
    display: none; 
}

/* 步骤圆圈：使用深绿到深蓝的渐变 */
.step-number {
    width: 54px; 
    height: 54px; 
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22), transparent 35%),
        linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 68%, #0f766e 100%);
    border-radius: 50%; 
    border: 1px solid rgba(255, 255, 255, 0.55);
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: 0 auto 22px; 
    color: white; 
    font-size: 20px; 
    font-weight: 750;
    box-shadow:
        0 8px 18px rgba(30, 64, 175, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.process-step:hover .step-number {
    transform: scale(1.04);
    filter: brightness(1.04);
    box-shadow:
        0 10px 22px rgba(30, 64, 175, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.step-title { 
    font-size: 17px; 
    font-weight: 700; 
    color: #0f172a;
    margin-bottom: 9px; 
}

.step-desc { 
    font-size: 13.5px; 
    color: #64748b; 
    padding: 0 8px;
    line-height: 1.58;
}

      
/* =======屏5：Advantages Section */
 /* --- 优势部分 蓝绿定制版 --- */
.advantages-section {
    padding: 126px 0 156px; 
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.84) 0%,
            rgba(248, 251, 255, 0.76) 48%,
            rgba(241, 246, 251, 0.84) 100%
        ),
        url('resources/backgrounds/services-adv-BG.webp') no-repeat center center / cover !important;
    position: relative;
    overflow: hidden;
}

.advantages-section .section-subtitle {
    max-width: 760px;
    color: rgba(71, 85, 105, 0.84);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.7;
}

.advantages-grid {
    display: grid;
    /* 2列布局 */
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 46px;
}

.advantage-card {
    background: rgba(255, 255, 255, 0.74); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 34px 34px 32px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-left: 4px solid rgba(37, 99, 235, 0.50);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.advantage-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(37, 99, 235, 0.30);
    border-left-color: rgba(37, 99, 235, 0.92);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.075);
}

.advantage-title { 
    font-size: 19px; 
    font-weight: 700; 
    margin-bottom: 11px; 
    color: #0f172a; 
}

.advantage-desc { 
    font-size: 15px; 
    color: #64748b; 
    line-height: 1.6; 
}

/* 手机端适配 */
@media (max-width: 768px) {
    .advantages-grid { grid-template-columns: 1fr; }
    .advantages-section { padding: 78px 0 84px; }
}
/* --- 移动端增强适配 (手机 & 平板) --- */
@media (max-width: 768px) {
    
    /* 1. 全局高度调整：手机端不需要过大的 padding */
    .qc-section-v2, 
    .gsc-section-v4, 
    .services-section, 
    .process-section, 
    .advantages-section {
        padding: 50px 0 !important;
    }

    /* 2. 屏1：质量保障屏 - 缩小卡片填充 */
    .qc-step-card {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    /* 3. 屏2：全球供应链 - 重点！将错位卡片还原为垂直排列 */
    .gsc-section-v4 .flex-row, 
    .gsc-section-v4 .flex-row-reverse {
        flex-direction: column !important; /* 取消水平错位 */
        gap: 20px !important;
    }
    
    .gsc-v4-card {
        width: 100% !important;
        padding: 1.5rem !important;
        transform: none !important; /* 手机端取消悬浮位移防止出屏 */
    }

    /* 隐藏手机端过大的背景数字 */
    .gsc-section-v4 .text-9xl {
        display: none !important;
    }

    /* 4. 屏3：核心服务 - 栅格改为 1 列或 2 列 */
    .services-grid {
        grid-template-columns: repeat(1, 1fr) !important; /* 强制一列排列 */
        gap: 15px !important;
    }

    /* 5. 屏4：服务流程 - 隐藏连接线，防止视觉混乱 */
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .process-section {
        padding: 82px 0 76px !important;
        min-height: auto;
    }

    .process-step {
        min-height: auto;
        padding: 0 22px;
    }

    .process-step::after {
        display: none !important; /* 手机端流程改为上下排列，去掉向右的箭头线 */
    }
    
    .step-number {
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    /* 6. 屏5：优势部分 - 增加卡片间距 */
    .advantages-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .advantages-section {
        padding: 86px 0 112px !important;
    }

    .advantage-card {
        padding: 28px 24px;
    }

    /* 7. 字体缩放优化：防止标题在小屏幕折行太难看 */
    .text-4xl, .text-6xl {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* 8. 交互调整：手机端禁止部分 Hover 缩放，避免误触卡顿 */
    .service-card:hover, .qc-step-card:hover, .advantage-card:hover {
        transform: none !important; 
    }
} 
 



/* ============================================================
                   Applications 页面专用样式
   ============================================================ */
#applications-p .hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #000; /* 黑色底色，防止切换间隙闪白 */
}

#applications-p .hero-bg-layer .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: appsKenBurns 18s infinite linear;
    will-change: opacity, transform;
}

/* Start inside the first image's visible phase, then overlap each image by 0.9s. */
#applications-p .hero-bg-layer .slide:nth-child(1) { animation-delay: -1s; }
#applications-p .hero-bg-layer .slide:nth-child(2) { animation-delay: 5s; }
#applications-p .hero-bg-layer .slide:nth-child(3) { animation-delay: 11s; }

@keyframes appsKenBurns {
    0% {
        opacity: 0;
        transform: scale(1.08);
    }
    5% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
        transform: scale(1.03);
    }
    38.33% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* --- 3D层级的显示代码 --- */
#applications-p .hero-section:has(#apps-animation-container.is-visible) .hero-bg-layer .slide {
    filter: brightness(0.6) !important; 
    transition: filter 1.5s ease-in-out;
}

#applications-p #apps-animation-container.hero-3d-canvas.is-visible {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1s ease-in-out;
}



 /* ---hero字体样式  复用--- */


/*======页面其他内容代码======*/
/*============= 屏1：应用领域板块 (固定色值+弹射展开) =============*/
/* --- 1. 背景与展开动画基础 (保持不变) --- */
.apps-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(135deg, #0066ff80 0%, #7000ff80 100%);
}

.apps-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0066ff 0%, #7000ff 100%);
    z-index: -1;
    opacity: 0.1; 
    clip-path: inset(0 calc(50% - (var(--expand-progress, 0) * 0.5%)));
    transition: none;
    will-change: clip-path;
}

/* --- 2. 标题文案与装饰逻辑 (针对单行和英文调优) --- */

.apps-section .section-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    /* 核心修改：强制不换行 */
    white-space: nowrap; 
    flex-wrap: nowrap;
}

.apps-section .section-subtitle span {
    color: #FFFFFF !important;
    font-size: 16px; /* 中文默认大小，可根据需求微调 */
}

/* 针对英文环境的特殊优化 */
/* 假设您的 HTML 根标签或父级有 lang="en" 属性 */
:lang(en) .apps-section .section-subtitle span {
    font-size: 14px;      /* 英文文案较长，调小字体 */
    letter-spacing: 0;    /* 紧凑字间距 */
}

/* 如果没有 lang 属性，也可以直接微调 span 以适应长文案 */
.apps-section .section-subtitle span[data-translate*="en"] {
    font-size: 14px;
}

/* 重新定位水平装饰线 */
.apps-section .chip-dot {
    display: inline-block;
    width: 40px;           /* 英文模式下稍微缩短横线，给文字腾空间 */
    height: 1px;
    background: linear-gradient(to right, transparent, #FFFFFF, transparent);
    margin: 0 20px;        /* 缩小间距，防止挤成两行 */
    flex-shrink: 0;
    transform: translateY(1px); 
    opacity: 0.5;
}

/* --- 3. 4行2列布局 & 卡片样式 (严格维持原样) --- */
.apps-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
}

.app-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 50px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(0);
}

.app-card:nth-child(even) { flex-direction: row-reverse; }

.app-card:hover {
    transform: translateY(-12px);
    border-color: #0066ff;
    box-shadow: 0 4px 0 #e0e0e0, 0 8px 0 #d4d4d4, 0 20px 40px rgba(0, 102, 255, 0.1);
}

/* --- 4. 文字与图标基础 (维持原样) --- */
.app-info-wrapper { flex: 1; display: flex; flex-direction: column; }
.app-title { font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #222; }
.app-desc p { font-size: 14px; color: #666; line-height: 1.8; margin: 0; }

.tech-icon-style { 
    width: 68px; 
    height: 68px; 
    flex-shrink: 0; 
    color: #333; 
    transition: all 0.4s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.app-card:hover .tech-icon-style { color: #0066ff; transform: scale(1.05); }

/* --- 5. SVG 动画 (维持原样) --- */
.anim-glow-fast { animation: glow 1.5s ease-in-out infinite alternate; }
@keyframes glow {
    from { opacity: 0.4; filter: drop-shadow(0 0 2px #0066ff); }
    to { opacity: 1; filter: drop-shadow(0 0 8px #0066ff); }
}
/* ============================= */
/* 移动端适配 */
/* ============================= */

@media (max-width: 768px) {

    /* 整体区域 */
    .apps-section {
        padding: 70px 0;
    }

    /* subtitle 不再强制一行 */
    .apps-section .section-subtitle {
        white-space: normal;
        flex-wrap: wrap;
        text-align: center;
        line-height: 1.6;
    }

    .apps-section .section-subtitle span {
        font-size: 14px;
    }

    /* 装饰线缩短 */
    .apps-section .chip-dot {
        width: 25px;
        margin: 0 10px;
    }

    /* grid 改为单列 */
    .apps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 卡片改为上下结构 */
    .app-card {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
        gap: 20px;
    }

    .app-card:nth-child(even) {
        flex-direction: column;
    }

    /* icon 调整 */
    .tech-icon-style {
        width: 56px;
        height: 56px;
    }

    /* 标题 */
    .app-title {
        font-size: 18px;
    }

    /* 描述 */
    .app-desc p {
        font-size: 13px;
        line-height: 1.7;
    }

}

/*============= 屏2：解决方案 ==============*/

/* 1. 基础容器：必须有这行才能让第二页在右边排队而不被挤压 */
.solution-carousel-section { 
    background: #f8faff; 
    padding: 80px 0; 
    overflow: hidden !important; /* 核心：允许内部轨道伸出屏幕而不产生滚动条 */
    width: 100%;
}

/* 2. 视口 */
.carousel-viewport {
    position: relative;
    width: 100%;
    margin-top: 40px;
    overflow: visible; /* 必须是 visible，确保 -25px 的导航按钮不被切掉 */
}

/* 3. 动画轨道 */
.carousel-inner {
    display: flex !important; 
    flex-wrap: nowrap !important; /* 强制不换行 */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
}

/* 4. 单个页面：回滚参数，锁定 100% 宽度 */
.solution-page { 
    flex: 0 0 100% !important; 
    width: 100% !important; 
    min-width: 100% !important;
    padding: 0 10px; /* 给卡片留一点点呼吸间距 */
}

/* 5. 卡片布局：严格锁定 750px 和 40px 圆角 */
.sol-grid-focused {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 750px;           /* 你的原始参数 */
    background: #fff;
    border-radius: 40px;         /* 你的原始参数 */
    overflow: hidden;            /* 确保图片不超出卡片圆角 */
    box-shadow: 0 40px 100px rgba(0, 50, 150, 0.1);
}

/* 文字区排版：回滚你的原始参数 */
.sol-text { padding: 50px 60px; display: flex; flex-direction: column; justify-content: center; }
.sol-text h3 { font-size: 32px; color: #111; margin: 10px 0 20px; font-weight: 800; }
.sol-text p { font-size: 15px; line-height: 1.8; color: #555; }

.tech-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 25px 0; }
.tech-feature-grid div { background: #f9f9f9; padding: 15px; border-radius: 10px; }
.tech-feature-grid strong { display: block; color: #0066ff; font-size: 14px; margin-bottom: 5px; }

/* 6. 按钮：严格锁定 50px 和 -25px 位置 */
.sol-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000 !important;
    width: 50px;
    height: 50px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    cursor: pointer;
    color: #0066ff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prev { left: -25px; } 
.next { right: -25px; }

/* 7. 指示点 */
.sol-dots { text-align: center; margin-top: 30px; }
.s-dot { display: inline-block; width: 8px; height: 8px; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: 0.3s; }
.s-dot.active { background: #0066ff; width: 25px; border-radius: 10px; }
/* ============================================================
   移动端自适应逻辑 (不触碰原始参数，仅在手机端生效)
   ============================================================ */
@media (max-width: 992px) {
    /* 1. 调整卡片布局：由左右改为上下 */
    .sol-grid-focused {
        grid-template-columns: 1fr; /* 变成单列布局 */
        min-height: auto;           /* 手机端高度随内容自适应，防止文字溢出 */
        border-radius: 24px;        /* 手机端圆角稍微收敛一点更精致 */
    }

    /* 2. 调整图片区：放在上方 */
    .sol-visual {
        order: 1;                   /* 确保图片在上面 */
        height: 320px !important;    /* 限制图片区域高度 */
        background: #fff;
    }

    .sol-visual img {
        max-height: 240px !important; /* 缩小图片尺寸 */
        object-fit: contain;
    }

    /* 3. 调整文字区：放在下方 */
    .sol-text {
        order: 2;                   /* 确保文字在下面 */
        padding: 30px 25px;         /* 缩小内边距，留出更多空间给内容 */
        text-align: left;
    }

    .sol-text h3 {
        font-size: 24px;            /* 减小字号，防止换行过多 */
        margin-bottom: 15px;
    }

    .sol-text p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 4. 技术特性网格：由 2x2 改为单列 */
    .tech-feature-grid {
        grid-template-columns: 1fr; /* 强制单列显示 */
        gap: 10px;
    }

    /* 5. 导航按钮：隐藏或调整 */
    .sol-nav-btn {
        display: none;              /* 移动端物理空间太小，建议隐藏左右箭头，靠手势滑动或圆点切换 */
    }

    /* 6. 指示点：稍微调大，方便手指点击 */
    .sol-dots {
        margin-top: 20px;
    }
    .s-dot {
        width: 10px;
        height: 10px;
        margin: 0 8px;
    }
}



/* ============屏3：我们服务的客户类型 ============= */
/*============= 客户生态板块：纯动态流光版 =============*/
.client-ecosystem {
    padding: 118px 0 138px;
    position: relative;
    background: #f9fbff;
    overflow: hidden;
    z-index: 1;
}

/* 流光容器 */
.bg-streamer-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
    filter: blur(80px); /* 核心：让光条边缘弥散开 */
    opacity: 0.7;
    pointer-events: none;
}

/* 光条基础样式：长方形 */
.light-bar {
    position: absolute;
    width: 200%; /* 足够长，确保斜向扫过全屏 */
    height: 300px;
    transform: rotate(-20deg); /* 统一倾斜角度 */
}

/* 蓝色流光 - 顶部横扫 */
.bar-1 {
    top: -10%;
    left: -50%;
    /* 使用 16 进制 50% 透明蓝 (#0066ff80) */
    background: linear-gradient(90deg, transparent 0%, #0066ff80 50%, transparent 100%);
    animation: stream-move 10s infinite linear;
}

/* 紫色流光 - 底部反向扫 */
.bar-2 {
    bottom: -5%;
    right: -50%;
    background: linear-gradient(90deg, transparent 0%, #7000ff66 50%, transparent 100%);
    animation: stream-move 14s infinite linear reverse;
}

/* 浅青色流光 - 中间快速穿插 */
.bar-3 {
    top: 30%;
    left: -40%;
    height: 150px;
    background: linear-gradient(90deg, transparent 0%, #00ccff44 50%, transparent 100%);
    animation: stream-move 8s infinite linear;
    animation-delay: -2s;
}

/* 纯平移动画：实现“扫过”的感觉 */
@keyframes stream-move {
    0% {
        transform: translate(-15%, -10%) rotate(-20deg);
    }
    100% {
        transform: translate(15%, 10%) rotate(-20deg);
    }
}

/* 卡片样式：两列长方形 + 磨砂质感 */
.client-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.client-card {
    background: rgba(255, 255, 255, 0.75); 
    padding: 45px 40px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
}

.client-card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.08);
}

/* 标题、图标等辅助样式 */
.client-header { text-align: center; margin-bottom: 60px; }
.client-main-title { font-size: 34px; color: #111; font-weight: 700; }
.client-subtitle { color: #666; margin-top: 15px; font-size: 16px; }
.client-icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.icon-blue { background: #eef4ff; }
.icon-green { background: #f0fdf4; }
.icon-orange { background: #fff7ed; }
.icon-purple { background: #faf5ff; }
.client-title { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 12px; }
.client-desc { color: #555; font-size: 14.5px; line-height: 1.8; margin: 0; }

/* ================================= */
/* Client Ecosystem 移动端完整适配 */
/* ================================= */

@media (max-width: 768px) {

    /* 区域整体 */
    .client-ecosystem {
        padding: 78px 0 94px;
    }

    /* 标题区域 */
    .client-header {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .client-main-title {
        font-size: 26px;
    }

    .client-subtitle {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.6;
    }

    /* grid 单列 */
    .client-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }

    /* 卡片 */
    .client-card {
        padding: 28px 24px;
        border-radius: 22px;
        gap: 16px;
        align-items: flex-start;
    }

    /* icon */
    .client-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        border-radius: 14px;
        flex-shrink: 0;
    }

    /* 文字区域自动填满 */
    .client-card > div:last-child {
        flex: 1;
    }

    /* 标题 */
    .client-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    /* 描述 */
    .client-desc {
        font-size: 13.5px;
        line-height: 1.7;
    }

    /* 流光背景性能优化 */
    .bg-streamer-wrapper {
        filter: blur(50px);
        opacity: 0.6;
    }

    .light-bar {
        height: 180px;
    }

    .bar-1 { animation-duration: 16s; }
    .bar-2 { animation-duration: 18s; }
    .bar-3 { animation-duration: 14s; }

}


/* 触摸设备关闭 hover 动效 */
@media (hover: none) {

    .client-card:hover {
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,0.75);
    }

}


/* 点击触感 */
.client-card:active {
    transform: scale(0.98);
}





/* --- 屏4：行业洞察模块全局样式 --- */
/* --- 1. 模块容器：强化底色对比 --- */
.industry-insight-grid {
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9; /* 明确的浅灰底色 */
    padding: 100px 0;
}

.insight-relative {
    position: relative;
    z-index: 5;
}

.insight-header-center {
    text-align: center;
    margin-bottom: 60px;
}

/* --- 2. 背景装饰：网格点阵与蓝色流光 --- */
.insight-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.insight-grid-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 强化点阵明度 */
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: 0.5;
}

.insight-streamer {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 60%;
    height: 70%;
    /* 增强蓝色流光的视觉感 */
    background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    animation: insight-flow 18s infinite alternate ease-in-out;
}

@keyframes insight-flow {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100%, 50%) rotate(20deg); }
}

/* --- 3. 布局控制：强制 2x3 栅格 --- */
.insight-cards-container {
    display: grid;
    /* 强制三列布局 */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

/* --- 4. 卡片细节：纯白不透明以对比灰底 --- */
.insight-mini-card {
    background: #ffffff !important; 
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%; /* 确保卡片高度统一 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.insight-mini-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 102, 255, 0.12), 0 10px 10px -5px rgba(0, 102, 255, 0.04);
    border-color: rgba(0, 102, 255, 0.3);
}

.card-head {
    margin-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 18px;
}

.card-tag {
    font-size: 11px;
    font-weight: 700;
    color: #0066ff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(0, 102, 255, 0.08);
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
}

.card-head h3 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
    color: #0f172a;
}

.info-segment {
    margin-bottom: 22px;
}

.info-segment:last-child {
    margin-bottom: 0;
}

.info-segment label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
}

.info-segment p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #475569;
}

.info-segment.blue-theme label {
    color: #0066ff;
}

.info-segment.blue-theme p {
    color: #1e293b;
    font-weight: 500;
}

/* ================================= */
/* Industry Insight 移动端完整适配 */
/* ================================= */

@media (max-width: 768px) {

    /* 模块整体 */
    .industry-insight-grid {
        padding: 70px 0;
    }

    /* 标题区域 */
    .insight-header-center {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    /* 卡片容器 */
    .insight-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }

    /* 卡片 */
    .insight-mini-card {
        padding: 24px;
        border-radius: 14px;
    }

    /* 卡片头 */
    .card-head {
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .card-head h3 {
        font-size: 18px;
    }

    /* tag */
    .card-tag {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* 信息块 */
    .info-segment {
        margin-bottom: 18px;
    }

    .info-segment label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .info-segment p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    /* 背景性能优化 */
    .insight-streamer {
        filter: blur(50px);
        opacity: 0.8;
    }

    .insight-grid-pattern {
        background-size: 40px 40px;
        opacity: 0.4;
    }

}

/* 触摸设备关闭 hover */
@media (hover: none) {

    .insight-mini-card:hover {
        transform: none;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        border-color: #e2e8f0;
    }

}

/* 点击触感 */
.insight-mini-card:active {
    transform: scale(0.98);
}



/* ============= 典型客户 Logo 滚动动画 ============= */
.partners-slider-section {
    min-height: 35vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    padding: 60px 0 !important;
    margin: 0 !important;
}

.partners-slider-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    text-align: center;
    margin-bottom: 40px;
}

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    /* 左右边缘消隐效果，增加高级感 */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logo-track {
    display: flex;
    /* 总宽度：(180px + 20px 间距) * 66个 (两组) = 13200px */
    width: calc(200px * 66); 
    animation: scrollLogo 50s linear infinite;
    gap: 20px;
}

/* 鼠标悬停时动画暂停 */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

.logo-item {
    flex: 0 0 180px;
    width: 180px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.logo-item img {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
    /* 保持 Logo 原色 */
    filter: grayscale(0); 
}

.logo-item:hover {
    transform: translateY(-5px);
    border-color: #0066ff;
    box-shadow: 0 8px 20px rgba(0,102,255,0.1);
}

/* 关键动画：滚动距离正好是一组(33个)的总宽度 */
@keyframes scrollLogo {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 33)); }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .partners-slider-section { min-height: 25vh !important; padding: 40px 0 !important; }
    .logo-item { flex: 0 0 140px; width: 140px; height: 70px; }
    .logo-track { width: calc(160px * 66); gap: 20px; }
    @keyframes scrollLogo {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-160px * 33)); }
    }
}

/* ==========================================================================
   响应式处理 (Responsive Design)
   ========================================================================== */

/* 宽屏平板端 */
@media (max-width: 1200px) {
    .apps-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 平板端 */
@media (max-width: 1024px) {
    .apps-grid, .support-grid { grid-template-columns: repeat(2, 1fr); }
    .support-grid { gap: 40px; }
}

/* 手机端 */
@media (max-width: 768px) {
    .apps-grid, .support-grid, .advantages-grid { 
        grid-template-columns: 1fr; 
    }
    
    .apps-section, .support-section, .advantages-section {
        padding: 70px 0;
    }

    .ecosystem-card {
        padding: 35px;
    }

    .app-card {
        padding: 30px 20px;
    }
}








/* ============================================================
                   About 页面专用样式
   ============================================================ */
/* --- 仅针对 About Globe 页面 --- */

/* 1. 当地球容器激活时，让父级背景图稍微变暗 */
.hero-section:has(#about-globe-container.is-visible) .hero-bg-layer img {
    filter: brightness(0.5) contrast(1.15) !important; 
    transition: filter 1.5s ease-in-out;
}

/* 2. About 3D 容器的渐显动画 */
#about-globe-container.hero-3d-canvas.is-visible {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.6s ease-in-out;
}

/* 3. 基础过渡设置，确保 About 页面的图片变换也是平滑的 */
.hero-section:has(#about-globe-container) .hero-bg-layer img {
    transition: filter 0.6s ease-in-out;
}

#about-p .hero-bg-layer img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
}

/* --- 2. 点名 layer-2 执行呼吸动画 (精准对齐你的 HTML 结构) --- */
#about-p .layer-2 {
    z-index: 1; /* 确保盖在 layer-1 之上 */
    opacity: 0;
    /* 保持你的 8s 周期 */
    animation: aboutBreathe 8s infinite ease-in-out;
    pointer-events: none; /* 物理补丁：防止挡住 3D 交互 */
}

@keyframes aboutBreathe {
    /* 0s - 4s: 从透明到全显 (完全保留你提供的 0.5s 精准刻度) */
    0%     { opacity: 0; }     /* 0.0s */
    6.25%  { opacity: 0.05; }  /* 0.5s */
    12.5%  { opacity: 0.15; }  /* 1.0s */
    18.75% { opacity: 0.3; }   /* 1.5s */
    25%    { opacity: 0.5; }   /* 2.0s */
    31.25% { opacity: 0.7; }   /* 2.5s */
    37.5%  { opacity: 0.85; }  /* 3.0s */
    43.75% { opacity: 0.95; }  /* 3.5s */
    50%    { opacity: 1; }     /* 4.0s - 巅峰 */

    /* 4s - 8s: 从全显到透明 (完全保留你提供的 0.5s 精准刻度) */
    56.25% { opacity: 0.95; }  /* 4.5s */
    62.5%  { opacity: 0.85; }  /* 5.0s */
    68.75% { opacity: 0.7; }   /* 5.5s */
    75%    { opacity: 0.5; }   /* 6.0s */
    81.25% { opacity: 0.3; }   /* 6.5s */
    87.5%  { opacity: 0.15; }  /* 7.0s */
    93.75% { opacity: 0.05; }  /* 7.5s */
    100%   { opacity: 0; }     /* 8.0s */
}

/* 响应式微调：确保移动端背景压暗逻辑一致 */
@media (max-width: 768px) {
    #about-p .hero-bg-layer img {
        filter: brightness(0.4) contrast(1.1) !important;
    }
}






/* ---hero字体样式  复用--- */
  
/*======页面其他内容代码======*/
/* *====== 屏1. 公司概览区域 ====== */

.company-overview {
    padding: 200px 0 !important;
    position: relative;
    /* 背景图：叠加轻微白渐变，提升文字可读性 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 250, 255, 0.85) 100%), 
                url('../resources/backgrounds/about-Overview-BG.webp') no-repeat center center/cover !important;
    background-attachment: scroll;
    overflow: hidden;
    contain: paint;
}

/* About 首个内容屏承接 Hero，动画要轻一点，滚动穿过时才更跟手 */
.company-overview .fade-in-up {
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 0.38s ease-out,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.company-overview .fade-in-up.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 核心布局：默认比例 0.85fr 1.15fr */
.overview-grid-wrapper {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr; 
    gap: 60px;
    align-items: stretch;
    margin-bottom: 120px;
}

/* 英文补丁：左右平分，防止左侧过窄挤压卡片 */
html[lang="en"] .overview-grid-wrapper {
    grid-template-columns: 1fr 1fr; 
    gap: 40px; /* 稍微缩小间距，腾出空间给文字 */
}

.overview-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-tag { color: #2563eb; font-weight: 700; letter-spacing: 3px; font-size: 12px; margin-bottom: 15px; }

/* 标题样式：使用流体字号 clamp */
.main-heading { 
    font-size: clamp(24px, 3.2vw, 34px); 
    font-weight: 700; 
    color: #0f172a; 
    margin-bottom: 30px; 
    letter-spacing: -0.5px; 
    line-height: 1.2;
    white-space: nowrap; /* 尝试一行显示 */
}

/* 英文标题微调：稍微缩小上限，防溢出 */
html[lang="en"] .main-heading {
    font-size: clamp(20px, 2.8vw, 28px) !important;
    letter-spacing: -0.2px !important; 
    white-space: normal; /* 极致缩小时允许换行，保护布局不被撑破 */
}

.main-heading .brand-text {
    background: linear-gradient(90deg, #2563eb 0%, #00b8ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding-right: 2px;
    display: inline-block;
}

.rich-text p { font-size: 15px; line-height: 2; color: #475569; margin-bottom: 20px; text-align: justify; }

/* 右侧使命卡片 */
.mission-glass-card {
    background: rgba(255, 255, 255, 0.34); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 50px 30px; 
    border-radius: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateZ(0);
}

/* 英文卡片内边距微调 */
html[lang="en"] .mission-glass-card {
    padding: 40px 25px; 
}

.mission-label { font-size: 13px; color: #2563eb; letter-spacing: 4px; margin-bottom: 25px; font-weight: 600; }

.mission-slogan { 
    font-size: clamp(16px, 2vw, 20px); 
    font-weight: 700; 
    color: #1e293b; 
    margin-bottom: 25px; 
    line-height: 1.3;
    letter-spacing: -0.8px; 
    white-space: nowrap;
}

/* 英文口号：务必允许换行，因为英文单词多，强行单行会撑破卡片 */
html[lang="en"] .mission-slogan {
    white-space: normal !important;
    letter-spacing: 0px !important;
}

.mission-philosophy {
    margin: -4px 0 18px;
    padding: 12px 14px;
    border-left: 2px solid rgba(37, 99, 235, 0.75);
    background: rgba(37, 99, 235, 0.055);
}

.mission-philosophy span {
    display: block;
    margin-bottom: 5px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mission-philosophy strong {
    display: block;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.mission-p { font-size: 14px; color: #64748b; line-height: 1.8; }

/* 桥梁装饰线 */
.bridge-line-decor { display: flex; gap: 8px; margin-top: 35px; }
.bridge-line-decor span { height: 2px; background: #2563eb; border-radius: 2px; }
.bridge-line-decor span:nth-child(1) { width: 35px; }
.bridge-line-decor span:nth-child(2) { width: 15px; opacity: 0.5; }

/* 底部数据区 */
.overview-stats-row {
    display: flex;
    justify-content: space-between;
    padding-top: 80px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    contain: paint;
}

.stat-num { font-size: 42px; font-weight: 700; color: #0f172a; display: flex; align-items: baseline; }
.stat-num i { color: #2563eb; font-style: normal; margin-left: 5px; font-size: 24px; }
.stat-txt { font-size: 14px; color: #94a3b8; margin-top: 10px; font-weight: 500; }

/* ================================================================
   响应式优化
   ================================================================ */

/* 针对英文版的提前断点：防止 1024px-1200px 之间的挤压 */
@media (max-width: 1200px) {
    html[lang="en"] .overview-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    html[lang="en"] .main-heading {
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 1024px) {
    .company-overview { padding: 100px 0 !important; }
    .overview-grid-wrapper { grid-template-columns: 1fr; gap: 50px; }
    .mission-slogan { white-space: normal; font-size: 20px; }
    .overview-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .main-heading { font-size: 26px !important; white-space: normal; }
}

/* ================================================================
   移动端适配（≤768px 大屏手机/小平板）— 紧凑版，两行两列统计卡片
   ================================================================ */
@media (max-width: 768px) {
    .company-overview {
        padding: 40px 0 !important;               /* 进一步减小上下内边距 */
        background-attachment: scroll !important;
    }

    .overview-grid-wrapper {
        gap: 20px;                                 /* 间隙缩小 */
        margin-bottom: 40px;
    }

    .main-heading {
        font-size: clamp(22px, 6vw, 28px) !important;
        white-space: normal;
        margin-bottom: 20px;                        /* 标题下方间距压缩 */
    }

    .mission-glass-card {
        padding: 25px 15px;                         /* 卡片内边距压缩 */
    }

    .mission-label {
        margin-bottom: 15px;
    }

    .mission-slogan {
        font-size: 18px;
        white-space: normal;
        letter-spacing: 0;
        margin-bottom: 15px;
    }

    .rich-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .bridge-line-decor {
        margin-top: 15px;
    }

    .overview-stats-row {
        padding-top: 25px;                          /* 统计数据区上边距压缩 */
        gap: 15px;                                   /* 列间距缩小 */
        /* grid-template-columns 继承自 1024px 的 1fr 1fr，保持两列 */
    }
}

/* ================================================================
   极小屏适配（≤480px 小屏手机）— 保持两行两列，进一步紧凑
   ================================================================ */
@media (max-width: 480px) {
    .overview-stats-row {
        grid-template-columns: 1fr 1fr;  /* 明确两列 */
        gap: 8px;                         /* 列间距进一步压缩 */
        text-align: center;
    }

    .stat-num {
        font-size: 26px;                   /* 数字适当缩小 */
        justify-content: center;
        white-space: nowrap;                /* 防止长数字折行 */
    }

    .stat-txt {
        font-size: 10px;                    /* 说明文字调小 */
        margin-top: 3px;
    }
}
  
  

/* *====== 屏2：核心价值观 ====== */

.values {
    padding: 180px 0 !important;
    position: relative;
    /* 背景色与渐变纹理 */
    background-color: #f1f5f9;
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.12) 0%, transparent 50%),
        repeating-linear-gradient(45deg, rgba(37, 99, 235, 0.02) 0px, rgba(37, 99, 235, 0.02) 1px, transparent 1px, transparent 10px);
    overflow: hidden;
}

/* 装饰光晕 */
.values::before,
.values::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
    animation: pulseGradient 8s infinite alternate ease-in-out;
}
.values::before { top: -200px; left: -100px; }
.values::after { bottom: -200px; right: -100px; animation-delay: -4s; }

@keyframes pulseGradient {
    0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    100% { transform: scale(1.2) translate(50px, 50px); opacity: 0.8; }
}

.values .container {
    position: relative;
    z-index: 1;
}

/* 标题区 */
.section-header {
    text-align: center;
    margin-bottom: 80px;
}

/* 栅格布局 */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* 卡片样式（毛玻璃效果） */
.value-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 55px 30px;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    position: relative;
}

.value-card:hover {
    transform: translateY(-15px);
    background: #ffffff;
    box-shadow: 0 40px 80px rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.2);
}

/* 顶部蓝色激活条 */
.value-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: #2563eb;
    transition: width 0.4s ease;
    border-radius: 0 0 4px 4px;
}
.value-card:hover::after {
    width: 30%;
}

/* 图标 */
.value-icon {
    width: 68px;
    height: 68px;
    background: #eff6ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 35px;
    color: #2563eb;
    transition: all 0.5s ease;
}
.value-card:hover .value-icon {
    background: #2563eb;
    color: #ffffff;
    transform: rotateY(180deg);
}
.value-icon svg {
    width: 32px;
    height: 32px;
}

/* 文字 */
.value-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
}
.value-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.9;
}

/* ===== 响应式 ===== */
/* 移动端紧凑版 (≤768px) — 关闭 hover 效果 */
@media (max-width: 768px) {
    .values {
        padding: 50px 0 !important;
    }
    .section-header {
        margin-bottom: 40px;
    }
    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .value-card {
        padding: 30px 20px;
        /* 移动端禁用 hover 相关变换，并还原为默认状态 */
        transition: none;                /* 移除所有过渡动画 */
    }
    .value-card:hover {
        transform: none;                  /* 取消悬停上移 */
        background: rgba(255, 255, 255, 0.7); /* 保持毛玻璃背景 */
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02); /* 还原阴影 */
        border-color: rgba(255, 255, 255, 0.8); /* 还原边框 */
    }
    .value-card:hover::after {
        width: 0;                          /* 隐藏顶部蓝条 */
    }
    .value-card:hover .value-icon {
        background: #eff6ff;               /* 还原图标背景 */
        color: #2563eb;
        transform: none;                   /* 取消旋转 */
    }
    /* 可选：添加点击反馈（触摸时瞬间效果） */
    .value-card:active {
        background: #ffffff;
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
        transition: 0.15s;                 /* 快速过渡 */
    }

    .value-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        margin-bottom: 25px;
        transition: none;                   /* 移除图标旋转动画 */
    }
    .value-icon svg {
        width: 26px;
        height: 26px;
    }
    .value-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .value-description {
        font-size: 13px;
        line-height: 1.7;
    }
    /* 移除背景光晕 */
    .values::before,
    .values::after {
        display: none;
    }
}

/* 极小屏进一步压缩 (≤480px) — 同样禁用 hover */
@media (max-width: 480px) {
    .value-card {
        padding: 20px 15px;
    }
    .value-card:hover {
        padding: 20px 15px;                /* 防止悬停时改变内边距 */
    }
    .value-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        margin-bottom: 20px;
    }
    .value-icon svg {
        width: 22px;
        height: 22px;
    }
    .value-title {
        font-size: 17px;
    }
    .value-description {
        font-size: 12px;
    }
}
	


/* *====== 屏3. 发展历程：视差科技氛围版 (完整版) ====== */

.history {
    padding: 120px 0 !important;
    position: relative;
    /* 背景：半透遮罩 + 视差图片 */
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.85) 0%, rgba(239, 246, 255, 0.85) 100%), 
                url('../resources/backgrounds/about-History-BG.webp') no-repeat center center/cover !important;
    background-attachment: scroll;
    overflow: hidden;
    contain: paint;
}

.timeline {
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 时间轴主干线 */
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    width: 2px;
    height: 100%;
    background: #cbd5e1;
    z-index: 1;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 60px;
}

/* 时间轴圆点 */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: #2563eb;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    z-index: 3;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* 时间轴卡片样式 */
.timeline-content {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.timeline-content:hover {
    transform: translateX(10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 12px;
}

.timeline-year {
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
    font-family: inherit;
}

.timeline-title {
    font-size: 1rem; /* 16px */
    font-weight: 800;
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

/* 标题渐变色循环：3n+1 蓝绿，3n+2 紫蓝，3n+3 橙红 */
.timeline-item:nth-child(3n+1) .timeline-title {
    background-image: linear-gradient(135deg, #2563eb 0%, #10b981 100%);
}
.timeline-item:nth-child(3n+2) .timeline-title {
    background-image: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
}
.timeline-item:nth-child(3n+3) .timeline-title {
    background-image: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.timeline-description {
    font-size: 15px;
    color: #475569;
    line-height: 1.8;
    text-align: justify;
}

.timeline-description strong {
    color: #0f172a;
    font-weight: 600;
}

/* ===== 移动端紧凑优化 ===== */
@media (max-width: 768px) {
    .history {
        padding: 50px 0 !important;          /* 大幅减小上下内边距 */
        background-attachment: scroll;        /* 关闭视差，提升性能 */
    }

    .timeline {
        padding: 0 15px;                      /* 左右内边距略微缩小 */
    }

    .timeline-item {
        padding-left: 30px;                   /* 左侧留白从40px → 30px */
        margin-bottom: 30px;                  /* 项间距从40px → 30px */
    }

    .timeline::before {
        left: 4px;                             /* 主干线左移适应 */
    }

    .timeline-item::before {
        width: 10px;
        height: 10px;
        left: 0px;
        top: 6px;                              /* 垂直微调 */
        border-width: 3px;                     /* 白色边框稍细 */
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    .timeline-content {
        padding: 20px 15px;                    /* 卡片内边距压缩 */
        /* 移动端禁用悬停效果 */
        transition: none;
    }
    .timeline-content:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .timeline-header {
        flex-direction: column;
        align-items: flex-start;                /* 左对齐更紧凑 */
        gap: 5px;
        margin-bottom: 12px;                    /* 缩小底部间距 */
        padding-bottom: 8px;                     /* 缩小下划线内边距 */
    }

    .timeline-year {
        font-size: 14px;                         /* 年份稍小 */
    }

    .timeline-title {
        font-size: 18px;                         /* 标题统一18px */
        margin-bottom: 5px;                       /* 减小下边距 */
    }

    .timeline-description {
        font-size: 14px;                          /* 描述文字缩小 */
        line-height: 1.6;                          /* 压缩行高 */
    }
}

/* 极小屏进一步压缩 (≤480px) */
@media (max-width: 480px) {
    .timeline-item {
        padding-left: 25px;                        /* 进一步缩小左侧留白 */
        margin-bottom: 25px;
    }

    .timeline::before {
        left: 3px;
    }

    .timeline-item::before {
        width: 8px;
        height: 8px;
        top: 5px;
        border-width: 2px;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .timeline-content {
        padding: 15px 12px;                         /* 卡片内边距再压缩 */
    }

    .timeline-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .timeline-year {
        font-size: 13px;
    }

    .timeline-title {
        font-size: 16px;                             /* 标题再缩小 */
    }

    .timeline-description {
        font-size: 13px;                             /* 描述文字再缩小 */
        line-height: 1.5;
    }
}



/* *====== 屏4：CTA Section (增强版) ====== */

.cta {
    position: relative;
    padding: 160px 0; /* 桌面端大内边距 */
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    overflow: hidden;
    width: 100%;
}

/* 装饰背景圆圈 */
.cta-bg-elements .circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    z-index: 1;
}
.circle-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}
.circle-2 {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: -50px;
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.cta-tag {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    background-image: linear-gradient(135deg, #2563eb 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: 50px;
    font-size: 0.875rem; /* 14px */
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.cta-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 30px;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 20px;
    color: #64748b;
    margin-bottom: 48px;
    line-height: 1.6;
}

.cta-actions .btn {
    padding: 14px 40px;
    font-size: 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
    transition: all 0.3s ease;
}

.cta-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);
}

.cta-trust-badge {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 30px;
    color: #94a3b8;
    font-size: 15px;
}

/* ===== 移动端紧凑优化 (保留装饰背景，大幅压缩高度) ===== */

@media (max-width: 768px) {
    .cta {
        padding: 15px 20px !important;      /* 压缩 section 高度：上下内边距 15px */
    }

    /* 调整装饰圆圈，适应移动端 */
    .cta-bg-elements .circle {
        opacity: 0.4;                        /* 降低透明度，避免喧宾夺主 */
    }
    .circle-1 {
        width: 200px;
        height: 200px;
        top: -50px;
        right: -50px;
    }
    .circle-2 {
        width: 150px;
        height: 150px;
        bottom: -30px;
        left: -30px;
    }

    .cta-tag {
        font-size: 0.65rem;                 /* 约10px */
        padding: 0.2rem 0.8rem;
        letter-spacing: 1px;
        margin-bottom: 0.4rem;
    }

    .cta-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .cta-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
        padding: 0 5px;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 12px;
        transition: none;                     /* 移动端禁用悬停动画 */
    }
    .cta-actions .btn:hover {
        transform: none;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
    }
    .cta-actions .btn:active {
        background: #2563eb;                  /* 可选点击反馈 */
        transform: scale(0.98);
    }

    .cta-trust-badge {
        flex-direction: column;
        gap: 6px;
        margin-top: 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cta {
        padding: 10px 15px !important;        /* 进一步压缩 section 高度 */
    }

    /* 进一步缩小装饰圆圈 */
    .circle-1 {
        width: 150px;
        height: 150px;
        top: -30px;
        right: -30px;
    }
    .circle-2 {
        width: 100px;
        height: 100px;
        bottom: -20px;
        left: -20px;
    }

    .cta-tag {
        font-size: 0.6rem;
        padding: 0.15rem 0.6rem;
        margin-bottom: 0.3rem;
    }

    .cta-title {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .cta-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .cta-actions .btn {
        padding: 8px 15px;
        font-size: 11px;
    }

    .cta-trust-badge {
        margin-top: 10px;
        gap: 4px;
        font-size: 11px;
    }
}
       
	
	
	
	
	
	
	
	
/* =========================================
               Contact 页面专属样式
   ========================================= */		
/* 1. 背景变暗逻辑 */
.hero-section:has(#contact-animation-container.is-visible) .hero-bg-layer img {
    filter: brightness(0.95) !important; 
    transition: filter 1.5s ease-in-out;
}

/* 2. 容器显示逻辑 */
/* 必须确保 z-index: 2 才能压在背景图 (z-index: 0) 上面，同时不遮挡内容 (z-index: 10) */
#contact-animation-container.hero-3d-canvas.is-visible {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2 !important; 
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.6s ease-in-out;
    pointer-events: auto !important; /* 必须是 auto 才能接收点击 */
}

/* 3. 基础过渡 */
.hero-section:has(#contact-animation-container) .hero-bg-layer img {
    transition: filter 0.6s ease-in-out;
}


/* ---hero字体样式  复用--- */
  
/*======剩余页面其他内容代码======*/
/* --- 1. 容器与背景 --- */
.rfq-flow-system {
    position: relative; height: 65vh; min-height: 400px;
    background: #000; display: flex; align-items: center;
    margin-top: -80px; z-index: 100; isolation: isolate; overflow: visible; 
}
.rfq-bg-layer {
    position: absolute; inset: 0; background-size: cover;
    background-position: center; background-attachment: fixed; z-index: -1;
}
.rfq-overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 0;
}
.rfq-content-inner { position: relative; z-index: 10; width: 100%; padding: 0 5%; }
.system-title { font-size: 38px; font-weight: 900; color: #fff; margin-bottom: 15px; }
.response-tag { display: inline-flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 14px; }
.pulse-dot { width: 8px; height: 8px; background: #2563eb; border-radius: 50%; box-shadow: 0 0 10px #2563eb; }

/* --- 2. 卡片外部 --- */
.rfq-console-bar {
    display: flex; background: #ffffff; padding: 10px; gap: 10px;
    margin-top: 30px; border-radius: 6px; 
    position: relative;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6); 
}

/* Keep validation/submission feedback out of the horizontal input layout. */
#contactRfqStatus {
    position: absolute;
    top: calc(100% + 10px);
    left: 10px;
    width: calc(100% - 20px) !important;
    margin: 0 !important;
    min-height: 1.2em;
    flex-basis: auto !important;
}

#contactRfqStatus:empty {
    display: none;
}

/* --- 3. 输入项：分层对比优化 --- */
.console-item {
    flex: 1; background: #f1f5f9; padding: 18px 25px;
    display: flex; align-items: center; border-radius: 4px;
    transition: all 0.3s ease;
}
.console-item:hover { background: #eef2f6; }
.flex-main { flex: 5; }
.item-body { width: 100%; }

.item-body label {
    display: block; font-size: 10px; font-weight: 900; color: #2563eb;
    margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85;
}

.item-body input {
    width: 100%; border: none; background: transparent;
    font-size: 13px; font-weight: 700; color: #0f172a; outline: none;
}
.item-body input::placeholder {
    color: #94a3b8; font-weight: 500; opacity: 0.6;
}

/* --- 4. 提交按钮：流光交互版 --- */
.console-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff; border: none; padding: 0 50px;
    font-size: 16px; font-weight: 800; cursor: pointer;
    border-radius: 4px; position: relative; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2); white-space: nowrap;
}

.console-submit::after {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.console-submit:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    letter-spacing: 1px;
}

.console-submit:hover::after {
    left: 100%; transition: 0.6s;
}

.console-submit:active {
    transform: translateY(1px) scale(0.98);
}

@media (min-width: 1101px) {
    .rfq-console-bar {
        display: grid;
        grid-template-columns:
            minmax(190px, 0.95fr)
            minmax(220px, 1.1fr)
            minmax(320px, 2fr)
            auto;
        align-items: stretch;
    }

    .console-item,
    .flex-main {
        min-width: 0;
    }

    .console-submit {
        padding: 0 34px;
    }
}

/* 适配逻辑 */
@media (max-width: 1100px) {
    .rfq-flow-system { height: auto; padding: 80px 0; margin-top: -50px; }
    .rfq-console-bar { flex-direction: column; }
    .rfq-bg-layer { background-attachment: scroll; }
    .console-submit { padding: 20px; }
}



/* 1. 背景与基础设置 */
.limchip-contact-ultimate {
    padding: 120px 0;
    /* 基础渐变加深 */

    background: linear-gradient(132deg, #f0f9ff 20%, #ffffff 0%, #e0f2fe 100%);
    position: relative;
    overflow: hidden;
    color: #0f172a;
    font-family: inherit;
}

/* 明显但柔和的光晕 */
.glow-sphere-1 {
    position: absolute; top: -100px; right: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(29, 155, 240, 0.08) 0%, transparent 70%);
    filter: blur(60px); z-index: 0;
}

.glow-sphere-2 {
    position: absolute; bottom: -50px; left: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.03) 0%, transparent 70%);
    filter: blur(40px); z-index: 0;
}

.layout-wrapper {
    display: flex; max-width: 1000px; margin: 0 auto; padding: 0 40px;
    gap: 120px; position: relative; z-index: 1;
}

/* 2. 左侧纵向大标题 */
/* 默认纵向标题样式（中文） */
#contact-p .v-title {
    display: block;
    writing-mode: vertical-rl; /* 垂直排版 */
    text-orientation: upright; /* 汉字保持正向 */
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 10px;
    color: #0f172a;
    text-align: center;
}

/* 针对英文状态的优化 */
html[lang="en"] #contact-p .v-title {
    text-orientation: mixed;   /* 英文单词自动顺时针旋转90度 */
    font-size: 42px;           /* 英文较长，缩小字号防止溢出 */
    letter-spacing: 4px;       /* 缩小字母间距 */
    text-transform: uppercase; /* 全大写更具工业设计感 */
    margin-left: 10px;         /* 微调对齐 */
}

/* 装饰线适配 */
.v-line {
    width: 3px;
    height: 60px;
    background: #1D9BF0;
    margin: 30px auto 0;
}

/* 响应式：移动端改回横向 */
@media (max-width: 900px) {
    #contact-p .v-title {
        writing-mode: horizontal-tb;
        font-size: 32px;
        letter-spacing: 2px;
        text-align: left;
    }
    html[lang="en"] #contact-p .v-title {
        font-size: 28px;
    }
}
.v-line { width: 3px; height: 60px; background: #1D9BF0; margin: 40px auto 0; }

/* 3. 右侧核心联系卡片 */
.main-content { flex: 1; }

.item-card-static {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 28px 35px;
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 24px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* 统一图标包装 */
.icon-wrap {
    flex: 0 0 42px; height: 42px; background: #1D9BF0; color: #fff;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.icon-wrap svg { width: 20px; height: 20px; }

/* 绝对平权文字：地址、电话、邮箱完全一致 */
.card-info label { display: block; font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; }
.data-text { 
    font-size: 20px; /* 统一字号提升大气感 */
    color: #1D9BF0; /* 统一主色蓝 */
    font-weight: 700; 
    margin: 0; 
    font-family: var(--font-mono);
}

/* 4. 隔离带 */
.group-sep { margin: 60px 0 30px; display: flex; align-items: center; gap: 20px; }
.sep-tag { font-size: 12px; font-weight: 900; color: #1D9BF0; letter-spacing: 4px; }
.sep-line { flex: 1; height: 1px; background: linear-gradient(to right, #1D9BF0, transparent); opacity: 0.2; }

/* 5. 即时通讯 - 带有交互动画 */
.im-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.im-btn {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 高级缓动 */
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.02);
}

/* IM 内部图标容器 */
.im-btn .im-icon-wrap {
    width: 26px; height: 26px; margin-right: 12px;
    flex: 0 0 26px;
    color: #94a3b8; /* 默认灰色 */
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
.im-btn .im-icon-wrap svg {
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
    transform-origin: center;
}

.im-btn span {
    font-size: 15px; font-weight: 600; color: #475569;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.im-btn:hover,
.im-btn:hover span,
.im-btn:focus,
.im-btn:focus span {
    text-decoration: none !important;
}

/* --- IM 悬停交互动画 --- */
.im-btn:hover {
    transform: translateY(-5px);
    border-color: #1D9BF0;
    box-shadow: 0 12px 24px rgba(29, 155, 240, 0.1);
}

.im-btn:hover .im-icon-wrap {
    color: #1D9BF0; /* 悬停时图标变蓝色 */
    transform: scale(1.1);
}

.im-btn:hover span {
    color: #1D9BF0; /* 悬停时文字变蓝色 */
}

#contact-p .im-box-grid .im-btn,
#contact-p .im-box-grid .im-btn:link,
#contact-p .im-box-grid .im-btn:visited,
#contact-p .im-box-grid .im-btn:hover,
#contact-p .im-box-grid .im-btn:focus,
#contact-p .im-box-grid .im-btn:active,
#contact-p .im-box-grid .im-btn *,
#contact-p .im-box-grid .im-btn *:hover,
#contact-p .im-box-grid .im-btn *:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
    -webkit-text-decoration-line: none !important;
}

#contact-p .im-box-grid .im-btn::before,
#contact-p .im-box-grid .im-btn::after,
#contact-p .im-box-grid .im-btn span::before,
#contact-p .im-box-grid .im-btn span::after {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* 6. 响应式 */
@media (max-width: 900px) {
    .layout-wrapper { flex-direction: column; gap: 50px; }
   #contact-p  .v-title { flex-direction: row; font-size: 40px; }
    .v-line { display: none; }
    .im-box-grid { grid-template-columns: 1fr; }
}

/* Spacious desktop rhythm for content-heavy sections.
   Applies only when the viewport has enough height, so mobile and high-zoom
   low-height desktops keep their compact rules. */
@media (min-width: 1025px) and (min-height: 820px) {
    .lim-about-hero {
        min-height: min(1120px, calc(100vh + 72px));
        padding-top: clamp(88px, 8vh, 128px);
        padding-bottom: clamp(110px, 10vh, 152px);
    }

    .section-core-values,
    .section-products-unified {
        padding-top: clamp(116px, 10vh, 150px);
        padding-bottom: clamp(128px, 11vh, 168px);
    }

    .section-service-flow {
        padding-top: clamp(180px, 15vh, 220px);
        padding-bottom: clamp(180px, 15vh, 220px);
    }

    .products {
        padding-top: clamp(110px, 9vh, 142px);
        padding-bottom: clamp(120px, 10vh, 154px);
    }

    .bg-quality.full-screen-bg,
    .bg-bom.full-screen-bg {
        min-height: calc(100vh + 56px) !important;
        padding-top: clamp(88px, 8vh, 120px);
        padding-bottom: clamp(96px, 9vh, 132px);
    }

    .network-section,
    .services-section,
    .process-section,
    .advantages-section,
    .apps-section,
    .solution-carousel-section,
    .client-ecosystem,
    .industry-insight-grid {
        padding-top: clamp(108px, 9vh, 142px);
        padding-bottom: clamp(118px, 10vh, 158px);
    }

    .qc-lab-system,
    .gsc-SUPPLY-CHAIN {
        padding-top: clamp(108px, 9vh, 144px);
        padding-bottom: clamp(116px, 10vh, 156px);
    }
}

/* High-zoom desktop adaptation: desktop width with tablet-like viewport height.
   This keeps the normal desktop and mobile layouts untouched. */
@media (min-width: 900px) and (max-width: 1280px) and (max-height: 760px) and (hover: hover) and (pointer: fine) {
    .lim-about-hero,
    .section-core-values,
    .section-products-unified,
    .section-service-flow,
    .services-section,
    .process-section,
    .advantages-section,
    .apps-section,
    .company-overview,
    .limchip-contact-ultimate {
        min-height: auto !important;
        padding-top: 64px !important;
        padding-bottom: 72px !important;
        overflow: visible !important;
    }

    body:not(#home-p) > .hero-section {
        height: auto !important;
        min-height: 520px !important;
        padding: 96px 0 72px !important;
    }

    body:not(#home-p) .hero-title {
        font-size: 42px !important;
        line-height: 1.12 !important;
    }

    body:not(#home-p) .hero-description {
        max-width: 720px;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .lim-about-hero .lim-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        row-gap: 24px !important;
        column-gap: 0 !important;
        align-items: start !important;
    }

    .lim-about-hero .lim-text-layout {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .lim-about-hero .btn-pill-small {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
    }

    .lim-about-hero .lim-stats-layout {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100%;
    }

    .lim-about-hero .stats-refined-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .lim-about-hero .stat-glass-card {
        top: 0 !important;
        padding: 20px 18px !important;
        border-radius: 18px !important;
    }

    .lim-about-hero .stat-number {
        font-size: 2rem !important;
    }

    .lim-about-hero .lbl {
        font-size: 12px !important;
    }

    html[lang="en"] .lim-about-hero .lim-description {
        max-width: 920px;
    }

    html[lang="en"] .lim-about-hero .desc-primary {
        font-size: 0.98rem;
        line-height: 1.38;
    }

    html[lang="en"] .lim-about-hero .lim-description .desc-sub {
        font-size: 0.8rem;
        line-height: 1.44;
    }

    .company-overview {
        padding-top: 72px !important;
        padding-bottom: 80px !important;
    }

    .overview-grid-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
    }

    .overview-stats-row {
        gap: 24px !important;
    }

    .products {
        padding-top: 72px !important;
        padding-bottom: 80px !important;
    }

    .product-row-card {
        padding: 24px 26px !important;
    }

    html[lang="en"] .product-row-card {
        align-items: flex-start !important;
    }

    html[lang="en"] .product-row-right {
        flex: 0 0 360px !important;
    }

    .product-description {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .services-section .section-header,
    .process-section .section-header,
    .advantages-section .section-header,
    .apps-section .section-header {
        margin-bottom: 38px !important;
    }

    .process-section {
        min-height: auto !important;
    }

    .process-grid,
    .advantages-grid,
    .services-grid,
    .apps-grid,
    .support-grid {
        gap: 20px !important;
    }

    .limchip-contact-ultimate {
        padding-top: 72px !important;
        padding-bottom: 80px !important;
    }
}

@media (min-width: 900px) and (max-width: 1280px) and (max-height: 620px) and (hover: hover) and (pointer: fine) {
    body:not(#home-p) > .hero-section {
        min-height: 460px !important;
    }

    body:not(#home-p) .hero-title {
        font-size: 36px !important;
    }

    .lim-about-hero .stats-refined-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lim-about-hero .stat-glass-card {
        padding: 18px 16px !important;
    }

    .section-title,
    .title-giant {
        font-size: clamp(28px, 3vw, 36px) !important;
    }
}
/* Chinese contact page/channel logic: keep WeChat and QQ only when the main site is switched to Chinese. */
.im-btn .im-icon-wrap img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.im-cn-only {
    display: none;
}

html[lang="zh-CN"] #contact-p .im-cn-hidden,
body.zh #contact-p .im-cn-hidden,
.zh #contact-p .im-cn-hidden {
    display: none !important;
}

html[lang="zh-CN"] #contact-p .im-cn-only,
body.zh #contact-p .im-cn-only,
.zh #contact-p .im-cn-only {
    display: flex;
}

/* ── BOM modal contact fields (submissions go to /api/rfq) ── */
.bom-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.bom-contact-grid input { padding: 10px 12px; border: 1px solid rgba(125, 140, 160, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; }
.bom-contact-grid input:focus { outline: 2px solid rgba(59, 130, 246, 0.3); border-color: #3b82f6; }
.bom-form-status { margin-top: 10px; font-size: 0.85rem; min-height: 1.2em; }
.bom-form-status.is-ok { color: #27c08a; font-weight: 600; }
.bom-form-status.is-err { color: #e2705f; }
@media (max-width: 560px) { .bom-contact-grid { grid-template-columns: 1fr; } }
@font-face {
    font-family: "IBM Plex Sans Condensed";
    src: url("resources/fonts/ibm-plex-sans-condensed-semibold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}