:root {
  --bg: #f5f7fb;
  --bg-alt: #e5ecff;
  /* 深蓝 + 鲜红，参考 smithweb 风格 */
  --accent: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-strong: rgba(37, 99, 235, 0.2);
  --accent-primary: #e11d48;
  --accent-primary-soft: rgba(225, 29, 72, 0.12);
  --text-main: #111827;
  --text-muted: #6b7280;
  --card-bg: #ffffff;
  --border-subtle: rgba(148, 163, 184, 0.35);
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.75);
  --shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.5);
  --nav-blur: blur(18px);
  --transition-fast: 160ms ease-out;
  --transition-med: 240ms ease-out;
  --grid-max-width: 1160px;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-main);
}
.page-wrap > main {
  flex: 1 0 auto;   /* 主内容撑满，使页脚始终贴在最下面 */
}
.site-footer,
.about-page-footer {
  margin-top: auto; /* 页脚贴在最下面 */
}

/* 布局基础 */

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

.section-grid {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 72px 20px 64px;
}

.section-header {
  max-width: 640px;
  margin-bottom: 32px;
}

.section-header h2 {
  font-size: 28px;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--text-main);
}

/* 关于我们区域 - 统一黑色背景，全屏宽度，实现层级重叠 */
.about-section {
  background: #000000 !important;
  border-radius: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: -120px !important; /* 增加负边距，从-80px增加到-120px，向上移动黑色背景，增加视觉占比 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
  z-index: 1; /* 确保黑色背景在红色方块下方 */
}

.about-section .section-grid {
  max-width: 100% !important;
  padding: 140px 20px 64px !important; /* 增加上内边距，从120px增加到140px，为重叠效果留出更多空间 */
}

/* 关于我们内容包装器 - 垂直布局 */
.about-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--grid-max-width);
  margin: 0 auto;
}

/* 垂直排列的内容卡片 */
.about-cards-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 进一步减少间距，从12px减少到8px */
  width: 100%;
}

/* 关于我们标题移到底部 */
.about-title-bottom {
  margin-top: 0;
  margin-bottom: 0;
  text-align: left; /* 左对齐，与参考图一致 */
}

.about-title-link {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.about-title {
  background: #dc2626;
  color: #ffffff;
  padding: 12px 32px; /* 增加左右内边距，让椭圆形更明显 */
  border-radius: 999px; /* 使用椭圆形（pill shape），999px确保完全圆形 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-med);
  cursor: pointer;
  margin: 0;
}

/* 标题文字和箭头 */
.about-title-text {
  display: inline-block;
  color: #ffffff;
  transition: color var(--transition-fast);
}

.about-title-arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

/* 悬浮效果：手型指针、轻微变色 */
.about-title-link:hover {
  cursor: pointer;
}

.about-title-link:hover .about-title {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.about-title-link:hover .about-title-text {
  color: rgba(255, 255, 255, 0.95);
}

.about-title-link:hover .about-title-arrow {
  transform: translateX(4px);
  color: rgba(255, 255, 255, 0.95);
}

.about-title-link:active .about-title {
  transform: translateY(0);
}

.section-header p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 15px;
}

.section-sub {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--border-subtle);
}

.section-sub h3 {
  font-size: 22px;
  margin: 0 0 16px;
  font-weight: 600;
}

/* 顶部导航（浅色顶栏，类似 smithweb） */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: var(--nav-blur);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.header-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-sub {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.logo-sub:hover {
  color: #dc2626;
}

/* 公司名两行：桌面端一行，手机端英文拆为两行 Guangdong Jiajing / Printing Co., Ltd. */
.logo-line2::before {
  content: " ";
}
.logo-sub .logo-line2:empty {
  display: none;
}
.logo-sub .logo-line2:empty::before {
  content: none;
}
/* 中文页面不显示英文第二行（Printing Co., Ltd.），电脑端和手机端均隐藏 */
body[data-lang="zh"] .logo-sub .logo-line2 {
  display: none !important;
}

.nav {
  display: flex;
  align-items: center;   /* 与「产品」下拉等同高、同一水平线 */
  gap: 32px; /* 增加导航文字之间的水平间距，从20px增加到32px */
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.nav a {
  color: #111827;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 14px;
  transition: all var(--transition-fast);
  position: relative;
  border-radius: 999px;
  margin: 0 4px; /* 额外增加左右边距，进一步拉大间距 */
}

.nav a:hover {
  color: #111827;
}

.nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #dc2626;
  transition: width var(--transition-med);
}

.nav a:hover::after {
  width: 100%;
}

.nav a:hover {
  background: rgba(220, 38, 38, 0.12);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.12);
}

/* 产品下拉：悬停 / focus-within 展开；与相邻导航项同一水平线 */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  padding: 8px 0;
  z-index: 21;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.nav-dropdown a::after {
  display: none;
}
.nav-dropdown a:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #111827;
  box-shadow: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lang-divider {
  color: var(--text-muted);
  font-size: 14px;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.lang-btn:hover {
  color: #111827;
  background: rgba(220, 38, 38, 0.12);
}

.lang-btn.active {
  color: #ffffff;
  background: #dc2626;
  font-weight: 600;
}

.lang-btn.active:hover {
  color: #ffffff;
  background: #dc2626;
}

/* 首屏标语（在标题上方） */
.hero-tagline {
  font-size: 15px;
  color: #dc2626;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* 顶部联系按钮 */
.header-contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: #0b1120;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 140px;
}

.header-contact-btn:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

.btn-text-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.btn-text-sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.95;
}

/* 首屏区域 - 版面更紧凑 */

.hero {
  padding: 0;
  width: 100%;
  margin: 0;
  min-height: 60vh;
  display: flex;
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #f9fafb;
}

.hero-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 背景：由灰色波点改为圆形阵列波点 + 红蓝圆点图片 */
  background: #f9fafb url('../assets/bg/hero-circles.png') center/cover no-repeat;
  border-radius: 0;
  padding: 20px 48px 40px;
  box-shadow: none;
  color: var(--text-main);
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-kicker {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
}

.hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #111827;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-med);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn.primary {
  background: var(--accent-primary);
  color: #f9fafb;
  border-color: var(--accent-primary);
}

.btn.primary:hover {
  background: #fb7185;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(248, 113, 113, 0.55);
}

.btn.ghost {
  background: transparent;
  color: #e5e7eb;
  border-color: rgba(156, 163, 175, 0.65);
}

.btn.ghost:hover {
  background: rgba(15, 23, 42, 0.45);
  border-color: #e5e7eb;
  color: #e5e7eb;
}

.hero-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.metric-card {
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: all var(--transition-med);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

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

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.metric-number {
  font-size: 38px;
  font-weight: 700;
  color: #dc2626;
  line-height: 1.1;
  margin-bottom: 4px;
  display: block;
}

.metric-number.metric-number-lg {
  font-size: 48px;
  color: #dc2626;
}

.metric-label {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.4;
  display: block;
  margin-top: 0;
}

.hero-stats {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

/* 播放按钮和参观工厂 */
.hero-watch {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-watch[data-watch-url]:not([data-watch-url=""]) {
  cursor: pointer;
}

.play-btn {
  width: 62px;
  height: 62px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.play-btn:hover {
  transform: scale(1.1);
}

.play-icon {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-circle {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}

.play-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 18px solid #ffffff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
  z-index: 3;
}

.play-ring {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, 0.3);
  opacity: 0;
  transform: scale(1);
  transition: all 0.4s ease;
}

.play-btn:hover .play-ring {
  opacity: 1;
  transform: scale(1.5);
  border-color: rgba(248, 113, 113, 0.6);
}

.watch-text {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  text-decoration: underline;
  text-decoration-color: #dc2626;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.watch-text:hover {
  color: #dc2626;
}

.metric-number.en {
  font-size: 38px;
  font-weight: 700;
  color: #dc2626;
  line-height: 1.1;
  margin-bottom: 4px;
}

.metric-label.en {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.4;
}

body[data-lang="zh"] .metric-number.en,
body[data-lang="zh"] .metric-label.en {
  display: none;
}

body[data-lang="en"] .metric-number.cn,
body[data-lang="en"] .metric-label.cn {
  display: none;
}

/* 设备能力展示区块 - 放大尺寸并实现层级重叠 */
.equipment-section {
  width: 100%;
  background: transparent;
  padding: 0 20px 60px; /* 上边距为 0，贴着 hero 图片 */
  margin: 0;
  position: relative;
  z-index: 2; /* 确保红色方块在上层 */
}

.equipment-grid {
  max-width: 92%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  justify-items: stretch;
}

/* 独立的正方形方块 - 放大尺寸并保持间距 */
.equipment-block {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 560px; /* 进一步放大方块尺寸，从500px增加到560px */
  background: #dc2626;
  border-radius: 0; /* 保持尖锐的90度角 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  z-index: 2; /* 确保方块在黑色背景之上 */
}

.equipment-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* 悬浮时的半透明背景图叠加层 */
.equipment-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition-med);
  z-index: 1;
}

.equipment-block:hover .equipment-overlay {
  opacity: 0.4; /* 40% 透明度，可在 30%-50% 之间调整 */
}

/* 内容层，整块文字在红色方框中间，内部左对齐 */
.equipment-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.equipment-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 移除图标显示 */
.equipment-icon {
  display: none; /* 隐藏图标 */
}

.equipment-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.3;
  text-align: left;
}

.equipment-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
  line-height: 1.5;
  text-align: left;
}

.equipment-separator {
  width: 60px;
  height: 2px;
  background: #ffffff;
  margin: 24px 0 0;
}

/* 响应式：移动端单列显示，保持层级重叠效果 */
@media (max-width: 768px) {
  /* 移动端导航栏间距调整 */
  .nav {
    gap: 20px; /* 移动端适当减小间距，避免换行过多 */
  }
  
  .nav a {
    margin: 0 2px; /* 移动端减小额外边距 */
  }
  
  .equipment-grid {
    grid-template-columns: 1fr;
    gap: 40px; /* 移动端也增加间距，让方块不挤在一起 */
  }
  
  .equipment-section {
    padding: 0 20px 40px; /* 移动端也贴着 hero */
  }
  
  .equipment-block {
    min-height: 320px; /* 移动端保持较大尺寸 */
    max-width: 100%;
    margin: 0 auto;
  }
  
  .equipment-title {
    font-size: 22px;
  }
  
  .equipment-desc {
    font-size: 13px;
  }
  
  /* 移动端关于我们区域重叠调整 */
  .about-section {
    margin-top: -100px !important; /* 移动端重叠距离，从-60px增加到-100px，保持向上移动效果 */
  }
  
  .about-section .section-grid {
    padding: 120px 20px 48px !important; /* 移动端增加上内边距 */
  }
  
  .about-content-wrapper {
    gap: 32px;
  }
  
  .about-cards-vertical {
    gap: 8px; /* 移动端也减少间距，与桌面端一致 */
  }
}

/* 卡片网格 */

.cards {
  display: grid;
  gap: 24px;
}

.cards.two-cols {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards.three-cols {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition-med);
}

/* 关于我们卡片特殊样式：无边框 */
.about-card {
  border: none !important; /* 确保取消白色线框 */
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-subtle);
}

.card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-main);
}

.card h3 .cn {
  color: var(--text-main);
}

.card h3 .en {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 14px;
}

/* 关于我们区域 - 统一黑色背景（已在上面定义，此处保留用于兼容） */
.about-section .section-header {
  margin-bottom: 0; /* 垂直布局中不需要底部边距 */
}

.about-card {
  background: #000000 !important;
  border: none !important; /* 取消白色线框 */
  border-color: transparent !important;
}

.about-card-title {
  color: #5880D1 !important;
  font-size: 40px; /* 关于我们小标题进一步放大 */
  font-weight: 600;
  margin: 0 0 12px;
  text-decoration: none;
  border-bottom: 2px solid #5880D1; /* 添加蓝色下划线，与蓝色文字颜色一致 */
  display: inline-block; /* 让下划线只覆盖文字宽度 */
  padding-bottom: 4px; /* 下划线与文字之间的间距 */
}

.about-card-text {
  color: #ffffff !important;
  margin: 0;
  line-height: 1.6;
  font-size: 44px; /* 正文再放大一档，黑底区域更有气势 */
}

.product-card {
  min-height: 160px;
}

/* 产品区：assets/bg 双底图 + 红色产品滚动条；蓝色模块宽度拉满屏幕、无留白 */
.products-section {
  position: relative;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 0 72px; /* 在当前基础上再缩短约 20% 高度，仅影响深蓝背景 */
  box-sizing: border-box;
  background-color: #0b1120;
  background-image: url('../assets/bg/products-bg-texture.png');
  background-size: 35% 35%;
  background-repeat: repeat;
}
.products-section-heading {
  max-width: none;
  width: 100vw;
  margin: 0;
  padding: 0; /* 去掉左右留白，让句子区域真正顶满屏幕宽度 */
  overflow: hidden; /* 只显示可视区域，超出部分隐藏 */
}
.products-section-heading-text {
  color: #8fb4d8; /* 使用提供图片中的浅蓝色 */
  font-weight: 700;
  font-size: 80px; /* 再小一档，视觉更协调 */
  letter-spacing: 0; /* 使用默认字距，单词间隔最紧凑但不重叠 */
  white-space: nowrap;
  min-width: 140vw; /* 宽度超出屏幕宽度 */
  transform: translateX(0);
  transition: transform 0.1s linear;
  will-change: transform;
}
.products-section .section-header,
.products-section .section-sub {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 100%;
}
.products-section .section-sub {
  border-top: none;
}
.products-section .product-scroll-bar {
  margin-left: 40%;
  margin-right: auto;
}
/* products-overlay 叠在蓝色模块上，15% 透明度 */
.products-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/bg/products-overlay.png') center/cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.products-section > * {
  position: relative;
  z-index: 1;
}

/* 为什么选择佳景：蓝底 products-bg-texture，宽度拉满、不留白；白字 + 红色椭圆形询价 → 邮件 */
.why-choose-section {
  position: relative;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px 0;
  box-sizing: border-box;
  background-color: #0b1120;
  background-image: url('../assets/bg/products-bg-texture.png');
  background-size: 35% 35%;
  background-repeat: repeat;
}
.why-choose-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.why-choose-title {
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.3;
}
.why-choose-p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  opacity: 0.95;
}
.why-choose-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 12px 32px;
  background: #dc2626;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: all var(--transition-med);
}
.why-choose-cta:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* 红色模块：高度 551px，上下留白 30%（黄框区不出现文字），中间最多 5 个产品名；悬停暂停、字号放大、显示 → */
.product-scroll-bar {
  background: rgba(220, 38, 38, 0.7);  /* 红色模块 30% 透明 */
  color: #fff;
  width: 48%;
  min-height: 421px;
  height: 421px;
  padding-top: 100px;   /* 上留白：缩短红色模块高度，内容区不变 */
  padding-bottom: 100px; /* 下留白 */
  box-sizing: border-box;
  overflow: hidden;
  margin: 80px auto 32px; /* 再整体下移一点，深蓝色背景不动 */
  display: flex;
  flex-direction: column;  /* 标题在上、视口在下 */
  align-items: stretch;
  justify-content: flex-start;
}
/* 固定标题「产品」，不随列表滚动，字体比下方产品名小 */
.product-scroll-label {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  padding: 0 24px 8px 30%;  /* 与下方列表左对齐（30%） */
  position: relative;
  top: -28px;               /* 仅「产品」二字上移，下方列表不动 */
  color: #fff;
}
/* 仅在此视口内显示滚动文字，上下 165px 留白区绝不出现文字 */
.product-scroll-viewport {
  height: 193px;        /* 221 - 28(标签区) 给固定标题「产品」留出空间 */
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  contain: layout paint;
}
.product-scroll-inner {
  display: flex;
  flex-direction: column;
  gap: 0;  /* 轨道与克隆之间无间隙，蒸煮袋后紧接着卷膜实现无缝循环 */
  align-items: stretch;  /* 轨道铺满宽度，整体居于红色模块中间 */
  --scroll-one: 300px;
  animation: none; /* 等 JS 量好 --scroll-one 并加上 .is-ready 后再开动 */
  will-change: transform;
  backface-visibility: hidden;
}
.product-scroll-inner.is-ready {
  animation: product-scroll-vertical 8s linear infinite;  /* 文字滚动速度（数值越小越快） */
}
.product-scroll-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;  /* 文字左对齐 */
  flex-shrink: 0;
  padding: 14px 24px 14px 30%;  /* 文字往右移 30%，红色模块不动 */
}
/* 产品条：支持鼠标/触摸在整块红色区域拖动垂直滚动，与自动滚动并存 */
.product-scroll-bar {
  cursor: grab;
}
.product-scroll-bar.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.product-scroll-inner.is-dragging {
  animation: none !important;
}
.product-scroll-item {
  flex-shrink: 0;
  font-size: 22px;   /* 文字放大 */
  font-weight: 700;
  line-height: 1.35;
  padding: 5px 0;    /* 与 gap、track 内边距配合，可见区恰好最多 5 个产品名 */
  cursor: pointer;
  transition: font-size 0.2s ease;
  color: inherit;
  text-decoration: none;
  display: block;
}
/* 产品列表项前的横线用伪元素绘制，可调长度，文字位置不变 */
.product-scroll-item .cn::before,
.product-scroll-item .en::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: currentColor;
  margin-right: 0.35em;
  position: relative;
  left: -0.5em;
  vertical-align: middle;
}
.product-scroll-item:hover {
  font-size: 24px;
}
.product-scroll-item:hover::after {
  content: ' →';
  margin-left: 2px;
}
[data-lang="zh"] .product-scroll-bar .en { display: none; }
[data-lang="en"] .product-scroll-bar .cn { display: none; }
@keyframes product-scroll-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-1 * var(--scroll-one, 300px))); }
}

/* 图片画廊 */

.gallery-tip {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}

.gallery-tip code {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: "Courier New", monospace;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-med);
}

.gallery-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-subtle);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 合作伙伴 */

.partner-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.partner-pill {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.partner-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* 合作伙伴：整体高度拉高 10%；logo 条左右自动滚动 */
#partners {
  padding: 79px 20px;   /* 72 × 110% ≈ 79 */
}
#partners .section-header {
  margin-bottom: 35px;  /* 32 × 110% ≈ 35 */
}
.partners-logo-strip {
  overflow: hidden;
  margin: 0 -20px 0;
  padding: 9px 0;       /* 拉高 10% 增加的上下留白 */
  contain: layout paint;
}
.partners-scroll-inner {
  display: flex;
  gap: 32px;
  align-items: center;
  will-change: transform;
  backface-visibility: hidden;
  /* 不重复、不自动滚动，仅支持拖拽，拖到尽头即停 */
}
.partners-scroll-inner img {
  flex-shrink: 0;
  height: 88px;         /* 80 × 110% */
  width: auto;
  max-width: 115px;
  object-fit: contain;
}

/* 联系我们（首页与关于我们页一致：黑底、白字） */

.section-contact {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px 20px 72px;
  box-sizing: border-box;
  background: #000000;
  color: #ffffff;
}

.section-contact .contact-grid {
  max-width: var(--grid-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.section-contact .contact-info,
.section-contact .contact-map {
  text-align: left;   /* 文字和图片左对齐 */
}

.section-contact .contact-info h2 {
  font-size: 34px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px;
}

.section-contact .company-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px;
}

.section-contact .contact-item {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

.section-contact .contact-item .label {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.section-contact .contact-item a {
  color: #ffffff;
}

.section-contact .contact-item a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.section-contact .contact-item span:not(.label) {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.section-contact .contact-social {
  margin-top: 20px;
}

.section-contact .contact-social-link,
.section-contact .contact-social-icon-img {
  color: #ffffff;
}

.section-contact .contact-social-link svg {
  color: #ffffff;
}

.section-contact .contact-social-wechat-wrap .contact-social-icon-img {
  filter: brightness(0) invert(1);
}

.section-contact .contact-map h3 {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px;
}

.section-contact .map-frame {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1a1a1a;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.hero-media {
  border-radius: 0;
  /* 无任何背景图案，只显示图片 */
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media::before {
  content: none;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.hero-media img.hero-loaded {
  opacity: 1;
}

.contact-info h2 {
  font-size: 28px;
  margin: 0 0 20px;
  font-weight: 600;
}

.company-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 24px;
}

.contact-item {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-item .label {
  font-weight: 600;
  color: var(--text-muted);
  min-width: 60px;
}

.contact-item a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-item a:hover {
  color: #5de5ff;
  text-decoration: underline;
}

.contact-item span:not(.label) {
  color: var(--text-main);
  line-height: 1.6;
}

/* 证书、合作伙伴：可拖拽滚动的包装层 */
.strip-drag-wrap {
  display: block;
  cursor: grab;
  touch-action: none;
  transform: translateX(var(--drag-dx, 0));
  --drag-dx: 0;
}
.strip-drag-wrap:active {
  cursor: grabbing;
}
.strip-drag-wrap.is-dragging {
  user-select: none;
}
.strip-drag-wrap.is-dragging .cert-scroll-inner,
.strip-drag-wrap.is-dragging .partners-scroll-inner {
  animation-play-state: paused;
}
.strip-drag-wrap img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* 资质证书区块：波点背景（与 hero-main 一致）、宽度拉满屏幕；整体高度拉高 20% */
#certificates {
  position: relative;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 86px 20px;   /* 72 × 120% ≈ 86 */
  background:
    radial-gradient(circle at 16px 16px, rgba(15, 23, 42, 0.08) 2px, transparent 0)
      0 0 / 32px 32px repeat,
    #f9fafb;
}

/* 证书背后：50% 透明灰色长条，宽度拉满；整体拉高 20% 后同步放大、图片居中 */
#certificates::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 100vw;
  top: 143px;          /* 随整体拉高重算，使证书图片仍居中于灰色条 */
  height: 282px;       /* 235 × 120% */
  background: rgba(120, 120, 120, 0.5);
  pointer-events: none;
  z-index: 0;
}
#certificates .section-header,
#certificates .cert-strip {
  position: relative;
  z-index: 1;
}
#certificates .section-header,
#partners .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 证书图片横条：左右自动滚动；整体拉高 20% */
.cert-strip {
  overflow: hidden;
  margin: 0 -20px 29px;  /* 24 × 120% ≈ 29 */
  padding: 10px 0;       /* 8 × 120% ≈ 10 */
  contain: layout paint;
}
.cert-scroll-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  --cert-max-translate: 0px;  /* 由 JS 根据视口与内容宽度计算，保证始终能看到约 5 张 */
  animation: cert-scroll 25s linear infinite;
  animation-direction: alternate;  /* 左右移动：到尽头后往反方向移动 */
  will-change: transform;
  backface-visibility: hidden;
}
.cert-scroll-inner .cert-item {
  flex-shrink: 0;
  cursor: pointer;
}
.cert-scroll-inner .cert-item img {
  height: 216px;        /* 180 × 120% */
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.cert-scroll-inner .cert-item:hover img {
  box-shadow: var(--shadow-subtle);
}
@keyframes cert-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--cert-max-translate, 0px)); }  /* 仅移动到「内容宽－视口宽」，保证始终能同时展现多张证书 */
}

/* 证书灯箱：点击放大，不跳转新页面 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}
.lightbox.is-open {
  display: flex;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  pointer-events: auto;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 社交媒体：LinkedIn、微信、WhatsApp */
.contact-social {
  display: inline-flex;
  flex-direction: row;
  gap: 0;               /* 三块连在一起，形成一个长方形 */
  align-items: center;
  margin-top: 24px;
}
.contact-social > *:first-child { border-radius: 6px 0 0 6px; }
.contact-social > *:last-child  { border-radius: 0 6px 6px 0; }

.contact-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #dc2626;
  color: #ffffff;
  border-radius: 0;     /* 块之间无圆角，连成一条 */
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.contact-social-link:hover {
  background: #b91c1c;
}

.contact-social-icon-img {
  width: 22px;
  height: 22px;
  display: block;
}

.contact-social-wechat-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #dc2626;
  border-radius: 0;     /* 块之间无圆角，连成一条 */
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.contact-social-wechat-wrap:hover {
  background: #b91c1c;
}

.contact-wechat-qr {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  display: none;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  max-width: 160px;
  border: 1px solid var(--border-subtle);
}

.contact-social-wechat-wrap:hover .contact-wechat-qr {
  display: block;
}

.contact-map h3 {
  font-size: 20px;
  margin: 0 0 20px;
  font-weight: 600;
}

.map-frame {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--card-bg);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* 产品详情页：白底、左文+产品示例，已移除右上角 Applications 框 */
.product-detail-page { background: #ffffff; color: #111827; }
.product-detail-main { max-width: var(--grid-max-width); margin: 0 auto; padding: 48px 20px 64px; }
.product-detail-grid { display: block; margin-bottom: 48px; }
.product-detail-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 20px; }
.product-detail-desc { font-size: 16px; line-height: 1.8; color: #4b5563; }
.product-detail-desc p { margin: 0 0 16px; }
.product-detail-desc p:last-child { margin-bottom: 0; }

/* 产品参数：产品描述与产品示例之间，白底黑字 */
.product-detail-params {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 32px;
}
.product-detail-params .params-list { margin: 0; font-size: 14px; }
.product-detail-params .params-list dt { color: #374151; font-weight: 600; margin: 16px 0 4px; }
.product-detail-params .params-list dt:first-child { margin-top: 0; }
.product-detail-params .params-list dd { margin: 0; color: #111827; line-height: 1.7; }
.product-detail-params .params-list dd:last-child { margin-bottom: 0; }

.product-detail-gallery {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.product-detail-gallery-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 72px; /* 标题和图片空更多，所有产品通用 */
}
.product-detail-gallery-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* 图片之间也稍微拉开一点 */
  contain: layout;
  min-height: 240px; /* 占位，减少图片加载时整块区域跳动 */
}
.product-detail-gallery-item {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  contain: layout paint;
}
.product-detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.product-detail-gallery-cta { margin-top: 32px; }
.product-detail-gallery-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: #dc2626;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #dc2626;
  box-sizing: border-box;
  transition: all var(--transition-med);
}
.product-detail-gallery-cta a:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
@media (max-width: 900px) {
  .product-detail-gallery-inner { grid-template-columns: 1fr; }
}

/* 页脚：黑底、浅色分隔线与文字 */

.site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 32px 20px;
  /* margin-top 由上方 .site-footer { margin-top: auto } 控制，页脚贴在最下面 */
}

.footer-inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  text-align: center;
  color: #ffffff;   /* 页脚版权文字：白色 */
  font-size: 13px;
}

/* 响应式设计 */

@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-main {
    padding: 40px 24px 36px;
    min-height: auto;
  }

  .hero-media {
    min-height: 38vh;
    display: none; /* 手机端去掉右侧大图，仅保留文字内容 */
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
  }

  .logo-sub {
    font-size: 12px;
  }
  .logo-sub .logo-line2 {
    display: block;
  }
  .logo-sub .logo-line2::before {
    content: none;
  }

  .header-contact-btn {
    order: 4;
    width: 100%;
    margin-top: 8px;
  }

  /* 手机端导航两行：第一行 About us、Products；第二行 Certificates、Partners、Contact us */
  .nav {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "nav-1 nav-2 ." "nav-3 nav-4 nav-5";
    gap: 12px 16px;
    order: 2;
  }
  .nav > *:nth-child(1) { grid-area: nav-1; }
  .nav > *:nth-child(2) { grid-area: nav-2; }
  .nav > *:nth-child(3) { grid-area: nav-3; }
  .nav > *:nth-child(4) { grid-area: nav-4; }
  .nav > *:nth-child(5) { grid-area: nav-5; }

  .nav a {
    margin: 0 2px;
    word-spacing: -0.15em;
    font-size: 14px;
  }

  /* 手机端点击「产品」弹出下拉，不跳转 */
  .nav-item-dropdown.nav-dropdown-open .nav-dropdown {
    display: block;
  }
  .nav-item-dropdown .nav-dropdown {
    left: 0;
    transform: none;
    min-width: 100%;
    margin-top: 8px;
  }

  .lang-switch {
    position: absolute;
    top: 14px;
    right: 20px;
  }

  /* 手机端向下滑动：隐藏导航、收缩头部；向上滑动恢复 */
  .site-header.header-scrolled-down .nav {
    display: none !important;
  }
  .site-header.header-scrolled-down .header-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px 20px;
    gap: 12px;
  }
  .site-header.header-scrolled-down .header-contact-btn {
    display: none !important;
  }
  .site-header.header-scrolled-down .lang-switch {
    position: static;
    margin-left: auto;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cards.three-cols {
    grid-template-columns: 1fr;
  }

  .cards.two-cols {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 48px 20px;
  }
  
  /* 关于我们区域响应式 */
  .about-section {
    margin-top: -100px !important; /* 移动端重叠距离，从-60px增加到-100px，保持向上移动效果 */
  }
  
  .about-section .section-grid {
    padding: 120px 20px 48px !important; /* 移动端增加上内边距 */
  }
  
  .about-content-wrapper {
    gap: 24px;
  }
  
  .about-title {
    font-size: 18px;
    padding: 10px 24px; /* 移动端也保持椭圆形，适当调整内边距 */
    border-radius: 999px; /* 移动端也保持椭圆形 */
  }

  /* 移动端：红色产品模块拉宽一些，仍位于深蓝色背景中间 */
  .product-scroll-bar {
    width: 92%;
    margin: 60px auto 32px;
  }
  .products-section .product-scroll-bar {
    margin-left: 0;   /* 左侧紧贴屏幕 */
    margin-right: auto;
  }

  /* 移动端：资质证书图片缩小一些，避免占满屏幕 */
  .cert-scroll-inner .cert-item img {
    height: 160px;
  }

  /* 移动端：证书图片整体居中放在灰色背景中 */
  .cert-scroll-inner {
    justify-content: center;
    animation: none;
  }

  /* 移动端：证书图片在灰色背景中整体向下移动一些（灰色背景位置不变） */
  .cert-strip {
    margin-top: 70px; /* 再多下移一段距离，灰色背景不动 */
  }

  /* 移动端：设备三个红色模块排成一排横向滚动 */
  .equipment-grid {
    max-width: 100%;
    margin: 0;
    padding: 0; /* 左边不留白，红色块贴屏幕边缘 */
    display: flex;
    overflow-x: auto;
    gap: 0; /* 模块之间不要空隙，贴得最近 */
    scroll-snap-type: x mandatory;
  }
  .equipment-grid::-webkit-scrollbar {
    display: none;
  }
  .equipment-block {
    min-width: 80%;
    max-width: 80%;
    min-height: 360px;
    scroll-snap-align: center;
  }

  /* 移动端：红色产品列表文字整体向左一些，不改变模块位置 */
  .product-scroll-track {
    padding: 14px 16px 14px 18%; /* 相比桌面端的 30%，整体更靠左 */
  }

  /* 移动端：证书灰色背景宽度拉满，贴两侧屏幕 */
  #certificates {
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
  #certificates::before {
    left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-main {
    padding: 32px 16px 28px;
    min-height: auto;
  }

  .hero-media {
    min-height: 32vh;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

/* 语言切换时的显示控制 */

body[data-lang="zh"] .en {
  display: none;
}

body[data-lang="en"] .cn {
  display: none;
}

body[data-lang="zh"] .cn {
  display: inline;
}

body[data-lang="en"] .en {
  display: inline;
}