/* =========================================
   1. 全局重置 (Global Reset)
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 关键：确保边框和内边距不撑大盒子 */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 现代无衬线字体 */
}

body {
  background-color: #f4f4f4;
  color: #333;
}

a {
  text-decoration: none; /* 去掉默认下划线 */
  color: inherit; /* 继承父元素颜色 */
  transition: all 0.3s ease;
}

ul {
  list-style: none; /* 去掉列表前面的小圆点 */
}

/* =========================================
   2. 顶栏 (Top Bar)
   ========================================= */
.top-bar {
  background-color: #6D4C41; /* 品牌深棕色 */
  color: white;
  font-size: 13px;
  padding: 10px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-right {
  display: flex;
  gap: 25px; /* 联系方式之间的间距 */
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-item:hover {
  color: #fff;
  text-decoration: underline; /* 鼠标放上去显示下划线，提示可点击 */
}

/* =========================================
   3. 主导航栏 (Main Navbar)
   ========================================= */
/* =========================================
   2. 主导航栏 (Main Navbar) - 智能吸顶版
   ========================================= */
.main-nav {
  background-color: white;
  padding: 15px 5%;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  position: fixed;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
  
  /* --- 关键修改：固定定位 --- */
  position: fixed; /* 固定在窗口顶部 */
  top: 40px; /* 初始位置：留出Top Bar的高度(约40px) */
  left: 0;
  width: 100%; /* 占满宽度 */
  z-index: 1000;
  
  /* --- 关键修改：平滑过渡动画 --- */
  transition: top 0.3s ease-in-out; /* 让显示/隐藏的动作很丝滑 */
}

/* 当导航栏隐藏时的样式 (由JS控制添加) */
.main-nav.nav-hidden {
  top: -100px; /* 向上移动，移出屏幕 */
}

/* 当页面滚动超过TopBar后，导航栏紧贴顶部 */
.main-nav.nav-sticky {
  top: 0;
}

/* --- 修复布局塌陷 --- */
/* 因为导航栏变成 fixed 了，它不占位置，后面的轮播图会往上跑。
   我们需要给 body 加一个 padding-top 来抵消导航栏的高度 */
body {
  padding-top: 0px; /* TopBar(40) + NavBar(80) 的大概高度 */
}

/* 手机端适配调整 */
@media (max-width: 480px) {
  body {
    padding-top: 80px; /* 手机端TopBar隐藏了，所以padding减小 */
  }
  .main-nav {
    top: 0; /* 手机端没有TopBar，初始就是0 */
  }
}

/* =========================================
   Logo 区域样式修改 (请用此段替换原有的 .logo 代码)
   ========================================= */
/* 修改后的 .logo */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6D4C41;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.2;
  
  /* --- 删除下面这行 --- */
  /* margin-right: auto; */ 
}

/* 关键修改：限制图片高度 */
.logo img {
  height: 45px;           /* 【这里修改大小】建议 40px - 50px 之间 */
  width: auto;            /* 宽度自动，保持比例不变形 */
  margin-bottom: 2px;     /* 图片和下方文字的间距 */
  display: block;         /* 防止图片底部产生多余空隙 */
}

/* Logo 下方文字样式 */
.logo span {
  font-size: 14px;        /* 文字大小 */
  font-weight: 800;       /* 字体超粗 */
  color: #6D4C41;         /* 品牌深棕色 */
  text-transform: uppercase; /* 英文大写 */
  letter-spacing: 0.5px;  /* 字母间距 */
}

/* 鼠标悬停效果 */
.logo:hover {
  opacity: 0.8;
}

/* 隐藏旧的图标字体样式 (防止干扰) */
.logo-icon {
  display: none;
}

/* 菜单链接区域 */
/* 修改后的 .nav-links - 强制居中版 */
.nav-links {
  display: flex;
  gap: 30px;
  
  /* --- 核心修改开始：绝对居中 --- */
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左回退自身宽度的50%，实现完美居中 */
  /* --- 核心修改结束 --- */
  
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative; /* 也就是下拉菜单的定位基准 */
  color: #333;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 0;
}

/* 菜单项悬停效果 */
.nav-item:hover > a {
  color: #6D4C41;
}

/* 箭头图标 */
.arrow {
  font-size: 10px;
  margin-left: 4px;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 悬停时箭头旋转180度 */
.nav-item:hover .arrow {
  transform: rotate(180deg);
}

/* --- 下拉菜单 (Dropdown) --- */
.dropdown-menu {
  position: absolute;
  top: 100%; /* 在父元素正下方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  background-color: white;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-top: 3px solid #6D4C41; /* 顶部装饰线 */
  
  /* 隐藏状态 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  border-radius: 0 0 4px 4px;
}

/* 显示状态 */
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  color: #555;
  font-size: 14px;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #f9f9f9;
  color: #6D4C41;
}

/* 右侧图标 */
.nav-icons {
  display: flex;
  gap: 15px;
  font-size: 18px;
}

.nav-icons a {
  color: #333;
}
.nav-icons a:hover {
  color: #6D4C41;
  transform: scale(1.1);
}

/* =========================================
   4. 轮播图区域 (Hero Carousel)
   ========================================= */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background-color: #000;
  
  /* 新增：把轮播图往下推 Nav 的高度 (约80px)，加上 TopBar 的高度 (40px) 已经在文档流里了，所以只需要推 Nav 的高度 */
  margin-top: 80px; 
}

/* 单张幻灯片 */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2; /* 显示的图片层级较高 */
}

/* 背景视频/图片通用样式 */
.bg-video, .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证填满不变形 */
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
}

/* 黑色半透明遮罩 (让字更清晰) */
.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none; /* 让点击穿透遮罩层 */
  z-index: 1;
}

/* --- 核心交互逻辑 --- */

/* 全屏隐形链接：覆盖整个区域，点击背景跳转 */
.full-slide-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5; /* 比背景高，但比按钮低 */
  cursor: pointer;
}
/* --- 2. 文本内容：绝对居中优化 --- */
.hero-content {
    position: absolute;
    top: 50%;      /* 垂直位置：从顶部向下50% */
    left: 50%;     /* 水平位置：从左侧向右50% */
    /* 关键魔法：向回移动自身宽高的50%，实现真正的几何中心对齐 */
    transform: translate(-50%, -50%); 
    
    text-align: center; /* 确保多行文字居中对齐 */
    width: 90%;
    max-width: 1200px;
    z-index: 3;
    color: #ffffff;
}

/* 标题样式微调 */
.hero-content h1 {
    font-size: 3.5rem; /* 约 56px，大气但不夸张 */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

/* 副标题样式微调 */
.hero-content p {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 35px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

/* 移动端单独适配（保持居中） */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }
    /* 移动端不需要调整 .hero-content 的定位，默认继承上面的居中代码即可 */
}

/* --- 按钮特效 (微浮+发光) --- */
.btn-primary {
  display: inline-block;
  padding: 12px 40px;
  background-color: #6D4C41;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px; /* 胶囊形状 */
  border: 2px solid #6D4C41;
  
  pointer-events: auto; /* 关键：按钮必须能独立被点击 */
  cursor: pointer;
  
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 贝塞尔曲线让动画更有弹性 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.btn-primary:hover {
  background-color: #8D6E63;
  border-color: #8D6E63;
  transform: translateY(-5px) scale(1.05); /* 上浮+放大 */
  box-shadow: 0 15px 25px rgba(0,0,0,0.4); /* 强烈的悬浮阴影 */
}

.btn-primary:active {
  transform: translateY(-2px); /* 点击回弹效果 */
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

/* 左右切换箭头 */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.2);
  color: white;
  border: none;
  font-size: 30px;
  padding: 15px 20px;
  cursor: pointer;
  z-index: 20; /* 必须比全屏链接高 */
  border-radius: 50%;
  transition: 0.3s;
}

.arrow-btn:hover {
  background-color: rgba(255,255,255,0.5);
}

.left-arrow { left: 20px; }
.right-arrow { right: 20px; }

/* =========================================
   5. 产品分类区域 (Product Categories)
   ========================================= */
.category-section {
  padding: 80px 10%;
  background-color: #fdfcf8; /* 暖白背景 */
  text-align: center;
}

.section-header {
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 32px;
  color: #6D4C41;
  margin-bottom: 15px;
}

.section-header p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

/* 网格布局 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 30px;
}

/* 卡片样式 */
.cat-card {
  display: block;
}

/* 图片容器 (实现放大特效的窗口) */
.img-box {
  width: 100%;
  aspect-ratio: 1 / 1; /* 强制正方形 */
  overflow: hidden; /* 切掉放大的部分 */
  border-radius: 12px;
  margin-bottom: 15px;
  background-color: #eee;
  position: relative;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* 图片放大的速度 */
}

/* 悬停特效 */
.cat-card:hover .img-box img {
  transform: scale(1.1); /* 放大1.1倍 */
}

.cat-card h3 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  transition: color 0.3s;
}

.cat-card:hover h3 {
  color: #6D4C41; /* 标题变色 */
}

/* 响应式适配 (手机端) */
@media (max-width: 768px) {
  .hero-carousel { height: 400px; }
  .hero-content h1 { font-size: 32px; }
  
  .category-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板2列 */
  }
}

@media (max-width: 480px) {
  .top-bar { display: none; } /* 手机端隐藏顶栏 */
  .category-grid {
    grid-template-columns: 1fr; /* 手机1列 */
  }
}
/* =========================================
   6. OEM/ODM 服务特色区域 (Service Feature Section)
   ========================================= */
.service-feature {
  padding: 80px 10%;
  background-color: #fff; /* 纯白背景，与上面的暖白区分开 */
}

/* 使得左右两部分并排显示 */
.service-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 60px; /* 左右两栏之间的间距 */
}

/* --- 左侧图片区域 --- */
.service-img-link {
  flex: 1; /* 占用 1 份宽度 */
  display: block;
  cursor: pointer; /* 鼠标移上去显示手型 */
}

/* 图片容器 (用于控制放大溢出) */
.service-img-box {
  width: 100%;
  border-radius: 12px;
  overflow: hidden; /* 关键：切掉图片放大后超出的部分 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 加一点高级的阴影 */
}

.service-img-box img {
  width: 100%;
  height: auto; /* 高度自动，保持比例 */
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑的放大过渡 */
}

/* 鼠标悬停在链接上时，图片放大 */
.service-img-link:hover .service-img-box img {
  transform: scale(1.08); /* 放大 1.08 倍 */
}

/* --- 右侧文字区域 --- */
.service-content {
  flex: 1; /* 占用 1 份宽度 */
}

.service-content h2 {
  font-size: 36px;
  color: #6D4C41;
  margin-bottom: 40px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.service-item h3 .icon {
  margin-right: 10px;
  font-size: 24px;
}

.service-item p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
  text-align: justify; /* 文字两端对齐，看起来更整齐 */
}

/* 复用之前的按钮样式，只需要加一点上边距 */
.service-content .btn-primary {
  margin-top: 20px;
  padding: 12px 45px; /* 让这个按钮稍微宽一点 */
}

/* --- 响应式适配 (平板和手机) --- */
@media (max-width: 992px) {
  .service-container {
    flex-direction: column; /* 变成上下堆叠 */
    gap: 40px;
  }
  
  .service-img-link, .service-content {
    width: 100%; /* 占满整行 */
  }
  
  .service-content {
    text-align: center; /* 文字居中 */
  }
  
  .service-item p {
    text-align: center; /* 手机上文字也居中 */
  }
}
.service-content {
  flex: 1; /* 占用 1 份宽度 */
}

.service-content h2 {
  font-size: 36px;
  color: #6D4C41;
  margin-bottom: 40px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.service-item h3 .icon {
  margin-right: 10px;
  font-size: 24px;
}

.service-item p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
  text-align: justify; /* 文字两端对齐，看起来更整齐 */
}

/* 复用之前的按钮样式，只需要加一点上边距 */
.service-content .btn-primary {
  margin-top: 20px;
  padding: 12px 45px; /* 让这个按钮稍微宽一点 */
}

/* --- 响应式适配 (平板和手机) --- */
@media (max-width: 992px) {
  .service-container {
    flex-direction: column; /* 变成上下堆叠 */
    gap: 40px;
  }
  
  .service-img-link, .service-content {
    width: 100%; /* 占满整行 */
  }
  
  .service-content {
    text-align: center; /* 文字居中 */
  }
  
  .service-item p {
    text-align: center; /* 手机上文字也居中 */
  }
}
/* =========================================
   7. FAQ 常见问题解答区域
   ========================================= */
.faq-section {
  position: relative;
  /* 这里的 min-height 保证内容少时也有个基本高度，内容多时会自动撑开 */
  min-height: 600px; 
  padding: 80px 5%;
  color: white;
  
  /* 背景图设置 */
  background-image: url('../images/faq-bg.jpg'); /* 记得放图片 */
  background-size: cover; /* 关键：背景图会随着容器变大而自动覆盖 */
  background-position: center;
  background-attachment: scroll; /* 背景随页面滚动，如果想要视差效果可改为 fixed */
}

/* 黑色半透明遮罩，让文字在背景图上更清晰 */
.faq-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 60% 透明度的黑色 */
  z-index: 1;
}

.faq-container {
  position: relative;
  z-index: 2; /* 确保内容在遮罩层之上 */
  max-width: 1200px;
  margin: 0 auto;
}

.faq-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 50px;
  font-weight: normal;
}

/* 网格布局：PC端 3列 */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* 问题之间的间距 */
  align-items: start; /* 关键：让每个问题顶部对齐，展开时互不影响 */
}

.faq-item {
  background-color: transparent; /* 透明背景 */
  border-bottom: 1px solid rgba(255,255,255,0.3); /* 底部加一条淡淡的分割线 */
  padding-bottom: 10px;
}

/* 头部：问题 + 图标 */
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.3s;
 min-height:80px;
}

.faq-header:hover {
  color: #ddd; /* 鼠标悬停变灰一点 */
}

.faq-header h3 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  flex: 1; /* 占满剩余空间 */
  padding-right: 15px;
}

.faq-icon {
  font-size: 24px;
  font-weight: lighter;
  transition: transform 0.3s ease; /* 旋转动画 */
}

/* 展开时的图标旋转效果 */
.faq-item.active .faq-icon {
  transform: rotate(45deg); /* 变成 X 号 */
}

/* 内容区域：默认隐藏 */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out; /* 高度变化的平滑过渡 */
}

.faq-content {
  padding-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.8); /* 稍微淡一点的白色 */
  line-height: 1.6;
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板显示 2 列 */
  }
}

@media (max-width: 600px) {
  .faq-grid {
    grid-template-columns: 1fr; /* 手机显示 1 列 */
  }
}

/* =========================================
   8. 为什么选择我们 (Text Carousel - 慢速无缝版)
   ========================================= */
.why-us-section {
  padding: 80px 0;
  background-color: #f9f9f9;
  overflow: hidden; 
  text-align: center;
}

.why-us-section .section-header {
  margin-bottom: 40px;
}

/* 轮播容器 */
.marquee-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  /* 左右两侧渐隐遮罩，增加高级感 */
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* 轮播轨道 */
.marquee-track {
  display: flex;
  gap: 30px; /* 卡片间距 */
  width: max-content; /* 宽度自适应内容 */
  
  /* 关键修改：
     60s = 速度 (数字越大越慢)
     linear = 匀速
     infinite = 无限循环
  */
  animation: scroll 60s linear infinite;
}

/* 鼠标放上去暂停，方便阅读 */
.marquee-track:hover {
  animation-play-state: paused;
}

/* 卡片样式 */
.feature-card {
  width: 320px; /* 卡片宽度 */
  background: white;
  padding: 40px 30px;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  flex-shrink: 0; /* 禁止卡片被挤压 */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default; /* 默认鼠标样式 */
}

/* 卡片悬停效果 (轻微上浮) */
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-color: #6D4C41; /* 悬停时边框变色 */
}

/* 图标浮动动画 */
.icon-floating {
  margin-bottom: 25px;
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

.feature-card h3 {
  font-size: 19px;
  color: #6D4C41;
  margin-bottom: 12px;
  font-weight: bold;
}

.feature-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* --- 动画定义 --- */

/* 滚动动画：从 0 到 -50% */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 因为我们复制了一份完全一样的内容，所以只要移动总长度的 50% */
    /* 当移动到 50% 时，第一组刚好移出去，第二组刚好的位置和第一组初始位置重合 */
    /* 此时瞬间跳回 0%，人眼看不出变化，实现无缝 */
    transform: translateX(-50%);
  }
}

/* 图标上下浮动 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- 手机端适配 --- */
@media (max-width: 768px) {
  .feature-card {
    width: 280px; /* 手机上卡片窄一点 */
    padding: 30px 20px;
  }
  
  /* 手机上可能需要跑得稍微快一点点，或者保持不变都可以 */
  .marquee-track {
    animation-duration: 40s; 
  }
}

/* =========================================
   9. 工厂介绍与视频区域 (Modern Offset Style)
   ========================================= */
.factory-intro-section {
  padding: 100px 10%;
  background-color: #fff; /* 纯白背景，更干净 */
  overflow: visible; /* 允许装饰块溢出 */
}

.factory-container {
  display: flex;
  align-items: center;
  gap: 100px; /* 拉大间距，更大气 */
}

/* --- 左侧文字 --- */
.factory-content {
  flex: 1;
}

/* 顶部小标签 */
.sub-title {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #F4A460; /* 橙色点缀 */
  margin-bottom: 10px;
  text-transform: uppercase;
}

.factory-content h2 {
  font-size: 42px;
  color: #333;
  margin-bottom: 30px;
  font-weight: 800; /* 加粗标题 */
}

.factory-content .text-block p {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 现代风格按钮 (带箭头) */
.btn-modern {
  display: inline-block;
  margin-top: 10px;
  padding: 15px 0; /* 只有上下内边距 */
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #F4A460; /* 下划线风格 */
  transition: all 0.3s ease;
}

.btn-modern:hover {
  color: #F4A460;
  padding-right: 10px; /* 悬停时稍微向右移动 */
}

/* --- 右侧视频 (错位叠加层) --- */
.factory-video-wrapper {
  flex: 1;
  position: relative;
  padding: 20px 0 0 20px; /* 给左上角的装饰块留位置 */
}

/* 装饰背景块 (位于视频下方) */
.deco-box {
  position: absolute;
  top: 0;
  right: -20px; /* 向右偏移 */
  bottom: -20px; /* 向下偏移 */
  left: 20px;
  background-color: #F4A460; /* 橙色背景块 */
  border-radius: 12px;
  z-index: 0; /* 在视频后面 */
  opacity: 0.2; /* 半透明 */
}

/* 视频容器 */
.video-box {
  position: relative;
  z-index: 1; /* 在装饰块上面 */
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* 强烈的投影 */
  background-color: #000;
  aspect-ratio: 16 / 9; /* 强制视频比例 */
}

.video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 播放按钮图标层 */
.play-icon-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: none; /* 让点击穿透到 video 标签 */
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.play-icon-overlay span {
  color: #F4A460;
  font-size: 24px;
  margin-left: 4px; /* 视觉修正三角形位置 */
}

/* 悬停视频区域时，播放按钮变大 */
.video-box:hover .play-icon-overlay {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: #F4A460;
}

.video-box:hover .play-icon-overlay span {
  color: white;
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
  .factory-container {
    flex-direction: column;
    gap: 50px;
  }
  
  .factory-content {
    text-align: center;
  }
  
  .deco-box {
    right: -10px; bottom: -10px; left: 10px; /* 手机上偏移量减小 */
  }
}

/* =========================================
   10. 数据统计区域 (Stats Section)
   ========================================= */
/* 请将这段代码替换 style.css 中的 stats-section 部分 */

/* 方案三：替换代码 */

.stats-section {
  padding: 60px 20px;
  /* 加上渐变，比纯色死板的橙色好看 */
  background-color: #F4A460;
  color: white;
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid; /* 使用 Grid 布局，控制力更强 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自动适应宽度 */
  gap: 20px;
  text-align: center;
}

.stat-item {
  padding: 10px;
}

.stat-icon {
  background: rgba(255,255,255,0.2); /* 给图标加个半透明圆底 */
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 auto 15px auto;
  font-size: 1.8rem;
}

.counter {
  font-size: 2.2rem; /* 字体改小，协调比例 */
  font-weight: 900;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* 加上文字投影 */
  white-space: nowrap; /* ⚠️ 关键：强制不换行 */
}

.stat-label {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 400;
}

/* 针对太长的文字单独处理 */
@media (max-width: 1000px) {
  .counter { font-size: 1.8rem; }
}

/* =========================================
   11. 最新企业新闻轮播 (Blog Carousel - 小范围视窗版)
   ========================================= */
.blog-section {
  padding: 80px 0;
  background-color: #fff;
}

.blog-section .section-header {
  margin-bottom: 40px;
  text-align: center;
}

/* --- 轮播可视窗口 (关键修改) --- */
.blog-marquee-container {
  /* 1. 限制宽度，不再全屏 */
  max-width: 1200px; 
  /* 2. 居中显示 */
  margin: 0 auto; 
  
  overflow: hidden; /* 隐藏超出这个框的内容 */
  padding: 20px 0;
  position: relative;
  
  /* 3. 添加左右渐隐遮罩，让滚动更自然，不像被生硬切断 */
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* 轮播轨道 (保持不变) */
.blog-marquee-track {
  display: flex;
  gap: 30px; /* 卡片间距 */
  width: max-content; /* 宽度由内容撑开 */
  
  /* 80s 极慢速匀速循环 */
  animation: scrollBlog 80s linear infinite;
}

.blog-marquee-track:hover {
  animation-play-state: paused;
}

/* --- 博客卡片样式 (微调适配) --- */
.blog-card {
  display: block;
  width: 380px; /* 稍微调小一点宽度，让1200px能显示出3个完整的 */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 基础阴影 */
  border: 1px solid #f0f0f0; /* 加个淡边框，增加精致感 */
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* 悬停特效 */
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
  border-color: #F4A460; /* 悬停边框变色 */
}

/* 图片容器 */
.blog-img-box {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.blog-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-img-box img {
  transform: scale(1.1);
}

/* 文字内容 */
.blog-content {
  padding: 20px;
  text-align: left;
}

.blog-content h3 {
  font-size: 17px;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: bold;
  height: 50px; /* 固定高度，防止标题长短不一导致卡片不齐 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-content .blog-date {
  font-size: 13px;
  color: #999;
  display: block;
  margin-top: 10px;
}

.blog-card:hover h3 {
  color: #6D4C41;
}

/* --- 动画关键帧 --- */
@keyframes scrollBlog {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 依然是移动一半，实现无缝 */
}

/* --- 响应式适配 --- */
@media (max-width: 1250px) {
  .blog-marquee-container {
    max-width: 90%; /* 屏幕变小时，宽度占90% */
  }
}

@media (max-width: 768px) {
  .blog-card {
    width: 280px; /* 手机上卡片变小 */
  }
}

/* =========================================
   12. 发送询价流程与表单 (Inquiry Process)
   ========================================= */
.inquiry-process-section {
  padding: 80px 5%;
  background-color: #F4EEE9; /* 参考图的米色背景 */
}

.inquiry-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 36px;
  color: #5D4037; /* 深棕色标题 */
  margin-bottom: 50px;
  /* 如果你想标题居中，取消注释下面这行 */
  /* text-align: center; */
}

.inquiry-content-wrapper {
  display: flex;
  gap: 50px;
  align-items: flex-start; /* 顶部对齐 */
}

/* --- 左侧流程步骤 --- */
.process-steps {
  flex: 1.2; /* 左侧稍微宽一点 */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 20px;
}

.step-card {
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-5px);
}

.step-icon {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid #F4A460; /* 橙色边框 */
  color: #F4A460;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
  /* 如果想要实心橙色背景，用下面这行代替上面 */
  /* background-color: #F4A460; color: white; */ 
}

/* 选中或激活样式的模拟 (参考图里是橙色实心) */
.step-card:nth-child(odd) .step-icon {
  background-color: #fff;
  color: #F4A460;
}
/* 为了视觉丰富，让所有图标都变成参考图那样的样式：橙色实心背景+白字 */
.step-icon {
  background-color: #F4A460 !important;
  color: white !important;
  border: none !important;
}

.step-card h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.step-card p {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
}

/* --- 右侧表单 --- */
.inquiry-form-card {
  flex: 0.8; /* 右侧稍微窄一点 */
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-group {
  margin-bottom: 20px;
  width: 100%;
}

.form-group.half {
  flex: 1; /* 两列等宽 */
}

.inquiry-form-card input,
.inquiry-form-card textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  background-color: #FAFAFA;
  transition: border 0.3s;
}

.inquiry-form-card input:focus,
.inquiry-form-card textarea:focus {
  outline: none;
  border-color: #F4A460;
  background-color: #fff;
}

/* 橙色提交按钮 */
.btn-submit-orange {
  width: 100%;
  padding: 15px;
  background-color: #F4A460; /* 亮橙色 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-submit-orange:hover {
  background-color: #e08e45;
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
  .inquiry-content-wrapper {
    flex-direction: column;
  }
  .process-steps, .inquiry-form-card {
    width: 100%;
    flex: auto;
  }
}

@media (max-width: 600px) {
  .process-steps {
    grid-template-columns: 1fr; /* 手机上步骤变成单列 */
  }
  .form-row {
    flex-direction: column; /* 姓名输入框在手机上换行 */
  }
}

/* =========================================
   表单状态提示样式 (AJAX)
   ========================================= */
#form-status {
  margin-top: 15px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  min-height: 20px; /* 占个位，防止抖动 */
  transition: all 0.3s ease;
}

/* 发送成功的样式 (绿色) */
.status-success {
  color: #28a745; 
  padding: 10px;
  background-color: #e6ffed;
  border-radius: 4px;
  border: 1px solid #b7ebc7;
}

/* 发送失败的样式 (红色) */
.status-error {
  color: #dc3545;
  padding: 10px;
  background-color: #ffe6e6;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
}
/* =========================================
   表单提交状态样式 (AJAX)
   ========================================= */
/* 成功提示框 (绿色背景) */
.status-success {
  margin-top: 15px;
  padding: 12px;
  background-color: #e6ffed; /* 淡绿色背景 */
  border: 1px solid #b7ebc7; /* 绿色边框 */
  color: #28a745; /* 深绿色文字 */
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 图标和文字的间距 */
}

/* 失败提示框 (红色背景) */
.status-error {
  margin-top: 15px;
  padding: 12px;
  background-color: #ffe6e6;
  border: 1px solid #f5c6cb;
  color: #dc3545;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* =========================================
   13. 高端品牌页脚 (Footer Styles)
   ========================================= */
.site-footer {
  background-color: #5D4037; /* 图片中的深棕色背景 */
  color: #D7CCC8; /* 浅米色文字 */
  padding-top: 80px;
  font-size: 14px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5% 50px 5%; /* 下方留出空间 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

/* --- 第一列：品牌列 --- */
.footer-col.brand-col {
  flex: 1.5; /* 这一列稍微宽一点 */
  min-width: 280px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
}

.footer-logo .logo-icon {
  font-size: 32px;
}

.footer-logo h3 {
  font-size: 20px;
  font-weight: bold;
  color: #F4A460; /* 魔幻灯光文字用橙色 */
}

.footer-desc {
  line-height: 1.8;
  margin-bottom: 25px;
  opacity: 0.9;
  max-width: 300px;
}

/* 社交媒体图标 (圆形橙色) */
.social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: #F4A460; /* 橙色背景 */
  color: white;
  border-radius: 50%; /* 圆形 */
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s;
  text-decoration: none;
}

.social-btn:hover {
  background-color: #fff; /* 悬停变白 */
  color: #F4A460; /* 文字变橙 */
  transform: translateY(-3px);
}

/* --- 后三列：链接列 --- */
.footer-col.links-col {
  flex: 1;
  min-width: 150px;
}

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

.footer-col ul {
  list-style: none;
}

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

.footer-col ul li a {
  color: #D7CCC8;
  text-decoration: none;
  transition: color 0.2s;
}

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

/* --- 底部版权条 (居中版) --- */
.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,0.1); /* 细分隔线 */
  padding: 25px 5%;
  max-width: 1200px;
  margin: 0 auto;
  
  /* 关键修改：使用 Flex 布局实现垂直居中 */
  display: flex;
  flex-direction: column; /* 让元素上下排列 */
  justify-content: center;
  align-items: center;    /* 水平居中 */
  gap: 10px;              /* 版权文字和地图链接之间的间距 */
  
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: center; /* 确保文字本身也是居中的 */
}

.copyright {
  letter-spacing: 0.5px;
}

.footer-bottom-links a {
  color: #F4A460; /* 链接用橙色，显眼 */
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold;
  transition: all 0.3s ease;
  padding: 5px 10px; /* 增加点击区域 */
}

.footer-bottom-links a:hover {
  color: #fff; /* 悬停变白 */
  text-decoration: underline;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 30px;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}






/* =========================================
   关于我们页面专用样式 (About Us Page)
   ========================================= */

/* --- 通用容器 --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

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

.section-title-center h2 {
  font-size: 36px;
  color: #5D4037;
  margin-bottom: 15px;
}

.section-title-center p {
  color: #888;
  font-size: 16px;
}

/* --- 1. 页面顶部横幅 (Page Banner) --- */
.page-header {
  height: 350px;
  background-color: #333; /* 图片加载前的底色 */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px; /* 抵消固定导航栏的高度 */
}

/* 黑色遮罩，让文字更清晰 */
.page-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.header-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.header-content h1 {
  font-size: 48px;
  margin-bottom: 10px;
  font-weight: bold;
}

.header-content p {
  font-size: 16px;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* =========================================
   2. 公司简介 (Intro Section) - 自动等高版
   ========================================= */
.about-intro-section {
  padding: 80px 0;
  background-color: #fff;
}

.intro-grid {
  display: flex;
  /* 【关键修改 1】使用 stretch 让左右两边高度自动拉伸一致 */
  align-items: stretch; 
  gap: 60px;
}

/* 左侧文字区域 */
.intro-text {
  flex: 1;
  /* 让文字内容在垂直方向上居中显示，视觉更平衡（可选） */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sub-heading {
  color: #F4A460;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.intro-text h2 {
  font-size: 38px;
  color: #5D4037;
  margin-bottom: 25px;
  line-height: 1.2;
  font-weight: 800;
}

.highlight-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-bottom: 25px;
  border-left: 4px solid #F4A460; /* 橙色竖线装饰 */
  padding-left: 15px;
}

.intro-text p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 15px;
  text-align: justify; /* 文字两端对齐 */
}

/* 统计数据小方块 */
.intro-stats {
  display: flex;
  gap: 40px;
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid #eee; /* 上方加条细线 */
}

.stat-box strong {
  display: block;
  font-size: 36px;
  color: #F4A460;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-box span {
  font-size: 13px;
  color: #999;
  font-weight: 500;
}

/* --- 右侧图片区域 --- */
.intro-image {
  flex: 1;
  display: block;
  /* 确保它能占满高度 */
  height: auto; 
}

.img-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  width: 100%;
  
  /* 【关键修改 2】强制容器高度为 100% */
  height: 100%; 
}

.img-frame img {
  width: 100%;
  
  /* 【关键修改 3】强制图片高度 100% 并裁切填满 */
  height: 100%; 
  object-fit: cover; /* 像壁纸一样铺满，不拉伸变形 */
  
  display: block;
  transition: transform 0.6s ease;
}

.img-frame:hover img {
  transform: scale(1.05); /* 悬停微放大 */
}

/* 响应式适配 */
@media (max-width: 992px) {
  .intro-grid {
    flex-direction: column; /* 手机平板改为上下排列 */
    align-items: center;
  }
  
  .img-frame {
    height: 300px; /* 手机上给个固定高度 */
  }
}

/* --- 3. 工厂环境 (Factory Tour) --- */
.factory-tour-section {
  padding: 80px 0;
  background-color: #F9F9F9; /* 浅灰背景区分 */
}

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

.factory-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

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

.factory-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.factory-caption {
  padding: 20px;
  text-align: center;
}

.factory-caption h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.factory-caption p {
  font-size: 14px;
  color: #777;
}

/* 响应式：平板变 2 列，手机变 1 列 */
@media (max-width: 992px) {
  .factory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .factory-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 4. 资质认证 (Certificates) --- */
.cert-section {
  padding: 80px 0;
  background-color: #fff;
}

.cert-logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.cert-item {
  text-align: center;
  width: 150px;
}

.cert-item img {
  width: 100px; /* 控制 Logo 大小 */
  height: auto;
  margin-bottom: 15px;
  filter: grayscale(100%); /* 默认黑白 */
  opacity: 0.7;
  transition: all 0.3s;
}

/* 悬停变彩色 */
.cert-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.cert-item p {
  font-size: 14px;
  color: #555;
  font-weight: bold;
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
  .intro-grid {
    flex-direction: column;
  }
  .factory-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板显示2列 */
  }
}

@media (max-width: 600px) {
  .factory-grid {
    grid-template-columns: 1fr; /* 手机显示1列 */
  }
  .cert-logos {
    gap: 20px;
  }
  .cert-item {
    width: 45%; /* 手机上一行两个证书 */
  }
}


/* =========================================
   团队页面专用样式 (Profile / Team Page)
   ========================================= */

/* --- 1. 五大生产部门 (Grid) --- */
.team-production-section {
  padding: 80px 0;
  background-color: #f9f9f9;
}

.dept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.dept-card {
  background: white;
  width: 300px; /* 卡片宽度 */
  padding: 35px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent; /* 底部预留边框 */
}

.dept-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  border-bottom-color: #F4A460; /* 悬停显示橙色底边 */
}

.dept-icon {
  font-size: 40px;
  margin-bottom: 20px;
  display: inline-block;
  background-color: #FFF3E0; /* 淡橙色背景 */
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
}

.dept-card h3 {
  font-size: 18px;
  color: #5D4037;
  margin-bottom: 10px;
  font-weight: bold;
}

.dept-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
}

/* --- 2. 详细团队展示 (Zig-Zag Layout) --- */
.team-details-section {
  padding: 0; /* 移除上下内边距，让每一行撑满 */
}

.team-row {
  display: flex;
  align-items: center;
  min-height: 500px; /* 每一行至少的高度 */
}

/* 偶数行反转 (图片在右，文字在左) */
.team-row.reverse {
  flex-direction: row-reverse;
  background-color: #fff;
}

/* 奇数行背景色微调 */
.team-row:not(.reverse) {
  background-color: #fcfcfc;
}

.team-img-box {
  flex: 1;
  height: 450px; /* 固定高度 */
  overflow: hidden;
}

.team-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.team-row:hover .team-img-box img {
  transform: scale(1.05); /* 鼠标经过图片缓慢放大 */
}

.team-text-box {
  flex: 1;
  padding: 60px 8%; /* 文字区域留白 */
}

.team-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #F4A460;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team-text-box h3 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.team-text-box p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 15px;
}

.team-list {
  list-style: none;
  padding: 0;
}

.team-list li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  color: #555;
}

.team-list li::before {
  content: "✔";
  color: #F4A460;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* --- 3. 销售团队横幅 (Sales Banner) --- */
.sales-team-banner {
  background-color: #5D4037; /* 深棕色背景 */
  color: white;
  text-align: center;
  padding: 80px 20px;
  background-image: linear-gradient(rgba(93, 64, 55, 0.9), rgba(93, 64, 55, 0.9)), url('../images/world-map.png'); /* 可选：加个世界地图背景纹理 */
  background-size: cover;
}

.sales-content h2 {
  font-size: 36px;
  margin-bottom: 15px;
}

.sales-content p {
  font-size: 16px;
  opacity: 0.8;
  max-width: 700px;
  margin: 0 auto 30px auto;
}

.sales-avatars {
  font-size: 40px;
  margin-bottom: 30px;
  letter-spacing: 10px;
}

.btn-sales {
  display: inline-block;
  padding: 15px 40px;
  background-color: #F4A460;
  color: white;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-sales:hover {
  background-color: white;
  color: #F4A460;
  transform: translateY(-3px);
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
  .team-row, .team-row.reverse {
    flex-direction: column; /* 手机上全部变成上下排列 */
    height: auto;
  }
  .team-img-box {
    width: 100%;
    height: 300px;
  }
  .team-text-box {
    padding: 40px 5%;
  }
}


/* =========================================
   产品总览页面样式 (Products Page)
   ========================================= */
.product-overview-section {
  padding: 80px 0;
  background-color: #fff;
}

.prod-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列布局 */
  gap: 40px;
  margin-top: 40px;
}

/* 产品大类卡片 */
.prod-main-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

.prod-main-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  border-color: #F4A460;
}

/* 图片区域 */
.card-img-top {
  width: 100%;
  height: 240px;
  background-color: #f9f9f9;
  overflow: hidden;
}

.card-img-top img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填满不留白 */
  transition: transform 0.5s ease;
}

.prod-main-card:hover .card-img-top img {
  transform: scale(1.1);
}

/* 内容区域 */
.card-body {
  padding: 30px;
  flex: 1; /* 撑满高度 */
  display: flex;
  flex-direction: column;
}

.card-body h3 {
  font-size: 22px;
  color: #5D4037;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #F4A460;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-body h3 .icon {
  font-size: 24px;
}

/* 细分列表 */
.sub-cat-list {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
  flex: 1; /* 让列表占据剩余空间，把按钮顶到底部 */
}

.sub-cat-list li {
  margin-bottom: 12px;
  color: #666;
  font-size: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}

.sub-cat-list li:hover {
  color: #F4A460;
}

.sub-cat-list li::before {
  content: "•";
  color: #F4A460;
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px;
  line-height: 1;
}

/* 按钮 */
.btn-card-link {
  display: inline-block;
  text-align: center;
  padding: 10px 0;
  color: #F4A460;
  font-weight: bold;
  border: 1px solid #F4A460;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-card-link:hover {
  background-color: #F4A460;
  color: white;
}

/* 响应式 */
@media (max-width: 992px) {
  .prod-overview-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板2列 */
  }
}

@media (max-width: 600px) {
  .prod-overview-grid {
    grid-template-columns: 1fr; /* 手机1列 */
  }
}

/* =========================================
   多级下拉菜单支持 (Nested Dropdown)
   ========================================= */

/* 1. 让一级菜单项成为定位基准 */
.dropdown-menu li {
  position: relative; /* 关键：子菜单要相对于它定位 */
}

/* 2. 二级子菜单样式 (默认隐藏) */
.dropdown-menu-sub {
  position: absolute;
  top: 0;
  left: 100%; /* 显示在父菜单的右侧 */
  width: 180px; /* 子菜单宽度 */
  background-color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-top: 3px solid #F4A460; /* 橙色顶边 */
  border-radius: 0 0 4px 4px;
  
  /* 隐藏状态 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
}

/* 3. 悬停显示二级菜单 */
.dropdown-menu li:hover > .dropdown-menu-sub {
  opacity: 1;
  visibility: visible;
}

/* 4. 二级菜单链接样式 */
.dropdown-menu-sub li a {
  display: block;
  padding: 12px 20px;
  color: #555;
  font-size: 14px;
  white-space: nowrap; /* 不换行 */
  text-decoration: none;
  transition: all 0.2s;
}

.dropdown-menu-sub li a:hover {
  background-color: #f9f9f9;
  color: #F4A460;
}

/* 5. 右侧小箭头 (指示有子菜单) */
.right-arrow {
  float: right;
  font-size: 12px;
  color: #ccc;
  margin-top: 2px;
}

/* 悬停时箭头变色 */
.dropdown-menu li:hover .right-arrow {
  color: #F4A460;
}

/* --- 修复视频高度不足的问题 --- */

/* --- 1. 容器高度调整：黄金比例 --- */
.hero-carousel {
    /* 改为 70vh (70%屏幕高度)，比之前的90vh小，比最早的细条大 */
    height: 85vh; 
    
    /* 设定最小高度，保证在小屏幕笔记本上文字也能放得下 */
    min-height: 550px; 
    
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 确保幻灯片继承高度 */
.hero-carousel .slide {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 视频/图片：保持覆盖模式 (Object-Fit) */
.hero-carousel .bg-video,
.hero-carousel .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：自动裁剪以填满容器，不变形 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 遮罩层 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 30% 黑色遮罩，稍微调亮一点 */
    z-index: 2;
}

/* 幻灯片层级控制 */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

/* 视频和图片都强制铺满 */
.bg-video, .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：裁剪画面以填满容器，不变形 */
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
}

/* 半透明黑色遮罩，让白色文字更清晰 */
.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.35); /* 35% 透明度的黑色 */
  pointer-events: none; /* 让点击穿透遮罩 */
  z-index: 1;
}

/* 全屏隐形链接 */
.full-slide-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
  cursor: pointer;
}

/* 文字内容层级最高 */
.hero-content {
  position: relative;
  z-index: 10;
  pointer-events: none; /* 让文字本身不挡住点击，除非是按钮 */
}

/* 按钮恢复点击 */
.btn-primary {
  pointer-events: auto;
}

/* =========================================
   Page Header Banner 样式优化
   ========================================= */

.page-header {
    /* 关键设置：让背景图处于中心并以覆盖方式铺满 */
    background-position: center center;
    background-size: cover; 
    background-repeat: no-repeat;
    
    position: relative; /* 为遮罩层做定位准备 */
    /* 可以根据需要调整 Banner 的高度，例如 300px 或 400px */
    /* min-height: 350px;  <-- 如果觉得默认高度不够，取消注释并修改这里 */
}

/* 可选优化：增加一个半透明黑色遮罩层 */
/* 作用：如果背景图太亮，这个遮罩能让白色文字更清晰易读 */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 0.4 表示 40% 透明度的黑色，可自行调节 (0.1 - 0.9) */
    z-index: 1; /* 放在背景图之上，文字之下 */
}

/* 确保文字内容在遮罩层上面 */
.header-content {
    position: relative;
    z-index: 2; /* 比遮罩层高一级 */
    /* 保持原有的文字居中和颜色样式不变 */
    /* 通常应该有: color: #fff; text-align: center; padding: ... 等 */
}

/* --- 证书图片专属优化样式 --- */

/* 1. 放大图片容器 */
.cert-item {
    margin-bottom: 30px; /* 增加一点底部间距 */
}

/* 2. 核心样式：让证书图片变大、变清晰 */
.cert-img-large {
    width: 100%;           /* 宽度占满父容器 */
    max-width: 350px;      /* 最大宽度设为 350px (之前可能只有 200px) */
    height: auto;          /* 高度自动，保持比例不变形 */
    
    /* 增加边框和阴影，让它像一张真正的纸质文件 */
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
    border-radius: 6px;
    
    /* 鼠标互动效果 */
    cursor: zoom-in;       /* 鼠标放上去变成放大镜图标 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. 鼠标悬停放大效果 */
.cert-img-large:hover {
    transform: scale(1.5); /* 放大 1.5 倍 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* 阴影加深，立体感更强 */
    z-index: 10;           /* 确保放大的时候盖住旁边的元素 */
    position: relative;    /* 配合 z-index 使用 */
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    .cert-img-large:hover {
        transform: scale(1.1); /* 手机上放大倍数小一点，防止溢出屏幕 */
    }
}



/* =========================================
   📱 移动端“免改HTML”修复补丁 (追加到文件末尾)
   ========================================= */

/* --- 1. 默认隐藏汉堡按钮 (电脑端不显示) --- */
.hamburger-btn {
    display: none;
}

@media (max-width: 992px) {

    /* --- 导航栏整体调整 --- */
    .main-nav {
        padding: 10px 20px;
        justify-content: space-between;
    }

    /* --- 汉堡按钮样式 (JS自动插入的) --- */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1002; /* 保证在最上层 */
        margin-left: auto; /* 靠右 */
    }

    .hamburger-btn span {
        width: 100%;
        height: 3px;
        background-color: #6D4C41; /* 品牌深棕色 */
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* 按钮变 X 动画 */
    .hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger-btn.open span:nth-child(2) { opacity: 0; }
    .hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

    /* --- 手机端菜单 (抽屉式) --- */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* 默认藏在屏幕右侧外面 */
        width: 70%;   /* 占据屏幕70%宽度 */
        height: 100vh;
        background-color: #fff;
        flex-direction: column; /* 垂直排列 */
        align-items: center;
        justify-content: center; /* 内容居中 */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease; /* 滑动动画 */
        z-index: 1001;
        /* 重置之前的居中代码 */
        left: auto; 
        transform: none;
        padding-top: 60px;
    }

    /* 激活状态：滑出来 */
    .nav-links.mobile-active {
        right: 0;
    }

    .nav-item {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* 手机端下拉菜单直接显示出来，不用悬停 */
    .dropdown-menu {
        position: static;
        box-shadow: none;
        display: none; /* 默认折叠，太长了不好看，或者改为 block 直接展开 */
        background-color: #f9f9f9;
        transform: none;
        width: 100%;
        border-top: none;
    }
    
    /* 让点击主菜单时显示子菜单 (简单的CSS交互) */
    .nav-item:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* --- 隐藏顶部黑条和多余图标 --- */
    .top-bar { display: none; } 
    .nav-icons { display: none; }

    /* --- Footer 页脚优化 (解决丑的问题) --- */
    .site-footer {
        text-align: center; /* 全局居中 */
        padding-top: 40px;
    }

    .footer-container {
        flex-direction: column; /* 垂直堆叠 */
        gap: 30px;
        padding-bottom: 30px;
    }

    .footer-col {
        width: 100%;
        min-width: auto;
        padding: 0 20px;
    }

    .footer-logo {
        justify-content: center; /* logo 居中 */
    }

    .social-icons {
        justify-content: center; /* 社交图标居中 */
        margin-top: 15px;
    }

    /* 链接列表间距调整 */
    .footer-col ul li {
        margin-bottom: 10px;
        padding: 5px 0; /* 增加点击区域，方便手指点 */
        border-bottom: 1px dashed rgba(255,255,255,0.1); /* 加个虚线分隔，更清晰 */
    }
}


/* =========================================
   📱 移动端多级菜单增强补丁 (追加到 style.css 末尾)
   ========================================= */
@media (max-width: 992px) {
    /* --- 1. 基础重置：让所有下拉菜单默认隐藏 --- */
    .dropdown-menu, 
    .dropdown-menu-sub {
        display: none !important; /* 强制隐藏，由JS控制显示 */
        position: static !important; /* 取消悬浮定位，改为普通流 */
        width: 100%;
        box-shadow: none;
        border: none;
        transition: none; /* 手机端取消过渡动画，防止卡顿 */
        opacity: 1 !important; /* 强制不透明，否则无法显示 */
        visibility: visible !important;
        transform: none !important;
    }

    /* --- 2. 颜色与缩进：区分层级 --- */
    /* 一级下拉菜单 (浅灰背景) */
    .dropdown-menu {
        background-color: #f7f7f7 !important;
        border-top: 1px solid #eee;
    }
    
    /* 二级下拉菜单 (更深一点的灰，加缩进) */
    .dropdown-menu-sub {
        background-color: #eeeeee !important;
        padding-left: 20px; /* 缩进 */
    }

    /* --- 3. 激活状态：当添加了 open 类时显示 --- */
    .nav-item.menu-open > .dropdown-menu {
        display: block !important;
    }
    
    .dropdown-menu li.submenu-open > .dropdown-menu-sub {
        display: block !important;
    }

    /* --- 4. 箭头交互样式 --- */
    /* 让箭头变大，方便手指点击 */
    .arrow, .right-arrow {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 44px; /* 增大点击区域 */
        height: 44px;
        color: #6D4C41;
        font-size: 12px;
        transition: transform 0.3s ease;
        float: right; /* 强制靠右 */
        margin-top: -10px; /* 微调垂直位置 */
        cursor: pointer;
    }

    /* 旋转箭头动画 */
    .nav-item.menu-open > .arrow,
    .dropdown-menu li.submenu-open > a .right-arrow,
    .dropdown-menu li.submenu-open > .right-arrow {
        transform: rotate(180deg);
    }

    /* 修正列表项样式 */
    .nav-item, .dropdown-menu li {
        width: 100%;
        text-align: left; /* 手机端左对齐更好看 */
        position: relative; /* 为箭头定位 */
    }

    .nav-item > a, .dropdown-menu li > a {
        display: inline-block;
        width: calc(100% - 50px); /* 留出箭头的位置 */
        padding: 15px 20px;
    }
}

/* =========================================
   🚑 修复手机端顶部空白问题 (追加到 style.css 末尾)
   ========================================= */
@media (max-width: 992px) {
    /* 1. 强制导航栏贴顶，消除 40px 的间隙 */
    .main-nav {
        top: 0 !important; 
        margin-top: 0 !important;
    }

    /* 2. 调整网页内容的上边距，防止内容被导航栏遮挡 */
    /* (导航栏高度约 60-70px，这里设置 70px 刚好) */
    body {
        padding-top: 70px !important;
    }

    /* 3. 确保 Top Bar 彻底隐藏不占位 */
    .top-bar {
        display: none !important;
    }
    
    /* 4. 修复轮播图可能的错位 */
    .hero-carousel {
        margin-top: 0 !important;
    }
}

/* =========================================
   🚑 修复内页（非首页）顶部空白问题 (追加到 style.css 末尾)
   ========================================= */
@media (max-width: 992px) {
    /* 1. 消除普通内页顶部横幅的边距 */
    .page-header {
        margin-top: 0 !important; 
    }

    /* 2. 针对 Contact 页面的特殊处理 */
    /* Contact 页面是用 padding 撑开的，我们需要减小它，否则顶部太高 */
    .contact-page-header {
        padding-top: 100px !important; /* 原本是160px，减小一点更紧凑 */
    }
}