/* ==========================================================================
   镭立科技官网 - 主样式文件
   说明：所有样式集中在此文件中，按区块注释分隔，方便查找和修改
   ========================================================================== */

/* ==========================================================================
   1. 基础重置与全局变量
   ========================================================================== */
:root {
    --primary: #254CC6;          /* 主品牌色 - 蓝 */
    --primary-light: #3660D9;    /* 浅品牌色 */
    --primary-dark: #1a3a9c;     /* 深品牌色 */
    --accent: #009AFE;           /* 强调色 - 亮蓝 */
    --text-dark: #333333;        /* 深色文字 */
    --text-gray: #666666;        /* 灰色文字 */
    --text-light: #999999;       /* 浅灰文字 */
    --bg-light: #f7f8fc;         /* 浅色背景 */
    --bg-white: #ffffff;         /* 白色背景 */
    --border-color: #e8e8e8;     /* 边框颜色 */
    --shadow: 0 2px 12px rgba(0,0,0,0.08);       /* 常规阴影 */
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12); /* 悬停阴影 */
    --radius: 8px;               /* 圆角 */
    --max-width: 1200px;         /* 内容最大宽度 */
    --nav-height: 64px;          /* 导航栏高度 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color 0.3s; }
a:hover { color: var(--primary); }
img { max-width: 100%; display: block; border: 0; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
input, textarea, select { font-family: inherit; outline: none; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   2. 导航栏
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 1px 10px rgba(0,0,0,0.06);
    z-index: 1000;
    transition: background 0.3s, box-shadow 0.3s;
}

/* logo 始终保持蓝胶囊 + 白字（所有导航栏状态统一） */
.navbar .logo-svg { height: 42px; width: auto; display: block; }
.navbar .logo-svg .logo-bg { fill: var(--primary); transition: fill 0.3s; }
.navbar .logo-svg .logo-text { fill: #ffffff; transition: fill 0.3s; }

/* 顶部为深色 banner 的页面：导航栏默认透明叠在 banner 上，hover 才显示白底 */
.navbar.navbar-transparent {
    background: transparent;
    box-shadow: none;
}
.navbar.navbar-transparent .nav-item > a {
    color: rgba(255, 255, 255, 0.92);
}
.navbar.navbar-transparent .nav-item > a:hover,
.navbar.navbar-transparent .nav-item.active > a {
    color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar.navbar-transparent .nav-item.has-dropdown > a::after {
    border-top-color: rgba(255, 255, 255, 0.7);
}
/* 透明态下 logo 保持蓝胶囊（与白底态一致），文字保持白色 */

/* 透明态导航栏 hover：变白底 + 文字 / 下拉箭头 / logo 全部恢复深色版 */
.navbar.navbar-transparent:hover {
    background: #ffffff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.navbar.navbar-transparent:hover .nav-item > a {
    color: var(--text-dark);
}
.navbar.navbar-transparent:hover .nav-item > a:hover,
.navbar.navbar-transparent:hover .nav-item.active > a {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.navbar.navbar-transparent:hover .nav-item.has-dropdown > a::after {
    border-top-color: var(--text-gray);
}
.navbar.navbar-transparent:hover .logo-svg .logo-bg { fill: var(--primary); }
.navbar.navbar-transparent:hover .logo-svg .logo-text { fill: #ffffff; }

.navbar .nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.navbar .logo img {
    height: 42px;
    width: auto;
}

.navbar .nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar .nav-item {
    position: relative;
}

.navbar .nav-item > a {
    display: block;
    padding: 0 18px;
    height: var(--nav-height);
    line-height: var(--nav-height);
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.navbar .nav-item > a:hover,
.navbar .nav-item.active > a {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* 下拉箭头 */
.navbar .nav-item.has-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-gray);
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s;
}

.navbar .nav-item.has-dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* 二级下拉菜单 */
.navbar .dropdown {
    position: absolute;
    top: var(--nav-height);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: #fff;
    box-shadow: var(--shadow-hover);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s;
}

.navbar .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.navbar .dropdown a {
    display: block;
    padding: 10px 24px;
    font-size: 14px;
    color: var(--text-gray);
    transition: all 0.2s;
    white-space: nowrap;
}

.navbar .dropdown a:hover {
    color: var(--primary);
    background: var(--bg-light);
    padding-left: 28px;
}

/* 移动端汉堡菜单 */
.navbar .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.navbar .nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    transition: all 0.3s;
}

/* ==========================================================================
   3. Banner 轮播
   ========================================================================== */
.banner {
    margin-top: var(--nav-height);
    position: relative;
    overflow: hidden;
}

.banner .slides {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.banner .slide {
    min-width: 100%;
    height: 560px;
    position: relative;
    background-size: cover;
    background-position: center;
}

.banner .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 首页 banner 文案层（由 config.js 的 banners 数组渲染，留空字段不显示） */
.banner .slide .banner-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    z-index: 5;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.banner .slide .banner-content-left {
    left: 8%;
    right: auto;
    transform: translateY(-50%);
    text-align: left;
    width: 82%;
    max-width: 640px;
}
.banner .slide .banner-title {
    font-size: 58px;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
}
.banner .slide .banner-subtitle {
    font-size: 25px;
    margin: 56px 0 12px;
    line-height: 1.5;
    font-weight: 500;
    color: #fff;
    opacity: 0.95;
}
.banner .slide .banner-desc {
    font-size: 18px;
    margin: 12px 0 0;
    line-height: 1.7;
    color: #fff;
    opacity: 0.88;
    max-width: 680px;
    margin: 22px auto 0;
}

/* 数据指标卡片（banner desc 为数组时） —— 数字+%+紫色下三角同行左对齐,小字标签在下一行 */
.banner .slide .banner-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    max-width: 900px;
    margin: 22px auto 0;
    padding: 0 12px;
}
.banner .slide .banner-metric {
    text-align: left;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.banner .slide .bm-top {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1;
}
.banner .slide .bm-num {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}
.banner .slide .bm-num .num {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}
.banner .slide .bm-num .unit {
    font-size: 17px;
    font-weight: 700;
    opacity: 0.85;
    margin-left: 2px;
    line-height: 1;
}
.banner .slide .bm-arrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
    filter: drop-shadow(0 4px 10px rgba(115, 102, 255, 0.45));
}
/* 矩形杆：从上到下渐透明（轻透感），整根偏淡紫 */
.banner .slide .bm-arrow-rect {
    width: 18px;
    height: 38px;
    background: linear-gradient(180deg,
        rgba(91, 109, 242, 0.85) 0%,
        rgba(106, 91, 245, 0.55) 60%,
        rgba(115, 102, 255, 0.25) 100%);
    border-radius: 3px 3px 0 0;
}
/* 三角头：底部朝下等腰三角，实色紫罗兰 */
.banner .slide .bm-arrow-tri {
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 22px solid #7366ff;
    margin-top: -3px;
}
.banner .slide .bm-label {
    font-size: 16px;
    margin-top: 14px;
    font-weight: 500;
    opacity: 0.95;
    line-height: 1.3;
}
.banner .slide .banner-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 36px;
    background: #0a5ed3;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 1px;
    box-shadow: 0 4px 14px rgba(10, 94, 211, 0.4);
    transition: background .2s, transform .2s;
}
.banner .slide .banner-btn:hover { background: #0747a6; transform: translateY(-1px); }

/* 留资弹出窗 */
.lead-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.lead-modal {
    position: relative;
    width: 100%; max-width: 420px;
    background: #fff; color: #222;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: leadPop .2s ease;
}
@keyframes leadPop { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lead-modal-close {
    position: absolute; top: 12px; right: 14px;
    border: none; background: none; font-size: 26px; line-height: 1;
    color: #999; cursor: pointer;
}
.lead-modal-close:hover { color: #333; }
.lead-modal-title { margin: 0 0 6px; font-size: 22px; color: #0a5ed3; }
.lead-modal-sub { margin: 0 0 20px; font-size: 14px; color: #666; }
.lead-form input, .lead-form textarea {
    width: 100%; box-sizing: border-box;
    margin-bottom: 14px; padding: 11px 12px;
    border: 1px solid #d9d9d9; border-radius: 6px;
    font-size: 14px; font-family: inherit;
}
.lead-form input:focus, .lead-form textarea:focus { border-color: #0a5ed3; outline: none; }
.lead-submit {
    width: 100%; padding: 12px; margin-top: 4px;
    background: #0a5ed3; color: #fff; border: none; border-radius: 6px;
    font-size: 16px; font-weight: 500; cursor: pointer;
}
.lead-submit:hover { background: #0747a6; }
.lead-tip { margin: 10px 0 0; font-size: 13px; min-height: 16px; }
.lead-success { text-align: center; font-size: 18px; color: #2e7d32; padding: 30px 0; line-height: 1.6; }
@media (max-width: 900px) {
    .banner .slide .banner-title { font-size: 24px; margin-bottom: 10px; white-space: normal; }
    .banner .slide .banner-subtitle { font-size: 23px; }
    .banner .slide .banner-desc { font-size: 18px; }
    .banner .slide .banner-content { left: 50%; right: auto; transform: translate(-50%, -50%); width: 92%; padding: 16px 20px; max-width: none; text-align: center; }
    .banner .slide .banner-content-left { left: 5%; right: auto; transform: translateY(-50%); width: 90%; max-width: none; padding: 16px 20px; text-align: left; }
    .banner .slide .banner-metrics { grid-template-columns: repeat(2, 1fr); max-width: 380px; gap: 22px 28px; }
    .banner .slide .bm-num .num { font-size: 32px; }
    .banner .slide .bm-num .unit { font-size: 14px; }
    .banner .slide .bm-arrow-rect { width: 14px; height: 30px; }
    .banner .slide .bm-arrow-tri { border-left-width: 18px; border-right-width: 18px; border-top-width: 18px; }
    .banner .slide .bm-label { font-size: 13px; margin-top: 10px; }
}

/* 轮播指示器 */
.banner .dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.banner .dots .dot {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s;
}

.banner .dots .dot.active {
    background: #fff;
    width: 48px;
}

/* 轮播箭头 */
.banner .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    font-size: 20px;
    color: #fff;
}

.banner .arrow:hover { background: rgba(255,255,255,0.6); }
.banner .arrow.prev { left: 30px; }
.banner .arrow.next { right: 30px; }

/* ==========================================================================
   4. 通用板块标题
   ========================================================================== */
.section {
    padding: 70px 0;
}

.section.bg-light { background: var(--bg-light); }

.section-title {
    text-align: center;
    margin-bottom: 12px;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 45px;
}

/* 产品模块：压缩上下间距 */
.products-section {
    padding: 30px 0 40px;
}
.products-section .container {
    max-width: 1240px;
}
.products-section .section-subtitle {
    margin-bottom: 10px;
}
.products-section .carousel-slide {
    padding: 10px 0;
}
.products-section .product-card {
    max-width: none;
    width: 100%;
    height: 620px;
}

/* 产品 Tab 导航 */
.products-tabs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 24px;
    border-bottom: 1px solid #e8e8e8;
    overflow-x: auto;
    scrollbar-width: none;
}
.products-tabs::-webkit-scrollbar { display: none; }

.products-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease, background 0.25s ease;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.products-tab:hover {
    color: var(--primary);
    background: rgba(37, 76, 198, 0.04);
}

.products-tab.active {
    color: var(--primary);
    font-weight: 700;
}

.products-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .products-tab {
        font-size: 13px;
        padding: 12px 6px;
    }
}

/* ==========================================================================
   5. 工厂数字化解决方案全场景
   ========================================================================== */
.factory-section {
    background: linear-gradient(180deg, #f0f4ff 0%, #fff 100%);
}

.factory-flow {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.factory-flow img {
    width: 100%;
    display: block;
}

/* 节点标签：蓝底白字 + 白色边框 + 小箭头指向图内场景（方向由 .arrow-* 类控制） */
.factory-node {
    position: absolute;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #4f8df0 0%, #2a5fc7 100%);
    border: 1.5px solid #fff;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 6px 16px rgba(37, 76, 198, 0.32);
    min-width: 110px;
    max-width: 170px;
    text-align: left;
    z-index: 2;
    cursor: pointer;
    color: #fff;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}

.factory-node:hover {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 10px 22px rgba(37, 76, 198, 0.45);
    background: linear-gradient(135deg, #5a99f5 0%, #1d4cb3 100%);
}

/* 箭头（小三角）：用 border 拼三角形，四个方向变体 */
.factory-node .arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    pointer-events: none;
}

/* 默认/朝下（标签在图上方，箭头向下指） */
.factory-node.arrow-down .arrow {
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #2a5fc7;
    border-bottom: 0;
}

/* 朝上（标签在图下方，箭头向上指） */
.factory-node.arrow-up .arrow {
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #2a5fc7;
    border-top: 0;
}

/* 朝右（标签在图左侧，箭头向右指） */
.factory-node.arrow-right .arrow {
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #2a5fc7;
    border-right: 0;
}

/* 朝左（标签在图右侧，箭头向左指） */
.factory-node.arrow-left .arrow {
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #2a5fc7;
    border-left: 0;
}

.factory-node h4 {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.3;
}

.factory-node p {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

/* 移动端 fallback：标签过多会重叠，回到上下排版 */
@media (max-width: 768px) {
    .factory-flow {
        max-width: 100%;
    }
    .factory-node {
        position: static;
        transform: none;
        margin-bottom: 12px;
        max-width: 100%;
    }
    .factory-node:hover {
        transform: none;
        box-shadow: 0 6px 16px rgba(37, 76, 198, 0.32);
    }
    .factory-node .arrow {
        display: none;
    }
}

/* ==========================================================================
   6. 核心产品（轮播）
   ========================================================================== */
.carousel {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 60px;
}

/* 轮播箭头 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-size: 26px;
    color: var(--primary);
    transition: all 0.3s;
    user-select: none;
}

.carousel-arrow:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

/* 轮播指示器 */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background: var(--primary);
    width: 30px;
    border-radius: 5px;
}

/* 产品卡片（大图+文字覆盖） */
.product-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 1px solid var(--border-color);
    max-width: 860px;
    width: 100%;
    height: 400px;
    display: block;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.product-card .product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

/* 无图片时的渐变背景 */
.product-card .product-img .product-icon-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    background: linear-gradient(135deg, #1a2a5e, #254CC6);
}

/* 底部渐变遮罩，让文字可读 */
.product-card .product-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 80px 40px 50px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.product-card .product-overlay .product-category {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 4px 14px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.product-card .product-overlay h3 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.product-card .product-overlay p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 620px;
}

.product-card .product-overlay .product-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    width: fit-content;
    padding: 10px 24px;
    background: rgba(37, 76, 198, 0.8);
    border-radius: 22px;
    transition: all 0.3s;
}

.product-card .product-overlay .product-link:hover {
    gap: 8px;
    background: var(--primary);
}

/* ==========================================================================
   7. 行业解决方案（标题白底+下方整片铺背景图+6个透明卡片）
   ====================================================================== */
.solutions-section {
    background: #fff;
    color: var(--text-color);
    padding: 50px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 标题区跟随父级颜色（深色），不再被强制变白 */
.solutions-section .section-title h2 {
    color: var(--text-dark);
}

.solutions-section .section-subtitle {
    color: var(--text-light);
    margin-bottom: 30px;
}

/* 6 个卡片区域：整片铺一张背景图 + 半透明遮罩 */
.solutions-grid-6 {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 660px;
    position: relative;
    background: url("../images/solution-bg.png?v=20260824") center/cover no-repeat;
}

/* 整片背景上加一层柔和遮罩，让文字清晰 */
.solutions-grid-6::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 25, 60, 0.55),
        rgba(5, 15, 40, 0.65));
    z-index: 0;
    pointer-events: none;
}

/* 卡片完全透明，靠父容器那张铺满的背景图 */
.solution-item {
    flex: 1;
    height: 100%;
    min-height: 660px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease;
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

/* 悬停时整张卡加深蓝色覆盖 */
.solution-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 60, 180, 0.0), rgba(22, 60, 180, 0.85));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.solution-item:hover::before {
    opacity: 1;
}

.solution-item:last-child { border-right: none; }

.solution-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s ease;
}

.solution-item:hover .solution-inner {
    transform: translateY(-10px);
}

.solution-icon-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-icon-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

.solution-item h4 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.solution-item .solution-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 28px;
    letter-spacing: 1px;
    white-space: pre-line;
    min-height: 120px;
    max-height: 150px;
    overflow: hidden;
}

.solution-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    width: fit-content;
    padding: 10px 24px;
    background: #fff;
    border-radius: 22px;
    transition: all 0.35s ease;
    position: absolute;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%) translateY(14px);
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

/* 按钮里的箭头，悬停时整体按钮时箭头轻微右移，强化"可点入口"感 */
.solution-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-weight: 700;
}

.solution-item:hover .solution-btn-arrow {
    transform: translateX(4px);
}

/* 鼠标移到某张行业卡片时：按钮淡入并从下方抬升显示 */
.solution-item:hover .solution-btn {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.solution-btn:hover {
    gap: 8px;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

/* 按行业补偿 PNG 内部图案纵向偏移，让 6 个图标中心对齐同一水平线 */
.solution-item[href$="id=harness"] .solution-icon-wrap img { transform: translateY(9px); }
.solution-item[href$="id=battery"]  .solution-icon-wrap img { transform: translateY(-5px); }
.solution-item[href$="id=copper"]   .solution-icon-wrap img { transform: translateY(-5px); }
.solution-item[href$="id=fiber"]    .solution-icon-wrap img { transform: translateY(-2px); }

/* 解决方案列表页（solutions.html） */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.solution-card {
    text-align: center;
    background: #fff;
    border-radius: var(--radius);
    padding: 36px 24px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.solution-card .solution-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.solution-card .solution-icon svg { width: 36px; height: 36px; }

.solution-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.solution-card p {
    font-size: 13.5px;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 14px;
    white-space: pre-line;
    min-height: 90px;
}

.solution-card .solution-link {
    font-size: 14px;
    color: var(--primary);
    font-weight: 500;
}

/* ==========================================================================
   8. 客户案例
   ========================================================================== */
.cases-wrap {
    text-align: center;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 0 24px;
    box-sizing: border-box;
}

.cases-wrap img {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    background: #fff;
}

.case-stats {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 28px 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(37, 76, 198, 0.08);
}

.case-stat {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.case-stat:last-child {
    border-right: none;
}

.case-stat .num {
    font-size: 34px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.case-stat .label {
    font-size: 14px;
    color: var(--text-gray);
    margin-top: 6px;
}

/* ==========================================================================
   9. 资讯中心
   ========================================================================== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.news-card .news-img {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #e8eeff, #d4ddff);
    overflow: hidden;
}

.news-card .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card .news-body {
    padding: 20px;
}

.news-card .news-date {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.news-card .news-body h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card .news-body p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.news-card .news-link {
    font-size: 14px;
    color: var(--primary);
    font-weight: 500;
}

/* ==========================================================================
   10. CTA 行动号召区域
   ========================================================================== */
.cta-section {
    position: relative;
    margin-top: 20px;
    padding: 70px 0 70px;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
}

.cta-section .container {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.cta-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.cta-section p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 24px;
    text-align: center;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.cta-btn {
    padding: 12px 36px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s;
}

.cta-btn.primary {
    background: #fff;
    color: var(--primary);
}

.cta-btn.primary:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
}

.cta-btn.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.cta-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
}

/* ==========================================================================
   11. Footer 页脚
   ========================================================================== */
.footer {
    background: #2c2c34;
    color: #ccc;
    padding: 50px 0 0;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #3d3d45;
}

.footer-col {
    min-width: 160px;
}

.footer-col h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 13px;
    color: #999;
    transition: color 0.3s;
}

.footer-col ul li a:hover { color: #fff; }

.footer-col p {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
}

.footer-col p strong { color: #ccc; }

.footer-qr {
    display: flex;
    gap: 20px;
}

.footer-qr-item {
    text-align: center;
}

.footer-qr-item img {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.footer-qr-item span {
    font-size: 12px;
    color: #999;
}

.footer-bottom {
    text-align: center;
    padding: 18px 0;
    font-size: 13px;
    color: #666;
}

.footer-bottom a { color: #666; }
.footer-bottom a:hover { color: #999; }

/* ==========================================================================
   12. 右侧悬浮工具栏
   ========================================================================== */
.sidebar-tools {
    position: fixed;
    right: 16px;
    top: 72%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border-radius: var(--radius);
    overflow: visible;
    box-shadow: none;
}

.sidebar-tools .tool-item {
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    border-bottom: none;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sidebar-tools .tool-item:last-child { border-bottom: none; }
.sidebar-tools .tool-item:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.sidebar-tools .tool-item .icon {
    font-size: 20px;
    margin-bottom: 2px;
}
.sidebar-tools .tool-item .icon svg {
    width: 22px;
    height: 22px;
    fill: #0a2a5e;
    display: block;
}
.sidebar-tools .tool-item:hover .icon svg { fill: #fff; }

.sidebar-tools .tool-item .label {
    font-size: 11px;
}

/* 电话咨询弹出的气泡 */
.tel-popover {
    position: fixed;
    right: 96px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    padding: 18px 22px;
    min-width: 200px;
    color: #222;
    z-index: 950;
    font-size: 14px;
    line-height: 1.7;
    border: 1px solid #e6e8ef;
}

.tel-popover::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ffffff;
    filter: drop-shadow(1px 0 1px rgba(0,0,0,0.08));
}

/* 「下载体验」按钮 hover 弹出的二维码卡片 */
.tool-item-has-pop { position: relative; }
.dl-popover {
    position: absolute;
    right: 78px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 14px 14px 12px;
    width: 178px;
    text-align: center;
    display: none;
    z-index: 950;
}
.dl-popover::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ffffff;
    filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.08));
}
.dl-popover img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
}
.dl-popover .dl-tip {
    margin-top: 8px;
    font-size: 13px;
    color: #1f2a44;
    line-height: 1.45;
    font-weight: 600;
}
.tool-item-has-pop:hover .dl-popover { display: block; }

.tel-popover .tel-line {
    display: block;
    color: #222;
    text-decoration: none;
}

.tel-popover .tel-line .tel-label {
    color: #666;
    font-size: 13px;
    margin-right: 6px;
}

.tel-popover .tel-line .tel-num {
    color: var(--primary);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.tel-popover .tel-line + .tel-line {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e6e8ef;
}

/* ==========================================================================
   13. 弹窗表单
   ========================================================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-box {
    background: #fff;
    border-radius: var(--radius);
    width: 480px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-box .modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
}

.modal-box h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.form-group label .required { color: #e74c3c; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-dark);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
}

.form-group textarea {
    height: 80px;
    resize: vertical;
}

.form-submit {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.3s;
}

.form-submit:hover { background: var(--primary-dark); }

.form-success {
    display: none;
    text-align: center;
    padding: 30px 0;
}

.form-success.active { display: block; }

.form-success .check-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
}

.form-success h3 { margin-bottom: 8px; }
.form-success p { color: var(--text-gray); }

/* ==========================================================================
   14. 二级页面通用样式
   ========================================================================== */
.page-banner {
    margin-top: 0;
    height: 380px;
    background: linear-gradient(135deg, #0a1d54 0%, #1a3a9c 45%, #254cc6 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    padding: var(--nav-height) 0 0;
}
/* 工业意象装饰层：网格 + 光斑，模拟真实工业场景氛围 */
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 50% at 85% 25%, rgba(255,255,255,0.22), transparent 60%),
        radial-gradient(ellipse 50% 75% at 18% 85%, rgba(255,170,80,0.18), transparent 65%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'><defs><pattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'><path d='M 60 0 L 0 0 0 60' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.07'/></pattern></defs><rect width='1200' height='800' fill='url(%23grid)'/></svg>");
    pointer-events: none;
}
/* 左侧加深遮罩：让左对齐文案更清晰 */
.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,29,84,0.55) 0%, rgba(10,29,84,0.18) 55%, transparent 100%);
    pointer-events: none;
}
.page-banner > .banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.page-banner h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.28);
}

.page-banner p {
    font-size: 16px;
    opacity: 0.92;
    margin-bottom: 30px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* 立即咨询按钮（参考首页 .cta-btn 胶囊形态 + 用户截图配色：蓝渐变 + 白字 + 箭头） */
.page-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #254cc6 0%, #009afe 100%);
    box-shadow: 0 8px 24px rgba(37, 76, 198, 0.45);
    transition: all 0.3s;
    text-decoration: none;
    cursor: pointer;
}
.page-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37, 76, 198, 0.55);
    color: #fff;
}

.breadcrumb {
    max-width: var(--max-width);
    margin: 20px auto;
    padding: 0 20px;
    font-size: 13px;
    color: var(--text-light);
}

.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 8px; }

/* 列表页样式 */
.list-page {
    padding: 30px 0 60px;
}

.list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
}

/* 详情页样式 */
.detail-page {
    padding: 20px 0 40px;
}

.detail-page .detail-content {
    max-width: 1180px;
    margin: 0 auto;
}

.detail-page .detail-content h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.detail-page .detail-content .meta {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.detail-page .detail-content h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 28px 0 14px;
}

.detail-page .detail-content p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 14px;
}

.detail-page .detail-content img {
    margin: 20px auto;
    border-radius: var(--radius);
}

.detail-page .detail-content ul {
    margin: 14px 0 14px 20px;
}

.detail-page .detail-content ul li {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.8;
    list-style: disc;
}

/* 特性列表 */
.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.feature-item {
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 24px;
    transition: all 0.3s;
}

.feature-item:hover {
    background: #fff;
    box-shadow: var(--shadow-hover);
}

.feature-item .feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 14px;
}

.feature-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.feature-item p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* ==========================================================================
   14.5 行业详情页新版块（线缆等）
   ========================================================================== */

/* ===== 小节标题（居中 · 工业风） ===== */
/* 全局 sd-sec 标题：所有详情类页面（.detail-content / .detail-page）通用 */
.sd-sec {
    text-align: center;
    margin: 20px 0 20px;
    position: relative;
}
.sd-eyebrow {
    display: none;
}
.sd-sec h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 2px;
    display: inline-block;
}
.sd-sec .sd-sec-sub {
    font-size: 18px;
    color: var(--text-light);
    margin: 10px auto 0;
    max-width: 720px;
    line-height: 1.7;
}

/* 核心痛点：左图标右文字（参考行业痛点版式，3×2） */
.sd-pain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 8px 0 10px;
}
.sd-pain-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--primary);
    border-radius: 12px;
    padding: 22px 22px 24px;
    transition: box-shadow 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
}
.sd-pain-item::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(37, 76, 198, 0.04), transparent 70%);
    pointer-events: none;
}
.sd-pain-item:hover {
    box-shadow: 0 12px 28px rgba(37, 76, 198, 0.16);
    transform: translateY(-3px);
}
.sd-pain-icon {
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eaf0ff, #d6e2ff);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(37, 76, 198, 0.10);
    position: relative;
    z-index: 1;
}
.sd-pain-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 16px;
    border: 1px dashed rgba(37, 76, 198, 0.18);
    pointer-events: none;
}
.sd-pain-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}
.sd-pain-body {
    flex: 1;
    padding-top: 2px;
}
.sd-pain-body h4 {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 8px;
}
.sd-pain-body p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.7;
}

/* 核心技术优势：极浅天蓝径向渐变块全面铺满包住标题 + 4 卡 2×2 */
.sd-caps {
    position: relative;
    width: 100vw;
    margin: 28px calc(50% - 50vw) 8px;
    padding: 46px 40px 50px;
    border-radius: 0;
    /* 天蓝调 + 较浅 + 向两侧铺满视口 + 顶部柔光 */
    background:
        radial-gradient(ellipse 90% 28% at 50% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(ellipse 108% 90% at 50% 50%, rgba(110, 168, 230, 0.16) 0%, rgba(110, 168, 230, 0.11) 30%, rgba(110, 168, 230, 0.07) 60%, rgba(110, 168, 230, 0.03) 85%, rgba(110, 168, 230, 0) 100%);
}
/* 段落标题（包在渐变块内，居中） */
.sd-caps-head {
    text-align: center;
    max-width: 1180px;
    margin: 0 auto 30px;
}
.sd-caps-head h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 2px;
    display: inline-block;
}
.sd-caps-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* 十字交点：白色圆形节点 + 蓝色加号（强化「十字加号」聚合感） */
.sd-caps-inner::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #ffffff;
    background-image:
        linear-gradient(#1A57C8, #1A57C8),
        linear-gradient(#1A57C8, #1A57C8);
    background-size: 15px 2px, 2px 15px;
    background-position: center center, center center;
    background-repeat: no-repeat;
    border: 1px solid #D9E2F1;
    box-shadow: 0 2px 8px rgba(16, 50, 120, 0.10);
    pointer-events: none;
    z-index: 4;
}

/* 单卡：白底圆角，完整展示文字（不裁断） + 2 行自然展示 */
.sd-cap {
    position: relative;
    min-height: 138px;
    padding: 24px 28px 26px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: none;
    box-shadow: 0 4px 18px rgba(20, 50, 110, 0.06);
    transition: box-shadow 0.3s, transform 0.3s;
}

.sd-cap:hover {
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 50, 110, 0.12);
    transform: translateY(-2px);
}

.sd-cap h4 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: #0F2B57;
    text-shadow: none;
    line-height: 1.35;
}

.sd-cap:hover h4 { color: #1A57C8; }
.sd-cap p {
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: #5B6C86;
    line-height: 1.72;
    margin: 0;
    overflow: visible;
}

/* 移动端回退：1 列堆叠 */
@media (max-width: 768px) {
    .sd-caps {
        padding: 30px 16px 34px;
        max-width: 100%;
    }
    .sd-caps-head {
        margin: 0 0 22px;
    }
    .sd-caps-head h2 { font-size: 24px; }
    .sd-caps-inner {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 14px;
        max-width: 100%;
    }
    /* 单列时中心加号无意义，隐藏 */
    .sd-caps-inner::after { display: none; }
    .sd-cap {
        min-height: 0;
        padding: 22px 22px 24px;
    }
    .sd-cap h4 { font-size: 16px; }
}

/* 典型应用场景：横向工艺流程图（圆圈 SVG 图标 + 箭头连接） */
.sd-scenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 14px 0;
    position: relative;
}
.sd-scene {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff, #f7faff),
        repeating-linear-gradient(45deg, rgba(37, 76, 198, 0.04) 0 4px, transparent 4px 8px);
    border: 1px solid rgba(37, 76, 198, 0.18);
    border-radius: 14px;
    padding: 28px 22px 22px;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
    overflow: hidden;
}
.sd-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 60%, rgba(37, 76, 198, 0.04) 100%);
    pointer-events: none;
}
.sd-scene:hover {
    box-shadow: 0 14px 30px rgba(37, 76, 198, 0.18);
    transform: translateY(-4px);
    border-color: var(--primary);
}
.sd-scene-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffffff, #dde7ff),
        linear-gradient(135deg, var(--primary), #1c4f8a);
    background-blend-mode: overlay;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px var(--primary),
        0 8px 18px rgba(37, 76, 198, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    position: relative;
    z-index: 1;
}
.sd-scene-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}
.sd-scene-no {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
    background: #eaf0ff;
    border-radius: 10px;
    padding: 3px 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.sd-scene h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 700;
}
.sd-scene p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.7;
    padding: 0 4px;
}
/* 箭头连接线（每张卡右侧伸出，指向下张；最后一张无） */
.sd-scene-arrow {
    position: absolute;
    right: -20px;
    top: 56px;
    width: 16px;
    height: 2px;
    background: var(--primary);
    opacity: 0.6;
    z-index: 2;
}
.sd-scene-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--primary);
}

/* 解决方案场景：4 个 Tab 切换，每 Tab 一张背景图 + 场景概述 + 2 个功能点 */
.sd-stabs-wrap {
    margin: 14px 0 6px;
}
.sd-stabs {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
    gap: 4px;
}
.sd-stab {
    flex: 1 1 0;
    padding: 14px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-gray);
    cursor: pointer;
    position: relative;
    transition: color 0.25s;
    user-select: none;
    white-space: nowrap;
}
.sd-stab:hover {
    color: var(--primary);
}
.sd-stab.active {
    color: var(--primary);
    font-weight: 700;
}
.sd-stab.active::after {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: -1px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.sd-spanels {
    position: relative;
}
.sd-spanel {
    display: none;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 340px;
    background-color: #eef3ff;
    background-image: linear-gradient(135deg, #eaf0ff 0%, #f4f8ff 55%, #ffffff 100%);
    box-shadow: 0 10px 28px rgba(37, 76, 198, 0.10);
}
.sd-spanel.active {
    display: block;
}
/* 背景图虚化层（::before）+ 白→透蒙版（::after），文字层（.sd-sp-content）最上 */
.sd-spanel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(7px);
    transform: scale(1.06);
    z-index: 0;
}
.sd-spanel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 38%, rgba(255,255,255,0.35) 68%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.sd-sp-content {
    position: relative;
    z-index: 2;
    max-width: 62%;
    padding: 42px 40px 44px;
}
.sd-sp-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 14px;
    line-height: 1.4;
}
.sd-sp-overview {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    margin: 0 0 32px;
}
.sd-sp-sols {
    display: grid;
    grid-template-columns: 180px 1fr;
    row-gap: 18px;
    margin: 40px 0 0;
}
.sd-sp-sol {
    display: contents;
}
.sd-sp-sol-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 0 18px 0 0;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}
.sd-sp-sol-d {
    font-size: 14px;
    color: var(--text-gray, #6b7280);
    padding: 0 0 0 18px;
    line-height: 1.75;
}

/* 应用效果价值：白底卡片 + 数字 / 标题 / 描述 三段式 + 6 列一排 */
.sd-value {
    position: relative;
    /* 白色通栏铺满整屏(突破 1180px 容器)，但 6 卡内缩居中、整体更紧凑 */
    width: 100vw;
    margin: 14px calc(50% - 50vw);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: #ffffff;
    border-radius: 0;
    padding: 30px clamp(28px, 13vw, 180px);
    box-shadow: 0 6px 24px rgba(15, 50, 110, 0.06);
    border-top: 1px solid #eaf0fa;
    border-bottom: 1px solid #eaf0fa;
}
.sd-val {
    text-align: center;
    padding: 4px 10px;
    border-right: 1px solid #eaf0fa;
}
.sd-val:last-child {
    border-right: none;
}
.sd-val-metric {
    font-size: 15px;
    font-weight: 800;
    color: #1a3a6e;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    word-break: break-all;
}
.sd-val-delta {
    font-size: 26px;
    font-weight: 700;
    color: #2563eb;
    line-height: 1.4;
    margin-bottom: 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.sd-val-desc {
    display: none;
    font-size: 12.5px;
    color: #5a6a85;
    line-height: 1.6;
}
/* 价值卡方向箭头：提升类↑ / 缩短·减少类↓，绿色表示正向改善 */
.sd-arrow {
    font-weight: 700;
    margin-left: 4px;
    font-size: 0.82em;
}
.sd-arrow.up,
.sd-arrow.down {
    color: #6b7280;
}
@media (max-width: 1100px) {
    .sd-value { grid-template-columns: repeat(3, 1fr); }
    .sd-val { border-bottom: 1px solid #eaf0fa; }
    .sd-val:nth-last-child(-n+3) { border-bottom: none; }
}

/* 客户案例：单案例 左图右文 */
.sd-cases {
    margin: 8px 0;
}
.sd-case {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.sd-case:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
}
.sd-case-img {
    min-height: 300px;
    background: url('/images/khal.png') center/cover no-repeat;
}
.sd-case-body {
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sd-case-tag {
    align-self: flex-start;
    background: #eaf0ff;
    color: var(--primary);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}
.sd-case-body h4 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 14px;
    font-weight: 700;
}
.sd-case-body p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.85;
}

/* 相关产品：卡片式 图 + 文 */
.sd-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 300px));
    justify-content: center;
    gap: 20px;
    margin: 8px 0 4px;
}
/* 产品详情页关联产品：一排不换行 */
.sd-products.nowrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.sd-products.nowrap .sd-product {
    flex: 1 1 0;
    min-width: 0;
}
.sd-product {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.3s, transform 0.3s;
}
.sd-product:hover {
    box-shadow: 0 12px 30px rgba(37, 76, 198, 0.14);
    transform: translateY(-4px);
}
.sd-product-img {
    height: 170px;
    background: linear-gradient(135deg, #e8ecf7, #dfe6f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sd-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sd-product-body {
    padding: 20px 18px 24px;
    text-align: center;
}
.sd-product-body h4 {
    font-size: 17px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 700;
}
.sd-product-body p {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
}

/* ==========================================================================
   15. 滚动动画
   ========================================================================== */
/* 滚动入场：更精致的缓动曲线，避免生硬 */
.scroll-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 首屏 hero 文案顺序入场（由 animation.js 加 .hero-in 触发） */
.banner-content > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.banner-content > *.hero-in {
    opacity: 1;
    transform: translateY(0);
}

/* 卡片微交互：悬浮上浮 + 阴影增强（科技感层次） */
.product-card, .solution-item, .news-card, .list-item,
.feature-card, .case-card, .contact-item, .service-item,
.download-card, .adv-card, .sd-cap {
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.38s ease;
}
.product-card:hover, .solution-item:hover, .news-card:hover,
.list-item:hover, .feature-card:hover, .case-card:hover,
.contact-item:hover, .service-item:hover, .download-card:hover,
.adv-card:hover, .sd-cap:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(20, 50, 110, 0.16);
}

/* 按钮扫光（科技感高光带划过） */
.btn, .banner-btn, .news-link, .lead-btn, .submit-btn {
    position: relative;
    overflow: hidden;
}
.btn::after, .banner-btn::after, .news-link::after,
.lead-btn::after, .submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    pointer-events: none;
}
.btn:hover::after, .banner-btn:hover::after, .news-link:hover::after,
.lead-btn:hover::after, .submit-btn:hover::after {
    left: 140%;
}

/* 导航链接下划线从中间向两侧展开:默认隐藏(避免 width:0 渲染为小圆点),hover/当前页才显示 */
.nav-item > a {
    position: relative;
}
.nav-item > a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -6px;
    height: 2px;
    background: var(--primary, #1A57C8);
    border-radius: 2px;
    opacity: 0;
    transition: left 0.3s ease, right 0.3s ease, opacity 0.2s ease;
}
.nav-item > a:hover::after,
.nav-item.has-dropdown:hover > a::after,
.nav-item.active > a::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* 尊重用户"减弱动效"系统偏好 */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .banner-content > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   16. 响应式适配
   ========================================================================== */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .list-grid { grid-template-columns: repeat(2, 1fr); }
    .product-card { max-width: 500px; height: 320px; }
    .solutions-grid-6 { flex-wrap: wrap; flex: none; min-height: 0; }
    .solutions-grid-6 .solution-item { flex: 0 0 33.33%; min-height: 400px; }
}

@media (max-width: 768px) {
    .navbar .nav-menu {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 10px 0;
        box-shadow: var(--shadow-hover);
    }

    .navbar .nav-menu.open { display: flex; }

    .navbar .nav-item > a {
        width: 100%;
        padding: 12px 24px;
        height: auto;
        line-height: 1.6;
        border-bottom: 1px solid var(--border-color);
    }

    .navbar .dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .navbar .nav-item.open .dropdown { display: block; }

    .navbar .nav-toggle { display: flex; }

    .banner .slide { height: 300px; }
    .banner .arrow { display: none; }

    .section { padding: 40px 0; }
    .section-title h2 { font-size: 24px; }
    .section-subtitle { font-size: 15px; }

    .carousel-slide { padding: 10px 50px; }
    .carousel-arrow { width: 36px; height: 36px; font-size: 20px; }
    .product-card .product-overlay { padding: 40px 20px 20px; }
    .product-card .product-overlay h3 { font-size: 18px; }
    .solution-card { padding: 28px 20px; }

    .news-grid,
    .list-grid { grid-template-columns: 1fr; }

    .solutions-grid-6 .solution-item { flex: 0 0 50%; min-height: 380px; }

    .feature-list { grid-template-columns: 1fr; }

    .sd-pain,
    .sd-scenes,
    .sd-products { grid-template-columns: 1fr; }
    .sd-value { grid-template-columns: repeat(2, 1fr); }
    .sd-val { padding: 4px 12px; border-right: none; border-bottom: 1px solid #eaf0fa; }
    .sd-val:nth-child(odd) { border-right: 1px solid #eaf0fa; }
    .sd-val:last-child,
    .sd-val:nth-last-child(2):nth-child(odd) { border-bottom: none; }
    .sd-val-metric { font-size: 30px; }
    .sd-case { grid-template-columns: 1fr; }
    .sd-case-img { min-height: 200px; }
    .sd-scenes { grid-template-columns: 1fr; }
    .sd-scene-arrow { display: none; }
    .sd-sblocks { grid-template-columns: 1fr; }
    .sd-sblock-feats { grid-template-columns: 1fr; }
    .sd-stabs { flex-wrap: wrap; }
    .sd-stab { flex: 0 0 50%; padding: 12px 8px; font-size: 14px; }
    .sd-stab.active::after { left: 20%; right: 20%; }
    .sd-spanel { min-height: auto; }
    .sd-spanel::after { background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%); }
    .sd-sp-content { max-width: 100%; padding: 40px 18px 30px; }
    .sd-sp-sols { grid-template-columns: 1fr; row-gap: 14px; }
    .sd-sp-sol-t { padding: 0 0 2px; }
    .sd-sp-sol-d { padding: 0; }

    .case-stats {
        flex-wrap: wrap;
        gap: 16px;
        padding: 22px 16px;
    }
    .case-stat {
        flex: 1 1 40%;
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        padding-bottom: 16px;
    }
    .case-stat:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .footer-main { flex-direction: column; }
    .footer-qr { flex-wrap: wrap; }

    .sidebar-tools { display: none; }

    .cta-section h2 { font-size: 22px; }
    .cta-buttons { flex-direction: column; align-items: center; }

    .page-banner { height: 180px; }
    .page-banner h1 { font-size: 26px; }

    .modal-box { padding: 20px; }
}

/* 服务支持页：左侧分类导航 + 右侧列表 */
.service-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    margin-top: 6px;
}
.service-side {
    width: 230px;
    flex: none;
    position: sticky;
    top: calc(var(--nav-height, 64px) + 16px);
}
.service-side-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 14px;
    padding-left: 6px;
}
.service-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(37, 76, 198, 0.12);
    border-radius: 14px;
    overflow: hidden;
}
.service-nav li {
    padding: 14px 18px;
    font-size: 15px;
    color: var(--text-gray);
    cursor: pointer;
    border-bottom: 1px solid rgba(37, 76, 198, 0.08);
    transition: background 0.2s, color 0.2s;
}
.service-nav li:last-child { border-bottom: none; }
.service-nav li:hover { background: #f3f7ff; color: var(--primary); }
.service-nav li.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.service-main { flex: 1; min-width: 0; }
.service-panel { display: none; }
.service-panel.active { display: block; }
.service-panel-head { margin-bottom: 22px; }
.service-panel-head h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
}
.service-panel-head p {
    color: var(--text-gray);
    margin: 0;
    line-height: 1.7;
}
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.service-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(37, 76, 198, 0.10);
    border-radius: 14px;
    margin-bottom: 14px;
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.service-item:hover {
    box-shadow: 0 10px 26px rgba(37, 76, 198, 0.14);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.service-thumb {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #1c4f8a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.service-info { flex: 1; min-width: 0; }
.service-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
}
.service-info p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.65;
    margin: 0 0 8px;
}
.service-meta {
    font-size: 12px;
    color: #9aa3b2;
}
.service-act {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}
.service-act:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .service-layout { flex-direction: column; gap: 18px; }
    .service-side { width: 100%; position: static; }
    .service-nav { display: flex; flex-wrap: wrap; }
    .service-nav li {
        flex: 1;
        min-width: 110px;
        border-bottom: none;
        border-right: 1px solid rgba(37, 76, 198, 0.08);
        text-align: center;
    }
    .service-item { flex-wrap: wrap; }
    .service-act { width: 100%; text-align: right; }
}

/* 服务支持页专属 */
.svc-page { padding: 28px 0 0; }
.svc-pain { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 12px; }
.svc-pain-item { background: #fff; border: 1px solid rgba(37,76,198,0.12); border-left: 4px solid var(--primary); border-radius: 10px; padding: 22px 24px; transition: all 0.3s; }
.svc-pain-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,76,198,0.12); }
.svc-pain-item h4 { font-size: 17px; color: var(--text-dark); margin: 0 0 8px; font-weight: 700; }
.svc-pain-item p { font-size: 14px; color: var(--text-gray); margin: 0; line-height: 1.7; }
.svc-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 14px; }
.svc-feat { background: linear-gradient(180deg, #fff, #f7faff); border: 1px solid rgba(37,76,198,0.14); border-radius: 14px; padding: 28px; transition: all 0.3s; position: relative; overflow: hidden; }
.svc-feat::before { content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), #1c4f8a); }
.svc-feat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(37,76,198,0.16); border-color: var(--primary); }
.svc-feat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.svc-feat-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #1c4f8a); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(37,76,198,0.25); }
.svc-feat-icon svg { width: 24px; height: 24px; }
.svc-feat-no { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--primary); background: rgba(37,76,198,0.12); border-radius: 8px; padding: 2px 10px; margin-bottom: 6px; }
.svc-feat h3 { font-size: 19px; color: var(--text-dark); margin: 0 0 4px; font-weight: 700; }
.svc-feat-sub { font-size: 13px; color: var(--text-gray); margin: 0; }
.svc-feat-desc { font-size: 14px; color: var(--text-gray); line-height: 1.75; margin: 10px 0 0; }
.svc-feat-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-feat-tag { font-size: 12px; color: var(--primary); background: rgba(37,76,198,0.08); border-radius: 14px; padding: 4px 12px; }
.svc-stats { background: transparent; color: var(--text-dark); border-radius: 0; padding: 48px 40px; margin-top: 14px; }
.svc-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.svc-stat-num { font-size: 42px; font-weight: 800; line-height: 1; margin-bottom: 8px; color: var(--primary); }
.svc-stat-label { font-size: 14px; opacity: 0.9; }
.svc-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.svc-case { background: #fff; border: 1px solid rgba(37,76,198,0.10); border-radius: 12px; padding: 24px; transition: all 0.3s; }
.svc-case:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37,76,198,0.12); }
.svc-case-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(37,76,198,0.10); border-radius: 6px; padding: 2px 10px; margin-bottom: 10px; }
.svc-case h4 { font-size: 16px; color: var(--text-dark); margin: 0 0 6px; font-weight: 700; }
.svc-case p { font-size: 13px; color: var(--text-gray); line-height: 1.7; margin: 0; }
@media (max-width: 900px) {
    .svc-pain, .svc-feat-grid { grid-template-columns: 1fr; }
    .svc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .svc-cases { grid-template-columns: 1fr; }
}

/* ========== Project Service System (5 flat icons) ========== */
.svc-sys-sec { margin-top: 0; }
.svc-sys-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 22px; }
.svc-sys-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e8eef9; border-radius: 14px;
    padding: 28px 18px; text-align: center;
    transition: all .25s ease;
}
.svc-sys-item:hover {
    border-color: var(--primary); box-shadow: 0 10px 24px rgba(37,76,198,0.12);
    transform: translateY(-3px);
}
.svc-sys-ico {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: linear-gradient(180deg, #f4f8ff, #eaf1ff);
    margin-bottom: 14px;
}
.svc-sys-ico svg { width: 32px; height: 32px; }
.svc-sys-name { font-size: 16px; font-weight: 600; color: var(--text-dark); letter-spacing: 1px; }

@media (max-width: 980px) { .svc-sys-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .svc-sys-grid { grid-template-columns: repeat(2, 1fr); } }

/* service 页段落节奏对齐解决方案详情页（强制覆盖） */
.detail-page.svc-page .sd-sec { margin: 20px 0 20px; }
.detail-page.svc-page .sd-sec h2 { margin-bottom: 12px; }
.detail-page.svc-page .svc-sys-grid { margin-top: 18px; }
.detail-page.svc-page .svc-stats { margin-top: 14px; margin-bottom: 0; }
.detail-page.svc-page .svc-cases { margin-top: 14px; }

/* ========== Service Process Flow (U-shape, 8 steps) ========== */
.svc-flow {
    position: relative;
    margin-top: 22px;
    padding: 24px 22px;
    border-radius: 0;
    background-image: url('../images/flow-bg.png');
    background-size: cover;
    background-position: center;
}
.svc-flow-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 220px 30px 220px 30px 220px 30px 220px;
    grid-template-rows: auto auto;
    row-gap: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.svc-flow-row:last-child { margin-bottom: 0; }
.svc-flow-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease;
    min-height: 0;
}
.svc-flow-card:hover {
    box-shadow: 0 8px 18px rgba(37, 76, 198, 0.18);
    transform: translateY(-3px);
}
.svc-flow-ico {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}
.svc-flow-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: center;
}
.svc-flow-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
}
.svc-flow-desc {
    font-size: 12px;
    color: var(--text-gray, #6b7280);
    line-height: 1.5;
}
.svc-flow-arrow { font-size: 0; line-height: 0; width: 0; height: 0; }
.svc-flow-arrow.right {
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #7BA9F8;
    justify-self: center;
}
.svc-flow-arrow.down {
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #7BA9F8 transparent transparent transparent;
    justify-self: center;
}

@media (max-width: 900px) {
    .svc-flow { padding: 18px 14px; }
    .svc-flow-row { grid-template-columns: 190px 24px 190px 24px 190px 24px 190px; justify-content: center; row-gap: 12px; }
    .svc-flow-arrow.right { border-width: 8px 0 8px 12px; }
    .svc-flow-name { font-size: 13px; }
}
@media (max-width: 720px) {
    .svc-flow-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 0; max-width: 360px; margin-left: auto; margin-right: auto; }
    .svc-flow-arrow { display: none; }
    .svc-flow-card { padding: 12px 14px; min-height: 0; gap: 8px; }
    .svc-flow-ico { width: 60px; height: 60px; font-size: 12px; padding: 0 5px; }
    .svc-flow-name { font-size: 13px; }
    .svc-flow-desc { font-size: 11.5px; }
}

/* 卡片固定 220px 并居中；下箭头落到最右卡片正下方 */
.svc-flow-row.top .svc-flow-arrow.down { grid-column: 7; grid-row: 2; }

/* left 箭头（与 right 镜像，浅蓝色） */
.svc-flow-arrow.left {
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #7BA9F8 transparent transparent;
    justify-self: center;
}

/* ========== Service Response (保内/保外/故障响应/定期诊断) ========== */
.svc-resp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 22px auto 0;
    align-items: start;
}
.svc-resp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
}
.svc-resp-ico {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.svc-resp-ico img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.svc-resp-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.svc-resp-list {
    list-style: none;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 220px;
}
.svc-resp-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.65;
}
.svc-resp-list li:last-child { margin-bottom: 0; }
.svc-resp-list li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    top: 1px;
    color: #254CC6;
    font-size: 12px;
}
.svc-resp-list li .svc-num { color: #254CC6; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
    .svc-resp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
}
@media (max-width: 560px) {
    .svc-resp-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   关于镭立 - 公司介绍页（参考旧站 Service_List / About_detail 重写）
   ========================================================================== */
.about-block { padding: 24px 0; }
.about-block:first-of-type { padding-top: 20px; }
.about-block.alt { background: var(--bg-light); }

.sec-head { text-align: center; margin: 20px 0 20px; }
.sec-head h2 { font-size: 32px; font-weight: 700; color: var(--text-dark); letter-spacing: 2px; margin: 0; display: inline-block; }
.sec-head h2::after { content: ''; display: block; width: 48px; height: 3px; background: var(--primary); margin: 14px auto 0; border-radius: 2px; }
.sec-head .en { display: block; font-size: 13px; letter-spacing: 3px; color: var(--text-gray); margin-top: 10px; text-transform: uppercase; }

/* 公司介绍图文 */
.about-intro { display: grid; grid-template-columns: 1.2fr 1.3fr; gap: 48px; align-items: center; }
.about-intro p { color: var(--text-gray); line-height: 2; margin: 0 0 16px; font-size: 15px; }
.about-intro p:last-child { margin-bottom: 0; }
.about-intro-media { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); border-radius: 0; min-height: 460px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.about-intro-media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; }

/* 使命愿景价值观（横向 3 列 + 背景图） */
.mvv-block { padding: 80px 0; background-color: #eaf0fb; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; border-bottom: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.mvv-block::before { content: ''; position: absolute; inset: 0; background: rgba(247,248,252,0.55); pointer-events: none; }
.mvv-block > .container { position: relative; z-index: 1; }
.mvv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; }
.mvv-card { background: transparent; border: none; border-radius: 0; padding: 12px 18px; display: flex; align-items: center; gap: 22px; text-align: left; transition: none; }
.mvv-card:hover { transform: none; box-shadow: none; }
.mvv-icon { width: 64px; height: 64px; min-width: 64px; border-radius: 50%; background: rgba(37,76,198,0.10); display: flex; align-items: center; justify-content: center; object-fit: contain; flex-shrink: 0; box-shadow: 0 6px 16px rgba(37,76,198,0.18); }
.mvv-text h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: var(--text-dark); }
.mvv-text p { color: var(--text-gray); line-height: 1.8; margin: 0; font-size: 14px; white-space: nowrap; }

/* 发展历程时间轴 - 横向 zigzag（一条时间线 + 上 4 下 3 错位） */
/* 用负边距撑出 .container 限制，让网格可用宽度 = 视口宽度，确保 7 卡居中显示完全 */
.tl-history { display: grid; grid-template-columns: repeat(7, 200px); grid-template-rows: 120px 60px 120px; gap: 0 10px; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 20px; box-sizing: border-box; }
.tl-history::before { content:''; grid-row: 2; grid-column: 1 / -1; align-self: center; height:2px; background:#e3e8f2; z-index:1; }
.tl-item { position: relative; min-width: 0; display: flex; flex-direction: column; }
/* 显式指定每个 item 的列：上排 4 卡占 col 1/3/5/7，下排 3 卡占 col 2/4/6，错位 zigzag */
.tl-item:nth-of-type(1) { grid-column: 1; }   /* 2011 up */
.tl-item:nth-of-type(2) { grid-column: 2; }   /* 2012 down */
.tl-item:nth-of-type(3) { grid-column: 3; }   /* 2014 up */
.tl-item:nth-of-type(4) { grid-column: 4; }   /* 2016 down */
.tl-item:nth-of-type(5) { grid-column: 5; }   /* 2017 up */
.tl-item:nth-of-type(6) { grid-column: 6; }   /* 2018 down */
.tl-item:nth-of-type(7) { grid-column: 7; }   /* 2020 up */
/* up 贴 row1 底（贴轴线上沿），down 贴 row3 顶（贴轴线下沿） */
.tl-item.up   { grid-row: 1; justify-content: flex-end; }
.tl-item.down { grid-row: 3; justify-content: flex-start; }
.tl-line { display: none; }
.tl-card { width:100%; max-width:200px; height:120px; margin:0 auto; box-sizing:border-box; background:#fff; border:1px solid #eef1f7; border-radius:10px; padding:18px 16px; box-shadow:0 4px 14px rgba(20,30,60,0.05); transition:all .3s ease; cursor:pointer; position:relative; display:flex; flex-direction:column; justify-content:center; }
.tl-card:hover { background:#3275F0; border-color:#3275F0; box-shadow:0 10px 24px rgba(50,117,240,0.28); }
.tl-card:hover .tl-year,
.tl-card:hover .tl-title,
.tl-card:hover .tl-desc { color:#fff; }
/* 卡片指向轴线的小三角：默认白色（与白底卡片融合隐形），hover 随卡片一起变 #3275F0（与卡片蓝一致） */
.tl-card::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border-style:solid; transition:border-color .3s ease; z-index:3; }
.tl-item.up   .tl-card::after { bottom:-15px; border-width:15px 10px 0 10px; border-color:#fff transparent transparent transparent; }
.tl-item.down .tl-card::after { top:-15px;    border-width:0 10px 15px 10px; border-color:transparent transparent #fff transparent; }
/* hover：卡片变蓝，三角同步变 #3275F0（按 up/down 拆分并提升特异性至 (0,4,1) 高于基础 (0,3,1)） */
.tl-item.up   .tl-card:hover::after { border-top-color:#3275F0; }
.tl-item.down .tl-card:hover::after { border-bottom-color:#3275F0; }
.tl-item:hover .tl-dot { background:#3275F0; box-shadow:0 0 0 3px rgba(50,117,240,0.30); }
/* dot 真正独立漂浮在 row 2 水平轴线中央：用 margin-left 水平居中、top 精确落位（避免 translateY 偏移 8px 导致偏轴） */
.tl-dot { position:absolute; left:50%; margin-left:-8px; width:16px; height:16px; border-radius:50%; background:#bfc8d8; border:3px solid #fff; box-shadow:0 0 0 3px rgba(120,130,150,0.18); z-index:5; }
.tl-item.up   .tl-dot { top: calc(100% + 22px); }  /* 中心 = row1 底 + 30px = row2 中央（轴线） */
.tl-item.down .tl-dot { top: -38px; }              /* 中心 = row3 顶 - 30px = row2 中央（轴线） */
.tl-year { font-size:18px; font-weight:800; color:var(--text-dark); transition:color .3s; }
.tl-title { font-size:14px; font-weight:800; color:var(--primary); margin-top:6px; transition:color .3s; }
.tl-desc { font-size:13px; color:var(--text-gray); margin-top:8px; line-height:1.6; transition:color .3s; }

/* 业务覆盖 */
.coverage { background: #fff; border: 1px solid #eef1f7; border-radius: 14px; padding: 40px; text-align: center; }
.coverage-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.coverage-tag { background: var(--bg-light); border: 1px solid rgba(37,76,198,0.12); color: var(--text-dark); border-radius: 30px; padding: 10px 24px; font-size: 15px; font-weight: 600; }

/* 业务覆盖 - 标题居中在背景图外，背景图块全宽放左对齐文案（图手动上传 images/about-coverage-bg.png） */
.about-coverage-inner { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 320px; background-image: url('/images/about-coverage-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #0e2a5a; display: flex; align-items: center; padding: 40px 0; }
/* 顶部暗化叠层：左 18% 暗 → 右透明（保白字可读，背景图透出） */
.about-coverage-inner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,28,72,0.18) 0%, rgba(10,40,100,0.08) 45%, rgba(10,40,100,0) 100%); z-index: 1; }
.about-coverage-text { position: relative; z-index: 3; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; text-align: left; color: #fff; }
.about-coverage-sub { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.96); margin: 0 0 16px; }
.about-coverage-tags { font-size: 14px; color: rgba(255,255,255,0.96); line-height: 2; letter-spacing: 0.5px; }

/* 荣誉资质 */
.honors { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.honor-list { list-style: none; padding: 0; margin: 0; }
.honor-list li { padding: 8px 0 8px 20px; color: var(--text-dark); font-size: 15px; position: relative; line-height: 1.7; }
.honor-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 0; height: 0; border-left: 7px solid var(--primary); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.honor-list li.honor-pending { color: var(--text-light); font-style: italic; }
.honor-list li.honor-pending::before { content: none; }
.honor-image img { width: 100%; max-width: 540px; display: block; margin: 0 auto; border-radius: 8px; }

/* 合作伙伴 / 技术前沿 logo 墙 */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.logo-wall.cols-5 { grid-template-columns: repeat(5, 1fr); }
.logo-wall.cols-3 { grid-template-columns: repeat(3, 1fr); }
.logo-cell { background: #fff; border: 1px solid #eaeef5; border-radius: 12px; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.3s; }
.logo-cell:hover { border-color: var(--primary); }
.logo-cell img { max-width: 82%; max-height: 60px; object-fit: contain; }
.logo-ph { color: #c2cad8; font-size: 13px; letter-spacing: 2px; }

/* 合作伙伴 - 标题在背景图外，背景图全宽铺满（手动上传 images/about-partners-bg.png） */
.partners-bg { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 40px 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #f5f7fa; }
.partners-bg > .container { padding: 0 20px; }

@media (max-width: 900px) {
    .about-intro { grid-template-columns: 1fr; gap: 28px; }
    .mvv-grid, .honors { grid-template-columns: 1fr; }
    .logo-wall, .logo-wall.cols-5, .logo-wall.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .tl-history { flex-direction:column; padding: 12px 0; }
    .tl-history::before { left:24px; right:auto; top:0; bottom:0; width:2px; height:auto; transform:none; }
    .tl-item.up, .tl-item.down { padding: 14px 0 14px 56px; align-items: stretch; }
    .tl-item.up .tl-card, .tl-item.down .tl-card { margin: 0; }
    .tl-line { display:none; }
    .tl-dot { left:24px; top:22px; transform:none; }
    .timeline-item .dot { left: 10px !important; right: auto !important; }
}

/* ===================== 联系我们页面（contact.html） ===================== */
/* 左 信息列表 + 右 地图（地图手动上传 images/contact-map.png） */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: start; padding: 12px 0 28px; }
.contact-branch { font-size: 18px; font-weight: 700; color: var(--primary); margin: 0 0 18px; }
.contact-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-lines li { display: grid; grid-template-columns: 22px 56px 1fr; gap: 10px; align-items: start; line-height: 1.7; font-size: 14px; color: #4a5670; }
.ci-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--primary); }
.ci-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ci-label { color: #8590a8; font-size: 14px; padding-top: 1px; }
.ci-value { color: #2c3658; word-break: break-all; }
.contact-map { width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(45, 90, 200, 0.10); background: #eef1f7; }
.contact-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-map-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8590a8; font-size: 14px; background: repeating-linear-gradient(45deg, #f5f7fa 0 12px, #eef1f7 12px 24px); }
.contact-map-ph small { font-size: 12px; color: #b0b9cc; margin-top: 8px; text-align: center; padding: 0 12px; }

/* 商务合作 / 简历投递 - 双白卡 */
.contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.channel-card { background: #fff; border: 1px solid #eaeef5; border-radius: 14px; padding: 32px 24px 28px; box-shadow: 0 8px 28px rgba(45, 90, 200, 0.06); display: flex; flex-direction: column; align-items: center; text-align: center; transition: all .3s; }
.channel-card:hover { box-shadow: 0 12px 32px rgba(45, 90, 200, 0.18); transform: translateY(-2px); border-color: var(--primary); }
.channel-icon { width: 60px; height: 60px; border-radius: 50%; background: #e6efff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.channel-icon svg { width: 30px; height: 30px; fill: #3275f0; }
.channel-card h4 { font-size: 18px; font-weight: 700; color: #2c3658; margin: 0 0 14px; }
.channel-mail { font-size: 14px; color: #4a5670; margin: 4px 0; word-break: break-all; }
.channel-tel { font-size: 16px; color: var(--primary); font-weight: 700; margin: 6px 0 0; letter-spacing: .5px; }

/* 在线留言表单（contact.html） */
.contact-form-wrap { max-width: 760px; }
.form-tip { color: var(--text-gray); margin-bottom: 20px; font-size: 14px; }
.contact-form { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 32px; }
.contact-form .form-group { margin-bottom: 18px; }
.contact-form .form-submit { width: 100%; margin-top: 6px; }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-channels { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. 产品详情页（product-detail.html）五大板块
   ========================================================================== */

/* 核心优势：3 列卡片 */
.pd-adv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 8px 0 26px;
}
.pd-adv-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 26px 22px;
    text-align: center;
    transition: box-shadow .3s, transform .3s;
}
.pd-adv-item:hover {
    box-shadow: 0 12px 28px rgba(37, 76, 198, 0.16);
    transform: translateY(-3px);
}
.pd-adv-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.pd-adv-item h4 {
    font-size: 17px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 8px;
}
.pd-adv-item p {
    font-size: 13.5px;
    color: var(--text-gray);
    line-height: 1.7;
}

/* 主要功能：内容容器居中聚拢，灰底由伪元素铺满100vw */
.pd-func {
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 20px;
    margin: 8px auto 0;
    padding: 28px 24px;
    border-radius: 0;
    max-width: 1180px;
    background: transparent;
}
/* h2 进灰底块：整行居中 */
.pd-func-head {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 0 0 18px;
}
.pd-func-head h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}
.pd-func::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #FAFAFA;
    z-index: -1;
}
.pd-func-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0;
    flex: 0 0 calc((100% - 4 * 20px) / 5);
    max-width: calc((100% - 4 * 20px) / 5);
}
.pd-func-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: radial-gradient(circle at center, #d4e6ff 0%, #eef4ff 55%, #ffffff 100%);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: none;
}
/* 图片图标：填满方块、去渐变底，避免与图标自身底色冲突 */
.pd-func-icon img,
.pd-func-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
.pd-func-icon.pd-func-imgicon {
    background: transparent;
    box-shadow: none;
}
/* 矢量图标：统一蓝色描边，尺寸约束 */
.pd-func-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}
.pd-func-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    max-width: 160px;
}
.pd-func-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    max-width: 160px;
    margin-top: 0;
}

/* 应用场景：2 列卡片 + 左侧图标 + 淡蓝装饰背景（含标题） */
.pd-scenario {
    position: relative;
    overflow: hidden;
    display: grid;
    /* 固定两列等宽（卡片视觉宽度比 MOM 略宽 60px，更舒展），文案超出自动换行；宽屏居中、窄屏自动收缩不溢出 */
    grid-template-columns: repeat(2, minmax(0, 480px));
    gap: 18px 22px;
    justify-content: center;
    /* 突破父容器 .detail-content 的 1180px 限制，背景向左右两侧铺满 */
    margin: 0 calc(50% - 50vw) 26px;
    width: 100vw;
    /* 手动控制：上 padding 小,下 padding 大,标题+卡片整体视觉居中 */
    padding: 26px 6vw 48px;
    border-radius: 0;
    /* 主背景：淡到接近白，半透明蓝渐变让白卡片有柔和感而不是硬蓝块 */
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(180, 205, 245, 0.18) 0%, rgba(180, 205, 245, 0) 42%),
        radial-gradient(circle at 0% 100%, rgba(167, 199, 255, 0.12) 0%, rgba(167, 199, 255, 0) 48%),
        linear-gradient(180deg, rgba(220, 233, 251, 0.30) 0%, rgba(215, 228, 250, 0.18) 100%);
    border: none;
}
/* h2 进容器：横跨 2 列，文字居中 */
.pd-scenario-head {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 16px;
}
.pd-scenario-head h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}
.pd-scenario::before {
    content: '';
    position: absolute;
    left: 3%;
    top: 36px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.pd-scenario::after {
    content: '';
    position: absolute;
    right: 3%;
    bottom: 20px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 76, 198, 0.10), rgba(37, 76, 198, 0) 70%);
    pointer-events: none;
}
.pd-scenario-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(37, 76, 198, 0.10);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 4px 14px rgba(37, 76, 198, 0.06);
    transition: box-shadow .3s, transform .3s;
}
.pd-scenario-item:hover {
    box-shadow: 0 12px 28px rgba(37, 76, 198, 0.14);
    transform: translateY(-3px);
}
.pd-scenario-icon {
    flex: none;
    width: 56px;
    height: 56px;
    margin-top: 2px;
    border-radius: 12px;
    /* 蓝色渐变块（官网主色，与截图风格同构：圆角色块+居中白色SVG） */
    background: linear-gradient(135deg, #3a6cef 0%, #254cc6 100%);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    box-shadow: 0 4px 12px rgba(37, 76, 198, 0.20);
}
.pd-scenario-icon.pd-scenario-imgicon { overflow: hidden; padding: 0; }
.pd-scenario-icon.pd-scenario-imgicon img,
.pd-scenario-icon.pd-scenario-imgicon svg {
    width: 60%; height: 60%; object-fit: contain; padding: 0;
    color: #fff;
    display: block;
}
.pd-scenario-body { flex: 1; min-width: 0; overflow-wrap: break-word; }
.pd-scenario-item h4 {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 6px;
}
.pd-scenario-item p {
    font-size: 13.5px;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 600px) {
    .pd-scenario {
        grid-template-columns: 1fr; /* 窄屏单列占满 */
        padding: 24px 5vw 20px;
    }
    .pd-scenario-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
}

/* 价值优势：3 列指标卡 */
.pd-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 8px 0 26px;
}
.pd-val {
    background: linear-gradient(135deg, #f4f8ff, #eaf0ff);
    border-radius: 12px;
    padding: 24px 18px;
    text-align: center;
}
.pd-val-metric {
    font-size: 13px;
    font-weight: 700;
    color: #1a3a6e;
    margin-bottom: 8px;
    letter-spacing: .5px;
}
.pd-val-delta {
    font-size: 26px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1.3;
}
.pd-val-desc {
    font-size: 12.5px;
    color: #5a6a85;
    margin-top: 8px;
    line-height: 1.6;
}
.pd-arrow {
    font-weight: 700;
    margin-left: 4px;
    font-size: .82em;
}
.pd-arrow.up,
.pd-arrow.down {
    color: #6b7280;
}

/* 产品详情页响应式 */
@media (max-width: 900px) {
    .pd-adv { grid-template-columns: repeat(2, 1fr); }
    .pd-values { grid-template-columns: repeat(2, 1fr); }
    .pd-func { gap: 22px 16px; padding: 24px 18px; }
    .pd-func-item { flex: 0 0 calc((100% - 2 * 16px) / 3); max-width: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 600px) {
    .pd-adv,
    .pd-scenario,
    .pd-values { grid-template-columns: 1fr; }
    .pd-func { gap: 20px 12px; padding: 22px 14px; }
    .pd-func-item { flex: 0 0 calc((100% - 1 * 12px) / 2); max-width: calc((100% - 1 * 12px) / 2); }
}