body {
    margin: 0;
    font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
    /* padding-top: 0.65rem;  */
    /* margin-top: 0.65rem; */
}

/* 隐藏滚动条 */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

*, *::before, *::after {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #003366;
    font-weight: 600;
}


/*
==================================================
  [2] 排版系统 (Typography System)
==================================================
*/
/* --- 主标题 (H2 & 特殊H3) --- */
.section-title,
.intro-main-title {
    font-size: 0.3rem; /* 30px -> 0.3rem */
    text-align: center;
}

/* --- 次级标题 (H3) --- */
h3,
.company-intro-text h3,
.app-item .app-text h3 {
    font-size: 0.36rem; /* 36px -> 0.36rem */
}

/* --- 卡片/特性标题 (H4) --- */
h4,
.feature-item h4 {
    font-size: 0.24rem; /* 24px -> 0.24rem */
}
.intro-sub-title {
    font-size: 0.24rem; /* 24px -> 0.24rem */
}
/* --- 导航/页脚标题 (H5) --- */
h5 {
    font-size: 0.24rem; /* 24px -> 0.24rem */
}

/* --- 主要段落文字 (P) --- */
p,
.intro-text p,
.status-item p,
.value-card p,
.app-item .app-text p,
.feature-item p,
.company-intro-text p,
.contact-info p{
    font-size: 0.16rem; /* 16px -> 0.16rem */
}

/* 解决方案页面特定的大号字体 */
.solution-page-body .app-item .app-text p,
.case-study-content p,
.case-study-content .benefits-list div {
    font-size: 0.2rem; /* 20px -> 0.2rem */
    line-height: 1.8;
}
.case-study-content h4 {
    font-size: 0.28rem; /* 28px -> 0.28rem */
}

/* --- 特殊/小型字体 (不受系统影响) --- */
.banner-content p { font-size: 0.2rem; } /* 20px -> 0.2rem */
footer, .footer-left p, .footer-column ul li a { font-size: 0.18rem; } /* 18px -> 0.18rem */
.footer-bottom p { font-size: 0.15rem; } /* 15px -> 0.15rem */
.status-item h3 { font-size: 0.24rem; } /* 24px -> 0.24rem */
.mega-menu-section h4 { font-size: 0.18rem; } /* 18px -> 0.18rem */


/*
==================================================
  [3] 通用工具类 (Utility Classes)
==================================================
*/
.container {
    width: 80%;
    max-width: 1800px;
    margin: 0;
    /* padding: 30px 15px; */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;

}
.mega-menu > .container-mega {
    /* 1. 确保它能真正铺满父容器（即全宽的 .mega-menu） */
    width: 100%;
    
    /* 2. [核心] 强制覆盖掉任何可能从其他地方继承来的 max-width */
    max-width: none; 
    
    /* 3. [核心] 强制覆盖掉任何居中外边距，确保它能左对齐 */
    margin: 0;

    /* 4. [核心] 强制覆盖掉任何内边距，确保内容能贴边 */
 
    padding-left: 150px;  /* <--- 把它调大，比如 40px, 60px... */
    padding-right: 20px; /* <--- 最好和左边保持一样的值 */
    /* 5. 保持你为它设置的 flex 布局 */
    display: flex;
    gap: 40px;
}
.section {
    padding: 120px 0; /* [V3 修复] 增加垂直间距 */
    text-align: center;
}

.section .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #007bff;
    margin: 10px auto 0;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}


/*
==================================================
  [4] 核心布局组件 (Layout Components)
==================================================
*/

/* --- 4.1. 通用导航栏 (Header) --- */
header {
    /* 1. 核心：在这里直接添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
    backdrop-filter: blur(10px);         /* 标准语法 */

    /* 2. 初始背景色：可以比原来更透明一些，让毛玻璃效果更明显 */
    background-color: rgba(255, 255, 255, 0.2); /* 0.1 到 0.3 之间是不错的选择 */

    box-shadow: none;
    height: 65px; /* 您可以根据需要调整这个值，例如 70px, 85px 等 */
    display: flex;
    align-items: center;
    padding: 0; /* 将内边距设为0，由height完全控制高度 */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    /* width: 100%; */
}

.logo {
    height: 50px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 260px;
}

.logo a {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
    min-width: 260px;
}

.logo-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.logo-white { opacity: 1; }
.logo-black { opacity: 0; }

nav {
    display: flex;
    align-items: center;
    gap: 20px;

}

nav ul {
    display: flex;
    align-items: center;
    margin-right: 120px;
}

nav ul li {
    margin-left: 30px;
    position: relative;
}

nav ul li a {
    display: block;
    padding: 0px 0;
    font-size: 0.24rem; /* 24px -> 0.24rem */
    transition: color 0.3s ease;
}
.nav-container nav > ul > li {
    /* 关键：让 li 本身撑满父容器 ul 的高度 */
    height: 100%;
    
    /* 关键：使用 flex 将内部的 a 链接垂直居中 */
    display: flex;
    align-items: center;

    /* position: relative 需要保留在 li 上，给巨型菜单作为定位参考 */
    position: relative; 
}

.nav-container nav > ul > li > a {
    /* 原来的 padding: 15px 0; 可以移除或设为 0 */
    padding-top: 0;
    padding-bottom: 0;
    
    /* 为了保持左右间距，可以这样写 */
    padding: 0 15px; /* 左右间距15px，上下为0 */
    
    /* 如果希望点击区域更大，可以保留左右 padding */
    display: flex; /* 让 a 也能更好地对齐内部的 icon */
    align-items: center;
    height: 100%; /* 让 a 标签也撑满 li，这样点击区域最大 */
    font-weight: 400;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* .nav-container {
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: color 0.5s ease, text-shadow 0.5s ease;
} */

.platform-link a {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
/* 1. 让 nav 容器成为下划线的定位参考点 */
.nav-container nav {
    /* position: relative;  */
}

/* 2. 为一级导航项的 a 标签设置样式，确保有足够空间 */
.nav-container nav > ul > li > a {
    display: inline-block; 
    padding: 20px 0; 
    position: relative;
}

/* 3. "魔法"下划线的核心样式 */
.nav-underline {
    position: absolute;
    bottom: 0px; /* 下划线距离导航栏底部的距离，可微调 */
    height: 3px; /* 下划线粗细 */
    
    background-color: #fff; /* 初始颜色为白色 */
    border-radius: 2px;     /* 圆角让它更精致 */

    /* 核心！让 left 和 width 的变化产生丝滑的过渡效果 */
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
}
/*
  当页面有 no-banner-page 类时（比如产品详情页），
  让滑动下划线默认就是蓝色。
  这个规则的优先级会高于通用的 .nav-underline 样式。
*/
body.no-banner-page .nav-underline {
    background-color: #007bff; /* 设置为你想要的蓝色 */
}



/* 4. 当导航栏滚动后，下划线颜色也需要同步改变 */
header.scrolled .nav-underline {
    background-color: #007bff; /* 变为深色 */
    /* 注意：颜色变化不需要 transition，因为它会跟随 header 的背景色变化即可 */
}
nav ul li a:hover,
.platform-link a:hover {
    color: #007bff;
}

.dropdown-icon {
    font-size: 0.12rem; /* 12px -> 0.12rem */
    vertical-align: middle;
    margin-left: 5px;
}

.platform-link {
    margin-left: 0px;
}

.platform-link a {
    font-size: 0.18rem; /* 18px -> 0.18rem */
}

/* -- Header Scrolled & Sub-page State -- */
/* -- Header Scrolled & Sub-page State -- */
/* -- Header Scrolled & Sub-page State -- */
/* header.scrolled,
.no-banner-page header { 
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} */

header.scrolled,
.no-banner-page header {
    /* 只需要改变背景色和阴影即可，磨砂效果会从 header 继承 */
    background-color: rgba(255, 255, 255, 0.7); /* 增加不透明度，让背景更“白” */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
header.scrolled .logo-white,
.no-banner-page header .logo-white { /* <-- 新增 */
    opacity: 0;
}

header.scrolled .logo-black,
.no-banner-page header .logo-black { /* <-- 新增 */
    opacity: 1;
}
header.scrolled nav ul li a,
header.scrolled .platform-link a,
.no-banner-page header nav ul li a,      /* <-- 新增 */
.no-banner-page header .platform-link a { /* <-- 新增 */
    color: #333;
    text-shadow: none;
}
/* .nav-container nav ul li.platform-link-item a.small-grey-link {
    
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    padding: 8px 15px;
    margin-left: 20px;
    

    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


.nav-container nav ul li.platform-link-item a.small-grey-link:hover {
    background-color: rgba(0, 170, 255, 0.2);
    color: #333; 
}


header.scrolled .nav-container nav ul li.platform-link-item a.small-grey-link {
    border-color: #555;
    color: #555;
}

header.scrolled .nav-container nav ul li.platform-link-item a.small-grey-link:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
} */
header.scrolled nav ul li a:hover,
header.scrolled .platform-link a:hover,
.product-page-body header nav ul li a:hover,
.product-page-body header .platform-link a:hover,
.solution-page-body header nav ul li a:hover,
.solution-page-body header .platform-link a:hover {
    color: #007bff;
}

/* -- Navigation Active Link -- */
nav ul li a.active {
    color: #0056b3;
}

header.scrolled nav ul li a.active,
.product-page-body header nav ul li a.active,
.solution-page-body header nav ul li a.active {
    color: #0056b3 !important;
}

/* -- Regular Dropdown Menu -- */
.dropdown .dropdown-menu,
.dropdown .mega-menu {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.dropdown.menu-visible > .dropdown-menu,
.dropdown.menu-visible > .mega-menu {
    display: block;
    opacity: 1;
    transform: translateY(0); /* 动画结束时回到原位 */
    pointer-events: auto;
}

.dropdown:not(.has-mega-menu) > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    padding: 10px 0;
    border-radius: 5px;
    z-index: 1050;
}

.dropdown-menu li {
    margin: 0;
}

.nav-container .dropdown-menu li a {
    padding: 10px 20px;
    font-size: 0.18rem; /* 18px -> 0.18rem */
    color: #333;
    text-shadow: none;
}

.dropdown-menu li a:hover {
     color: #007bff;
     background-color: #f8f9fa;
}

/* -- Mega Menu -- */
/* ========================================================== */
/* ======== Mega Menu (响应式居中 - 修正版) ======== */
/* ========================================================== */

/* 1. 让父级 li 成为静态定位的锚点 (保持不变) */
li.dropdown.has-mega-menu {
    position: static;
}

/* 2. Mega Menu 主容器样式 (核心修改) */
.has-mega-menu > .mega-menu {
    /* --- 定位与尺寸 --- */
    position: absolute;
    top: 100%; /* 从 header 底部开始 */
    left: 0;   /* 占满整个视口宽度 */
    right: 0;

    /* --- 动画与交互 (保持之前的修正) --- */
    display: none; /* 由JS控制显示 */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;

    /* --- 外观样式 (保持不变) --- */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    border-top: 1px solid rgba(0,0,0,0.05);

    /* --- 内部内容布局 (关键修正) --- */
    /* 我们不再使用一个额外的 .container-mega，而是直接在 .mega-menu 上应用布局 */
    display: grid; /* 使用 Grid 布局，更强大和可控 */
    place-items: center; /* 垂直和水平都居中其唯一的子元素 */
}

/* 3. 内容包裹器 .container-mega (现在它的作用更纯粹) */
.mega-menu > .container-mega {
    /* [核心] 定义容器的最大宽度，并确保其宽度100%填充可用空间 */
    max-width: 1600px; /* 您可以根据设计调整这个值 */
    width: 100%;
    
    /* [核心] 增加左右内边距，确保内容不会紧贴屏幕边缘 */
    padding: 30px 15px; /* 上下30px，左右15px */
    
    /* --- 内部 Flex 布局 (保持不变) --- */
    display: flex;
    gap: 40px; 
}


/* 4. 列与列之间的分隔线 (保持不变) */
.mega-menu .mega-menu-section {
    padding: 0 20px;
    border-right: 1px solid #e9ecef;
}
.mega-menu .mega-menu-section:last-child {
    border-right: none;
    padding-right: 0; /* 最后一列右侧不需要内边距 */
}
.mega-menu .mega-menu-section:first-child {
    padding-left: 0; /* 第一列左侧不需要内边距 */
}


/* 5. 使用 flex 实现列宽控制 (保持不变) */
.mega-menu-section.hardware-section {
    flex: 2 1 30%;
}
.mega-menu-section.software-section {
    flex: 3 1 40%;
}
.mega-menu-section.customized-section {
    flex: 1 1 25%;
}
.mega-menu-section h4 {
    font-size: 0.24rem; /* 24px -> 0.24rem */
    color: #003366;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
}

.mega-menu-content {
    display: flex;
    gap: 20px;
}

.mega-menu-links {
    flex: 0 0 40%;
}

.mega-menu-image {
    flex: 0 0 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    min-height: 280px;
}

.mega-menu-image img {
    max-width: 90%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.mega-menu-category {
    font-weight: bold;
    color: #333;
    margin-top: 15px;
    margin-bottom: 8px;
    padding-left: 10px;
}

.mega-menu-category:first-child {
    margin-top: 0;
}

.has-mega-menu .mega-menu-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    color: #555;
    text-shadow: none;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.3s ease;
    margin-bottom: 4px;
}

.mega-menu-links a:hover {
    background-color: #e9f4ff;
    color: #007bff;
}

.menu-arrow {
    font-size: 0.2rem; /* 20px -> 0.2rem */
    line-height: 1;
    color: #ccc;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mega-menu-links a:hover .menu-arrow {
    color: #007bff;
    transform: translateX(3px);
}

/* -- Mobile Menu Toggle (Hamburger) -- */
.mobile-menu-toggle {
    display: none;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
    margin-left: 15px;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle span:not(:last-child) {
    margin-bottom: 5px;
}

header.scrolled .mobile-menu-toggle span,
.no-banner-page header .mobile-menu-toggle span { /* <-- 修改并新增 */
    background-color: #333;
}

.submenu-back-button {
    display: none;
}
.submenu-toggle-icon {
    display: none;
}

/* --- 4.2. 通用页脚 (Footer) --- */
footer {
    background-color: #f8f9fa;
    padding: 60px 0 20px;
    color: #555;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 50px;
    max-width: 2000px;
}

.footer-left {
    flex: 1 1 400px;
    margin-right: 30px;
    margin-bottom: 20px;
}

.footer-left h5 {
    color: #003366;
    margin-bottom: 20px;
}

.footer-left p {
    margin-bottom: 15px;
}

.footer-right {
    flex: 2 1 500px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.footer-column {
    margin-bottom: 20px;
    min-width: 150px;
}

.footer-column h5 {
    color: #003366;
    margin-bottom: 15px;
}

.footer-column ul li {
    margin-bottom: 14px;
}

.footer-column ul li:last-child {
    margin-bottom: 0;
}

.footer-column ul li a {
    color: #555;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #007bff;
}

.qrcode {
    margin-top: 20px;
    text-align: left;
}

.qrcode img {
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
}

.qrcode p {
    font-size: 0.14rem; /* 14px -> 0.14rem */
    color: #333;
    margin: 0;
    margin-left: 45px;
}

.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #777;
}

/* --- 4.3. 通用二级/页面内导航 (Sub-Nav) --- */
.sub-nav,
.solution-sub-nav {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 998;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

/* About Page Sub-nav Specifics */
.sub-nav {
    position: fixed;
    top: 100px;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
}

header.scrolled ~ .sub-nav {
    position: sticky;
    top: 70px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Solution Page Sub-nav Specifics */
.solution-sub-nav {
    position: sticky;
    top: 85px; /* 主导航栏滚动后的高度，85px比较安全 */
    border-bottom: 1px solid #e9ecef;
    transition: top 0.3s ease;
}

/* Common Styles for both Sub-navs */
.sub-nav ul,
.solution-sub-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-nav li a {
    display: block;
    padding: 15px 25px;
    color: #333;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.solution-sub-nav li a {
    display: block;
    padding: 25px 60px;
    color: #333;
    font-size: 0.24rem; /* 24px -> 0.24rem */
    font-weight: 500;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.sub-nav li a:hover,
.sub-nav li a.sub-nav-active,
.solution-sub-nav li a:hover,
.solution-sub-nav li a.sub-nav-active {
    color: #007bff;
}

.sub-nav li a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

.solution-sub-nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

.sub-nav li a:hover::after,
.sub-nav li a.sub-nav-active::after {
    width: 50%;
}

.solution-sub-nav li a:hover::after,
.solution-sub-nav li a.sub-nav-active::after {
    width: 60%;
}

/* [V3 修复] 增加滚动边距，防止标题被遮挡 */
.about-section,
.solution-section {
    scroll-margin-top: 180px;
}


/*
==================================================
  [5] 页面专属区块 (Page-Specific Sections)
==================================================
*/

/* --- 5.1. 首页 (Home Page) --- */

/* Banner Carousel */

/* Banner Section General */
/* =======================================================
 * ===       最终版 Banner CSS - 毛玻璃效果          ===
 * ======================================================= */

/* ---- 4. Banner Carousel (最终版：纯滑动无缝循环) ---- */

#banner.full-screen-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    background-color: #333;
    user-select: none;
    -webkit-user-select: none;
}

#banner .carousel {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    /* 默认滑动动画，JS会根据需要临时禁用它 */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#banner .carousel-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    /* 始终不透明 */
    opacity: 1; 
}

#banner .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    pointer-events: none;
}

/* 您所有的标题、按钮、箭头、响应式样式都保持不变 */
#banner .carousel-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; z-index: 10; width: 90%; max-width: 1000px; }
#banner .carousel-caption h2,#banner .carousel-caption h1 { color: #fff; font-size: 0.56rem; /* 56px -> 0.56rem */ font-weight: 700; margin-bottom: 20px; text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7); }
#banner .carousel-caption p { font-size: 0.24rem; /* 24px -> 0.24rem */ font-weight: 300; margin: 0 auto; max-width: 800px; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6); }
#banner .cta-buttons { margin-top: 45px; display: flex; justify-content: center; align-items: center; gap: 25px; }
#banner .btn { padding: 13px 35px; margin: 0; font-size: 0.16rem; /* 16px -> 0.16rem */ font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.25s ease; cursor: pointer; border: 1px solid transparent; letter-spacing: 1px; }
#banner .btn-primary { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); }
#banner .btn-primary:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); }
#banner .btn-secondary { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.8); color: #fff; }
#banner .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); border-color: #fff; transform: translateY(-2px); }
#banner .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.28rem; /* 28px -> 0.28rem */ color: #fff; z-index: 20; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; }
#banner .carousel-prev { left: 30px; }
#banner .carousel-next { right: 30px; }
#banner .carousel-control:hover { background-color: rgba(0, 0, 0, 0.6); }
@media (max-width: 768px) {
    #banner .carousel-caption h2 { font-size: 0.34rem; } /* 34px -> 0.34rem */
    #banner .carousel-caption p { font-size: 0.17rem; } /* 17px -> 0.17rem */
    #banner .cta-buttons { flex-direction: column; gap: 15px; }
    #banner .btn { width: 80%; max-width: 280px; }
}
/* ========================================================== */
/* ======== 智能产品最终修正版 (vw 单位重构) ======== */
/* ========================================================== */
/* ========================================================== */
/* ======== 智能产品最终修正版 (rem + JS 方案) ======== */
/* ========================================================== */

/* --- 1. 外部网格容器 --- */
#smart-products {
    background-color: #f8f9fa;
}

.products-grid {
    display: flex;
    gap: 0.1667rem; /* 25px / 150 */
    align-items: stretch;
    margin-top: 0.2667rem; /* 40px / 150 */
    max-width: 12rem; /* 1800px / 150 */
    margin-left: auto;
    margin-right: auto;
}

.products-column-left {
    flex: 3;
    display: flex;
    gap: 0.1667rem; /* 25px / 150 */
}

.products-column-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 0.1667rem; /* 25px / 150 */
}

/* --- 2. 产品卡片 --- */
.product-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* 1px 边框保持不变 */
    box-shadow: 0 0.0267rem 0.1rem rgba(0,0,0,0.06); /* 4px, 15px */
    border-radius: 0.12rem; /* 12px / 150 */
    padding: 0.2rem; /* 30px / 150 */
    display: flex;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    text-decoration: none;
    color: inherit;
    flex: 1; 
}

.product-card:hover {
    transform: translateY(-0.0533rem); /* -8px / 150 */
    box-shadow: 0 0 0.1rem rgba(0, 123, 255, 0.3),
                0 0 0.1667rem rgba(0, 123, 255, 0.2),
                0 0 0 1px rgba(0, 123, 255, 0.4);
}

.product-card-content {
    /* 保持默认布局 */
}

.product-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.12rem; /* 12px / 150 */
}

.product-title-area h3 {
    font-size: 0.18rem; /* 18px / 150 */
    color: #003366;
    margin: 0;
    line-height: 1.3;
}

.product-series-tag {
    background-color: #e9f4ff;
    color: #007bff;
    padding: 0.02rem 0.0667rem; /* 3px, 10px */
    border-radius: 0.0333rem; /* 5px / 150 */
    font-size: 0.12rem; /* 14px / 150 */
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0.1rem; /* 15px / 150 */
    flex-shrink: 0;
}

.product-card-content p {
    font-size: 0.14rem; /* 16px / 150 */
    line-height: 1.6;
    color: #555;
    margin: 0 0 0.1rem 0; /* 15px / 150 */
}

.product-card-link {
    /* display: inline-block; */
    color: #333;
    font-weight: 600;
    transition: color 0.3s ease;
}


.product-card:hover .product-card-link p {
    color: #007bff;
}


/* --- 3. 垂直/水平卡片特定布局 --- */
.product-card.vertical {
    flex-direction: column;
}

.product-card.vertical .product-card-content {
    flex-shrink: 0;
}

.product-card.vertical .product-card-image-wrapper {
    flex-grow: 1;
    margin-top: 0.1333rem; /* 20px / 150 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.3333rem; /* 200px / 150 */
}

.product-card.vertical img {
    object-fit: contain;
    max-height: 90%;
    max-width: 90%;
}

.product-card.horizontal {
    flex-direction: row;
    align-items: center;
    gap: 0.1333rem; /* 20px / 150 */
}

.product-card.horizontal .product-card-content {
    flex: 1 1 55%;
}

.product-card.horizontal .product-card-image-wrapper {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card.horizontal img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}
/* ========================================================== */
/* ======== Monitoring Section 最终修正版 (Flexbox Gap) ======== */
/* ========================================================== */
/* ========================================================== */
/* ======== Monitoring Section 终极修正版 (对齐修正) ======== */
/* ========================================================== */

#monitoring-section .container {
    width: 80%;
    max-width: none;
}
.monitoring-layout {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* 60px */
    margin-top: 0.4rem; /* 40px */
}
.monitoring-video {
    flex: 0 0 75%;
    width: 75%;
}
.monitoring-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.12rem; /* 12px */
}

.monitoring-content-rotator {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* 30px */
}

.title-container {
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem; /* 15px */
    user-select: none;
}

/* ======================================================== */
/* ================ 核心修正：对齐与字体 =================== */
/* ======================================================== */

.title-slot {
    /* 1. 使用您验证过的、正确的字体大小 */
    font-size: clamp(22px, 1.2vw, 28px);
    
    color: #999;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transform-origin: left center;
    transition: transform 0.4s ease, color 0.4s ease, font-weight 0.4s ease;
    margin: 0 !important;
    
    /* 2. (关键) 统一使用 padding-left 实现缩进 */
    padding-left: 0.1rem; /* 10px */
}

.title-slot.active {
    color: #003366;
    font-weight: 700;
    transform: scale(1.35); 
}

.description-container {
    position: relative;
    min-height: 1.4rem; /* 140px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem; /* 15px */
    
    /* 3. (关键) 将缩进也应用到父容器上，确保内部所有内容都对齐 */
    padding-left: 0.1rem; /* 10px */
}

.description-text,
.learn-more-link {
    opacity: 0;
    transition: opacity 0.4s ease;
    
    /* 4. (关键) 移除子元素自身的 margin-left，因为父容器已经处理了缩进 */
    margin-left: 0; 
}

/* ======================================================== */
/* ================ 修改结束 ============================ */
/* ======================================================== */

.description-text.is-visible,
.learn-more-link.is-visible {
    opacity: 1;
}

.description-text {
    font-size: clamp(14px, 0.708vw, 19px); /* 17px */
    line-height: 1.9;
    color: #555;
    margin: 0 !important;
}

.learn-more-link {
    font-size: clamp(14px, 0.75vw, 20px); /* 18px */
    font-weight: 600;
    color: #555; 
    display: inline-block;
    text-decoration: none;
    transition: color 0.3s ease;
}

.learn-more-link:hover {
    color: #007bff;
}
/* Solutions Section (on Home) */
.solutions-section h2 {
    margin-bottom: 0;
}

.solutions-grid {
    display: flex;
    width: 100%;
    margin-top: 40px;
}

.solution-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 50vh;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: flex 0.5s ease;
    cursor: pointer;
}

.solution-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.solution-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    transition: background 0.5s ease;
}

.solution-item .content {
    position: relative;
    z-index: 3;
    margin-bottom: 30px;
    transition: transform 0.5s ease, text-align 0.5s ease, margin 0.5s ease, top 0.5s ease;
}

.solution-item .content h3 {
    color: #fff;
    font-size: 0.28rem; /* 28px -> 0.28rem */
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.solution-item .content p {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    opacity: 0.9;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.solution-item:hover {
    flex-grow: 2.5;
}

.solution-item:hover img {
    transform: scale(1.1);
}

.solution-item:hover .overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}

.solution-item:hover .content {
    text-align: left;
    margin-left: 30px;
    margin-bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}


/*
==================================================
  [FIX] 优秀案例布局 (V-Final-3: 隔离动画层)
==================================================
*/

/* 这一部分保持不变 */
.cases-section {
    background-color: #f8f9fa;
}

.cases-section .container {
    width: 70%;
    max-width: 1600px;
    margin-left: 15%;
    margin-right: 15%;
    padding: 0;
}

/* 这一部分保持不变，但为了清晰，我包含了它 */
.cases-grid {
    display: flex;
    margin-top: 40px;
    
    /* width: 75%; */
    /* 您设置的 2:1 宽高比 */
    aspect-ratio: 18 / 9; 
    /* max-height: 80vh; */
    gap: 0;
}


/* ================================================== */
/* ============== 从这里开始是核心修改 ============== */
/* ================================================== */

/* 外层容器：只负责布局和尺寸变化，不负责视觉和动画 */
.case-item {
    flex: 1;
    position: relative;
    overflow: hidden; /* 保留overflow:hidden来裁剪放大的内层 */
    transition: flex 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    /* 不再需要 color, cursor, 和其他视觉相关的样式 */
}

/* 新增的内层包裹：负责所有视觉内容和动画 */
.case-item-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75vh;
    color: #fff;
    cursor: pointer;
    /* 将悬浮动画的目标从 img 改为这个内层 */
    transition: transform 0.6s ease; 
}

/* 
   悬浮时，不再是放大图片，而是放大整个内层。
   这是消除“跳动感”的关键！
   这个规则替代了原来的 .case-item.is-expanded img { ... }
*/
.case-item.is-expanded .case-item-inner {
    /* transform: scale(1.05);  */
}

/* 将图片样式指向内层中的img */
.case-item-inner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* 图片自身不再需要transition，因为动画由父级.case-item-inner处理 */
}

/* 其他样式也指向内层 */
.case-item-inner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 70%); */
    background-color: rgba(0, 0, 0, 0.3);
    transition: background 0.6s ease;
}

.case-item-inner .content {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 1;
    transition: all 0.6s ease;
}

.case-item-inner .content h3 {
    font-size: 0.28rem; /* 28px -> 0.28rem */
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}

.case-item-inner .content p {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    max-width: 400px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease 0.2s, max-height 0.5s ease 0.2s;
}

/* is-expanded 相关的样式保持不变，因为它们作用于外层和内容 */
.case-item.is-expanded { flex: 8; }
.case-item.is-contracted { flex: 0; min-width: 0; }

/* 悬浮时，内层的视觉效果变化 */
.case-item.is-expanded .case-item-inner .overlay {

    background-color: transparent;
}

.case-item.is-expanded .case-item-inner .content {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
}

.case-item.is-expanded .case-item-inner .content p {
    opacity: 1;
    max-height: 200px;
}

.case-item.is-contracted .case-item-inner .content {
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* ========================================================== */
/* ======== Partners Section (响应式重构版) ======== */
/* ========================================================== */

.partners-section {
    background-color: #fff;
    padding-top: 60px; /* 增加一些顶部内边距 */
    padding-bottom: 60px; /* 增加一些底部内边距 */
}

/* 容器保持不变 */
.partners-section .container {
    max-width: 1600px; 
    /* 关键: 确保容器在小屏幕下有左右边距 */
    padding-left: 15px;
    padding-right: 15px;
}

/* Section-title 保持不变 */
.partners-section .section-title {
    /* 如果需要，在这里添加标题样式 */
}

/* 1. 核心修改：使用可重复的自适应网格 */
.partners-grid {
    display: grid;
    /* 
     * auto-fit: 自动决定一行能放几列。
     * minmax(240px, 1fr): 每一列的宽度最小是 240px，最大是1等份。
     * 这意味着浏览器会自动计算，如果一行能放下多个240px的卡片，它就会放，
     * 剩下的空间会平均分配，实现完美的自适应。
     */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* 2. 核心修改：卡片样式 */
.partner-item {
    /* 放弃固定的 width 和 height */
    /* width: 280px; */  /* <--- 删除 */
    /* height: 158px; */ /* <--- 删除 */
    
    /* 使用 aspect-ratio 保持固定的高宽比 (16:9) */
    /* 如果您的logo大多是这个比例，效果会很好。可以根据实际情况调整。 */
    /* 280 / 158 ≈ 1.77, 16 / 9 ≈ 1.77 */
    aspect-ratio: 16 / 9; 

    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* 不再需要 justify-self: center; 网格会自动处理对齐 */
}

/* 3. 核心修改：图片样式 */
.partner-item img {
    /* 图片将完全填充其容器，但不会超出内边距（padding） */
    max-width: 100%;
    max-height: 100%;
    
    /* 
     * object-fit: contain; 确保图片完整显示，保持自身比例，
     * 不会被拉伸变形，这对于logo展示至关重要。
     */
    object-fit: contain;
    
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* 4. 悬停效果 (保持不变，但效果会更好) */
.partner-item:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 91, 187, 0.15);
}

.partner-item:hover img {
    opacity: 1;
}

/* 5. (可选但推荐) 针对非常小的手机屏幕的微调 */
/* 比如在 360px 宽的屏幕上，240px的最小宽度可能还是有点大 */
@media (max-width: 576px) {
    .partners-grid {
        /* 在小手机上，让最小宽度更小，可以并排显示两个 */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px; /* 间距也可以适当减小 */
    }

    .partner-item {
        padding: 15px; /* 内边距也减小一点 */
    }
}


/* --- 5.2. 关于我们页面 (About Page) --- */
.about-banner {
    height: 50vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 0;
    background-image: url('images/about-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;/* 背景图片不重复 */
}

.about-section {
    padding: 120px 0; /* [V3 修复] 统一增加垂直间距 */
}
.about-section:nth-child(even) {
     background-color: #f8f9fa;
}

.company-intro .container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* .company-intro-image { flex: 1; }
.company-intro-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.company-intro-text { flex: 2; } */

.company-intro-image { 
    /* 修改：将 flex: 1 改为 flex: 0 0 40%，使其固定占据40%宽度 */
    flex: 0 0 40%; 
}

.company-intro-image img {
    width: 800px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.company-intro-text { 
    /* 修改：将 flex: 2 改为 flex: 1，使其自动填充剩余空间 */
    flex: 1; 
}

.company-intro-text p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.enterprise-honors .section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 15px auto 50px auto;
    color: #666;
}

/* .honors-row-1 {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}
.honors-row-1 .certificate-item { width: calc(50% - 20px); } */

/* ======================================= */
/* ============== 主要修改区域 ============== */
/* ======================================= */

.honors-row-1 {
    display: flex;
    /* 修改：将两端对齐改为居中对齐 */
    justify-content: center; 
    gap: 40px; /* 保持项目之间的间距 */
    margin-bottom: 50px;
}

.honors-row-1 .certificate-item {
    /* 修改：将宽度从 calc(50% - 20px) 改为固定的百分比 (40% 约等于 50% 的 80%) */
    width: 45%; 
    /* 添加一个最大宽度，防止在大屏幕上图片过大，此为优化项 */
    max-width: 650px; 
}

/* ======================================= */
/* ============= 修改结束区域 ============= */
/* ======================================= */



.honors-row-1 .certificate-item img {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.honors-row-1 .certificate-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.18);
}

/* ---- 企业荣誉 Section (最终版：使用自定义美化滚动条) ---- */

/* 1. 主容器样式 (不变) */
.about-section.enterprise-honors {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 2. 标题和副标题样式 (不变) */
.enterprise-honors .section-title {
    text-align: center;
    margin-bottom: 20px;
}
.enterprise-honors .section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

/* 3. 上方两张大图的容器样式 (不变) */
.honors-row-1 {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* 4. 上方单个大图的样式 (不变) */
.certificate-item {
    flex: 1 1 400px;
    max-width: 500px;
}
.certificate-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 
 * 5. 可横向拖动区域的容器样式 (核心修改) 
*/
.soft-certs-container {
    overflow-x: auto;
    display: flex;
    gap: 20px;
    cursor: grab;
    
    /* 
     * [修改] 移除 mask-image 和相关的内外边距调整。
     *        增加一点底部内边距，为滚动条留出空间。
    */
    padding: 10px 2px 20px 2px; /* 左右padding改小，底部padding增大 */

    /* [新增] Firefox 下的滚动条样式 */
    scrollbar-width: thin; /* 'auto', 'thin', 'none' */
    scrollbar-color: #007bff #f1f1f1; /* 滑块颜色 和 轨道颜色 */
}

/* 
 * 6. [新增] Webkit浏览器 (Chrome, Safari, Edge) 的滚动条美化
*/
.soft-certs-container::-webkit-scrollbar {
    height: 8px; /* 滚动条的高度 */
}

.soft-certs-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道的背景色 */
    border-radius: 10px;
}

.soft-certs-container::-webkit-scrollbar-thumb {
    background-color: #007bff; /* 滑块的颜色，与您的主题色匹配 */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* 创建一个“边框”效果，让滑块看起来更窄 */
}

.soft-certs-container::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3; /* 鼠标悬停时滑块的颜色 */
}

/* 拖动时的鼠标样式 (不变) */
.soft-certs-container.active-grab {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
}

/* 7. 可拖动区域中单个证书的样式 (不变) */
.soft-cert-item {
    flex: 0 0 calc(20% - 16px); 
    min-width: 250px; 
}

/* 8. 证书图片的样式 (不变) */
.soft-cert-item img {
    width: 100%;
    aspect-ratio: 4 / 5.5; 
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ================================================= */
/* ==== 全新三卡片式企业文化布局 (2024-05-21) ==== */
/* ================================================= */

.enterprise-culture .container .section-title::after {
    margin-bottom: 50px;
}

.culture-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.culture-card-new {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.08);
    overflow: hidden; /* 确保图片圆角生效 */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.culture-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.15);
}

.culture-card-image {
    width: 100%;
    aspect-ratio: 3 / 2; /* 强制3:2宽高比 */
}

.culture-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形，填满容器 */
}

.culture-card-content {
    padding: 30px;
    text-align: left;
    flex-grow: 1; /* 让内容区填充剩余空间 */
}

.culture-card-content h3 {
    font-size: 0.26rem; /* 26px -> 0.26rem */
    color: #003366;
    margin: 0 0 15px 0;
}

.culture-card-content p {
    font-size: 0.18rem; /* 18px -> 0.18rem */
    line-height: 1.8;
    color: #555;
    margin: 0;
}


/* ================================================= */
/* ================ 修改结束 ===================== */
/* ================================================= */



.contact-section .container {
    display: flex;
    gap: 60px;
    align-items: center; /* <<< 这里是关键：从 flex-start 改为 center */
}
.contact-info {
    flex: 1;
    /* margin-top: 5%; */
}
.contact-info h3 {
    font-size: 0.24rem; /* 24px -> 0.24rem */
    margin-bottom: 25px;
    color: #003366;
    border-left: 4px solid #007bff;
    padding-left: 15px;
}
.contact-info p {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    margin-bottom: 15px;
    color: #333;
}
.contact-info .contact-qrcode { margin-top: 30px; }
.contact-info .contact-qrcode img {
    width: 150px;
    height: 150px;
}
.contact-map-image {
    /* margin-top: 70px; */
    flex: 1.5;
}
.contact-map-image img {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/* --- 5.3. 解决方案页面 (Solution Pages) --- */

/* =========================================== */
/* ========== 解决方案页面核心修改 ========== */
/* =========================================== */
.solution-section {
    padding: 90px 0; /* 统一增加上下内边距，解决区块间距过近问题 */
}
/* =========================================== */


.solution-section.alt-bg {
    background-color: #f8f9fa;
}

.section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: -10px auto 50px auto;
    color: #666;
}

/* Solution Banner - V2: 固定宽高比，提升视觉稳定性 */
/*
==================================================
  [Banner Ultimate Fix] - 强制全宽，解决4K空隙问题
==================================================
*/

/* =======================================================
 * ===       修复后的 Banner 样式 (最小化改动版)     ===
 * ======================================================= */

/* 1. Banner 主容器样式 */
.solution-banner {
    /* 保持您原有的宽高和全屏技巧 */
    height: 50vh;
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* 背景图设置 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 关键：使用 Flexbox 来为子元素提供一个可靠的居中环境 */
    display: flex;
    justify-content: center; /* 水平居中其子元素 */
    align-items: center;   /* 垂直居中其子元素 */
    
    color: white;
}

/* 2. 遮罩层样式 (保持不变) */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); */
}

/* 3. 新的内容容器样式 (这是修复的核心) */
.solution-banner-container {
    position: relative; /* 确保它在遮罩层之上 */
    z-index: 2;

    /* 定义内容的有效宽度区域 */
    width: 90%;
    max-width: 1200px; /* 您可以根据设计调整最大宽度 */
    
    /* 无需 margin: 0 auto; 因为父级 Flexbox 已经处理了居中 */
    padding: 0 15px; /* 两侧留出安全边距 */
}

/* 4. 文字内容样式 (保持不变) */
.banner-content {
    /* 这里可以不设置 max-width，让它自然撑满 .solution-banner-container */
    /* 或者设置一个百分比，如 max-width: 60%; */
    /* max-width: 650px; */
}

.banner-content h1 {
    font-size: 0.48rem; /* 48px -> 0.48rem */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}

/* 注意：这里的选择器 p 改为 p.hero-description，以增加特异性 */
.banner-content p.hero-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 0.18rem; /* 18px -> 0.18rem */
}
/* Status Section */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.status-item {
    text-align: center;
    padding: 30px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.status-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.08);
}
.status-icon {
    font-size: 0.32rem; /* 32px -> 0.32rem */
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background-color: #e9f4ff;
    color: #007bff;
    margin: 0 auto 20px auto;
}
.status-item h3 {
    color: #003366;
    margin-bottom: 10px;
}
.status-item p {
    color: #555;
    line-height: 1.6;
}

/* Intro Section */
.intro-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}
.intro-image {
    flex: 0 0 60%;
    width: 60%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}
.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro-text {
    flex: 1 1 40%;
}
.intro-text .section-title {
    text-align: left;
}
.intro-main-title {
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.3;
}
.intro-text p {
    line-height: 1.8;
    color: #555;
    margin-top: 0px;
    margin-bottom: 15px;
}
.intro-sub-title {
    font-weight: 600;
    color: #007bff;
    margin-top: 15px;
    margin-bottom: 5px;
}
.highlight-data {
    color: #007bff;
    font-weight: 700;
    font-size: 1.1em; /* 保持em不变，它会相对父元素缩放 */
    margin: 0 4px;
}
.intro-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 60px;
}
.feature-item {
    text-align: center;
}
.feature-item h4 {
    font-weight: 600;
    color: #003366;
    margin: 0 auto 20px auto;
    padding-bottom: 12px;
    position: relative;
}
.feature-item h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background-color: #007bff;
}
.feature-item p {
    color: #555;
    line-height: 1.7;
    margin: 0;
}
/* Value Section */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.value-card {
    background-color: #fff;
    padding: 25px 25px 0px 25px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.7), 0 0 15px rgba(0, 123, 255, 0.3);
}
.value-header {
    display: flex;
    align-items: center;
    /* margin-bottom: 20px; */
}
.value-icon {
    font-size: 0.24rem; /* 24px -> 0.24rem */
    color: #007bff;
    background-color: #e9f4ff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}
.value-card h4 {
    color: #003366;
    font-size: 0.24rem; /* 24px -> 0.24rem */
    margin-bottom: 0;
}
.value-card p {
    line-height: 1.7;
    color: #555;
    flex-grow: 1;
    font-size: 0.16rem; /* 16px -> 0.16rem */
}

/* Application / Case Study Section */
.case-study-container {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
    background-color: #f8f9fa;
    padding: 50px;
    border-radius: 16px;
}
/* .case-study-image {
    flex: 0 0 45%;
} */
.case-study-image {
    flex: 0 0 45%;
    height: 800px; /* 1. 在容器上恢复固定的视觉高度 */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden; /* 2. 隐藏图片溢出的部分，这对于圆角和object-fit很重要 */
}
/* .case-study-image img {
    width: 100%;
    height: auto; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
} */
.case-study-image img {
    width: 100%;
    height: 100%; /* 3. 让图片完全填满其容器的高度和宽度 */
    object-fit: cover; /* 4. (关键) 保持图片原始比例，通过裁剪来适应容器，而不是拉伸 */
}
.case-study-content {
    flex: 1 1 55%;
}
.case-study-content h4 {
    font-size: 1.6em; /* 保持 em */
    color: #003366;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}
.case-study-content p {
    color: #555;
    margin: 0 0 35px 0;
}
.case-study-content p strong {
    font-weight: 600;
    color: #333;
}
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.benefits-list i {
    font-size: 0.18rem; /* 18px -> 0.18rem */
    color: #28a745;
    margin-top: 5px;
}
.benefits-list div {
    color: #333;
}
.benefits-list strong {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 1em; /* 保持 em */
}
.benefits-list span {
    color: #555;
    font-size: 0.95em; /* 保持 em */
}

/* Related Products Section */
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Architecture Diagram Sections */
.arch-final-infographic,
.arch-grid-final-background {
    background-color: #030a1a;
    padding: 1.2rem 0; /* 120px -> 1.2rem */
    position: relative;
}
.arch-final-infographic {
    background-image:
        radial-gradient(ellipse at top left, rgba(0, 123, 255, 0.15), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 200, 255, 0.15), transparent 50%);
}
.arch-grid-final-background {
    background: #0d1a2e;
    overflow: hidden;
}
.arch-final-infographic .section-title,
.arch-final-infographic .section-subtitle,
.arch-grid-final-background .section-title,
.arch-grid-final-background .section-subtitle {
    color: #ffffff;
    text-shadow: 0 0.1rem 0.2rem rgba(0, 170, 255, 0.5); /* 10px, 20px (示例性转换) */
}

.arch-infographic-container {
    max-width: 12rem;
    margin: 0.6rem auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arch-layer {
    width: 100%;
    text-align: center;
    /* 关键修正 1: 图层自己不再负责与连接器之间的间距 */
    margin-bottom: 0; 
}

.layer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #ade8ff;
    font-size: 0.25rem;
    font-weight: 600;
    margin-bottom: 0.2rem; /* 标题和卡片内容的间距，保持不变 */
}

.layer-title i { color: #00aaff; }
.layer-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem; /* 15px -> 0.15rem */
}
.arch-card {
    background: rgba(10, 25, 47, 0.7);
    border: 1px solid rgba(0, 170, 255, 0.2); /* 1px边框保持px */
    border-radius: 0.08rem; /* 8px -> 0.08rem */
    padding: 0.12rem 0.2rem; /* 12px 20px -> 0.12rem 0.2rem */
    color: #cdd6f0;
    font-size: 0.15em; /* em单位是相对的，很好，保持不变 */
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 1px 1px rgba(0, 170, 255, 0.1), 0 0.05rem 0.15rem rgba(0,0,0,0.2); /* 5px, 15px -> 0.05rem, 0.15rem */
    transition: all 0.3s ease;
}
.arch-card:hover {
    transform: translateY(-0.03rem); /* -3px -> -0.03rem */
    border-color: rgba(0, 170, 255, 0.5);
    box-shadow: inset 0 0 1px 1px rgba(0, 170, 255, 0.1), 0 0.08rem 0.25rem rgba(0,0,0,0.3), 0 0 0.1rem rgba(0,170,255,0.3);
}
.arch-card.app { background-color: rgba(40, 167, 69, 0.2); border-color: rgba(40, 167, 69, 0.4); }
.arch-card.platform-core { background-color: rgba(0, 123, 255, 0.2); border-color: rgba(0, 123, 255, 0.4); }

.arch-connector {
    width: 0.02rem;
    height: 0.4rem;
    background: linear-gradient(to bottom, #00aaff, #007bff, #00aaff);
    position: relative;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 0.08rem rgba(0, 170, 255, 0.7);
    animation: connector-pulse 2s infinite ease-in-out;

    /* 
     * 关键修正 2: 让连接器自己负责上下所有间距，并确保它们相等。
     * 0.2rem 是一个比较适中的值，您可以根据视觉效果微调。
    */
    margin: 0.2rem 0; /* 上下边距都是 0.2rem，左右是 0 */
}


@keyframes connector-pulse {
    50% { box-shadow: 0 0 0.15rem rgba(0, 170, 255, 1); }
}
.arch-connector::before, .arch-connector::after {
    content: '';
    position: absolute;
    width: 0.1rem; /* 10px -> 0.1rem */
    height: 0.1rem; /* 10px -> 0.1rem */
    border-style: solid;
    border-color: #00aaff;
}
.arch-connector::before {
    content: attr(data-label-up);
    top: 0.05rem; /* 5px -> 0.05rem */
    left: 0.2rem; /* 20px -> 0.2rem */
    border: none;
    width: auto;
    height: auto;
    color: #7c96c2;
    font-size: 0.14rem; /* 已是rem，保持不变 */
}
.arch-connector::after {
    top: 0.15rem; /* 15px -> 0.15rem */
    left: -0.12rem; /* -12px -> -0.12rem */
    border-width: 0 0.02rem 0.02rem 0; /* 2px -> 0.02rem */
    transform: rotate(45deg);
}
[data-label-down]::after {
    content: attr(data-label-down);
    bottom: 0.05rem; /* 5px -> 0.05rem */
    right: 0.2rem; /* 20px -> 0.2rem */
    top: auto;
    left: auto;
    border: none;
    width: auto;
    height: auto;
    color: #7c96c2;
    font-size: 0.14rem; /* 已是rem，保持不变 */
}
[data-label-down]::before {
    content: '';
    bottom: 0.15rem; /* 15px -> 0.15rem */
    right: -0.12rem; /* -12px -> -0.12rem */
    top: auto;
    left: auto;
    border-width: 0 0.02rem 0.02rem 0; /* 2px -> 0.02rem */
    transform: rotate(225deg);
}
/* --- 5.4. 优秀案例页面 (Cases Page) --- */
.page-banner {
    height: 50vh;
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    background-size: cover;
    background-position: center;
    padding: 0;
    text-align: left;
}
.page-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg,rgba(0,51,102,.75) 0,rgba(0,51,102,.1) 100%); */
    z-index: 1;
}
.page-banner .container{
    position: relative;
    z-index: 2;
}
.page-banner .banner-content{
    max-width: 60%;
}
.page-banner .banner-content h1{
    font-size: 0.48rem; /* 48px -> 0.48rem */
    color:#fff;
    text-shadow:2px 2px 4px rgba(0,0,0,.5);
    margin-bottom:20px
}
.page-banner .banner-content p{
    font-size: 0.18rem; /* 18px -> 0.18rem */
    color:rgba(255,255,255,.9);
    line-height:1.7
}

.cases-page-section {
    padding: 120px 0;
    background-color: #f8f9fa;
}

.container-80 {
    width: 80%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

.cases-display-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.case-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    text-decoration: none;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 51, 102, 0.1);
}
.case-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.case-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.case-card:hover .case-card-image img {
    transform: scale(1.05);
}
.case-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.case-card-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.12rem; /* 12px -> 0.12rem */
    font-weight: 600;
    background-color: #e9f4ff;
    color: #007bff;
    border-radius: 5px;
    margin-bottom: 15px;
    align-self: flex-start;
}
.case-card-content h3 {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    color: #003366;
    margin: 0;
}
.case-card-content p {
    font-size: 0.15rem; /* 15px -> 0.15rem */
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
    margin-bottom: 20px
}
.case-card-link {
    color: #007bff;
    font-weight: 600;
    font-size: 0.15rem; /* 15px -> 0.15rem */
    align-self: flex-start;
    transition: color .3s ease
}

/* --- 5.5. 产品详情页 (Product Pages) --- */

.product-section { padding: 120px 0; }
.product-section.alt-bg { background-color: #f8f9fa; }
.product-section .section-title { font-size: 0.3rem; margin-bottom: 20px; } /* 30px -> 0.3rem */
.product-section .section-subtitle {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    color: #666;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.7;
}

#product-hero {
    height: 100vh;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 40px;
    box-sizing: border-box;
}
.product-hero-container {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 90%;
}
.product-hero-image { flex: 1 1 50%; text-align: center; }
.product-hero-image img { max-width: 90%; border-radius: 16px; margin-left: 10%;}
.product-hero-content { flex: 1 1 50%; }
.product-hero-title-area {
    display: flex;
    /* align-items: baseline; */
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
}
.product-hero-title-area h1 {
    font-size: 0.32rem; /* 32px -> 0.32rem */
    color: #003366;
    margin: 0;
    line-height: 1.2;
}
.product-hero-series-tag {
    /* --- 布局与对齐样式 --- */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; 

    /* --- 核心微调技巧 --- */
    position: relative; /* 1. 启用相对定位 */
    top: 2px;           /* 2. 将元素从它的原始位置向下微推2像素（如果效果过了可以试试 1px） */

    /* --- 原有的外观样式 --- */
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    font-weight: 700;
}
.product-description {
    line-height: 1.8;
    color: #555;
    margin-bottom: 45px;
    font-size: 0.18rem; /* 18px -> 0.18rem */
    max-width: 750px;
}
.application-scenarios h3 {
    margin-bottom: 20px;
    font-size: 0.24rem; /* 24px -> 0.24rem */
    color: #003366;
}
.application-scenarios ul {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.application-scenarios li {
    background-color: #e9ecef;
    border-radius: 25px;
    color: #333;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    padding: 10px 20px;
    user-select: none;
}
.application-scenarios li:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.cta-buttons {
    margin-top: 50px;
    display: flex;
    gap: 20px;
}
.btn {
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    padding: 18px 40px;
    font-size: 0.2rem; /* 20px -> 0.2rem */
    font-weight: 600;
}
.btn-primary { background-color: #007bff; color: #fff; }
.btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); }
.btn-secondary { background-color: #fff; color: #007bff; border-color: #007bff; }
.btn-secondary:hover { background-color: #007bff; color: #fff; transform: translateY(-2px); }

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.advantage-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.1);
}
.advantage-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px auto;
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.advantage-icon-wrapper i { font-size: 0.36rem; color: #007bff; } /* 36px -> 0.36rem */
.advantage-card h4 { font-size: 0.22rem; color: #003366; margin-bottom: 15px; } /* 22px -> 0.22rem */
.advantage-card p { font-size: 0.16rem; line-height: 1.7; color: #555; margin: 0; } /* 16px -> 0.16rem */

.platform-container { display: flex; align-items: center; gap: 60px; }
.platform-image { flex: 1 1 55%; }
.platform-image img { width: 100%; border-radius: 12px; }
.platform-content { flex: 1 1 45%; }
.platform-content h2 { font-size: 0.38rem; text-align: left; } /* 38px -> 0.38rem */
.platform-content h2::after { margin: 10px 0 0; }
.platform-content p { font-size: 0.18rem; color: #555; line-height: 1.8; text-align: left; } /* 18px -> 0.18rem */
.platform-sub-title { font-size: 0.24rem; color: #003366; margin-top: 30px; margin-bottom: 20px; text-align: left; } /* 24px -> 0.24rem */
.platform-features {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}
.platform-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.16rem; color: #333; line-height: 1.6; } /* 16px -> 0.16rem */
.platform-features li i { color: #28a745; font-size: 0.18rem; margin-top: 3px; } /* 18px -> 0.18rem */

#product-specs .container { max-width: 80%; }
.specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 60px;
    margin: 40px auto 0 auto;
}
.spec-item {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.spec-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.2), 0 0 0 1px rgba(0, 123, 255, 0.5);
}
.spec-value { display: block; font-size: 0.18rem; font-weight: 700; color: #003366; margin-bottom: 12px; } /* 18px -> 0.18rem */
.spec-label { display: block; font-size: 0.16rem; color: #666; } /* 16px -> 0.16rem */

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.recommendation-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    position: relative;
}
.recommendation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.1);
}
.rec-card-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: #fff; }
.rec-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rec-card-content { padding: 20px; flex-grow: 1; }
.rec-card-content .product-title-area h3 { font-size: 0.2rem; } /* 20px -> 0.2rem */
.rec-card-content .product-series-tag { font-size: 0.13rem; } /* 13px -> 0.13rem */
.rec-card-content p { font-size: 0.15rem; color: #555; line-height: 1.6; margin: 10px 0 0 0; } /* 15px -> 0.15rem */
.rec-card-arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 0.24rem; /* 24px -> 0.24rem */
    color: #ccc;
    opacity: 0;
    transition: opacity 0.3s ease, right 0.3s ease;
}
.recommendation-card:hover .rec-card-arrow { opacity: 1; right: 15px; }


/*
==================================================
  [6] 特定组件 (Modals, Forms)
==================================================
*/
/* ========================================================== */
/* ======== Modal & Forms 终极修正版 (隔离与重建) ======== */
/* ========================================================== */

/* --- 防御性CSS：强制重置任何意外的P标签 --- */
#contact-form p,
#modal-contact-form p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

/* --- Modal 容器样式 (使用 rem = px / 100 换算) --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}
.modal-content {
    background: #fff;
    border-radius: 0.16rem; /* 16px */
    width: 90%;
    max-width: 5rem; /* 500px */
    position: relative;
    box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.2);
    animation: slideIn 0.4s ease-out;
    padding: 0.35rem 0.4rem; /* 35px 40px */
}
.modal-close {
    position: absolute;
    top: 0.1rem; right: 0.1rem; width: 0.36rem; height: 0.36rem;
    background: #f1f1f1;
    border: none;
    border-radius: 50%;
    font-size: 0.2rem; /* 20px */
    color: #888;
    cursor: pointer;
    line-height: 0.36rem;
    text-align: center;
    transition: all 0.2s ease;
}
.modal-close:hover {
    background: #e0e0e0;
    color: #333;
    transform: rotate(90deg);
}
.modal-content h3 {
    text-align: center;
    color: #003366;
    margin-top: 0;
    margin-bottom: 0.12rem; /* 12px */
    font-size: 0.26rem; /* 26px */
    font-weight: 600;
}
.modal-content p {
    text-align: center;
    color: #666;
    font-size: 0.16rem; /* 16px */
    line-height: 1.7;
    margin-bottom: 0.3rem; /* 30px */
}

/* ======================================================== */
/* ================ 核心修正：使用Flexbox + Gap ============ */
/* ======================================================== */

/* --- 统一的表单组样式 --- */
#contact-form .form-group,
#modal-contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.08rem; /* 使用gap精确控制8px间距，无视外部干扰 */
    margin-bottom: 0.2rem; /* 组与组之间20px间距 */
}

/* --- 统一的标签Label样式 --- */
#contact-form label,
#modal-contact-form label {
    margin: 0; 
    padding: 0;
    display: block;
    font-weight: 600;
    color: #495057;
    font-size: 0.14rem; /* 14px */
}

/* --- 统一的输入框和文本域样式 --- */
#contact-form input[type="text"],
#contact-form input[type="tel"],
#contact-form textarea,
#modal-contact-form input,
#modal-contact-form textarea {
    width: 100%;
    padding: 0.12rem 0.15rem; /* 12px, 15px */
    border: 1px solid #ced4da;
    border-radius: 0.08rem; /* 8px */
    font-size: 0.16rem; /* 16px */
    font-family: inherit;
    background-color: #f8f9fa;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin: 0; /* 强制移除自身所有margin */
}

#contact-form input[type="text"]:focus,
#contact-form input[type="tel"]:focus,
#contact-form textarea:focus,
#modal-contact-form input:focus,
#modal-contact-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    background-color: #ffffff;
}

#contact-form textarea {
    resize: vertical;
    min-height: 1.2rem; /* 120px */
}
#modal-contact-form textarea {
    resize: vertical;
    min-height: 0.8rem; /* 80px */
}

/* --- 统一的提交按钮样式 --- */
#contact-form .submit-btn,
#modal-contact-form .submit-btn {
    width: 100%;
    padding: 0.15rem; /* 15px */
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 0.08rem; /* 8px */
    font-size: 0.18rem; /* 18px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0; /* 强制移除自身所有margin */
}
#modal-contact-form .submit-btn {
    padding: 0.14rem;
    box-shadow: 0 0.04rem 0.15rem rgba(0, 123, 255, 0.2);
}

#contact-form .submit-btn:hover,
#modal-contact-form .submit-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
#modal-contact-form .submit-btn:hover {
    box-shadow: 0 0.06rem 0.2rem rgba(0, 123, 255, 0.3);
}
/*
============================================================
  [ADDON] Mobile Navigation Enhancements (V4 - Final Refactor)
============================================================
*/

/* 汉堡包按钮 "is-active" 状态 (变为 "X") 和 颜色修复 */
.mobile-menu-toggle span {
    background-color: #333 !important; /* 强制黑色 */
}
.mobile-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/*
============================================================
  [7] 响应式媒体查询 (Responsive Media Queries)
  - All mobile navigation styles are now consolidated here.
============================================================
*/

/* --- Large Desktops (<= 1440px) --- */
@media (max-width: 1440px) {
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .cases-display-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Desktops & Small Laptops (<= 1200px) --- */
@media (max-width: 1200px) {
    .products-grid {
        flex-direction: column;
    }
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .intro-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Tablets & Mobile (<= 992px) --- */
@media (max-width: 992px) {

    /* =================================== */
    /* == Mobile Header & Navigation Core == */
    /* =================================== */
    
    header {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 15px 0;
    }
    .logo-white { opacity: 0 !important; }
    .logo-black { opacity: 1 !important; }
    .nav-container { justify-content: space-between; }

    /* Hide desktop nav, show mobile toggle */
    nav ul, .platform-link { display: none; }
    .mobile-menu-toggle { display: block; }
    
    /* Mobile Nav Panel */
    header nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        background-color: #ffffff;
        z-index: 1005;
        padding-top: 80px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow: -5px 0 25px rgba(0,0,0,0.1);
        display: block; /* Override flex */
        gap: 0;
    }

    header nav.mobile-menu-open {
        transform: translateX(0);
    }

    /* ============================================ */
    /* == Mobile Accordion Menu (折叠列表菜单样式) == */
    /* ============================================ */

    header nav > ul {
        display: block;
    }
    
    header nav ul li {
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    header nav ul li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        font-size: 0.18rem; /* 18px -> 0.18rem */
        font-weight: 500;
        color: #333 !important;
        text-shadow: none !important;
    }
    
    .mobile-accordion-arrow {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-right: 2px solid #aaa;
        border-bottom: 2px solid #aaa;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    .dropdown.is-open > a .mobile-accordion-arrow {
        transform: rotate(-135deg);
        margin-top: -6px;
    }

    header nav .dropdown-menu,
    header nav .mega-menu {
        display: block !important;
        position: static !important;
        background-color: #f8f9fa;
        padding: 0;
        box-shadow: none !important;
        border-radius: 0;
        width: 100%;
        
        /* [FINAL FIX] */
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.4s;
        
        transform: none !important;
    }

    .dropdown.is-open > .dropdown-menu,
    .dropdown.is-open > .mega-menu {
        visibility: visible;
        opacity: 1;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    }

    header nav .dropdown-menu li,
    header nav .mega-menu-section {
        margin: 0;
        border: none;
        border-bottom: 1px solid #e9ecef;
    }
    header nav .dropdown-menu li:last-child,
    header nav .mega-menu-section:last-child {
        border-bottom: none;
    }
    
    header nav .dropdown-menu li a,
    header nav .mega-menu-links a {
        padding: 15px 20px 15px 35px;
        font-size: 0.16rem; /* 16px -> 0.16rem */
        font-weight: 400;
        border: none !important;
    }

    header nav .mega-menu .container {
        display: block;
        padding: 0;
    }
    header nav .mega-menu-content,
    header nav .mega-menu-image {
        display: block;
    }
    header nav .mega-menu-image {
       display: none;
    }
    
    header nav .mega-menu-section h4,
    header nav .mega-menu-category {
        font-size: 0.14rem; /* 14px -> 0.14rem */
        font-weight: 600;
        color: #888;
        padding: 12px 20px;
        background-color: #f0f2f5;
        margin: 0;
        border-bottom: 1px solid #e9ecef;
    }
    header nav .mega-menu-category {
        background-color: transparent;
        padding-left: 35px;
        color: #666;
        font-size: 0.15rem; /* 15px -> 0.15rem */
        border: none;
    }

    .dropdown-icon, .menu-arrow { display: none; }
}

@media (max-width: 992px) {
    .section { padding: 80px 0; }
    .about-section, .solution-section { scroll-margin-top: 100px; }

    /* -- Home Page -- */
    .carousel-caption h2 { font-size: 0.36rem; } /* 36px -> 0.36rem */
    .carousel-caption p { font-size: 0.18rem; } /* 18px -> 0.18rem */
    .solutions-grid { flex-direction: column; height: auto; }
    .solution-item { height: 300px; flex-grow: 1 !important; margin-bottom: 20px; border-radius: 8px; overflow: hidden; }
    .solution-item:last-child { margin-bottom: 0; }
    .solution-item:hover { flex-grow: 1 !important; }
    .solution-item:hover .content { top: auto; transform: none; text-align: center; margin-left: 0; margin-bottom: 30px; }
    .solution-item:hover .overlay { background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); }
    .cases-section .container { width: 90%; padding: 0 15px; }
    .cases-grid { flex-wrap: wrap; overflow: visible; gap: 20px; justify-content: center; height: auto; }
    .case-item {
        height: 250px !important; flex: 1 1 calc(50% - 20px) !important;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
        padding: 20px !important; opacity: 1 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        border-radius: 8px; display: flex !important;
    }
    .case-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important; }
    .case-item:hover img { transform: scale(1.05); }
    .case-item:hover .overlay,
    .case-item.is-expanded .overlay { background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); }
    .case-item:hover .content,
    .case-item.is-expanded .content { text-align: center; margin-left: 0; top: auto; transform: none; justify-content: flex-end; align-items: center; }
    .case-item.is-expanded .content p { opacity: 1; max-height: 200px; }
    .partners-grid { gap: 20px; }
    .partner-item { width: 240px; height: 135px; }
    .monitoring-layout { flex-direction: column; text-align: center; gap: 40px; }
    .monitoring-content-rotator { text-align: center; }

    /* -- About Page -- */
    .sub-nav { overflow-x: auto; }
    .sub-nav ul { justify-content: flex-start; padding: 0 15px; }
    .company-intro .container, .contact-section .container { flex-direction: column; }
    .honors-row-1 { flex-direction: column; align-items: center; }
    .honors-row-1 .certificate-item { width: 80%; }
    
    /* 全新企业文化响应式 */
    .culture-grid-new {
        grid-template-columns: 1fr; /* 平板及以下尺寸变为单列 */
        gap: 30px;
    }
    
    .contact-section .contact-map-image { margin-top: 40px; }

    /* -- Solution Pages -- */
    .banner-content { max-width: 80%; }
    .banner-content h1 { font-size: 0.4rem; } /* 40px -> 0.4rem */
    .intro-layout, .app-item, .app-item.app-item--reversed { flex-direction: column; gap: 40px; }
    .solution-sub-nav { top: 85px; }
    .value-grid, .related-products-grid { grid-template-columns: repeat(2, 1fr); }
    .case-study-container { flex-direction: column; padding: 40px; gap: 40px; }
    .arch-grid-final-container { display: flex; flex-direction: column; }
    .arch-line { display: none; }
    .arch-infographic-container { width: 95%; }

    /* -- Cases Page -- */
    .cases-display-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .container-80 { width: 90%; }

    /* -- Product Pages -- */
    #product-hero { height: auto; min-height: 0; padding-top: 120px; padding-bottom: 60px; text-align: center; }
    .product-hero-container { flex-direction: column; gap: 40px; }
    .platform-container { flex-direction: column-reverse; }
    .product-hero-title-area { flex-direction: column; align-items: center; gap: 15px; }
    .product-hero-title-area h1 { font-size: 0.48rem; } /* 48px -> 0.48rem */
    .product-description { font-size: 0.18rem; } /* 18px -> 0.18rem */
    .application-scenarios ul { justify-content: center; }
    .advantages-grid, .recommendations-grid { grid-template-columns: 1fr; }
    .specs-grid { grid-template-columns: repeat(2, 1fr); }

    /* -- Footer -- */
    .footer-container { flex-direction: column; margin-bottom: 30px; }
    .footer-left, .footer-right { margin-right: 0; width: 100%; }
    .footer-right { justify-content: space-between; }
    .footer-column { min-width: unset; width: 48%; }
    .qrcode { text-align: center; margin: 0 auto; }
    .qrcode p { margin-left: 0; }
    .footer-bottom { margin-top: 30px; }
}

/* --- Mobile (<= 768px) --- */
@media (max-width: 768px) {
    /* -- General -- */
    .section, .solution-section { padding: 60px 0; }
    .section h2, .section-title { font-size: 0.3rem; } /* 30px -> 0.3rem */
    .about-section, .solution-section { scroll-margin-top: 120px; }

    /* -- Home Page -- */
    .solution-item { height: 250px; margin-bottom: 15px; }
    .cases-grid { gap: 15px; }
    .case-item { height: 200px !important; flex: 1 1 calc(100% - 20px) !important; margin: 0 10px !important; }
    .products-column-left { flex-direction: column; }
    .product-card.horizontal { flex-direction: column; }
    .product-card.horizontal .product-card-content { margin-bottom: 20px; }
    .product-card.horizontal .product-card-image-wrapper { align-items: center; justify-content: center; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .partner-item { width: 220px; height: 124px; }

    /* -- About Page -- */
    .soft-cert-item { flex-basis: calc(33.33% - 14px); min-width: 180px; }
    
    /* 在这个尺寸下，.culture-grid-new 继承了单列布局，无需额外修改 */


    /* -- Solution Pages -- */
    .solution-banner { height: 60vh; text-align: center; }
    /* .banner-overlay { background: rgba(0, 51, 102, 0.6); } */
    .banner-content { max-width: 100%; }
    .banner-content h1 { font-size: 0.32rem; } /* 32px -> 0.32rem */
    .banner-content p { font-size: 0.16rem; } /* 16px -> 0.16rem */
    .solution-sub-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .solution-sub-nav ul { justify-content: flex-start; padding: 0 15px; }
    .solution-sub-nav::-webkit-scrollbar { display: none; }
    .solution-sub-nav { scrollbar-width: none; -ms-overflow-style: none; }
    .value-grid, .related-products-grid { gap: 20px; }

    /* -- Cases Page -- */
    .cases-display-grid { grid-template-columns: 1fr; }

    /* -- Product Pages -- */
    .product-hero-title-area h1 { font-size: 0.4rem; } /* 40px -> 0.4rem */
    .product-hero-series-tag { font-size: 0.2rem; padding: 8px 16px; } /* 20px -> 0.2rem */
    .product-description { font-size: 0.16rem; } /* 16px -> 0.16rem */
    .application-scenarios h3 { font-size: 0.2rem; } /* 20px -> 0.2rem */
    .application-scenarios li { font-size: 0.16rem; padding: 8px 15px; } /* 16px -> 0.16rem */
    .btn { padding: 15px 30px; font-size: 0.18rem; } /* 18px -> 0.18rem */
    .specs-grid { gap: 15px; }
    .spec-item { padding: 20px 15px; }
    .spec-value { font-size: 0.2rem; } /* 20px -> 0.2rem */
    .modal-content { padding: 30px 20px; }

    /* -- Footer -- */
    .footer-column { width: 100%; text-align: center; }
    .footer-column h5 { text-align: center; }
}

/* --- Small Mobile (<= 600px) --- */
@media (max-width: 600px) {
    .value-grid { grid-template-columns: 1fr; }
    .intro-features-grid { grid-template-columns: 1fr; margin-top: 40px; gap: 40px; }
}

/* --- Extra Small Mobile (<= 480px) --- */
@media (max-width: 480px) {
    /* -- Home Page -- */
    .cases-grid { gap: 10px; }
    .case-item { height: 180px !important; flex: 1 1 100% !important; margin: 0 !important; }
    .case-item .content h3 { font-size: 0.18rem; } /* 18px -> 0.18rem */
    .case-item .content p { font-size: 0.13rem; } /* 13px -> 0.13rem */
    .case-item:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important; }
    .case-item:hover img { transform: scale(1.03); }
}

/*
==================================================
  [ADDON] 案例详情弹窗样式 (优化版 V2)
==================================================
*/
.case-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.case-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.case-modal-content {
    position: relative;
    background-color: #1a1a1a;
    padding: 12px;
    border-radius: 16px;
    width: 90%;
    max-width: 1280px;
    height: auto;
    max-height: 90vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-modal-overlay.is-visible .case-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.case-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 50%;
    font-size: 0.24rem; /* 24px -> 0.24rem */
    color: #fff;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.case-modal-close:hover {
    background: rgba(255, 255, 255, 1);
    color: #000;
    transform: rotate(90deg) scale(1.1);
}

.modal-media-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px; /* 内嵌圆角 */
}

/* 加载指示器 (CSS Spinner) */
.modal-loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.modal-media-container video,
.modal-media-container img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保证内容完整显示 */
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 媒体加载完成后的动画 */
.modal-media-container video.is-loaded,
.modal-media-container img.is-loaded {
    opacity: 1;
}

/* 确保案例卡片有可点击的光标样式 */
.case-card {
    cursor: pointer;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .case-modal-content {
        width: 95%;
        padding: 8px;
    }
    .modal-loader {
        width: 40px;
        height: 40px;
        border-width: 4px;
    }
}/*
==================================================
  [ADDON] 解决方案巨型菜单样式 (V6 - 优化内部间距)
==================================================
*/

/* -- 解决方案菜单的父级 li 标签 -- */
li.solution-dropdown {
    position: relative; 
    /* position: static; 让菜单不再相对于 li 定位 */
}

/* -- 解决方案巨型菜单容器 -- */
/* li.solution-dropdown > .solution-mega-menu {
    display: none; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 960px;

    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    
    opacity: 0;
    transform-origin: top center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    margin-top: 10px;

    padding: 30px 40px;
} */
/* ==================== 最终修正版 - 巨型菜单样式 ==================== */

/* -- 巨型菜单主容器 -- */
li.solution-dropdown > .solution-mega-menu {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    /* 核心：宽度由内容决定，保持居中，且不超过屏幕 */
    width: max-content;
    max-width: calc(100vw - 40px); 

    /* 容器的整体内边距 */
    padding: 30px 40px;

    /* 外观和动画样式 */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transform-origin: top center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    margin-top: 0;
}

/* -- 菜单可见时的状态 -- */
li.solution-dropdown.menu-visible > .solution-mega-menu {
    /* [修正] 这里不再需要 flex，只需让它显示出来即可 */
    display: block; 
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* 
 * [修正] 将 Flex 布局应用在正确的 .container 元素上
 * 它才是 .solution-mega-section 的直接父元素
 */
li.solution-dropdown .solution-mega-menu > .container {
      /* 确保我们的 flex 布局生效 */
      display: flex;
      gap: 40px;
      
      /* 覆盖全局 .container 可能带来的样式 */
      width: auto;      /* 覆盖固定的 width */
      max-width: none;  /* 覆盖 max-width */
      padding: 0;       /* 覆盖内边距 */
      margin: 0;        /* 覆盖 margin: 0 auto */
}

/* -- 菜单中的每个区块（列） -- */
li.solution-dropdown .solution-mega-section {
    flex: 0 0 auto; /* 不拉伸，不收缩，保持原始宽度 */
    width: 280px;   /* 每列的固定宽度 */
}

/* -- 使用 :not(:first-child) 来创建分隔线，逻辑清晰 -- */
li.solution-dropdown .solution-mega-section:not(:first-child) {
    border-left: 1px solid #e9ecef;
    padding-left: 40px; /* 让内容和分隔线保持距离 */
}

/* 
 * [新增] 隐藏“化工行业”那一列
 * 因为它是最后一个，所以用 :last-child 最方便
 */
li.solution-dropdown .solution-mega-section:last-child {
    display: none;
}


/* -- 区块标题 (保持不变) -- */
li.solution-dropdown .solution-mega-section h4 {
    color: #003366;
    border-bottom: 2px solid #007bff;
    text-align: left;
    font-size: 0.22rem; /* 22px -> 0.22rem */
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* -- 区块内的链接 (保持不变) -- */
li.solution-dropdown .solution-mega-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    text-shadow: none;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.3s ease;
    white-space: nowrap;
    padding: 10px;
    font-size: 0.17rem; /* 17px -> 0.17rem */
    margin-bottom: 4px;
}

li.solution-dropdown .solution-mega-links a:hover {
    background-color: #e9f4ff;
    color: #007bff;
}

/* 隐藏箭头（保持不变） */
li.solution-dropdown .solution-mega-links .menu-arrow {
    display: none;
}

/* 响应式部分保持不变 */
@media (max-width: 992px) {
    li.solution-dropdown {
        position: static;
    }
    header nav .dropdown-menu, header nav .mega-menu, header nav .solution-mega-menu {
        display: block !important;
        position: static !important;
        background-color: #f8f9fa;
        padding: 0 !important; /* 移动端重置内边距 */
        box-shadow: none !important;
        border-radius: 0;
        width: 100% !important;
        min-width: unset;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.4s;
        transform: none !important;
        margin-top: 0;
    }
    .dropdown.is-open > .dropdown-menu, .dropdown.is-open > .mega-menu, .dropdown.is-open > .solution-mega-menu {
        visibility: visible;
        opacity: 1;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    }
    header nav li.solution-dropdown .solution-mega-section {
        border-bottom: 1px solid #e9ecef;
        padding: 0;
        flex: auto;
        border-left: none; /* 移动端不需要列边框 */
    }
    header nav li.solution-dropdown .solution-mega-section:first-child,
    header nav li.solution-dropdown .solution-mega-section:last-child {
        padding: 0; /* 确保移动端没有多余的padding */
    }
    header nav li.solution-dropdown .solution-mega-section:last-child {
        border-bottom: none;
    }
    header nav li.solution-dropdown .solution-mega-section h4 {
        font-size: 0.14rem; /* 14px -> 0.14rem */
        font-weight: 600;
        color: #888;
        padding: 12px 20px;
        background-color: #f0f2f5;
        margin: 0;
        border-bottom: 1px solid #e9ecef;
        text-align: left;
    }
    header nav li.solution-dropdown .solution-mega-links a {
        padding: 15px 20px 15px 35px;
        font-size: 0.16rem; /* 16px -> 0.16rem */
        font-weight: 400;
        border: none !important;
        margin-bottom: 0;
        border-radius: 0;
        white-space: normal;
    }
}

#apps {
    display: none;
}
/*
==================================================
  [PAGE-SPECIFIC STYLES] 智慧光储充平台 (platform-gcc.html) - 最终整合版
==================================================
*/

/* 1. Banner区域的通用样式 (替代了原来的 .product-hero-section) */
/* 现在应用于纯视觉的Banner和产品简介两个区块 */

/* 为Banner的文字内容添加一些通用样式 */
.solution-banner .hero-tagline {
    display: inline-block;
    padding: 6px 15px;
    background-color: rgba(0, 123, 255, 0.2);
    color: #87cefa;
    border-radius: 20px;
    font-size: 0.16rem; /* 16px -> 0.16rem */
    font-weight: 600;
    margin-bottom: 20px;
}

.solution-banner .hero-description {
    font-size: 0.18rem; /* 18px -> 0.18rem */
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}


/* 2. 核心能力网格 (Capabilities Grid) - 保持不变 */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.capability-card {
    background-color: #f8f9fa;
    padding: 35px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.1);
}

.capability-card .card-icon {
    font-size: 0.36rem; /* 36px -> 0.36rem */
    color: #007bff;
    margin-bottom: 25px;
}

.capability-card h4 {
    font-size: 0.2rem; /* 20px -> 0.2rem */
    color: #003366;
    margin-bottom: 15px;
}

.capability-card p {
    font-size: 0.16rem; /* 16px -> 0.16rem */
    line-height: 1.7;
    color: #555;
}


/* 3. 技术架构时间轴 (Arch Flow) - 保持不变 */
.arch-flow-container {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0;
}
.arch-flow-container::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #e9ecef;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    z-index: 1;
}
.arch-flow-level {
    padding: 20px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    z-index: 2;
    box-sizing: border-box;
}
.arch-flow-level::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -12.5px;
    background-color: white;
    border: 4px solid #007bff;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 3;
}
.arch-flow-level.left { left: 0; }
.arch-flow-level.right { left: 50%; }
.arch-flow-level.right::after { left: -12.5px; }
.arch-flow-content {
    padding: 25px 35px;
    background-color: white;
    position: relative;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.arch-flow-content .level-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.arch-flow-level.left .arch-flow-content { text-align: right; }
.arch-flow-level.left .level-header { justify-content: flex-end; flex-direction: row-reverse; }
.arch-flow-level.right .arch-flow-content { text-align: left; }
.arch-flow-level.right .level-header { justify-content: flex-start; flex-direction: row; }
.arch-flow-content .level-header i {
    font-size: 0.2rem; /* 20px -> 0.2rem */
    color: #007bff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9f4ff;
    flex-shrink: 0;
}
.arch-flow-content .level-header h5 { font-size: 0.2rem; color: #003366; margin: 0; } /* 20px -> 0.2rem */
.arch-flow-content .level-body p { font-size: 0.16rem; color: #555; line-height: 1.7; margin: 0; } /* 16px -> 0.16rem */


/* 4. [新增] 全新应用场景布局 (Application Showcase) */
.application-showcase {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 100px; /* 增加每个场景之间的垂直距离 */
}

.app-item {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* 布局反转的样式 */
.app-item.app-item--reversed {
    flex-direction: row-reverse;
}

.app-item .app-image {
    flex: 1 1 55%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
}

.app-item .app-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.app-item:hover .app-image img {
    transform: scale(1.05);
}

.app-item .app-text {
    flex: 1 1 45%;
}

.app-item .app-text h3 {
    font-size: 0.32rem; /* 32px -> 0.32rem */
    color: #003366;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

.app-item .app-text p {
    font-size: 0.17rem; /* 17px -> 0.17rem */
    line-height: 1.8;
    color: #555;
}


/* 5. [新增] 技术架构时间轴 - 交互悬浮效果 */
.arch-flow-content,
.arch-flow-content .level-header i,
.arch-flow-level::after {
    transition: all 0.3s ease-in-out;
}

.arch-flow-level:hover .arch-flow-content {
    border-color: #007bff;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
    transform: scale(1.02);
}

.arch-flow-level:hover::after {
    background-color: #007bff;
    transform: translateY(-50%) scale(1.1);
}

.arch-flow-level:hover .level-header i {
    background-color: #007bff;
    color: #ffffff;
    transform: rotate(15deg);
}
/*
==================================================
  [ADDON] 应用场景三列图文卡片 (App Card Grid)
==================================================
*/
/* ========================================================== */
/* ======== App Card Grid 最终修正版 (等高布局) ======== */
/* ========================================================== */

/* --- 网格容器 (保持不变，但 rem 化) --- */
.app-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem; /* 30px */
    margin-top: 0.5rem; /* 50px */
}

/* ======================================================== */
/* ================ 核心修正：卡片内部 Flex 布局 ============ */
/* ======================================================== */

.app-card {
    background-color: #ffffff;
    border-radius: 0.12rem; /* 12px */
    border: 1px solid #e9ecef;
    box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* 1. 将卡片自身变为 Flex 容器，让内容和图片垂直排列 */
    display: flex;
    flex-direction: column;
}

.app-card:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.12rem 0.25rem rgba(0, 51, 102, 0.12);
}

.app-card-content {
    padding: 0.3rem; /* 30px */
    text-align: center;
    
    /* 2. (关键) 让内容区也变成 Flex 容器 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 图标和标题居中 */
    
    /* 3. (关键) 让内容区高度自适应，但内部的 p 标签去填充空间 */
    flex-grow: 1; 
}

.app-card-icon {
    /* 原始: 32px */ font-size: clamp(20px, 1.333vw, 36px);
    color: #007bff;
    margin-bottom: 0.2rem; /* 20px */
    flex-shrink: 0; /* 防止图标被压缩 */
}

.app-card-content h4 {
    /* 原始: 24px */ font-size: 0.2rem;
    color: #003366;
    margin-bottom: 0.15rem; /* 15px */
    flex-shrink: 0; /* 防止标题被压缩 */
}

.app-card-content p {
    /* 原始: 16px */ font-size: clamp(14px, 0.667vw, 18px);
    line-height: 1.7;
    color: #555;
    margin: 0;
    
    /* 4. (关键) 命令段落填充所有可用的垂直空间 */
    flex-grow: 1; 
}

.app-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* margin-top: auto; (不再需要) */
    flex-shrink: 0; /* 图片区高度固定，不收缩 */
}

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

/* ======================================================== */
/* ================ 修改结束 ============================ */
/* ======================================================== */

/*
==================================================
  [ADDON] 应用场景 - 响应式调整
==================================================
*/
@media (max-width: 992px) {
    .app-card-grid {
        grid-template-columns: 1fr; /* 在平板上变为单列 */
    }
}

/* 注意：在更小的屏幕上，它会自动保持单列，所以通常无需为768px再写规则 */

/*
==================================================
  [PAGE-SPECIFIC STYLES] 响应式调整
==================================================
*/
@media (max-width: 992px) {
    /* Capabilities Section */
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Application Showcase Section */
    .app-item,
    .app-item.app-item--reversed {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    /* Capabilities Section */
    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    /* Arch Flow Section */
    .arch-flow-container::after {
        left: 31px;
    }
    .arch-flow-level {
        width: 100%;
        padding-left: 70px;
        padding-right: 15px;
    }
    .arch-flow-level.left, .arch-flow-level.right {
        left: 0;
    }
    .arch-flow-level::after,
    .arch-flow-level.right::after {
        left: 18px;
    }
    .arch-flow-level .arch-flow-content,
    .arch-flow-level.left .arch-flow-content,
    .arch-flow-level.right .arch-flow-content {
       text-align: left;
    }
    .arch-flow-level .level-header,
    .arch-flow-level.left .level-header,
    .arch-flow-level.right .level-header {
       justify-content: flex-start;
       flex-direction: row;
    }
}
.bg-grey {
    background-color: #f8f9fa;
}
.bg-white {
    background-color: #fff;
}
.service-cta-section h2{
    margin-bottom: 15px;
}
.service-cta-section a{
    margin-top: 15px;
    padding-top: 15px;
}
/* --- 插件样式开始 (已更新为平滑光效并修正位置) --- */
/* 使用 "iw-" 前缀避免 CSS 冲突 */
/* --- 插件最终完整CSS (已按最终要求重构) --- */
/* 使用 "iw-" 前缀避免 CSS 冲突 */

#iw-main-container-unique {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    aspect-ratio: 1200 / 650;
    background-image: url('images/model-bg.png'); /* 确认使用您的路径 */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
}

#iw-main-container-unique::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 30%);
    pointer-events: none;
    z-index: 1;
}

.iw-interactive-point {
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

/* ========================================================== */
/* ======== 标题框最终修正版 (Flexbox 精确控制) ======== */
/* ========================================================== */

/* --- 初始可见的标题框 --- */
.iw-label-frame {
    position: absolute;
    top: 0%;
    left: 0.35rem; /* 35px */
    transform: translateY(-50%);

    /* 1. 变为 Flex 容器，用于垂直居中 */
    display: inline-flex;
    align-items: center;

    /* 2. 用 height 和 padding-left/right 精确控制尺寸 */
    height: 0.28rem; /* 设定一个固定的、响应式的高度，例如 28px */
    padding: 0 0.12rem; /* 只保留左右内边距 12px */

    background: #007bffc7; 
    border: 1px solid rgba(20, 150, 255, 0.9);
    border-radius: 0.04rem; /* 4px */
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.iw-label-title {
    /* 3. 设置字体大小 */
    font-size: 0.14rem; /* 14px */
    
    /* 4. (关键) 移除字体自身的额外行高 */
    line-height: 1; 

    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    white-space: nowrap;
}
.iw-interactive-point.iw-active .iw-label-frame {
    opacity: 0;
}

/* --- 闪烁点样式 --- */
.iw-blinking-dot {
    position: relative;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}
.iw-blinking-dot::before, .iw-blinking-dot::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.iw-blinking-dot::before { width: 12px; height: 12px; background-color: #00aaff; box-shadow: 0 0 5px #00aaff; z-index: 2; }
.iw-blinking-dot::after { width: 24px; height: 24px; border: 2px solid rgba(0, 170, 255, 0.7); animation: iw-pulse-animation 2s infinite cubic-bezier(0.2, 0.5, 0.4, 1); z-index: 1; }

@keyframes iw-pulse-animation {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* --- 详细内容卡片样式 (点击后出现) --- */
.iw-content-card {
    position: absolute;
    width: 280px;
    padding: 2px;
    border-radius: 8px;
    background-color: #007bff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}
.iw-content-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(
        115deg,
        transparent 40%,
        rgba(57, 255, 20, 0.8) 50%, /* <--- 使用这个更鲜艳的绿色 */
        transparent 60%);
     background-size: 250% 100%; background-position: 150% 0; animation: iw-flow-animation 3s infinite linear; }
.iw-content-card::after { content: ''; position: absolute; inset: 2px; background-color: rgba(255, 255, 255, 0.97); border-radius: 6px; }
@keyframes iw-flow-animation { to { background-position: -50% 0; } }

.iw-interactive-point.iw-active .iw-content-card {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* --- 卡片定位逻辑 --- */

/* [新增 - 无人机/卫星] 卡片左上角对齐圆点 */
.iw-card-pos-top-right .iw-content-card {
    top: 10px;
    left: 25px;
    transform-origin: top left;
    transform: scale(0.98);
}
.iw-interactive-point.iw-active.iw-card-pos-top-right .iw-content-card {
    transform: scale(1);
}

/* [激光雷达] 卡片在正下方弹出 */
.iw-card-pos-bottom .iw-content-card {
    top: 25px;
    left: 50%;
    transform: translateX(-50%) scale(0.98);
    transform-origin: top center;
}
.iw-interactive-point.iw-active.iw-card-pos-bottom .iw-content-card {
    transform: translateX(-50%) scale(1);
}
/* --- 您只需要替换下面这两个CSS规则 --- */

/* [手工建模] 卡片在左上方弹出 (右下角对齐圆点) */
.iw-card-pos-top-left .iw-content-card {
    /* !! 必须保留这两行，以取消默认的top和left !! */
    top: auto;
    left: auto;

    /* 
     * 在这里调整位置：
     * - bottom值越大，卡片越向上移动
     * - right值越大，卡片越向左移动
     * 我将值增加到30px，让它明显向左上方移动
    */
    bottom: 40px; 
    right: 40px;  

    transform-origin: bottom right;
    transform: scale(0.98);
}

.iw-interactive-point.iw-active.iw-card-pos-top-left .iw-content-card {
    transform: scale(1);
}

/* --- 卡片内部元素 --- */
.iw-card-image, .iw-card-title, .iw-card-text { position: relative; z-index: 2; }
.iw-card-image { width: calc(100% - 30px); margin: 15px 15px 12px 15px; height: auto; border-radius: 4px; border: 1px solid #eee; }
.iw-card-title { font-size: 0.16rem; font-weight: bold; color: #1a1a1a; margin: 0; padding: 15px 15px 8px 15px; border-bottom: none; } /* 16px -> 0.16rem */
.iw-card-title::after { content: ''; position: absolute; left: 15px; bottom: 0; width: 50px; height: 2px; background: linear-gradient(to right, #007bff, transparent); }
.iw-card-text { font-size: 0.14rem; line-height: 1.5; color: #333; margin: 0; padding: 0 15px 15px 15px; } /* 14px -> 0.14rem */

/* --- 闪烁点定位 --- */
#iw-point-drone { top: 30%; left: 20%; }
#iw-point-satellite { top: 12%; left: 50%; }
#iw-point-lidar { top: 40%; left: 78%; }
/* [修改] 手工建模向左移动 */
#iw-point-manual { top: 85%; left: 57%; }
/* ========================================================== */
/* ======== 【新增】默认显示“手工建模”的弹出框 ======== */
/* ========================================================== */

address {
    font-style: normal;
}