
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}


:root {
    --primary-blue: #0088D1; /* 🏆 配合你的截图，调亮了主背景蓝 */
    --dark-blue: #004D85; 
    --dark-bg: #14212b; 
    --text-gray: #4a5568;
    --light-bg: #f4f7f6;
    --border-color: #e2e8f0;
    --card-light-blue: #a3defc; /* 🏆 新增：卡片文字区的浅蓝色 */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* 1. 顶部全宽蓝条 */
.top-bar-blue { background-color: var(--dark-blue); color: #ffffff; padding: 18px 0; }
.top-bar-container { max-width: 1200px; margin: 0 auto; padding: 0 50px; display: flex; justify-content: space-between; align-items: center; }
.logo-w { display: flex; align-items: center; text-decoration: none; }
.logo-w img { height: 46px; width: auto; display: block; }
.top-info span { margin-left: 25px; font-weight: 500; font-size: 0.9rem; }

/* 2. 悬浮白色导航栏 */
.nav-wrapper { width: 100%; display: flex; justify-content: center; position: absolute; z-index: 1000; }
.nav-bar-white {
    background-color: #ffffff; width: 100%; max-width: 1100px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.nav-bar-white nav { flex: 1; display: flex; justify-content: center; }
.nav-bar-white nav a { text-decoration: none; color: var(--dark-bg); margin: 0 15px; font-weight: 700; font-size: 0.95rem; transition: color 0.3s; }
.nav-bar-white nav a:hover, .nav-bar-white nav a.active { color: var(--primary-blue); }
.header-btn {
    background-color: var(--primary-blue); color: white; text-decoration: none;
    padding: 12px 25px; border-radius: 4px; font-weight: bold; transition: background 0.3s;
}
.header-btn:hover { background-color: var(--dark-blue); }

/* 3. 第一视觉区 (🏆 找回 3 图轮播 + 呼吸渐隐特效) */
.hero-slider-v2 {
    position: relative; width: 100%; 
    height: 85vh; /* 🏆 厚度调回 85%，完美比例 */
    min-height: 650px; overflow: hidden; display: flex; align-items: center; justify-content: center; 
    background-color: #000;
}

/* 🏆 全新 Transition：Fade & Zoom (呼吸放大+渐隐) */
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; 
    transform: scale(1.08); /* 初始稍微放大 */
    transition: opacity 1.5s ease-in-out, transform 8s ease-out; /* 缓慢缩放 */
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.slide.active { 
    opacity: 1; 
    transform: scale(1); /* 恢复原比例，产生呼吸感 */
    z-index: 2; 
}
.slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(20, 33, 43, 0.35); z-index: 0; }

.hero-content-center { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 0 20px; padding-bottom: 40px; transform: translateY(30px); opacity: 0; transition: all 0.8s ease 0.5s; }
.slide.active .hero-content-center { transform: translateY(0); opacity: 1; }

.hero-badge { display: inline-block; background-color: var(--primary-blue); color: white; padding: 6px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.hero-slider-v2 h1 { font-size: 3.8rem; color: #ffffff; line-height: 1.2; margin-bottom: 30px; font-weight: 800; text-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.hero-buttons-v2 button { padding: 16px 35px; font-size: 1.05rem; cursor: pointer; border: none; font-weight: bold; transition: all 0.3s ease; margin: 0 10px; border-radius: 4px; }
.btn-white { background-color: #ffffff; color: var(--dark-bg); }
.btn-white:hover { background-color: var(--primary-blue); color: #ffffff; }
.btn-darkblue { background-color: var(--dark-blue); color: #ffffff; }
.btn-darkblue:hover { background-color: var(--primary-blue); }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.15); color: white; border: none; font-size: 2rem; padding: 15px 20px; cursor: pointer; z-index: 10; border-radius: 50%; transition: background 0.3s; }
.slider-btn:hover { background: rgba(255, 255, 255, 0.4); }
.slider-btn.prev { left: 30px; }
.slider-btn.next { right: 30px; }
.slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; }
.dot { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.dot.active { background: #ffffff; transform: scale(1.3); }

/* 4. 优势栏 (🏆 深浅蓝色渐变 Gradient) */
.feature-bar-gradient {
    background: linear-gradient(90deg, #001f3f 0%, #005c94 100%); /* 渐变魔法 */
    padding: 30px 50px; display: flex; justify-content: center;
    gap: 60px; color: #ffffff; font-weight: 700; position: relative; z-index: 10;
}
.feature-item { display: flex; align-items: center; font-size: 1.05rem; }
.feature-item img { width: 35px; height: auto; margin-right: 12px; filter: brightness(0) invert(1); }

/* 5. 产品悬浮 3 卡片 (🏆 蓝底区 + 浅蓝色卡片) */
.v2-cards-section { 
    background-color: var(--primary-blue); /* 整个区域变成亮蓝色 */
    padding: 60px 0 100px 0; 
}
.v2-cards-grid { display: flex; gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 50px; }
.v2-card {
    flex: 1; background-color: transparent; text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); border-radius: 8px; overflow: hidden;
    transition: all 0.4s ease; display: flex; flex-direction: column;
}
.v2-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.25); }
.v2-card-image { width: 100%; height: 230px; object-fit: cover; }
.v2-card-content { 
    background-color: var(--card-light-blue); /* 🏆 卡片内容区变成浅蓝色 */
    padding: 40px 30px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; 
}
.v2-card h3 { color: var(--dark-bg); font-size: 1.6rem; margin-bottom: 15px; font-weight: 800; }
.v2-card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; flex: 1; }
.learn-more { color: var(--dark-blue); text-decoration: none; font-weight: bold; font-size: 0.95rem; transition: color 0.4s; }
.learn-more:hover { color: var(--primary-blue); }


/* 6. 关于我们摘要 */
.about-summary { padding: 100px 50px; background-color: #ffffff; }
.about-summary .container { max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; align-items: center; }
.about-content { flex: 1; }
.section-subtitle { color: var(--primary-blue); font-weight: bold; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.about-content h2 { font-size: 2.5rem; color: var(--dark-bg); margin-bottom: 25px; line-height: 1.2; }
.about-content p { color: var(--text-gray); font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }
.key-benefits { display: flex; gap: 40px; margin-top: 30px; }
.key-benefits ul { list-style: none; }
.key-benefits li { color: var(--dark-bg); font-weight: 600; margin-bottom: 15px; font-size: 1.05rem; }
.key-benefits li::before { content: '✔'; color: var(--primary-blue); margin-right: 12px; font-weight: bold; }
.about-image { flex: 1; }
.about-main-image { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: block; border: 4px solid var(--primary-blue); }

/* 7. 行业解决方案 */
.solutions-section { background-color: var(--light-bg); padding: 100px 50px; border-top: 1px solid var(--border-color); }
.section-header { text-align: center; margin-bottom: 60px; }
.solutions-section h2 { font-size: 2.5rem; margin-top: 10px; color: var(--dark-bg); }
.solution-grid { display: flex; gap: 30px; justify-content: center; max-width: 1200px; margin: 0 auto; }
.solution-card { flex: 1; padding: 40px 30px; border-radius: 8px; background-color: #ffffff; transition: all 0.3s ease; text-align: left; border-left: 4px solid var(--primary-blue); box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.solution-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.sol-icon { font-size: 2.5rem; margin-bottom: 20px; display: block; }
.solution-card h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--dark-bg); }
.solution-card p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; color: var(--text-gray); }
.solution-card .learn-more { color: var(--primary-blue); font-weight: bold; text-decoration: none; }

/* 8. 页脚 */
footer { background-color: var(--dark-bg); color: #88929b; padding: 80px 50px 30px 50px; text-align: center; }
.footer-info h3 { color: #ffffff; font-size: 1.3rem; margin-bottom: 15px; letter-spacing: 1px; }
.footer-info p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 40px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; font-size: 0.85rem; }

/* =========================================
   9. 关于我们内页专属样式 (About Us Page V2)
   ========================================= */

/* 🏆 内页小 Banner (极简通透，高度紧凑) */
.inner-hero-v2 {
    position: relative; width: 100%; height: auto;
    padding: 150px 20px 80px 20px; /* 🏆 瘦身比例，给上方悬浮导航留出空间 */
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background-color: var(--primary-blue);
}
.inner-hero-v2-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../images/hero-bg-3.jpg'); /* 你喜欢的背景 */
    background-size: cover; background-position: center;
    z-index: 0; filter: blur(2px); transform: scale(1.02);
}
.inner-hero-v2-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 77, 133, 0.75); /* 🏆 专属 D2 科技蓝遮罩 */
    z-index: 1;
}
.inner-hero-v2-content {
    position: relative; z-index: 2; text-align: center; color: white;
}
.inner-hero-v2 h1 { font-size: 3.2rem; margin-bottom: 15px; font-weight: 800; text-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.inner-hero-v2 p { font-size: 1.15rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }

/* 核心介绍图文区 */
.about-page-content-v2 { padding: 100px 50px; background-color: #ffffff; }
.about-page-content-v2 .container { max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; align-items: center; }
.about-text-block-v2 { flex: 1; }
.about-text-block-v2 .section-subtitle { color: var(--primary-blue); font-weight: bold; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.about-text-block-v2 h2 { font-size: 2.5rem; color: var(--dark-bg); margin-bottom: 25px; line-height: 1.2; }
.about-text-block-v2 p { color: var(--text-gray); font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }
.about-image-block-v2 { flex: 1; }
.about-image-block-v2 img {
    width: 100%; max-width: 800px; aspect-ratio: 800 / 650; object-fit: cover;
    border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); display: block; margin: 0 auto;
}

/* 愿景与使命卡片区 */
.mission-vision-v2 { background-color: var(--light-bg); padding: 100px 50px; }
.mv-container-v2 { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; }
.mv-card-v2 {
    flex: 1; background: #ffffff; padding: 60px 50px; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center;
    border-top: 5px solid var(--primary-blue); transition: all 0.3s;
}
.mv-card-v2:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 105, 180, 0.15); }
.mv-icon-v2 { height: 80px; width: auto; object-fit: contain; margin: 0 auto 30px auto; display: block; transition: transform 0.3s; }
.mv-card-v2:hover .mv-icon-v2 { transform: scale(1.1); }
.mv-card-v2 h3 { color: var(--dark-bg); font-size: 1.8rem; margin-bottom: 20px; font-weight: 800; }
.mv-card-v2 p { color: var(--text-gray); font-size: 1.1rem; line-height: 1.8; }

/* 手机端内页适配 */
@media (max-width: 768px) {
    .inner-hero-v2 { padding: 120px 20px 60px 20px; }
    .inner-hero-v2 h1 { font-size: 2.5rem; }
    .about-page-content-v2 .container { flex-direction: column; gap: 40px; }
    .mv-container-v2 { flex-direction: column; gap: 30px; }
    .mv-card-v2 { padding: 40px 30px; }
}
/* =========================================
   10. 终极手机端适配补丁 (📱 Alamak 修复版)
   ========================================= */

@media (max-width: 768px) {
    /* 1. 顶部全宽蓝条 (堆叠排列，居中) */
    .top-bar-blue .top-bar-container {
        flex-direction: column; gap: 10px; text-align: center;
        padding: 15px 20px;
    }
    .logo-w img { height: 35px; margin: 0 auto; } /* 缩小 Logo */
    .top-info span { margin-left: 0; display: block; margin-bottom: 5px; font-size: 0.8rem;}

    /* 2. 悬浮白色导航栏 (最重要！改为全堆叠) */
    .nav-wrapper { position: static; margin-top: 10px; } /* 取消绝对定位，避免盖住 Banner */
    .nav-bar-white {
        flex-direction: column; padding: 15px;
        border-radius: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); gap: 15px;
    }
    .nav-bar-white nav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
        width: 100%; margin: 0;
    }
    .nav-bar-white nav a { margin: 0; font-size: 0.85rem; padding: 5px 10px; background-color: #f4f7f6; border-radius: 4px; }
    .header-btn { margin-left: 0; width: 100%; text-align: center; padding: 10px; } /* 按钮铺满 */

    /* 3. 第一视觉区 (🏆 找回 3 图轮播 + 呼吸渐隐特效 手机端优化版) */
    .hero-slider-v2 {
        height: 65vh; /* 🏆 手机端高度大大瘦身，改为 65vh (约 500px) */
        min-height: 400px; padding: 0;
    }
    .slide::before { background-color: rgba(20, 33, 43, 0.5); } /* 🏆 增强遮罩，让白字更清晰 */
    
    .hero-content-center {
        text-align: center; max-width: 90%; padding: 0 10px; transform: translateY(0); padding-bottom: 20px;
    }
    
    /* 🏆 手机端字体魔法：大字变小字 */
    .hero-slider-v2 h1 {
        font-size: 2.1rem !important; /* 🏆 强制缩小，确保不超出版面 */
        margin-bottom: 25px; line-height: 1.2;
        letter-spacing: -0.5px;
        color: #ffffff !important; /* 确保是白色的 */
    }
    
    /* 🏆 手机端按钮魔法：上下堆叠 */
    .hero-buttons-v2 { display: flex; flex-direction: column; gap: 12px; }
    .hero-buttons-v2 button {
        width: 100%; margin: 0 !important; font-size: 0.95rem; padding: 12px;
    }
    
    /* Slider Controllers 优化 */
    .slider-btn { font-size: 1.5rem; padding: 8px 12px; }
    .slider-btn.prev { left: 10px; }
    .slider-btn.next { right: 10px; }
    .slider-dots { bottom: 15px; gap: 10px; }
    .dot { width: 10px; height: 10px; }

    /* 4. 优势与产品悬浮卡片 (手机堆叠) */
    .feature-products-v2 { background-color: var(--light-bg); padding-bottom: 80px; position: relative; z-index: 10; margin-top: -30px; /* 🏆 减少悬浮覆盖 */ }
    .v2-feature-bar {
        background: var(--dark-blue); padding: 30px 20px; flex-direction: column; gap: 15px; text-align: center;
    }
    .feature-item { width: 100%; margin: 0 auto; justify-content: center;}
    .feature-item img { width: 30px; }
    .feature-item span { font-size: 0.9rem; }

    .v2-cards-grid { flex-direction: column; padding: 0 20px; gap: 30px; margin-top: 30px;}
    .v2-card { width: 100%; margin: 0 auto; }
    .v2-card-image { height: 200px; }
    .v2-card-content { padding: 30px 20px; }
    .v2-card h3 { font-size: 1.3rem; }
    .v2-card p { font-size: 0.9rem; margin-bottom: 20px; }

    /* 5. 关于我们摘要 (手机端堆叠 + 对齐修复) */
    .about-summary { padding: 80px 20px; background-color: #ffffff; }
    .about-summary .container { flex-direction: column; gap: 40px; }
    .about-summary h2 { font-size: 2.1rem; text-align: center;}
    .key-benefits { flex-direction: column; gap: 0; text-align: left;}
    .key-benefits ul { padding-left: 0; text-align: left; }
    .key-benefits li { text-align: left;}
    .key-benefits li::before { margin-right: 8px; }

    /* 6. 行业解决方案 (手机端堆叠) */
    .solutions-section { padding: 80px 20px; }
    .solutions-section h2 { font-size: 2.1rem; }
    .solution-grid { flex-direction: column; gap: 30px; padding: 0 10px;}
    .solution-card { width: 100%; padding: 30px 20px;}

    /* 7. 页脚 */
    footer { padding: 60px 20px 30px 20px; }
    .footer-info p { font-size: 0.9rem; margin-bottom: 30px; }
}
/* =========================================
   11. 全站浮动 WhatsApp 按钮 (高级动态版)
   ========================================= */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366; /* WhatsApp 官方经典绿 */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 9999; /* 🏆 无敌悬浮：确保它在所有图层最上面 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 呼吸放大与阴影加深特效 */
.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0px 10px 25px rgba(37, 211, 102, 0.4);
    color: #FFF;
}

/* 手机端智能缩小适配 */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}
/* =========================================
   底部 CTA 横幅 (黄金比例重塑版)
   ========================================= */
.cta-section {
    padding: 80px 20px; 
    text-align: center;
    /* 👇 就是漏了下面这两句保命的魔法！ */
    background: linear-gradient(135deg, #0073cd, #003a7a); /* 找回高级渐变深蓝底色 */
    color: #ffffff; /* 强制所有文字变成白色 */
}

.cta-section h2 {
    font-size: 2.6rem; /* 字体加大，还原截图里的霸气感 */
    font-weight: 800;
    margin-bottom: 15px; /* 标题和副标题的间距 */
    white-space: nowrap; /* 强制不换行 */
}

.cta-section p {
    font-size: 1.15rem; /* 副标题稍微调大，增加可读性 */
    color: #e0f0ff; /* 字体颜色稍微柔和一点，不要纯白，增加层次感 */
    margin-bottom: 40px; /* 👈 核心魔法：推开下面的按钮，留出完美的距离！ */
}

/* 手机端防爆版适配 */
@media (max-width: 768px) {
    .cta-section h2 { 
        font-size: 1.8rem; 
        white-space: normal; /* 手机上允许换行，不然屏幕塞不下 */
    }
    .cta-section p {
        margin-bottom: 30px; /* 手机上按钮间距稍微缩小一点 */
    }
}
.cta-section .btn-white {
    padding: 16px 45px;
    font-size: 1.1rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    color: var(--dark-bg);
    background-color: #ffffff;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.cta-section .btn-white:hover {
    background-color: var(--dark-bg);
    color: #ffffff;
    transform: translateY(-3px);
}

/* 手机端适配补充 */
@media (max-width: 768px) {
    .cta-section { padding: 70px 20px; }
    .cta-section h2 { font-size: 2rem; }
    .cta-section p { font-size: 1rem; }
}
/* =========================================
   13. 关于我们内页 - Why Choose Us 区块
   ========================================= */
.why-choose-v2 { 
    background-color: #ffffff; 
    padding: 100px 50px; 
}
.why-choose-v2 .section-header {
    text-align: center;
    margin-bottom: 50px;
}
.why-choose-v2 .section-header h2 { 
    font-size: 2.5rem; 
    color: var(--dark-bg); 
    margin-top: 10px;
}
.wc-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 30px; 
    max-width: 1200px; 
    margin: 0 auto; 
    justify-content: center; 
}
.wc-card {
    flex: 1 1 calc(33.333% - 30px); 
    min-width: 280px;
    background-color: var(--light-bg); 
    padding: 40px 30px;
    border-radius: 8px; 
    text-align: center;
    border-bottom: 4px solid var(--primary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wc-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
}
.wc-icon {
    height: 55px; 
    width: auto; 
    margin-bottom: 20px;
    /* 老站长的 CSS 魔法：直接把原本黑色的图标滤镜调成咱们的主题蓝！ */
    filter: invert(36%) sepia(91%) saturate(1832%) hue-rotate(184deg) brightness(98%) contrast(102%);
}
.wc-card h3 { 
    color: var(--dark-bg); 
    font-size: 1.4rem; 
    margin-bottom: 15px; 
    font-weight: 800; 
}
.wc-card p { 
    color: var(--text-gray); 
    font-size: 0.95rem; 
    line-height: 1.6; 
}

/* 手机端适配 */
@media (max-width: 768px) {
    .why-choose-v2 { padding: 80px 20px; }
    .wc-card { flex: 1 1 100%; }
}

/* =========================================
   14. 产品内页专属样式 (Products Page V2)
   ========================================= */

/* 产品核心特性 (Icon + Text 极简横排) */
.product-features-section { background-color: #ffffff; padding: 80px 50px; border-bottom: 1px solid var(--border-color); }
.pf-header { text-align: center; max-width: 800px; margin: 0 auto 50px auto; }
.pf-header h2 { font-size: 2.4rem; color: var(--dark-bg); margin-bottom: 15px; }
.pf-header p { font-size: 1.1rem; color: var(--text-gray); }

.pf-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; }
.pf-item { flex: 1 1 180px; text-align: center; padding: 20px; }
.pf-icon-circle { 
    width: 80px; height: 80px; background-color: var(--light-bg); border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto;
    border: 2px solid var(--border-color); transition: all 0.3s ease;
}
.pf-item:hover .pf-icon-circle { border-color: var(--primary-blue); background-color: var(--primary-blue); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 136, 209, 0.2); }
/* 悬浮时把黑色 Icon 变成纯白 */
.pf-item:hover .pf-icon-circle img { filter: brightness(0) invert(1); }
.pf-icon-circle img { width: 40px; transition: all 0.3s ease; }
.pf-item h4 { color: var(--dark-bg); font-size: 1.1rem; font-weight: 700; }

/* 🏆 高级 B2B 左右交替式产品展示 (Alternating Layout) */
.product-showcase-section { background-color: var(--light-bg); padding: 100px 50px; }
.product-row { display: flex; max-width: 1200px; margin: 0 auto 80px auto; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.05); transition: transform 0.3s; }
.product-row:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }

/* 偶数行反转方向，实现左右交替 */
.product-row:nth-child(even) { flex-direction: row-reverse; }

.product-image-col { flex: 1; min-height: 400px; position: relative; overflow: hidden; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; }
.product-image-col img { width: 100%; height: 100%; object-fit: cover; }

.product-info-col { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.product-badge { align-self: flex-start; background-color: var(--primary-blue); color: #ffffff; padding: 6px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.product-info-col h3 { font-size: 2.2rem; color: var(--dark-bg); margin-bottom: 20px; font-weight: 800; }
.product-info-col p { color: var(--text-gray); font-size: 1.05rem; line-height: 1.7; margin-bottom: 25px; }

/* 机器规格勾勾列表 */
.product-specs { list-style: none; margin-bottom: 30px; }
.product-specs li { margin-bottom: 12px; font-size: 1.05rem; color: var(--dark-bg); font-weight: 600; display: flex; align-items: center; }
.product-specs li::before { content: '✔'; color: var(--primary-blue); margin-right: 10px; font-weight: bold; font-size: 1.2rem; }

.product-info-col .btn-darkblue { align-self: flex-start; margin: 0; padding: 14px 30px; border-radius: 4px; text-decoration: none; display: inline-block; }

/* 手机端适配 */
@media (max-width: 768px) {
    .product-features-section { padding: 60px 20px; }
    .product-showcase-section { padding: 60px 20px; }
    .product-row, .product-row:nth-child(even) { flex-direction: column; margin-bottom: 40px; }
    .product-image-col { min-height: 250px; }
    .product-info-col { padding: 40px 30px; }
    .product-info-col h3 { font-size: 1.8rem; }
}
/* =========================================
   15. 解决方案内页专属样式 (Solutions Page V2)
   ========================================= */

.solutions-inner-section { 
    background-color: var(--light-bg); 
    padding: 100px 50px; 
}
.solutions-inner-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.solutions-inner-header h2 {
    font-size: 2.6rem;
    color: var(--dark-bg);
    margin-bottom: 20px;
}
.solutions-inner-header p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* 🏆 增强版：完美复刻你的重叠高级卡片排版 (Deep Overlapping Cards) */
.solutions-inner-wrap { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto; 
}
.sol-overlap-card {
    flex: 1 1 calc(33.333% - 40px);
    min-width: 320px;
    max-width: 380px;
    position: relative;
    margin-bottom: 70px; /* 给下方重叠出来的白框留足空间 */
}
/* 背后的图片 */
.sol-overlap-img {
    width: 100%;
    height: 260px; /* 稍微加高一点图片，让重叠后依然能看到足够的背景 */
    object-fit: cover;
    border-radius: 12px; /* 和你的截图一样，图片带圆角 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
/* 🏆 悬浮在前方的纯白文字框 (强力重叠魔法) */
.sol-overlap-content {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* 阴影加大，凸显浮动感 */
    width: 90%; /* 留出一点边距，让图片露出来 */
    margin: -80px auto 0 auto; /* 🏆 核心魔法：负 80px！深深地插入图片内部！ */
    position: relative;
    z-index: 2;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sol-overlap-card:hover .sol-overlap-content {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 105, 180, 0.15); /* 悬浮时带点科技蓝光阴影 */
}
.sol-overlap-content h3 { 
    font-size: 1.45rem; 
    color: var(--dark-bg); 
    margin-bottom: 12px; 
    font-weight: 800; 
}
.sol-overlap-content p { 
    font-size: 0.95rem; 
    color: var(--text-gray); 
    line-height: 1.6; 
    margin: 0; /* 清除多余边距，因为没有按钮了 */
}

/* 🏆 手机端专属重叠锁定适配 */
@media (max-width: 768px) {
    .solutions-inner-wrap { gap: 20px; }
    .sol-overlap-card { 
        flex: 1 1 100%; 
        max-width: 100%; 
        margin-bottom: 60px; 
    }
    .sol-overlap-img { 
        height: 240px; 
    }
    .sol-overlap-content {
        width: 92%; /* 手机端白框稍微加宽一点 */
        margin: -60px auto 0 auto; /* 🏆 手机端依然保持负边距，强行重叠！ */
        padding: 30px 20px;
    }
}
/* =========================================
   16. 服务内页专属样式 (Services Page V2)
   ========================================= */

.services-v2-section {
    background-color: #ffffff;
    padding: 100px 50px;
}
.services-v2-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.services-v2-header h2 {
    font-size: 2.5rem;
    color: var(--dark-bg);
    margin-bottom: 20px;
}
.services-v2-header p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* 🏆 流动感服务卡片网格 */
.services-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.service-card-v2 {
    background: var(--light-bg);
    padding: 50px 40px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 带有弹性的高级过渡动画 */
    border: 1px solid rgba(0,0,0,0.05);
}
.service-card-v2:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--primary-blue);
}

/* 左侧装饰色带 */
.service-card-v2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    background: var(--primary-blue);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}
.service-card-v2:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* 图标与数字序号组合 */
.sv-icon-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}
.sv-icon {
    font-size: 3rem;
    color: var(--primary-blue);
    opacity: 0.9;
}
.sv-number {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0,0,0,0.03);
    line-height: 0.8;
    transition: color 0.4s;
}
.service-card-v2:hover .sv-number {
    color: rgba(0, 136, 209, 0.1); /* 鼠标悬浮时数字变成淡淡的主题蓝 */
}

.service-card-v2 h3 {
    font-size: 1.5rem;
    color: var(--dark-bg);
    margin-bottom: 15px;
    font-weight: 800;
}
.service-card-v2 p {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .services-v2-section { padding: 60px 20px; }
    .services-v2-header h2 { font-size: 2.2rem; }
    .services-grid-v2 { gap: 20px; }
    .service-card-v2 { padding: 40px 30px; }
}
/* =========================================
   17. ESG / Sustainability 内页专属样式 (终极图片融合版)
   ========================================= */

.esg-intro {
    padding: 100px 20px 60px 20px;
    text-align: center;
    background-color: #ffffff;
}
.esg-intro .section-subtitle { margin-bottom: 15px; }
.esg-intro h2 { font-size: 2.6rem; color: var(--dark-bg); margin-bottom: 25px; }
.esg-intro p { font-size: 1.2rem; color: var(--text-gray); max-width: 800px; margin: 0 auto; line-height: 1.8; }

/* 🏆 ESG 双卡片对比排版容器 (并排的核心魔法在这里！) */
.esg-benefits-section {
    padding: 0 50px 100px 50px;
    background-color: #ffffff;
}
.esg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 🏆 图片融合卡片本体 */
.esg-card {
    flex: 1 1 calc(50% - 20px);
    min-width: 320px; /* 防止屏幕缩小时过度挤压 */
    background: var(--light-bg);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}
.esg-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.1); 
    background: #ffffff;
}

/* 卡片顶部图片容器 */
.esg-card-img-wrap {
    position: relative;
    width: 100%;
    height: 240px;
}
.esg-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 🏆 白色渐变文字带 */
.esg-card-title-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(255,255,255,1) 15%, rgba(255,255,255,0.7) 60%, transparent);
    padding: 30px 40px 10px 40px;
}
.esg-card-title-band h3 { 
    margin: 0;
    font-size: 1.8rem; 
    color: var(--dark-bg); 
    font-weight: 800; 
}

/* 卡片底部列表内容区 */
.esg-card-content {
    padding: 20px 40px 40px 40px;
    flex: 1;
}

.esg-list { list-style: none; padding: 0; margin: 0; }
.esg-list li {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    font-weight: 500;
    line-height: 1.5;
}
/* 给列表加上专属 Emoji 作为 Icon */
.env-card .esg-list li::before { content: '🌿'; margin-right: 15px; font-size: 1.3rem; }
.biz-card .esg-list li::before { content: '📈'; margin-right: 15px; font-size: 1.3rem; }

/* 手机端适配 */
@media (max-width: 768px) {
    .esg-intro { padding: 60px 20px 40px 20px; }
    .esg-intro h2 { font-size: 2.2rem; }
    .esg-benefits-section { padding: 0 20px 80px 20px; }
    .esg-card { flex: 1 1 100%; padding: 0; }
    .esg-card-content { padding: 20px 30px 30px 30px; }
}
/* =========================================
   18. 联系我们内页专属样式 (Contact Us V2)
   ========================================= */

.contact-v2-section { 
    padding: 100px 50px; 
    background-color: var(--light-bg); 
}
.contact-v2-container { 
    display: flex; 
    flex-wrap: wrap; 
    max-width: 1200px; 
    margin: 0 auto; 
    background: #ffffff; 
    border-radius: 16px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
    overflow: hidden; 
}

/* 左侧：联系信息与地图 (深蓝底色) */
.contact-v2-info { 
    flex: 1; 
    min-width: 320px; 
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); 
    color: #ffffff; 
    padding: 60px 50px; 
}
.contact-v2-info h3 { font-size: 2rem; margin-bottom: 20px; color: #ffffff; font-weight: 800;}
.contact-v2-info p { margin-bottom: 40px; font-size: 1.05rem; opacity: 0.9; line-height: 1.6;}
.contact-item { display: flex; align-items: flex-start; margin-bottom: 25px; }
.contact-item-icon { font-size: 1.5rem; margin-right: 15px; line-height: 1.2;}
.contact-item-text h4 { margin: 0 0 5px 0; font-size: 1.1rem; color: #ffffff;}
.contact-item-text span { font-size: 0.95rem; opacity: 0.8; line-height: 1.5; display: block;}

/* 📍 完美嵌入的 Google Map 容器 */
.contact-map { 
    margin-top: 40px; 
    border-radius: 8px; 
    overflow: hidden; 
    height: 250px; 
    border: 3px solid rgba(255,255,255,0.1);
}
.contact-map iframe { width: 100%; height: 100%; border: none; }

/* 右侧：询盘表单 (白底干净现代风) */
.contact-v2-form-wrap { 
    flex: 1.5; 
    min-width: 320px; 
    padding: 60px 50px; 
}
.contact-v2-form-wrap h3 { font-size: 2.2rem; margin-bottom: 10px; color: var(--dark-bg); font-weight: 800;}
.contact-v2-form-wrap > p { color: var(--text-gray); margin-bottom: 40px; font-size: 1.05rem;}
.form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.form-group { margin-bottom: 25px; flex: 1; min-width: 200px;}
.form-group.full-width { flex: 1 1 100%; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark-bg); font-size: 0.95rem; }
.form-control { 
    width: 100%; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; 
    font-size: 1rem; font-family: inherit; background-color: #f9fbfd; transition: all 0.3s; 
}
.form-control:focus { outline: none; border-color: var(--primary-blue); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 136, 209, 0.1);}
textarea.form-control { resize: vertical; min-height: 150px; }
.btn-submit { 
    background: var(--primary-blue); color: #ffffff; border: none; padding: 18px 40px; 
    font-size: 1.1rem; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.3s; width: 100%; 
}
.btn-submit:hover { background: var(--dark-blue); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1);}

/* 手机端适配 */
@media (max-width: 768px) {
    .contact-v2-section { padding: 60px 20px; }
    .contact-v2-info, .contact-v2-form-wrap { padding: 40px 30px; }
    .contact-map { height: 200px; }
}
/* 修复首页深蓝 Icon 栏在手机端的排版 */
@media (max-width: 768px) {
    .feature-bar-gradient {   /* 👈 请把这里换成你真实的 class 名字 */
        flex-wrap: wrap;    /* 魔法：允许换行！ */
        justify-content: center;
        gap: 20px;          /* 上下左右留点空隙 */
    }
    
    /* 让里面的单个 Icon 卡片在手机上占一半或一整行，防止太挤 */
    .home-features-wrap > div {  /* 👈 如果 Icon 是包在 div 里的 */
        flex: 1 1 calc(50% - 20px); /* 手机上变成一行 2 个 */
        min-width: 140px;
        text-align: center;
    }
}
/* =========================================
   新增：产品页 Customised 列表专属样式
   ========================================= */
.feature-list {
    list-style: none; /* 去掉默认的丑陋黑点 */
    padding: 0;
    margin: 20px 0 30px 0; /* 给列表上下留出呼吸空间 */
}

.feature-list li {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin-bottom: 12px; /* 每行文字之间拉开距离 */
    line-height: 1.5;
}

/* 确保这个区块里的按钮有足够的顶部间距，不会和文字黏在一起 */
.product-content .btn-darkblue {
    display: inline-block;
    margin-top: 10px;
}
/* =========================================
   新增：定制化专属装甲排版 (强制覆盖修复)
   ========================================= */
.custom-product-section {
    background-color: #f5f7f6; /* 强制背景变成浅灰色 */
    padding: 100px 20px;
}
.custom-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px; /* 强制拉开文字和图片的距离 */
    max-width: 1200px;
    margin: 0 auto;
}
.custom-content {
    flex: 1;
    min-width: 320px;
}
.custom-image {
    flex: 1;
    min-width: 320px;
}
.custom-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* 给图片加个高级阴影 */
}

/* 强制修复那个顽固的按钮 */
.btn-force-blue {
    display: inline-block;
    background-color: #0b2239; /* 强制深蓝色 */
    color: #ffffff !important;
    padding: 16px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
}
.btn-force-blue:hover {
    background-color: #0088d1; /* 鼠标悬浮变亮蓝 */
    transform: translateY(-3px);
}
/* =========================================
   19. 产品详情页专属排版 (左图/下表 + 右表单)
   ========================================= */

.product-detail-section {
    padding: 80px 20px;
    background-color: #f5f7f6; /* 全局浅灰底色，让白色卡片更凸显 */
}

/* 🏆 单个产品的超大白色独立卡片 */
.product-detail-card {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06); /* 高级悬浮阴影 */
}

/* 左侧区块 (轮播图 + 表格) */
.pd-left-col { flex: 1.2; min-width: 320px; }
/* 右侧区块 (文字 + 表单) */
.pd-right-col { flex: 1; min-width: 320px; }

/* 📸 纯 CSS 顺滑轮播图 (无需 JS 插件) */
.pd-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 12px;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 10px; /* 给滚动条留位 */
}
/* 美化滚动条 */
.pd-carousel::-webkit-scrollbar { height: 8px; }
.pd-carousel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.pd-carousel::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 4px; }
.pd-carousel img {
    scroll-snap-align: center;
    flex: 0 0 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

/* 📊 参数表格样式 */
.pd-table {
    width: 100%;
    border-collapse: collapse;
}
.pd-table th, .pd-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    text-align: left;
    font-size: 0.95rem;
}
.pd-table th {
    background-color: #f9fbfd;
    font-weight: 700;
    width: 40%;
    color: var(--dark-bg);
}
.pd-table tr:nth-child(even) { background-color: #fafafa; }

/* 📝 右侧文字与表单区 */
.pd-right-col h2 { font-size: 2.2rem; color: var(--dark-bg); margin-bottom: 10px; font-weight: 800;}
.pd-right-col p { font-size: 1.05rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 30px;}

/* 一比一复刻你的红色提示语 */
.pd-form-notice {
    color: #d32f2f; /* 醒目的红色 */
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 紧凑型表单样式 */
.pd-form .form-control {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    background-color: #fcfcfc;
    transition: all 0.3s;
}
.pd-form .form-control:focus { outline: none; border-color: var(--primary-blue); background-color: #fff; }
.pd-form textarea.form-control { resize: vertical; min-height: 100px; }

/* 一比一复刻你的绿色提交按钮 */
.pd-form .btn-submit-green {
    background-color: #28a745; /* 环保绿 */
    color: #fff;
    border: none;
    padding: 15px;
    width: 100%;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.pd-form .btn-submit-green:hover { background-color: #218838; }

/* 手机端适配 */
@media (max-width: 768px) {
    .product-detail-card { padding: 30px 20px; }
    .pd-right-col h2 { font-size: 1.8rem; }
}
/* =========================================
   Small Scale 专属高转化卡片介绍区
   ========================================= */
.category-overview-section {
    padding: 60px 20px 20px 20px;
    background-color: #f5f7f6; /* 和产品区融合的浅灰底色 */
}
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.overview-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.overview-card h4 {
    font-size: 1.25rem;
    color: var(--dark-bg);
    margin-bottom: 12px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.overview-card h4:first-child { margin-top: 0; }
.overview-card p { font-size: 0.95rem; color: var(--text-gray); line-height: 1.6; }
.overview-card ul { padding-left: 20px; margin-bottom: 0; color: var(--text-gray); font-size: 0.95rem; line-height: 1.8;}
.text-green { color: #28a745 !important; }
.text-red { color: #dc3545 !important; }

.overview-footer-msg {
    text-align: center;
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding-bottom: 20px;
}
.overview-footer-msg h3 {
    font-size: 1.6rem;
    color: var(--primary-blue);
    font-weight: 800;
}
/* =========================================
   Customised 页面专属创意排版 (How it works)
   ========================================= */
.custom-extended-section {
    padding: 20px 20px 80px 20px;
    background-color: #f5f7f6; /* 延续上面的浅灰底色，无缝衔接 */
}
.custom-extended-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 完美的左右 50/50 分栏 */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 左侧：带颜色边框的沉浸式步骤框 */
.steps-box {
    background: #ffffff;
    border-left: 5px solid #0073cd; /* 经典的 TOGO 蓝边框 */
    padding: 40px;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.steps-box h4 { font-size: 1.4rem; color: var(--dark-bg); margin-bottom: 15px;}
.steps-box > p { color: var(--text-gray); font-size: 1.05rem; margin-bottom: 20px;}
.steps-box ol { padding-left: 20px; }
.steps-box ol li { 
    margin-bottom: 15px; 
    color: var(--text-gray); 
    font-size: 1rem; 
    line-height: 1.6;
}
.steps-box ol li ul { margin-top: 10px; padding-left: 20px; list-style-type: disc;}

/* 右侧：优势与特点列表 */
.benefits-box {
    background: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.benefits-box h4 { font-size: 1.3rem; color: var(--dark-bg); margin-bottom: 15px; display: flex; align-items: center; gap: 8px;}
.benefits-box h4:not(:first-child) { margin-top: 35px; }
.benefits-box ul { padding-left: 25px; color: var(--text-gray); font-size: 1rem; line-height: 1.8;}

/* 手机端变单列 */
@media (max-width: 768px) {
    .custom-extended-grid { grid-template-columns: 1fr; gap: 20px;}
    .steps-box, .benefits-box { padding: 25px; }
}
/* =========================================
   Solutions 页：行业专属跳转胶囊按钮
   ========================================= */
.sol-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px; /* 和上面的文字拉开一点呼吸空间 */
}
.sol-btn {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0073cd; /* 主题蓝文字 */
    background-color: #f0f7ff; /* 极浅的蓝底色，不抢戏 */
    border: 1px solid #cce4ff;
    padding: 6px 16px;
    border-radius: 20px; /* 圆润的胶囊形状 */
    text-decoration: none;
    transition: all 0.3s ease;
}
.sol-btn:hover {
    background-color: #0073cd; /* 鼠标悬浮变成深蓝底 */
    color: #ffffff; /* 文字变白 */
    border-color: #0073cd;
    transform: translateY(-2px); /* 微微上浮的高级感 */
}
/* =========================================
   全局：产品分类快速切换下拉菜单 (Dropdown)
   ========================================= */
.category-switcher-wrapper {
    background-color: #f5f7f6; /* 和下面的卡片区融为一体 */
    padding: 30px 20px 0 20px;
    text-align: center;
}

.category-switcher {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 10px 25px;
    border-radius: 50px; /* 圆润的胶囊造型 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.06); /* 高级悬浮阴影 */
}

.category-switcher span {
    font-weight: 800;
    color: var(--primary-blue);
    font-size: 1.05rem;
}

.category-switcher select {
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--dark-bg);
    cursor: pointer;
    outline: none;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    min-width: 250px; /* 保证下拉框够宽 */
}

.category-switcher select:hover, .category-switcher select:focus {
    border-color: var(--primary-blue);
}
/* =========================================
   📱 手机端 (Mobile Responsive Fixes)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. 修复下拉菜单 (保持不变) */
    .category-switcher {
        flex-direction: column; 
        width: 100%; 
        box-sizing: border-box;
        padding: 15px;
    }
    .category-switcher select {
        width: 100%; 
        min-width: 0; 
    }

    /* 2. 🪄 空间重组魔法：重新排序卡片内容 */
    .product-detail-card {
        display: flex !important;
        flex-direction: column !important; /* 让卡片变成上下排列的容器 */
        padding: 20px 15px !important; /* 保证四周有呼吸空间 */
        overflow: hidden;
    }

    /* 消除左右分栏的物理限制，释放里面的元素自由排队 */
    .pd-left-col, .pd-right-col {
        display: contents !important; 
    }

    /* 👑 发号码牌啦！强制规定手机上的先后顺序！ */
    .pd-right-col h2 {
        order: 1; /* 🥇 强行把标题提到第一位！放到图片上方！ */
        margin-top: 0;
        margin-bottom: 15px;
        text-align: center; /* 手机端标题居中更好看 */
    }
    
    .pd-carousel {
        order: 2; /* 🥈 轮播图片排第二 */
        width: 100% !important;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .pd-table {
        order: 3; /* 🥉 表格排第三 */
        margin-bottom: 25px;
    }

    .pd-right-col p {
        order: 4; /* 文字说明排第四 */
    }

    .pd-form {
        order: 5; /* 表单乖乖垫底 */
        width: 100%;
    }
}