/* ============================================================
   ALPICOOL B2B — Secondary pages (news / products)
   Reuses global .header / .footer from style.css
   ============================================================ */

/* About Us 页面设计稿字体（蓝湖）：Montserrat(标题) / Inter(标签) / Noto Sans SC(正文)
   通过 Google Fonts 标准方案引入，失败时回退系统字体 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* About 页面专属字体栈 */
.au-font-head { font-family: 'Montserrat', 'Noto Sans SC', sans-serif; }
.au-font-body { font-family: 'Noto Sans SC', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.au-font-label { font-family: 'Inter', 'Noto Sans SC', sans-serif; }

.page-hero {
  position: relative;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1a1a1a;
  background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef0f4;
  padding: calc(var(--header-height) + 30px) 20px 28px;
}
.page-hero h1 { font-size: 2.5rem; margin-bottom: 0; color: #181818; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.page-hero p { font-size: 0.875rem; color: #6b7280; max-width: 640px; margin: 0 auto; }
.breadcrumb {
  max-width: 1200px; margin: 1.125rem auto 0; padding: 0 1.25rem;
  font-size: 0.8125rem; color: #888;
}
.breadcrumb a { color: #1a73e8; text-decoration: none; }
.breadcrumb span { margin: 0 0.375rem; color: #bbb; }

.page-section { max-width: 1200px; margin: 0 auto; padding: 3.125rem 1.25rem; }

/* ---------- Category tabs (level-1 / level-2) ---------- */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-bottom: 1.625rem; }
.cat-tab {
  padding: 0.625rem 1.375rem; border: 1px solid #e2e8f0; border-radius: 30px;
  background: #fff; cursor: pointer; font-size: 0.875rem; color: #444; transition: .2s;
}
.cat-tab:hover { border-color: #1a73e8; color: #1a73e8; }
.cat-tab.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }

.cat-subtabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.125rem; }
.cat-subtab {
  padding: 0.4375rem 1rem; border: none; border-radius: 20px; background: #f1f5f9;
  cursor: pointer; font-size: 0.8125rem; color: #555; transition: .2s;
}
.cat-subtab:hover { background: #e2e8f0; }
.cat-subtab.active { background: #0d47a1; color: #fff; }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.625rem;
  margin-top: var(--header-height);
}
.product-card {
  background: #fff; border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden;
  transition: .25s; text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(13,71,161,.12); }
.product-card .pc-img {
  /* ⚠️ 竖版长方形卡片（参考 C15 视觉比例）：原 4/3 横版 → 3/4 竖版 */
  aspect-ratio: 3/4; width: 100%; object-fit: cover; background: #f5f7fa;
}
.product-card .pc-body { padding: 1rem 1.125rem 1.25rem; }
.product-card .pc-name { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.5rem; }
.product-card .pc-cat { font-size: 0.75rem; color: #1a73e8; margin-bottom: 0.625rem; }
.product-card .pc-desc { font-size: 0.8125rem; color: #777; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Product detail ---------- */
/* 20260814q: 参数区太窄 → 左图列缩窄、右参数列加宽（0.85fr:1.15fr ≈ 43%:57%） */
/* 20260814r: 用户反馈大图再缩短 → 0.8fr:1.2fr（40%:60%） */
.product-detail { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2.5rem; align-items: start; padding-top: var(--header-height); }
@media (max-width: 820px) { .product-detail { grid-template-columns: 1fr; } }
/* ⚠️ 20260816：主图改为 object-fit: contain（等比例全展示，不再裁切原图）。
   容器加 padding 让图片四周留点边距，图片与容器均无背景色（透明）。
   max-height 限制超高图片撑开布局。 */
.pd-gallery { padding: 1rem; background: transparent; }
.pd-gallery img { display: block; width: 100%; max-height: 560px; border-radius: 12px; background: transparent; object-fit: contain; }
.pd-thumbs { display: flex; gap: 0.625rem; margin-top: 0.75rem; flex-wrap: wrap; }
.pd-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.pd-thumbs img.active { border-color: #1a73e8; }
.pd-name { font-size: 1.875rem; font-weight: 800; margin-bottom: 0.625rem; }
.pd-cat { color: #1a73e8; font-size: 0.875rem; margin-bottom: 1.125rem; }
.pd-desc { color: #555; line-height: 1.8; margin-bottom: 1.5rem; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 1.625rem; }
.spec-table td { padding: 0; border: none; font-size: 0.875rem; }
/* 20260814t: 一行左右两组，每组表头在上/参数在下（用户确认的布局） */
.spec-list { margin-bottom: 1.625rem; }
.spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid #eef2f7;
}
.spec-row:last-child { border-bottom: none; }
.spec-cell { min-width: 0; }
.spec-cell .spec-key { color: #888; font-size: 0.8125rem; margin-bottom: 0.5rem; font-weight: 400; }
.spec-cell .spec-val { color: #1a1a1a; font-size: 1.125rem; font-weight: 600; line-height: 1.4; word-break: break-word; }
.pd-cta { display: inline-flex; gap: 0.75rem; margin-top: 1.75rem; }
.btn-primary { background: #1a73e8; color: #fff; padding: 0.8125rem 1.75rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.btn-ghost { background: #fff; color: #1a73e8; border: 1px solid #1a73e8; padding: 0.8125rem 1.75rem; border-radius: 8px; text-decoration: none; font-weight: 600; }

/* ---------- News list ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-bottom: 1.875rem; }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.75rem; }
.news-card {
  background: #fff; border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit; transition: .25s; display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(13,71,161,.12); }
.news-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #f5f7fa; }
.news-card .nc-body { padding: 1.125rem 1.25rem 1.375rem; }
.news-card .nc-cat { font-size: 0.75rem; color: #1a73e8; margin-bottom: 0.5rem; }
.news-card .nc-title { font-size: 1.125rem; font-weight: 700; line-height: 1.5; margin-bottom: 0.625rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .nc-date { font-size: 0.75rem; color: #aaa; margin-bottom: 0.625rem; }
.news-card .nc-excerpt { font-size: 0.8125rem; color: #777; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- News detail ---------- */
.news-article { max-width: 820px; margin: 0 auto; }
.news-article .na-cover { width: 100%; border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; margin: 1.25rem 0 1.625rem; }
.news-article .na-cat { color: #1a73e8; font-size: 0.875rem; }
.news-article .na-title { font-size: 2rem; font-weight: 800; margin: 0.625rem 0 0.875rem; line-height: 1.4; }
.news-article .na-date { color: #aaa; font-size: 0.8125rem; margin-bottom: 1.5rem; }
.news-article .na-content { font-size: 1rem; line-height: 1.9; color: #444; }
.news-article .na-content p { margin-bottom: 1rem; }

.empty-tip { text-align: center; color: #aaa; padding: 2.5rem; font-size: 0.9375rem; }

/* 搜索结果提示横幅 */
.search-banner {
  max-width: 1200px;
  margin: 1.25rem auto 0;
  padding: 0.875rem 1.25rem;
  background: #eef4ff;
  border: 1px solid #d3e3ff;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #333;
}
.search-banner b { color: #1a73e8; }
.search-clear {
  margin-left: 0.625rem;
  color: #1a73e8;
  text-decoration: underline;
}
.search-clear:hover { color: #1557b0; }

/* ============================================
   分类页 Hero 大图 + 分页器
   ============================================ */
.cat-hero {
  position: relative;
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: calc(var(--header-height));
}
.cat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
}

.cat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cat-pager .page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #dbe2ec;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #334155;
  transition: all 0.2s ease;
}
.cat-pager .page-btn:hover:not(:disabled) { border-color: #1a73e8; color: #1a73e8; }
.cat-pager .page-btn.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.cat-pager .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cat-pager .page-info {
  margin-left: 12px;
  font-size: 13px;
  color: #64748b;
}

/* ============================================
   类目页模块化渲染（4 种模板）
   ============================================ */
.cp-modules-wrap {
  /* ⚠️ 20260815 用户反馈：背景颜色要铺满整屏
     取消 max-width + auto margin，让 wrap 视觉铺满 viewport 宽度；背景色铺满 wrap 整个区域（含左右）
     子元素（#cp-modules / .cat-page-hero）保持 max-width 居中 */
  max-width: none;
  margin: 40px 0 60px;
  padding: 0 20px;
  background: var(--cp-page-bg, #ffffff);
  position: relative;
}
.cp-modules-wrap > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
/* ⚠️ 默认类目页：page-hero 已隐藏（display:none），需补偿顶部空间，
   否则第一个模块标题会被 fixed 导航栏（--header-height:70px）遮挡。
   wrap margin-top=40px → 额外 padding 让内容从导航栏下方开始（留 30px 余量） */
.cp-modules-wrap > #cp-modules {
  padding-top: calc(var(--header-height) - 40px + 30px);
}

.cp-module {
  margin-bottom: 56px;
}
.cp-module:last-child { margin-bottom: 0; }

.cp-module-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}
.cp-module-subtitle {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 0 0 28px;
}

.cp-module-empty {
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
}

/* 通用 grid 列数（JS 动态设 --cols，CSS 用 var(--cols)） */
.cp-featured-grid,
.cp-thumb-grid,
.cp-clean-grid,
.cp-scene-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 20px;
}

/* ⚠️ grid-thumb（5 车型）专用：严格按设计稿（类目页-中文.jpg）
   - 5 个车型一排（5 列），不是 3+2 或 4+1
   - 卡片：白底 + 细灰边框 + 顶部车型缩略图（灰色背景+contain 居中，不裁剪）+ 底部纯文字
   - 注意：grid-clean 模块（Zcamp 系列）才是底部圆角按钮样式，不要混淆 */
.cp-thumb-grid {
  grid-template-columns: repeat(5, 1fr);
  /* 不限宽：让 5 个均分 page-section（1200 容器 → 每卡 ~228px） */
}

/* ---- 模板 1：featured-products（精选大图横排） ---- */
.cp-featured-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  /* 深色背景：避免浅色图片（如 card-4.jpg 工厂背景）与页面背景"融为一体"导致看起来空白 */
  background: #dde1e6;
  /* ⚠️ 竖版长方形卡片（参考 C15 红框视觉比例：高 > 宽） */
  aspect-ratio: 3 / 4;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.cp-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.cp-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 图片加载前的占位 */
  background: #dde1e6;
}
/* 左上角灰底型号标签【浮在图片上】（设计稿图2：浅灰半透明矩形 + 产品型号） */
.cp-featured-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(220, 224, 230, 0.88);   /* 浅灰半透明 */
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
/* 左上角灰底型号标签【浮在图片上】（设计稿图2：浅灰半透明矩形 + 产品型号） */
.cp-featured-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(220, 224, 230, 0.88);   /* 浅灰半透明 */
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* ---- 模板 2：grid-thumb（缩略图网格-子分类） ---- */
/* 设计稿：白底卡 + 顶部浅灰车型缩略图 + 底部文字 */
.cp-thumb-card {
  background: var(--cp-card-bg, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.cp-thumb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.cp-thumb-img {
  width: 100%;
  /* ⚠️ 20260816：用户要求「图区背景色也需要支持修改」——改用 CSS 变量
     + background-size: cover 铺满整个框
     ⚠️ 20260815 用户说图被裁切——车图实际是横长的（4:3 ~ 16:9），1:1 方框 cover 会左右裁切一半
     改用 4:3 横长比例：与车图标准比例匹配，cover 时裁切极少
     ⚠️ 20260815 图片 4 角圆角（之前 background-image 不带 border-radius，看起来底部直角） */
  background-color: var(--cp-thumb-bg, #f4f5f7);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
.cp-thumb-name {
  padding: 14px 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  /* ⚠️ 20260815 移除 border-top：设计稿无分割线（之前是 1px solid rgba(0,0,0,0.05)） */
}

/* ---- 模板 3：grid-clean（白底卡 + 底部圆角按钮写名称，图2 Zcamp） ---- */
.cp-clean-card {
  background: var(--cp-card-bg, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ⚠️ 20260815 恢复 padding-bottom: 14px（之前删了导致图片过大盖住按钮） */
  padding-bottom: 14px;
}
.cp-clean-card:hover {
  transform: translateY(-4px);
}
.cp-clean-img {
  width: 100%;
  /* ⚠️ 20260815 用户纠正：grid-clean（预制房屋）的图也是接近正方形的（不像之前理解的竖向长方形），
     因为只排 4 张显得大；改回 1:1 方框与 grid-thumb 一致 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--cp-card-bg, #ffffff);
  border-radius: 12px;
}
.cp-clean-name {
  display: inline-block;
  /* ⚠️ 20260815 恢复 margin-top: 14px（图片下方留白，让按钮和图片有间距） */
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 18px;
  /* ⚠️ 20260815 用户反馈：蓝色框框让用户自己控制颜色
     把硬编码 #1a73e8 改成 CSS 变量 --cp-clean-btn-color（后台可改） */
  border: 1px solid var(--cp-clean-btn-color, #1a73e8);
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-clean-btn-color, #1a73e8);
  text-align: center;
}

/* ---- 模板 4：grid-scene（场景图：图片铺满 + 悬浮按钮【浮在图片上】） ---- */
/* 设计稿 PSD 原样还原：户外露营/车载相关 → 全幅场景图 + 底部半透明悬浮按钮覆盖在图片上 */
.cp-scene-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cp-scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.20);
}
/* 场景图铺满整个卡片 */
.cp-scene-img {
  width: 100%;
  /* ⚠️ 20260814m: 用户反馈最下面两模块（户外露营/车载相关）明显矮了，调高两档：
     3/2(1.5) → 4/3(一档) → 1/1(两档)。设计稿卡片实测约 1:1 正方形 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #e8ecf1;
}
/* 悬浮按钮（产品名称） */
/* 悬浮按钮：绝对定位在卡片底部中央，浮在图片上方
   ⚠️ 设计稿（类目页-中文.jpg PSD 采样「矩形 2 拷贝」按钮 293×48）：
     半透明白底 rgba(255,255,255,0.62) + 深色文字（不是半透明黑+白字！）
     户外露营按钮实测米灰底+深棕字；车载按钮实测中灰底+黑字 → 白底深字 */
.cp-scene-btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  min-width: 180px;
  max-width: calc(100% - 24px);
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.62);
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式 */
@media (max-width: 900px) {
  .cp-featured-grid,
  .cp-thumb-grid,
  .cp-clean-grid,
  .cp-scene-grid { gap: 14px; }
  .cp-module-title { font-size: 22px; }
}
@media (max-width: 600px) {
  .cp-featured-grid,
  .cp-thumb-grid,
  .cp-clean-grid,
  .cp-scene-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

/* ============================================
   分类列表页（/categories/<id>.html）
   ============================================ */
/* === 二级分类列表页：hero banner + 标题 + 4 列网格 === */
/* 严格按设计稿：顶部 100vw 跨屏大图 + 下方居中标题 + 4 列产品网格
   ⚠️ .cl-hero 用 100vw + margin-left 负值突破父容器 max-width（版心）约束
   ⚠️ 20260907：高度改为「按上传图片宽高比 × 100vw 等比撑开，最高不超过一屏」——
     有图时（.has-img）改用 <img> 标签 width:100%/height:auto 自动等比，
     图片比例过高时 max-height:100vh 截断并 object-fit:cover 裁切；
     无图时保留原 75vh 渐变占位 */
.cl-hero {
  position: relative;
  width: 100vw;                     /* 铺满整个屏幕宽度（超出版心） */
  margin-left: calc(50% - 50vw);    /* 突破 .cp-modules-wrap 的 max-width */
  height: 75vh;                     /* 无图占位：占视口高度 75% */
  min-height: 420px;
  max-height: 760px;
  background-size: cover;
  background-position: center;
  margin-top: calc(var(--header-height));
  overflow: hidden;
}
/* 有图时：高度交给 <img> 等比撑开，取消固定占位高度 */
.cl-hero.has-img {
  height: auto;
  min-height: 0;
  max-height: none;
  background-image: none !important;
}
.cl-hero.has-img img {
  display: block;
  width: 100%;                      /* 宽度铺满 100vw */
  height: auto;                     /* 高度按图片宽高比自动等比 */
  max-height: 100vh;                /* 上限：不超过一屏 */
  object-fit: cover;                /* 超限裁切而非压扁 */
  object-position: center;
}
@media (max-width: 900px) {
  .cl-hero { height: 56vh; min-height: 320px; max-height: 540px; }
  .cl-hero.has-img { height: auto; min-height: 0; max-height: none; }  /* 有图仍等比 */
}
@media (max-width: 600px) {
  .cl-hero { height: 42vh; min-height: 220px; max-height: 380px; }
  .cl-hero.has-img { height: auto; min-height: 0; max-height: none; }
}
.cl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
}
/* 标题：放到 hero 下方（设计稿风格：黑色字体，居中，与 hero 间距） */
.cl-hero-inner {
  display: none;   /* 设计稿标题在 hero 外，不再悬浮在 hero 上 */
}
.cl-title-wrap {
  text-align: center;
  padding: 2.25rem 1.25rem 1.75rem;
}
.cl-title {
  font-size: 1.625rem;
  font-weight: 700;
  margin: 0;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}
.cl-subtitle {
  display: none;   /* 设计稿无副标题 */
}

.cl-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.25rem 70px;
}
/* 4 列网格（设计稿：严格 4 列，等宽，间距 14px）
   ⚠️ 20260908: 列宽用 minmax(0,1fr) 而非裸 1fr——裸 1fr 会被 grid 的 min-width:auto 撑宽
   （某列内容如图片固有宽更大时该列变宽、另一列被压缩），导致卡片/图片大小不一 */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.375rem;
}
/* === 卡片：浅灰背景（后台可改 var(--cl-card-bg)）/ 大圆角 / 抠图居中贴底 === */
.cl-card {
  position: relative;
  display: block;
  min-width: 0; /* ⚠️ 20260908: grid item 默认 min-width:auto，防被内容(图片固有宽)撑宽列 */
  background: var(--cl-card-bg, #f4f5f7);
  border-radius: 14px;
  /* ⚠️ 20260903: overflow 改为 visible 让名称可换行撑高；
     圆角裁剪由子元素 .cl-card-img 单独控制 */
  overflow: visible;
  text-decoration: none;
  color: inherit;
  border: none;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 0.25rem;
}
.cl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}
/* 抠图居中：图缩小 + 加大内边距，避免贴边（按 Car Fridge 设计稿） */
.cl-card-img {
  display: block;
  width: 100%;
  /* ⚠️ 竖版长方形（高 > 宽，参考 C15 红框比例）：固定 150px 高 → 3/4 比例 */
  /* 20260814e: 用户反馈 3/4 太高，微调为 4/5（更接近正方形，矮一档） */
  /* 20260814f: 用户反馈还高，再微调 4/5 → 5/6（高≈1.2×宽，仍竖版，非 1:1） */
  /* 20260814g: 用户确认 7/8（高≈1.14×宽，仍竖版） */
  /* 20260814h: 用户试 9/10（高≈1.11×宽，极接近正方形但仍竖版） */
  height: auto;
  aspect-ratio: 9 / 10;
  object-fit: contain;
  object-position: center center;
  background: var(--cl-card-bg, #f4f5f7);
  padding: 1.125rem 1.125rem 0.5rem;
  /* ⚠️ 20260903: 图片单独 overflow:hidden 保持圆角裁剪（父容器已改为 visible） */
  overflow: hidden;
  border-radius: 10px;
}
/* 底部一行：型号居中（设计稿图1：型号在卡片底部居中），> 箭头绝对定位右下角 */
.cl-card-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 2.125rem 0.875rem;
  min-height: 32px;
}
.cl-card-model {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.3px;
  /* ⚠️ 20260903: 移除 nowrap+ellipsis 截断，改为优先单行、撑不下才换行 */
  white-space: normal;
  overflow-wrap: break-word;
  overflow: visible;
  text-align: center;
}
.cl-card-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;      /* 无白色背景（用户要求） */
  color: #94a3b8;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  transition: color 0.2s ease, background 0.2s ease;
}
.cl-card:hover .cl-card-arrow {
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
}

.cl-empty {
  padding: 3.75rem 1.25rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* === 分页器（设计稿图1：底部【上一页】【下一页】两按钮） === */
.cl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.125rem;
  margin-top: 2rem;
  padding: 0.75rem 0;
}
.cl-page-btn {
  padding: 0.5625rem 1.5rem;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cl-page-btn:hover:not(:disabled) {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.cl-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cl-page-info {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.3px;
  min-width: 60px;
  text-align: center;
}

@media (max-width: 900px) {
  .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
  .cl-title { font-size: 1.625rem; }
}
@media (max-width: 1024px) {
  .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
}
@media (max-width: 600px) {
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  /* ⚠️ 20260908: 移除 .cl-card-img { height:150px }——它覆盖了统一的 aspect-ratio:9/10，
     导致移动端图框比例与桌面不一致（图框大小不同→图片大小不一）。
     改为延用基础 .cl-card-img 的 height:auto + aspect-ratio:9/10，图框全端统一 */
}

/* ============================================
   产品详情页场景横幅（底部通栏大图；无图不显示，无标语不显示文字）
   ============================================ */
/* ⚠️ 铺满屏宽：100vw + 负 margin 突破版心 */
.pd-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 3rem;
  /* ⚠️ 消除与页脚之间的空隙：page-section 有 50px padding-bottom，负 margin 抵消，
     使底部大图与 footer 无缝连接 */
  margin-bottom: -50px;
  overflow: hidden;
  aspect-ratio: 16 / 5;
  background: #0d47a1;
}
.pd-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.pd-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,71,161,0.78) 0%, rgba(13,71,161,0.15) 100%);
}
.pd-banner-slogan {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 3rem;
  font-size: clamp(24px, 4.5vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}
@media (max-width: 600px) {
  .pd-banner { aspect-ratio: 16 / 9; margin-top: 2rem; }
  .pd-banner-slogan { padding: 0 1.5rem; font-size: 1.375rem; }
}

/* ============================================
   产品详情页 - 顶部通栏大图（hero；设计稿顶部铺满屏大图，多张轮播）
   ============================================ */
.pd-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 混合方案：aspect-ratio 由 JS 按首图原始比例设置（兜底 21/9），
     高度上限锁死 92vh；超高图被限高后由 .pd-hero-slide 的 cover 填满 */
  aspect-ratio: 21 / 9;
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
}
.pd-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.pd-hero-slide.active { opacity: 1; }

/* ============================================
   联系我们页（/contact-us.html）— 对齐设计稿
   ============================================ */
.cp-contact-wrap {
  max-width: var(--max-width);
  margin: 0 auto 5rem;
  padding: 2.5rem 1.25rem 0;
}
.cp-contact-grid {
  display: flex;                    /* ⚠️ 20260907：改 grid→flex 1:1，确保两栏等高可靠生效
                                       （之前 grid item align-items:stretch + flex:1 在嵌套场景下行为不稳定） */
  gap: 3.5rem;
  align-items: stretch;              /* flex 默认 stretch，让两栏等高 */
}
.cp-left,
.cp-right {
  flex: 1;                          /* ⚠️ 20260907：两栏各占 1 份（1:1） */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.cp-left-inner,
.cp-right-inner {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;          /* ⚠️ 20260907：让右栏内部 form 能 flex:1 撑满 */
  flex: 1;                          /* ⚠️ 20260907：占满 .cp-left / .cp-right 容器高度 */
}

/* 区块标题：Contact Us / Send Message — 设计稿蓝色 #035385 */
.cp-block-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #035388;              /* 设计稿蓝 */
  margin: 0 0 0.875rem;
}
/* 公司名称：Alpicool INC. — 加粗黑色 */
.cp-company-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #181818;
  margin-bottom: 0.875rem;
}
/* 联系方式列表 — 冒号对齐格式（Label : Value） */
.cp-info-list {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: #334155;
}
.cp-info-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  line-height: 1.6;
}
.cp-info-label { min-width: 4.5rem; color: #64748b; flex-shrink: 0; }
.cp-info-sep  { color: #94a3b8; margin: 0 0.25rem; }
.cp-info-value a { color: #181818; text-decoration: none; }
.cp-info-value a:hover { color: #035388; }

/* 地图 */
.cp-map {
  width: 100%;
  height: 20rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.cp-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== 表单（对齐设计稿：浅灰背景、无默认必填标记） ===== */
.cp-form-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 1.375rem;
  white-space: pre-line;
}
.cp-form {
  display: grid;
  position: relative;              /* ⚠️ 20260907：status 改为绝对定位悬浮在 form 下方 */
  grid-template-columns: 1fr 1fr;
  /* ⚠️ 20260907：显式声明 4 行高度（status 已移出 grid 流），
     第 3 行 (Message Content) 用 1fr 拉伸——撑满右栏与左栏地图之间的高度差 */
  grid-template-rows: auto auto 1fr auto;
  /* ⚠️ 20260907：用 grid-template-areas 强制每个 item 位置，
     避免自动放置 + display:contents 导致元素位置错乱 */
  grid-template-areas:
    "company  tel"
    "email    country"
    "content  content"
    "submit   submit";
  gap: 1rem;
  flex: 1;                         /* ⚠️ 20260907：占满 .cp-right-inner 剩余高度 */
  min-height: 0;                   /* ⚠️ 20260907：grid 子项 1fr 拉伸需配合 min-height:0 */
}
/* ⚠️ 20260907：让 .cp-form-row 在布局中"消失"，
   这样其 2 个 cp-form-field 子元素直接成为 .cp-form 的 grid 项，
   与第二行的 field 共用同一对垂直网格线 → 4 个输入框左右严格对齐。
   替代之前的"每行各管各的 1fr 1fr + 父容器 flex column"嵌套方案 */
.cp-form-row { display: contents; }
.cp-form-field {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* ⚠️ 20260907：content (Message Content) 跨两列——位置由 .cp-form 的 grid-template-areas 强制，勿再加 grid-column */
.cp-form-field.cp-full { width: 100%; grid-area: content; }
/* ⚠️ 20260907：grid-template-areas 强制每个 field 的位置（避免 display:contents + 自动放置错乱） */
.cp-form-field[data-key="company"]  { grid-area: company; }
.cp-form-field[data-key="tel"]      { grid-area: tel; }
.cp-form-field[data-key="email"]    { grid-area: email; }
.cp-form-field[data-key="country"]  { grid-area: country; }
/* 输入框：设计稿浅灰背景 + 圆角；高度按设计稿微调（增加 min-height 让单行/多行视觉一致） */
.cp-form-field input,
.cp-form-field textarea {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #f0f0f0;           /* 设计稿浅灰 */
  font-size: 0.875rem;
  line-height: 1.4;
  font-family: inherit;
  color: #181818;
  transition: border-color 0.2s ease, background 0.2s ease;
  outline: none;
  min-height: 2.75rem;           /* ≈ 44px，与设计稿单行 input 视觉高度一致 */
  box-sizing: border-box;
}
.cp-form-field input::placeholder,
.cp-form-field textarea::placeholder { color: #a0a0a0; }
.cp-form-field input:focus,
.cp-form-field textarea:focus {
  border-color: transparent;
  background: #f7f7f7;
}
.cp-form-field textarea { resize: vertical; min-height: 6.875rem; }
/* ⚠️ 20260907：Message Content 行 (grid 第 3 行 1fr) 的 textarea 撑满高度，
   让右栏整体与左栏地图等高，下方不再留白 */
.cp-form-field.cp-full:has(textarea) { display: flex; flex-direction: column; }
.cp-form-field.cp-full:has(textarea) textarea { flex: 1; height: 100%; min-height: 6.875rem; }
.cp-form-field input.cp-input-err,
.cp-form-field textarea.cp-input-err { border-color: #ef4444; background: #faf8f9; }
/* textarea 内部报错：显示在左上角 */
.cp-form-field textarea + .cp-form-req,
.cp-form-field textarea + .cp-form-err {
  top: 0.5rem;
  line-height: 1.2;
}

/* 必填/格式错误：设计稿要求在 input 内部显示红色文字（右对齐避免与输入内容重叠） */
.cp-form-req,
.cp-form-err {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;               /* 默认隐藏 */
  font-size: 0.75rem;
  color: #ef4444;
  line-height: 2.75rem;        /* ⚠️ 20260907：与 input 新 min-height 一致，垂直居中 */
  padding: 0 0.9375rem;        /* ⚠️ 20260907：与 input 新 padding-inline 一致 */
  text-align: right;           /* 右对齐，避免与左侧输入文字重叠 */
  pointer-events: none;        /* 不阻挡输入 */
  z-index: 2;
  background: transparent;
}
.cp-form-req.has-error,
.cp-form-err.has-error {       /* JS 添加此类时在 input 内部显示 */
  display: block;
  background: linear-gradient(to right, rgba(250,249,250,0) 0%, rgba(250,249,250,0.45) 30%, rgba(250,249,250,0.88) 60%, rgba(250,249,250,0.88) 100%);
  top: 2px; left: 2px; right: 2px; bottom: 2px;   /* 内缩不遮挡 input 外边框 */
  line-height: calc(2.75rem - 4px);  /* ⚠️ 20260907：同步调整 */
}

/* 提交按钮：设计稿圆角胶囊蓝；⚠️ 20260907：位置由 grid-template-areas 强制（最后一行），左对齐；
   去掉 margin-top（间距统一由 grid gap 控制），保证 Submit 底部贴齐 form 底部 */
.cp-submit {
  grid-area: submit;
  justify-self: start;
  background: #035388;
  color: #fff;
  border: 0;
  padding: 0.75rem 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cp-submit:hover { background: #024066; }
.cp-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ⚠️ 20260907：提交状态信息改为绝对定位悬浮在 form 下方，
   默认不占任何空间（去掉之前空 div 的 min-height + padding + 独占 grid 行导致的底部空白）；
   仅在提交成功/失败（JS 添加 cp-status-ok / cp-status-err）时显示 */
.cp-form-status {
  position: absolute;
  left: 0;
  bottom: -2.25rem;
  display: none;
  font-size: 0.875rem;
}
.cp-form-status.cp-status-ok,
.cp-form-status.cp-status-err { display: block; }
.cp-status-ok  { color: #10b981; }
.cp-status-err { color: #ef4444; }

/* ===== 居中毛玻璃 Toast（设计稿：画面正中、backdrop-filter + 黑色渐变） ===== */
.cp-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 90vw;
  text-align: center;
  justify-content: center;
  /* 毛玻璃 + 黑色渐变 */
  background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(30,30,45,0.8) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
  animation: cp-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cp-toast.cp-toast-out {
  animation: cp-toast-out 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes cp-toast-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cp-toast-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  /* ⚠️ 20260907：cp-contact-grid 改用 flex，移动端改 flex-direction 让两栏垂直堆叠 */
  .cp-contact-grid { flex-direction: column; gap: 2.25rem; }
  /* ⚠️ 20260907：grid-template-areas 是 2 列布局，移动端改为 1 列堆叠：
     每个 field 占 1 列；content/submit 仍占 1 行（status 为绝对定位不占行） */
  .cp-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "company"
      "tel"
      "email"
      "country"
      "content"
      "submit";
  }
  .cp-map { height: 15rem; }
}
@media (max-width: 600px) {
  .cp-block-title { font-size: 1.125rem; }
  .cp-map { height: 12.5rem; }
}

/* ============================================
   产品详情 - 功能卖点图（设计稿中部）
   ============================================ */
.pd-features {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.pd-features-grid {
  display: grid;
  /* ⚠️ 设计稿：4 张小图横排 */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.pd-feature-card {
  /* ⚠️ Grid 叠放（响应式安全）：img 决定卡片尺寸，文字层与之重叠，不绝对定位 */
  display: grid;
  grid-template-areas: 'card';
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eef0f4;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.05);
}
.pd-feature-card img {
  grid-area: card;
  width: 100%;
  /* ③ 功能卖点图是接近方形的图：用 1/1 正方形（之前 9/10 竖版裁切不对） */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f8fafc;
}
/* ⚠️ 文字 overlay（设计稿：白色主标题+白色英文小字，叠在图片上，
   不填文字时不渲染此 div，只显示图片）
   Grid 同 cell 叠放：文字层高度跟随图片，文字过多时 flex 换行安全收缩 */
.pd-feature-overlay {
  grid-area: card;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-align: center;
  /* 默认：底部渐变深色蒙层（让白字更清晰） */
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  min-width: 0;
  overflow: hidden;
  /* ⚠️ 20260814s: Grid 叠放时需 z-index 确保 overlay 在 img 之上 */
  z-index: 1;
}
.pd-feature-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.pd-feature-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: 2.5px;
  margin-top: 0.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
/* 响应式：窄屏（2 列）文字自动缩小，避免挤压/溢出 */
@media (max-width: 900px) {
  .pd-feature-title { font-size: 1.125rem; }
  .pd-feature-sub { font-size: 0.625rem; letter-spacing: 1.5px; margin-top: 0.375rem; }
}
@media (max-width: 600px) {
  .pd-feature-title { font-size: 0.9375rem; }
  .pd-feature-sub { font-size: 0.5625rem; margin-top: 0.25rem; }
}
@media (max-width: 900px) {
  .pd-features-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
}
@media (max-width: 600px) {
  .pd-features-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT US PAGE (20260815a — 设计稿逐模块还原)
   ============================================================ */

.au-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Module 1: Hero Banner ---------- */
.au-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.au-hero-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  /* 版心约束：与导航栏 .header-inner 对齐 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.au-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}
/* Hero 内容定位盒：与导航栏 .header-inner 对齐（max-width:1200px + padding: 0 1.25rem） */
.au-hero-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.au-hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: calc(var(--header-height, 70px) + 160px) 0 140px;
  color: #fff;
  max-width: 640px;
}
.au-hero-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.au-hero-subtitle {
  font-family: 'Noto Sans SC', 'Inter', 'PingFang SC', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
/* Hero 药丸标签（如 "One Car, One Fridge"） */
.au-hero-tagline {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 30px;
  padding: 0.5rem 1.375rem;
  margin-top: 1.25rem;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Hero 描述段落 */
.au-hero-desc {
  font-family: 'Noto Sans SC', 'Inter', 'PingFang SC', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  margin-top: 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.au-hero-desc p {
  margin: 0 0 0.5rem;
}
.au-hero-desc p:last-child {
  margin-bottom: 0;
}
/* Hero CTA 按钮（如 "Explore The Collection ↓"） */
.au-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 30px;
  padding: 0.75rem 1.75rem;
  margin-top: 1.75rem;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.au-hero-cta:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}
/* Hero 透明装饰块 */
.au-hero-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 12px;
}
.au-hero-deco-1 {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  top: 18%;
  left: 8%;
  transform: rotate(-8deg);
}
.au-hero-deco-2 {
  width: 120px;
  height: 200px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  bottom: 12%;
  left: 16%;
  transform: rotate(12deg);
}

/* ---------- Module 2: Why ALPICOOL（左文右图） ---------- */
.au-why {
  padding: 80px 0;
  background: #fff;
}
.au-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  align-items: center;
}
.au-why-text {
  padding-right: 1.25rem;
}
.au-why .au-section-label {
  text-align: left;
}
.au-section-label {
  display: block;  /* ⚠️ 20260827：改 block + text-align: center 强制居中（之前 inline-block + 父级居中可能受 text-align 影响） */
  text-align: center;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a73e8;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 0.875rem;
}
.au-why-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1.125rem;
  line-height: 1.3;
  text-align: left;
}
.au-why-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.au-why-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.au-why-points li {
  position: relative;
  padding-left: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #3a4a63;
  line-height: 1.85;
  display: flex;
  align-items: center;
  gap: 0;
}
.au-why-points li::before {
  content: "•";
  position: absolute;
  left: -0.75rem;
  top: 0;
  font-size: 1.125rem;
  line-height: 1.85;
  color: #007bff;
}
.au-why-points li.has-icon::before { display: none; }
.au-why-point-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 0.625rem;
  vertical-align: middle;
  position: relative;
  top: 0;
}
.au-why-img-wrap {
  overflow: hidden;
}
.au-why-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Module 3: Philosophy Banner（Flex 垂直布局：背景层 + 顶部文字 + 底部副标题+底栏） ---------- */
.au-philosophy {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;     /* 顶部内容 + 底部副标题+底栏，中间留空 */
  align-items: center;
  padding: 5vh 0 6vh;                  /* 顶部 5vh 留白（更紧凑），底部 6vh 留白 */
  box-sizing: border-box;
}
/* 背景层：绝对铺满 */
.au-philo-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.au-philo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.45);
}
/* 顶部：标签 + 大标题（向上靠拢） */
.au-philo-top {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  padding: 0 1.25rem;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
/* 底部：副标题 + 底栏（向下靠拢，内部 column） */
.au-philo-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.au-philo-label {
  display: block;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0.625rem;                  /* 标签与标题紧贴，小间距 */
}
.au-philo-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;                            /* 副标题已移到下方，标题不需要大间距 */
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  line-height: 1.1;
}
.au-philo-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 5px rgba(0,0,0,0.35);
  width: calc(100% - 80px);              /* 宽度与底栏一致 */
  max-width: 920px;
  text-align: center;
  padding: 0;
  line-height: 1.6;
  margin: 0;
}
/* Philosophy feature items — 毛玻璃底栏（Flex 子项排布，与文字同行但有间距） */
.au-philo-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  max-width: 920px;
  width: calc(100% - 80px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 1.375rem 2rem;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  color: #fff;
  flex-shrink: 0;
}
.au-philo-accordion {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.15);
  padding: 0.25rem 1.125rem;
}
.au-philo-accordion:first-child { padding-left: 0; }
.au-philo-accordion:last-child  { border-right: none; padding-right: 0; }
.au-philo-acc-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
}
.au-philo-acc-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.au-philo-acc-icon-dot {
  width: 26px; height: 26px; flex-shrink: 0;
}
.au-philo-acc-name {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  flex: 1;
}
.au-philo-acc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.au-philo-acc-arrow-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.au-philo-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  padding-top: 0;
}
.au-philo-accordion.open .au-philo-acc-body {
  max-height: 400px;
  padding-top: 0.625rem;
}

/* ---------- Module 4: Product Range（4卡片） ---------- */
.au-products {
  padding: 80px 0;
  background: #f8f9fa;
}
.au-section-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 0.75rem;
}
.au-section-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: #6b7280;
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.au-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
/* 主标题：蓝色小标题（参考设计稿 "Our Brand Story"） */
.au-prod-title {
  color: #2196F3 !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.25rem !important;
  text-align: center;
}
/* 副标题：大号粗体（参考设计稿 "Every Adventure Deserves Freshness"） */
.au-prod-subtitle {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #111 !important;
  line-height: 1.25 !important;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 1rem;
}
/* 描述文字（参考设计稿 "When people leave the city behind..."） */
.au-prod-desc-top {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 0.5rem;
}
/* 底部文字（参考设计稿 "ALPICOOL was created for those moments..."） */
.au-prod-footer {
  margin-top: 3.5rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 1.7;
  text-align: center;
  width: 100%;                          /* 宽度与上方卡片网格一致 */
  box-sizing: border-box;
}
.au-prod-card {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  cursor: default;
  aspect-ratio: 1 / 1.35;            /* 竖向长方形 */
}
.au-prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,71,161,.12);
}
.au-prod-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}
.au-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* 图片铺满 */
  display: block;
  transition: transform .4s;
}
.au-prod-card:hover .au-prod-img img {
  transform: scale(1.05);
}
/* 黑色渐变遮罩：底部深色便于文字阅读 */
.au-prod-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
/* 名称：浮在卡片底部 */
.au-prod-card .au-prod-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.125rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: none;                   /* 取消原来的白色背景 */
}
/* 描述：浮在名称上方 */
.au-prod-card .au-prod-desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.125rem;
  z-index: 2;
  padding: 0 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  text-align: center;
}

/* ---------- Module 5: Global Stats（深色数据条） ---------- */
.au-stats {
  position: relative;
  /* ⚠️ 20260827：高度 = 一屏减导航栏高度(70px)再减30px缓冲，确保整页不会超一屏 */
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a2332 0%, #2a3a52 100%);
  color: #fff;
  overflow: visible;  /* 允许悬浮卡片延伸到下一屏 */
}
.au-stats-overlay {
  /* ⚠️ 20260827：去掉蓝色遮罩（用户反馈背景图变蓝雾蒙蒙），改用 background-blend-mode 暗化或彻底隐藏 */
  position: absolute;
  inset: 0;
  background: transparent;  /* 完全透明，还原背景图真实色彩 */
  z-index: 0;
  pointer-events: none;
}
.au-stats-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  /* ⚠️ 20260827：恢复顶部间距 80px（之前被外层 padding: 0 覆盖导致贴顶），底部 1.25rem */
  padding: 80px 1.25rem 1.25rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.au-stats-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2.375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.au-stats-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0.625rem;
}

/* Stats icon features（手风琴可点击展开） */
.au-stats-icons {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 1rem;
  margin-bottom: auto;  /* ⚠️ 20260827：auto 让中间空白自动撑开，把后续元素推到底部 */
  flex-wrap: wrap;
}
.au-stats-accordion {
  position: relative;
  border-right: 0.0625rem solid rgba(255,255,255,0.25);
}
.au-stats-accordion:last-child { border-right: none; }
.au-stats-acc-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 2.25rem;  /* 加大 padding 让图标行更舒展 */
  /* ⚠️ 20260827：纯装饰模块，无交互 */
}
.au-stats-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.au-stats-icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.au-stats-icon-circle span {
  font-size: 1.125rem;
  color: #fff;
}
.au-stats-icon-name {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
/* ⚠️ 20260827：右侧装饰图（原箭头位置，改为用户上传图片，纯展示） */
.au-stats-acc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.au-stats-arrow-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.au-stats-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  text-align: left;
}
.au-stats-accordion.open .au-stats-acc-body {
  max-height: 200px;
  padding: 0 2rem 1rem;
}
.au-stats-acc-desc {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.3);
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

/* 数据行：6 个白色卡片（悬浮在 stats 底部、engineering 顶部之间，横跨两屏） */
.au-stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.875rem;            /* ⚠️ 卡片之间有间距，独立药丸 */
  max-width: 1200px;
  margin: 0 auto;
  /* 绝对定位固定在 stats 底部，悬浮跨越边界 */
  position: absolute;
  bottom: -3.125rem;
  left: 0;
  right: 0;
  z-index: 10;
}
.au-stat-item {
  background: #fff;
  border-radius: 12px;   /* ⚠️ 每张卡片独立圆角，药丸感 */
  padding: 1.25rem 0.75rem;    /* ⚠️ 更紧凑的垂直内边距 */
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: transform .25s, box-shadow .25s;
  min-height: 90px;      /* ⚠️ 更矮，接近设计稿比例 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ⚠️ 每张卡都有圆角，不再需要首尾特殊处理 */
.au-stat-item:first-child,
.au-stat-item:last-child { border-radius: 12px; }
.au-stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.au-stat-num {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2rem;       /* ⚠️ 数字再大一点 */
  font-weight: 800;
  color: #111;           /* ⚠️ 纯黑，更有力 */
  line-height: 1.15;
  margin-bottom: 0.25rem;
}
.au-stat-label {
  font-size: 0.6875rem;       /* ⚠️ 标签稍小 */
  color: #6b7280;
  line-height: 1.35;
}
.au-stats-subtitle {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.9);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 响应式：≤980px 时数据卡片变 3 列，≤600px 变 2 列 */
@media (max-width: 980px) {
  .au-stats-row { grid-template-columns: repeat(3, 1fr); }
  .au-stats-icons { gap: 0; }
}
@media (max-width: 600px) {
  .au-stats-row { grid-template-columns: repeat(2, 1fr); }
  .au-stats-accordion { border-right: none; width: 100%; }
  .au-stats-acc-head { justify-content: center; }
}

/* ---------- Module 6: Engineering Strength（6图标） ---------- */
.au-engineering {
  /* ⚠️ 20260828：参考设计稿加大留白：顶部 140px（容纳悬浮卡片的 50px 半高 + 90px 缓冲），
     底部 150px（图标行到下一模块 150px 留白，对齐设计稿视觉节奏） */
  padding: 8.75rem 0 9.375rem;
  /* 背景颜色由后台配置（engineering.bgColor），默认 #ffffff */
  background: var(--au-eng-bg, #fff);
  position: relative;
  z-index: 1;
}
/* ⚠️ 20260828：工程实力模块内部的标签/标题/副标题都强制居中（与设计稿一致） */
.au-engineering .au-section-label,
.au-engineering .au-section-title,
.au-engineering .au-section-subtitle {
  display: block;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* ⚠️ 20260828：标题与副标题之间留出更舒展的节奏 */
.au-engineering .au-section-title {
  margin-bottom: 1.125rem;
}
.au-engineering .au-section-subtitle {
  margin-bottom: 3.5rem;
  max-width: 720px;
}
/* ⚠️ 20260828：标签与标题之间加大间距，与设计稿一致 */
.au-engineering .au-section-label {
  margin-bottom: 1.125rem;
}
.au-eng-icons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;  /* ⚠️ 20260827：缩小间距，避免过多 separator 时挤压图标 */
  flex-wrap: wrap;
  margin-top: 2.75rem;
}
/* ⚠️ 20260827：图标之间的分隔符（>），用户可在后台上传替换 */
.au-eng-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2rem;  /* 与图标圆形垂直居中对齐 */
  opacity: 0.5;
}
.au-eng-separator img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.au-eng-icon-item {
  text-align: center;
  max-width: 140px;
}
/* ⚠️ 20260827：图标圆形背景色由后台配置（engineering.iconBg / iconBgSoft）
   奇数（1、3、5...）用实色，偶数（2、4、6...）用半透明色，与 OEM 一致 */
.au-eng-icon-circle {
  width: 90px;
  height: 90px;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  background-color: var(--au-eng-icon-bg, #3273a1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.au-eng-icon-item.eng-icon-even .au-eng-icon-circle {
  background-color: var(--au-eng-icon-bg-soft, rgba(50, 115, 161, 0.7));
}
.au-eng-icon-circle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* 图标本身为单色时显示为白色 */
  filter: brightness(0) invert(1);
}
.au-eng-icon-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}
.au-eng-icon-desc {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.5;
}

/* ---------- Module 7: Engineering Excellence（左右双背景图，铺满整模块，含标题区） ---------- */
.au-excellence {
  /* ⚠️ 20260828：左右两张背景图覆盖整模块（标题区+内容区），不是仅内容区
     - 用 ::before / ::after 两个伪元素分别承载左右两半的背景
     - 父容器仅作内容载体
     - 标题、副标题、内容都浮在背景上（白色文字） */
  padding: 0;
  color: #fff;
  position: relative;
  background: #1e293b;  /* 兜底色（无图时） */
  overflow: hidden;
}
/* ⚠️ 20260828：左半背景：覆盖整个 section 的左半边（含标题区） */
.au-excellence::before,
.au-excellence::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.au-excellence::before {
  left: 0;
  background-image: var(--au-exc-bg-left, linear-gradient(160deg, #1e293b 0%, #334155 100%));
}
/* ⚠️ 20260828：右半背景：覆盖整个 section 的右半边（含标题区） */
.au-excellence::after {
  right: 0;
  background-image: var(--au-exc-bg-right, linear-gradient(160deg, #1e293b 0%, #334155 100%));
}
/* ⚠️ 20260828：模块顶部标题与副标题容器（叠加在双背景上，文字白色） */
.au-exc-head {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 70px 1.25rem 3.125rem;
  max-width: 1200px;
  margin: 0 auto;
}
.au-exc-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;  /* 白色：在深色背景上更清晰 */
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.au-exc-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.78);  /* 浅白色 */
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
/* ⚠️ 20260828：grid 浮在背景之上（z-index:1），内容在居中容器内，~50/50 分栏 */
.au-exc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* ⚠️ 设计稿——左右各约50%，等分；gap 归零让左栏右缘直贴中线 */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;     /* ⚠️ 左右顶部对齐，不拉伸 */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem 3.75rem;
  min-height: 520px;
  background: transparent;  /* 透明，让 section 的伪元素背景透出来 */
}
/* ⚠️ 20260828：左栏——透明容器，背景图直接透出（无外框） */
.au-exc-left,
.au-exc-right {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: transparent;
}
.au-exc-right {
  background: transparent;
  /* ⚠️ 右侧与中线保持明显间距 */
  margin-left: 3.25rem;
}
/* ⚠️ 20260828：左栏内容容器 */
.au-exc-left-inner {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* ⚠️ 子项（品牌名/副标题/卡片列表）占满整列宽度 */
}
/* ⚠️ 20260828：左栏卡片列表容器（占满） */
.au-exc-features {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* ⚠️ 20260828：右栏内容容器 */
.au-exc-right-inner {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* ⚠️ 20260828：中间细分隔线（用伪元素实现，永远贴着左右两栏交界处） */
.au-exc-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 2;
}
.au-exc-brand {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 1.75rem;          /* ⚠️ 设计稿品牌名更大 */
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.125rem;       /* ⚠️ 品牌名与副标题紧凑 */
  letter-spacing: 2px;
}
/* ⚠️ 20260827：左侧副标题（如 "continuously develops:"） */
.au-exc-brand-sub {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.au-exc-feature-item {
  /* ⚠️ 20260828：每个选项无边框，仅靠上下黑色渐变区分 */
  display: flex;
  align-items: center;
  width: 100%;
  gap: 3.75rem;
  margin-bottom: 0;
  padding: 1.75rem 3.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  /* 上淡→下暗的极淡黑色渐变，无 border */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
  backdrop-filter: drop-shadow(2px 4px 6px black);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.au-exc-feature-item:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.16));
}
/* ⚠️ active 状态——蓝色上→下渐变 + 光影，无 border */
.au-exc-feature-item.is-active {
  background: linear-gradient(to bottom, rgba(33, 150, 243, 0.82), rgba(10, 60, 120, 0.55));
  color: #fff;
  box-shadow: 0 0 16px rgba(33, 150, 243, 0.35), 0 2px 8px rgba(0,0,0,0.15);
}
.au-exc-feature-item.is-active .au-exc-f-icon img {
  filter: brightness(0) invert(1);
}
.au-exc-f-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.au-exc-f-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* 白色图标（与设计稿一致） */
  opacity: 0.9;
}
/* 没图时显示 ✦ 占位 */
.au-exc-f-icon-fallback {
  font-size: 1.375rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.au-exc-f-text {
  flex: 1;
  min-width: 0;
}
.au-exc-f-text strong {
  font-size: 1.0625rem;
  font-weight: 600;
  display: block;
  letter-spacing: 0.3px;
}
.au-exc-f-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.25rem;
  line-height: 1.55;
}
.au-exc-feature-item.is-active .au-exc-f-desc {
  color: rgba(255,255,255,0.92);
}
.au-exc-rtitle {
  font-size: 1.375rem;          /* ⚠️ 设计稿右栏标题更大 */
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.125rem;       /* ⚠️ 标题与副标题紧凑 */
  /* ⚠️ 补偿与左标题(28px)的字号差，让副标题与左侧对齐 */
  padding-top: 0.4375rem;
}
/* ⚠️ 20260827：右侧副标题（如 "testing center supports:"） */
.au-exc-rtitle-sub {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.au-exc-grid-items {
  /* ⚠️ 固定2列×N行，卡片较宽，与左侧4行大致齐平 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  align-items: start;       /* ⚠️ 卡片不互相拉伸，各自保持自然高度 */
}
.au-exc-ri-item {
  /* ⚠️ 宽而矮的卡片：图标上、文字下，亮白边框+淡黑渐变 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.9);
  padding: 1rem 0.5rem;
  min-height: 110px;        /* ⚠️ 足够容纳图标+2行文字，所有卡片统一基准高度 */
  /* 淡黑渐变 + 亮白边框 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.14));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}
.au-exc-ri-item:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.20));
  border-color: rgba(255, 255, 255, 0.48);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.au-exc-ri-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: 0.95;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.au-exc-ri-item span {
  line-height: 1.35;
  font-weight: 500;
}

/* ---------- Module 8: Certifications（证书+文件图） ---------- */
/* ---------- Module 8: Certifications（认证与标准 — 左文右背景图） ---------- */
.au-certs {
  padding: 100px 0;
  position: relative;
  /* 背景大图铺满整个模块（全宽） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 外层内容容器：全宽，不限制（内容对齐由内部 .au-container 控制 = 与导航 logo 对齐） */
.au-certs-wrap {
  position: relative;
  width: 100%;
  min-height: 70vh;
}
/* 内容层：与导航同宽居中，左缘对齐 nav logo */
.au-certs-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  min-height: 70vh;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
/* Certs 专用内容容器：不继承 .au-container 的 margin:auto 居中 */
.au-certs-content {
  max-width: 100%;
  padding: 0;
}
.au-certs-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.au-certs-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 2.625rem;
  line-height: 1.35;
}
/* 描述段落 */
.au-certs-desc {
  font-size: 0.875rem;
  color: #333;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  max-width: 520px;
}
/* 证书分组容器 — gap 只作用于「组与组之间」；组内间距由 margin 控制 */
.au-certs-groups {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
/* 单个证书组包裹层（隔离 flex gap，避免组描述与内容被 gap 撑开） */
.au-certs-group {
  display: block;
}
/* 组描述文字（如 "ALPICOOL follows…" / "Products comply with:"） */
.au-certs-group-desc {
  font-size: 0.8125rem;
  color: #444;
  margin-bottom: 1rem;
  line-height: 1.35;
}
/* ========== 类型A：文字证书项（ISO 9001 等）—— label在上 value在下（纵向网格） ========== */
.au-certs-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: flex-start;
}
/* ISO 9001 整体：label 在上、数字在下，纵向排列，左对齐 */
.au-cert-pair {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}
/* ISO — 蓝色标签（上排） */
.au-cert-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2563eb;
}
/* 9001 — 黑色粗体大数字（下排） */
.au-cert-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: #111;
  line-height: 1.15;
}
/* 文字证书之间的竖线分隔符 | */
.au-cert-sep {
  font-size: 1.25rem;
  color: #ccc;
  font-weight: 200;
  margin: 0 0.1875rem;
  align-self: center;
  line-height: 1.6;
}
/* 兼容旧格式纯字符串 */
.au-cert-item {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1a1a1a;
  display: inline-block;
  white-space: nowrap;
}

/* ========== 类型B：Logo 图片（CE / CB / GS 等） ========== */
.au-certs-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: 0;
}
.au-cert-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* 分割线（证书组之间） */
.au-certs-divider {
  border: none;
  border-top: 0.0625rem solid rgba(0,0,0,0.28);
  margin: 1.375rem 0 1.125rem;
  width: 100%;
  max-width: 520px;
}

/* ---------- Module 9: Beyond Cooling（底部特色） ---------- */
/* ========== Module 9: Beyond Cooling（底部特色 — 全屏背景 + 两列分组图标） ========== */
.au-beyond {
  position: relative;
  padding: 80px 0;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  overflow: hidden;
}
.au-beyond-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* 标题区 */
.au-beyond-title {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.au-beyond-subtitle {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 110px;
  line-height: 1.4;
}
/* 两列分组容器 */
.au-beyond-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem 2.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
/* 单列（一个分组） */
.au-beyond-col {
  display: flex;
  flex-direction: column;
}
/* 分组标题（如 "The future of mobility will be:"） */
.au-beyond-col-title {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.5;
}
/* 分组内项目列表 */
.au-beyond-items {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
/* 单个项目：[蓝色圆圈图标] + 名称 水平排列 */
.au-beyond-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* 图标外层：蓝色圆形边框 */
.au-beyond-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1.5px solid #2563eb;
  background: #fff;
  flex-shrink: 0;
}
.au-beyond-icon-circle img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
/* 项目名称文字 */
.au-beyond-name {
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.4;
}

/* ========== 响应式 ========== */
@media (max-width: 900px) {
  .au-hero { height: auto; min-height: 500px; }
  .au-hero-inner { height: auto; min-height: 500px; }
  .au-hero-content { max-width: 100%; padding: calc(var(--header-height, 70px) + 90px) 0 80px; }
  .au-hero-title { font-size: 2.125rem; }
  .au-hero-subtitle { font-size: 1rem; }
  .au-hero-tagline { font-size: 0.8125rem; padding: 0.4375rem 1.125rem; }
  .au-hero-desc { font-size: 0.875rem; }
  .au-hero-cta { font-size: 0.875rem; padding: 0.6875rem 1.5rem; }
  .au-hero-deco-1 { width: 120px; height: 120px; left: 4%; }
  .au-hero-deco-2 { width: 80px; height: 140px; left: 10%; }

  .au-why-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .au-why-title { font-size: 1.75rem; }

  .au-philo-title { font-size: 1.875rem; }
  .au-philo-inner { min-height: 320px; }
  .au-philo-bar {
    width: calc(100% - 32px);
    padding: 0.875rem 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  .au-philo-accordion { border-right: none; border-bottom: 0.0625rem solid rgba(255,255,255,0.12); padding: 0.5rem 0; }
  .au-philo-accordion:last-child { border-bottom: none; }
  .au-philo-acc-name { font-size: 0.9375rem; }

  .au-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .au-section-title { font-size: 1.75rem; }

  .au-stats-row { gap: 1.5rem; }
  .au-stat-num { font-size: 1.375rem; }
  .au-stats-icons { gap: 1.25rem; }

  .au-eng-icons { gap: 1.25rem; }
  .au-eng-icon-circle { width: 72px; height: 72px; }
  .au-eng-icon-circle img { width: 32px; height: 32px; }

  .au-exc-grid { grid-template-columns: 1fr; gap: 0; }
  /* 移动端单列时，左右两半背景改为上下叠加 */
  .au-excellence::before {
    width: 100%; height: 50%; top: 0; bottom: auto;
  }
  .au-excellence::after {
    width: 100%; height: 50%; top: auto; bottom: 0;
  }
  .au-exc-left,
  .au-exc-right { padding: 2.5rem 0; }
  .au-exc-right { margin-left: 0; }  /* 单列时取消远离中线的偏移 */
  .au-exc-left-inner,
  .au-exc-right-inner { max-width: 100%; margin: 0 1.25rem; align-items: stretch; text-align: left; }
  .au-exc-grid::after { display: none; }  /* 单列时隐藏中间分隔线 */
  .au-exc-grid-items { grid-template-columns: 1fr; gap: 0.625rem; }

  /* Certs：移动端背景图缩小，内容堆叠 */
  .au-certs { padding: 2.5rem 0; }
  .au-certs-wrap { min-height: auto; border-radius: 10px; }
  .au-certs-inner { min-height: auto; display: block; padding: 1.875rem 1.5rem; }
  .au-certs-title { font-size: 1.5rem; }
  .au-certs-subtitle { font-size: 1.125rem; }
  .au-cert-value { font-size: 1.125rem; }
  .au-cert-logo { height: 32px; }

  .au-beyond-cols { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* About Us 768px 专用修复：Hero 右下角异常深色块 + 工程卓越保持2列 + Beyond Cooling 左对齐 */
@media (max-width: 768px) {
  .au-hero {
    /* 768px 下背景图 cover 会放大原图暗角区域；改用上方对齐避免底部暗部外露 */
    background-position: center top;
    /* 确保高度足够容纳内容，避免 overflow:hidden 裁剪产生硬边 */
    min-height: 560px;
  }
  .au-hero-inner {
    min-height: 560px;
  }
  /* Why 模块在移动端减少顶部内边距，避免与 Hero 之间过大空白 */
  .au-why {
    padding-top: 3.125rem;
  }
  /* 工程卓越测试卡片：覆盖 900px 断点的 1fr 单列，保持一行两个 */
  .au-exc-grid-items {
    grid-template-columns: 1fr 1fr;
  }
  /* Beyond Cooling：内容与 Logo 左对齐，留 1.25rem 边距 */
  .au-beyond-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* Hero 文字内容块：覆盖 900px 断点的 max-width:100%，收窄到 ~80% 让背景图露出来 */
  .au-hero-content {
    max-width: 80%;
  }
  /* Engineering Excellence：左栏子项溢出背景（content-box 下 width:100% + padding 撑破容器） */
  .au-exc-left {
    overflow: hidden;
  }
  .au-exc-feature-item {
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .au-hero { height: auto; min-height: 400px; }
  .au-hero-inner { height: auto; min-height: 400px; }
  .au-hero-content { max-width: 100%; padding: calc(var(--header-height, 70px) + 70px) 0 60px; }
  .au-hero-title { font-size: 1.625rem; }
  .au-hero-subtitle { font-size: 0.875rem; }
  .au-hero-tagline { font-size: 0.75rem; padding: 0.375rem 1rem; margin-top: 0.875rem; }
  .au-hero-desc { font-size: 0.8125rem; margin-top: 1rem; }
  .au-hero-cta { font-size: 0.8125rem; padding: 0.625rem 1.375rem; margin-top: 1.25rem; }
  .au-hero-deco { display: none; }

  .au-why { padding: 3.125rem 0; }
  .au-why-title { font-size: 1.5rem; }

  .au-products { padding: 3.125rem 0; }
  .au-prod-grid { grid-template-columns: 1fr; gap: 1rem; }

  .au-stats { padding: 3.125rem 0 2.25rem; overflow: visible; height: auto; }
  .au-stats-row { gap: 1rem; position: relative; margin-top: 1.5rem; bottom: auto; left: auto; right: auto; z-index: auto; }
  .au-stat-item { min-width: 70px; }
  .au-stat-num { font-size: 1.25rem; }
  .au-stats-icons { gap: 0.75rem; flex-wrap: wrap; }

  .au-engineering { padding: 4.375rem 0 5rem; }
  .au-eng-icons { gap: 0.75rem; }
  .au-eng-icon-circle { width: 56px; height: 56px; }

  .au-excellence { padding: 3.125rem 0; }
  .au-exc-grid-items { grid-template-columns: 1fr 1fr; }

  .au-certs { padding: 3.125rem 0; }

  .au-beyond { padding: 3.125rem 0; }
  .au-beyond-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .au-beyond-subtitle { margin-bottom: 2rem; }

  /* Philosophy 移动端：高度缩小，文字与底栏间距减少 */
  .au-philosophy { height: 75vh; min-height: 420px; padding: 8vh 0 6vh; }
  .au-philo-title { font-size: 2rem; margin-bottom: 2.5rem; }
  .au-philo-subtitle { font-size: 0.9375rem; margin-bottom: 2.5rem; }
  .au-philo-bar {
    width: calc(100% - 32px);
    padding: 0.875rem 0.75rem;
  }
}

/* ============================================================
   ODM PAGE (odm.html) — 设计稿逐模块还原
   ============================================================ */

.odm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- ODM Hero Banner ---------- */
.odm-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 70px);
  min-height: 600px;
  overflow: hidden;
  margin-top: 70px; /* 避开 fixed 导航 */
}
.odm-hero-inner {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa; /* 兜底色，用户上传背景图后会自动覆盖 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 已按用户要求：不加任何遮罩或渐变滤镜，背景图由用户自己加好后上传 */
.odm-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  padding: 80px 1.25rem 80px; /* 上下大边距，避免贴边 */
  display: flex;
  align-items: center;
  gap: 3rem;
  color: #1a2332;
}
/* 文字容器：限制在左侧约 55% 宽度 */
.odm-hero-text { flex: 0 0 55%; max-width: 55%; }
/* 品牌名 + 副名上下排列：ALPICOOL 一行，ODM Solutions 在它下面一行 */
.odm-hero-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  margin-bottom: 1.125rem;
}
.odm-hero-label {
  font-size: 2.625rem;
  font-weight: 800;
  color: #015a92;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.odm-hero-sublabel {
  font-size: 1.75rem;
  font-weight: 500;
  color: #015a92;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.odm-hero-title {
  font-size: 3.375rem;
  font-weight: 900;
  color: #09223e;
  line-height: 1.1;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.odm-hero-subtitle {
  font-size: 1rem;
  font-weight: 800;
  color: #09223e;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.odm-hero-fromconcept {
  font-size: 0.875rem;
  font-weight: 700;
  color: #015a92;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.odm-hero-desc {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 580px;
}
.odm-hero-tagline {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 1.625rem;
  max-width: 580px;
}
.odm-hero-tagline p { margin: 0; }
.odm-hero-tagline p + p { margin-top: 0.125rem; }
/* 强调标语内分段颜色：上半蓝色 / 下半深色 */
.odm-hero-tagline .tagline-blue { color: #015a92; }
.odm-hero-tagline .tagline-dark { color: #09223e; }
.odm-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  background: #1a73e8;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background .2s, transform .2s;
  box-shadow: 0 6px 20px rgba(26,115,232,0.4);
}
.odm-hero-btn:hover { background: #1557b0; transform: translateX(2px); }
.odm-hero-btn-arrow {
  font-size: 1.125rem;
  transition: transform .2s;
}
.odm-hero-btn:hover .odm-hero-btn-arrow {
  transform: translateX(3px);
}

/* ---------- ODM Why Choose（左文右图） ---------- */
/* 关键设计：
   1) 整块等高：grid 用 align-items:stretch，两栏同步撑到右栏图片高度
   2) 文字垂直居中：左栏 display:flex + flex-direction:column + justify-content:center
   3) 文字与 logo 左对齐：grid 加 padding-left = max(0, (100vw-1200px)/2)，
      模拟导航栏 header-inner(max-width:1200px; margin:0 auto) 的居中行为，
      再叠加左栏 padding-left: 1.25rem（与 .header-inner 一致），
      最终文字内容起点 = logo 起点
   4) 右栏自然延伸到 grid 右边缘（即视口右边缘）：flex:1 占满剩余空间
   5) 图片完整显示：object-fit: contain + object-position: left center
   6) 不超出视口：.odm-why overflow:hidden + 右栏 overflow:hidden
*/
.odm-why {
  padding: 80px 0;
  background: #fff;
  position: relative;
  overflow: hidden; /* 防止任何子元素溢出视口 */
}
.odm-why-grid {
  display: flex;
  align-items: stretch; /* 关键：两栏严格等高 */
  /* ⚠️ 20260829 修复左对齐：
   * #odm-why 是全宽 section（无 .odm-container 包裹），grid 必须自己充当 container
   * max-width + margin:auto + padding 与 .header-inner(max-width:var(--max-width)=1200px) 完全一致
   * → 文字内容起点自然与 Logo 左对齐 */
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.5rem; /* ⚠️ 20260829：右侧留边距防滚动条吃掉图片（约 17px + 余量） */
  position: relative;
  gap: 0;
  min-height: 520px; /* 兜底高度，让小屏下文字也有垂直居中空间 */
}
/* 左栏：固定 476px（680px 收窄 30%），左边缘与顶部导航 Logo 左对齐 */
.odm-why-text {
  flex: 0 0 476px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 476px;
  width: 476px;
  max-width: 476px;
  /* ⚠️ 20260829 移除错误的 padding-left: calc((100vw-1200px)/2+20)
   * 根因：100vw 含滚动条宽度(~17px)，而 header-inner 的 margin:auto 基于 body 内容宽度(不含滚动条)
   * → 导致文字比 Logo 偏右约 8-10px。现改用 grid 自身做 container，无需手动偏移 */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 关键：文字在左栏内垂直居中 */
  align-self: flex-start; /* 关键：文字在 grid 顶部对齐 */
  align-items: flex-start;
  margin: 0;
  box-sizing: border-box;
  min-height: 520px; /* 兜底高度，确保小屏下也能垂直居中 */
  text-align: left;
}
/* 右栏：突破容器延伸到视口右边缘，与左栏严格等高 */
.odm-why-combined {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  background: transparent;
  overflow: hidden; /* 裁切超出视口的部分 */
  align-self: stretch; /* 关键：拉伸到与左栏同高 */
  min-height: 520px; /* 兜底高度 */
  aspect-ratio: 21 / 10; /* 与合成图 2.1:1 一致，让图片完整填满容器 */
  /* ⚠️ 20260829→20260903：负 margin 让图片区突破 1200px 容器，延伸到视口右边缘
   * calc(50% - 50vw) 是标准"破局"公式：50% 是父元素(grid)中点，50vw 是视口中点
   * → 差值正好把右边缘推到视口右边界。
   * ⚠️ 20260903 修复：50vw 含浏览器滚动条宽度(~17px)，图片右角被吃掉；
   * 加 20px 偏移让右侧留出滚动条空间，外层 .odm-why overflow:hidden 防止横向滚动条 */
  margin-right: calc(50% - 50vw + 20px);
}
.odm-why-combined img {
  display: block;
  width: 100%;
  height: 100%; /* 撑满右栏高度（与左栏同高） */
  object-fit: contain; /* 完整显示不裁切，等比例缩放 */
  object-position: left center; /* 左对齐 */
}
.odm-why-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #1a2332;
  margin-bottom: 0.75rem;
  line-height: 1.18;
  text-transform: uppercase;
}
.odm-why-subtitle {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1a73e8;
  margin-bottom: 1.125rem;
  line-height: 1.5;
}
.odm-why-desc {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.odm-why-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.odm-why-points li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  color: #444;
  line-height: 1.65;
}
.odm-why-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a73e8;
}
/* 右侧场景卡片网格（参考设计稿，4 张图斜向并排） */
.odm-why-scenes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
  position: relative;
}

/* ---------- ODM Features（4深色编号卡片，参考设计稿深蓝色） ---------- */
.odm-features {
  padding: 80px 0;
  background: linear-gradient(135deg, #0a2540 0%, #1557a6 100%);
  color: #fff;
  position: relative;
}
.odm-features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M0 0h1v40H0zM0 0h40v1H0z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}
.odm-feat-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* ⚠️ 20260829：设计稿此模块无大标题，.odm-feat-title 已随前端渲染一并移除（避免死代码误用） */
.odm-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
}
.odm-feat-card {
  /* ⚠️ 20260829：去掉半透明背景，由 cardBgColor 内联 style 或 CSS 默认控制 */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 1.625rem 1.375rem 1.375rem;
  transition: transform .25s, background .25s;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  /* ⚠️ 20260829：min-width:0 防止 grid 子项被内容（大字号/长文字/图片）撑开导致四列不等宽 */
  min-width: 0;
  /* ⚠️ 20260829：防止长标题/内容溢出卡片边界 */
  overflow: hidden;
}
.odm-feat-card:hover {
  transform: translateY(-4px);
  /* ⚠️ 20260829：去掉 hover 半透明背景（内联 style 的 cardBgColor 不受影响） */
}
/* 卡片头部：左大编号 + 右上标题（设计稿风格） */
.odm-feat-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
  padding-bottom: 0.875rem;
  /* ⚠️ 20260829：去掉分割线（border-bottom 已移除） */
}
.odm-feat-num {
  font-size: 3.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
  margin-bottom: 0;
}
.odm-feat-card-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  padding-top: 0.25rem;
  flex: 1;
  /* ⚠️ 20260829：长标题自动换行，不溢出卡片 */
  word-break: break-word;
  overflow-wrap: break-word;
}
.odm-feat-body { flex: 1; display: flex; flex-direction: column; }
/* ⚠️ 20260829：副标题（ALPICOOL OPERATES: 等）紧贴头部，不产生多余间距 */
.odm-feat-card-sub {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.odm-feat-items {
  list-style: disc;
  padding: 0;
  /* ⚠️ 20260829：缩短圆点与文字距离（原 18px → 6px） */
  padding-left: 0.375rem;
  margin: 0;
}
.odm-feat-items li {
  font-size: 0.7813rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  /* ⚠️ 20260829：去掉多余左内边距，让圆点更贴近文字 */
  padding-left: 0;
  position: relative;
  margin-bottom: 0.375rem;
}
/* ⚠️ 20260829：圆点颜色跟随文字（currentColor），不再硬编码 #60a5fa */
.odm-feat-items li::marker {
  color: currentColor;
  font-size: 0.625rem;
}
.odm-feat-extra {
  margin-top: 0.75rem;
  padding: 0.625rem 0;
  /* ⚠️ 20260829：去掉半透明背景 + 蓝色左边框 */
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.5;
}
/* Type 3: 合规标签（Products comply with:） */
.odm-feat-compliance-label {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.odm-feat-img {
  margin-top: 0.75rem;
  border-radius: 6px;
  overflow: hidden;
}
.odm-feat-img img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

/* Card 1: 4 数据项（图标 + 数值 + 描述） */
.odm-feat-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.odm-feat-stat {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* ⚠️ 20260829：去掉 padding（原 8px 10px），让图标与副标题左对齐 */
  padding: 0;
  border-radius: 6px;
}
/* ⚠️ 20260829：去掉 hover 半透明背景 */
.odm-feat-stat-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* ⚠️ 20260829：去掉半透明背景色 */
}
.odm-feat-stat-icon img {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}
.odm-feat-stat-icon-empty {
  color: #60a5fa;
  font-size: 1.125rem;
  font-weight: bold;
}
.odm-feat-stat-text { flex: 1; min-width: 0; }
.odm-feat-stat-value {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  font-family: 'Montserrat', sans-serif;
  /* ⚠️ 20260829：长数值（如 310,000㎡）自动换行 */
  word-break: break-word;
}
.odm-feat-stat-label {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.3;
  margin-top: 0.125rem;
}

/* Card 3: 认证图片组 */
.odm-feat-certs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  /* ⚠️ 20260829：去掉半透明背景 */
}
.odm-feat-cert {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.odm-feat-cert img {
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Card 4: 分组定制（图标 + 名称 + 子项） */
.odm-feat-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.odm-feat-group {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  /* ⚠️ 20260829：去掉 padding（原 10px 12px），让图标与副标题左对齐 */
  padding: 0;
  border-radius: 6px;
}
/* ⚠️ 20260829：去掉 hover 半透明背景 */
.odm-feat-group-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* ⚠️ 20260829：去掉半透明背景色 */
  margin-top: 0.125rem;
}
.odm-feat-group-icon img {
  max-width: 26px;
  max-height: 26px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.odm-feat-group-body { flex: 1; }
.odm-feat-group-name {
  font-size: 0.7813rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.odm-feat-group-items {
  list-style: disc;
  padding: 0;
  /* ⚠️ 20260829：缩短圆点与文字距离（原 18px → 6px） */
  padding-left: 0.375rem;
  margin: 0;
  display: grid;
  /* ⚠️ 20260829：grid-template-columns 由前端 data 属性控制（1列或2列），默认2列 */
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.75rem;
}
.odm-feat-group-items li {
  font-size: 0.7188rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  /* ⚠️ 20260829：去掉多余左内边距 */
  padding-left: 0;
}
/* ⚠️ 20260829：圆点颜色跟随文字 */
.odm-feat-group-items li::marker {
  color: currentColor;
  font-size: 0.5625rem;
}
/* ⚠️ 20260829：单列模式挂在【分组】上（前端按每组的 layout 给 .odm-feat-group 加 --1col） */
.odm-feat-group--1col .odm-feat-group-items {
  grid-template-columns: 1fr;
}

/* ---------- ODM Development Process（5步骤） ---------- */
.odm-process {
  padding: 80px 0;
  background: #f8f9fc;
}
.odm-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.odm-proc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}
/* 底排只有 2 张时，各占 1/2 */
.odm-proc-grid.odm-proc-bottom-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-bottom: 0;
}
.odm-proc-step {
  background: #fff;
  border-radius: 12px;
  /* ⚠️ 20260829：增加底部内边距，确保背景图内容有展示空间 */
  padding: 1.5rem 1.375rem 1.75rem;
  border: 1px solid #eef2f7;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* ⚠️ 20260829：统一卡片最小高度，确保五张卡高度相近 */
  min-height: 280px;
}
/* ⚠️ 20260829：卡片内容层在背景图上方（z-index > .odm-proc-bg 的 0） */
.odm-proc-step > * {
  position: relative;
  z-index: 1;
}
.odm-proc-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* ⚠️ 20260829：编号 + 标题同行（左编号 / 右标题），参照 Features 卡片 .odm-feat-head */
.odm-proc-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.odm-proc-num {
  font-size: 2rem;
  font-weight: 900;
  color: #1a73e8;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -1px;
  line-height: 1;
  flex-shrink: 0;
}
.odm-proc-step-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.3;
  flex: 1;
  /* ⚠️ 20260829：长标题自动换行不溢出 */
  word-break: break-word;
  padding-top: 0.125rem;
}
.odm-proc-step-sub {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.375rem;
  line-height: 1.4;
}
.odm-proc-items {
  /* ⚠️ 20260829：改用 disc 圆点（原 list-style:none + ▸ 三角形） */
  list-style: disc;
  padding: 0;
  padding-left: 1.125rem;
  margin: 0 0 0.25rem;
  /* ⚠️ 20260830：去掉 flex:1（原 flex:1 会占满剩余空间导致与描述间距过大） */
  /* ⚠️ 20260830：改用 column-count:2（替代 grid），每个 li 高度独立不受同行其他项影响 */
  columns: 2;
  column-gap: 14px;
  /* ⚠️ 20260830：默认文字色放在 ul 上，applyTextStyle(odmProcPoint) 设色可直接级联到 li 与 ::marker */
  color: #555;
}
.odm-proc-items li {
  /* ⚠️ 20260830：inherit 让「要点文字」样式控件（odmProcPoint）的字号+颜色都生效 */
  font-size: inherit;
  color: inherit;
  line-height: 1.3;
  padding-left: 0;
  position: relative;
  /* ⚠️ 20260830：多列布局下防止 li 被截断到两列 */
  break-inside: avoid;
  margin-bottom: 0.1875rem;
}
/* ⚠️ 20260829：圆点颜色跟随文字，缩小圆点尺寸 */
.odm-proc-items li::marker {
  color: currentColor;
  font-size: 0.5rem;
}
/* ⚠️ 20260829：背景图铺满整张卡片（绝对定位覆盖，内容叠在上面） */
.odm-proc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
/* ⚠️ 20260829：描述文字在列表下方自然跟随，不填不显示 */
.odm-proc-step-footer {
  /* ⚠️ 20260830：描述紧跟列表，间距最小化 */
  margin-top: 0.125rem;
  font-size: 0.7188rem;
  color: #777;
  line-height: 1.5;
}
/* ⚠️ 20260930：清理历史编辑残留的孤儿声明（原 3341-3343 行的 color 与 line-height 两行
   及其后一个多余收括号——在规则外属非法 CSS，浏览器一直忽略；删除后花括号恢复平衡，渲染零变化） */

/* ---------- ODM Successful Cases（深色背景） ---------- */
.odm-cases {
  margin: 90px 0;
  background: linear-gradient(160deg, #1a2332 0%, #2d3748 100%);
  color: #fff;
}
.odm-cases-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 1.25rem;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 1.5rem;
  align-items: center;
}
.odm-cases-left {
  max-width: 320px;
  padding-right: 1rem;
}
.odm-cases-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}
.odm-cases-subtitle {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
}
/* 副标题与底部描述之间的白色分割线（真实 DOM 元素 .odm-divider，写死样式，不依赖伪元素） */
.odm-divider {
  display: block;
  width: 60px;
  height: 1px;
  background-color: #ababab;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  opacity: 1;
  box-shadow: 0 0 1px rgba(171,171,171,0.8);
}
.odm-cases-footer {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0;
}
.odm-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.odm-case-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.odm-case-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.odm-case-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.odm-case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.odm-case-body {
  padding: 1rem 1.125rem 80px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.odm-case-name {
  padding: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}
.odm-case-desc-label {
  font-size: 0.75rem;
  color: #60a5fa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.odm-case-items {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.odm-case-items li {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.odm-case-items li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.78);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.2;
}

/* ---------- ODM Cooperation Models ---------- */
.odm-models {
  padding: 80px 0;
  background: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.odm-models-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
.odm-models-left {
  padding-right: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.odm-models-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1a2332;
  margin-bottom: 0.625rem;
  line-height: 1.3;
}
.odm-models-subtitle {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.65;
}
.odm-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.odm-model-item {
  border: none;
  border-radius: 12px;
  padding: 1.625rem 1.5rem 0;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.odm-model-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* 顶部行：数字 + 标题并排 */
.odm-model-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.odm-model-num {
  font-size: 2.75rem;
  font-weight: 900;
  color: #1a73e8;
  line-height: 1.1;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.odm-model-item-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
/* 下面内容正常流式排列，占满宽度 */
.odm-model-body { display: flex; flex-direction: column; }
.odm-model-item-sub {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 0.875rem;
  line-height: 1.5;
}
.odm-model-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.odm-model-items li {
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.7;
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.odm-model-items li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #1a73e8;
  font-weight: bold;
  font-size: 0.75rem;
}
/* 第一张卡片：箭头连接流（Product concept → Engineering → Testing …） */
.odm-model-flow {
  font-size: 0.8125rem;
  color: #333;
  line-height: 1.8;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.odm-model-flow span:not(.odm-flow-arrow) {
  display: inline;
}
.odm-flow-arrow {
  color: #1a73e8;
  font-weight: bold;
  margin: 0 0.25rem;
  display: inline;
}
.odm-model-img {
  margin: 0 -1.5rem;
  margin-top: auto;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.odm-model-img img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- ODM CTA Footer ---------- */
.odm-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.odm-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M0 0h1v40H0zM0 0h40v1H0z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}
/* 三栏：左标题 | 中描述+按钮 | 右配图（大图突出版心） */
.odm-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 3rem;
  align-items: center; /* 垂直居中：图片与文字居中对齐，非底对齐 */
}
/* 左栏：大标题 */
.odm-cta-left { }
.odm-cta-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* 中栏：描述 + 按钮 */
.odm-cta-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.odm-cta-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 1.375rem;
}
.odm-cta-btn-row {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex-wrap: wrap;
}
.odm-cta-contact-text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  letter-spacing: 0.3px;
}
/* 按钮样式 — 白边描边（匹配设计稿） */
.odm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.625rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all .22s ease;
  white-space: nowrap;
}
/* 描边按钮（默认，匹配设计稿 START YOUR PROJECT TODAY →） */
.odm-cta-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
  box-shadow: none;
}
.odm-cta-btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
  transform: translateX(2px);
}
/* 实心蓝色按钮（备用） */
.odm-cta-btn-primary {
  background: #1a73e8;
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(26,115,232,0.35);
}
.odm-cta-btn-primary:hover {
  background: #1557b0;
  transform: translateX(2px);
}
/* 右栏：配图 — 大图突出版心，垂直居中于文字区域 */
.odm-cta-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.odm-cta-img {
  width: auto;
  height: auto;
  max-width: 380px;
  max-height: 320px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.35));
}
@media (max-width: 900px) {
  .odm-cta-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .odm-cta-right { justify-content: center; }
  .odm-cta-img { max-width: 260px; max-height: 200px; }
}
@media (max-width: 900px) {
  .odm-hero { margin-top: 60px; height: calc(100vh - 60px); min-height: 540px; }
  .odm-hero-content { flex-direction: column; padding: 2.5rem 1.25rem; gap: 1.5rem; }
  .odm-hero-text { flex: 0 0 auto; max-width: 100%; }
  .odm-hero-label { font-size: 1.875rem; }
  .odm-hero-sublabel { font-size: 1.25rem; }
  .odm-hero-title { font-size: 2rem; }
  .odm-hero-subtitle { font-size: 0.8125rem; letter-spacing: 1.5px; }
  .odm-hero-fromconcept { font-size: 0.75rem; }
  .odm-hero-desc { font-size: 0.8125rem; }
  .odm-hero-tagline { font-size: 0.875rem; }
  .odm-hero-btn { padding: 0.6875rem 1.375rem; font-size: 0.8125rem; }
}


/* ============================================================
   OEM PAGE (oem.html) — 设计稿逐模块还原
   ============================================================ */

.oem-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- OEM Hero Banner ---------- */
.oem-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
}
.oem-hero-inner {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: linear-gradient(135deg, #0a2540 0%, #1557a6 50%, #0d3b6e 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.oem-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.45) 100%);
}
.oem-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  padding: 4.375rem 1.25rem 3.375rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  color: #fff;
}
.oem-hero-text { flex: 1; }
.oem-hero-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0.75rem;
}
.oem-hero-title {
  font-size: 2.375rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.875rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.oem-hero-subtitle {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  max-width: 480px;
}
.oem-hero-img {
  flex: 0 0 380px;
}
.oem-hero-img img {
  width: 100%;
  height: auto;
  border-radius: 0.625rem;
  /* 20260827: 按设计稿要求去掉阴影 */
  box-shadow: none;
}

/* 20260827: 当 logo 作为顶部标识时，样式与右侧产品图不同
   按设计稿：logo 更大、与文字间距更大 */
.oem-hero-logo {
  margin-bottom: 6.25rem;
}
.oem-hero-logo img {
  width: auto;
  max-width: 340px;
  height: auto;
  display: block;
  box-shadow: none;
  border-radius: 0;
}

/* ---------- OEM Service Cards (4 icons) ---------- */
.oem-services {
  padding: 3.125rem 0;
  background: #fff;
}
.oem-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.oem-svc-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 0.875rem;
  padding: 2rem 1.25rem;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.oem-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.oem-svc-icon {
  font-size: 2.375rem;
  margin-bottom: 0.875rem;
}
.oem-svc-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.375rem;
}
.oem-svc-desc {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.55;
}

/* ---------- OEM About Service（左文右图） ---------- */
.oem-about {
  padding: 4.375rem 0;
  background: #f8f9fc;
}
.oem-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
}
.oem-about-text { padding-right: 1rem; }
.oem-about-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a73e8;
  margin-bottom: 1.125rem;
  line-height: 1.3;
}
.oem-about-desc {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.oem-about-extra {
  font-size: 0.8125rem;
  color: #777;
  line-height: 1.7;
  margin-bottom: 1.125rem;
}
.oem-about-benefits {
  background: #fff;
  border-radius: 0.625rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid #eef2f7;
}
.oem-about-benefits strong {
  display: block;
  font-size: 0.8125rem;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}
.oem-about-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.oem-about-benefits li {
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.7;
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.oem-about-benefits li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #1a73e8;
  font-weight: bold;
}
.oem-about-img {
  border-radius: 0.75rem;
  overflow: hidden;
}
.oem-about-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}

/* ---------- OEM Customization Items（深色） ---------- */
.oem-custom {
  padding: 4.375rem 0;
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 100%);
  color: #fff;
}
.oem-custom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.oem-custom-intro {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.88);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.75rem;
  line-height: 1.7;
}
.oem-custom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.oem-custom-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem;
}
.oem-custom-num {
  font-size: 2rem;
  font-weight: 900;
  color: #1a73e8;
  margin-bottom: 0.625rem;
}
.oem-custom-body { flex: 1; }
.oem-custom-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.625rem;
}
.oem-custom-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.oem-custom-items li {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  padding-left: 0.875rem;
  position: relative;
  margin-bottom: 0.1875rem;
}
.oem-custom-items li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #60a5fa;
}
.oem-custom-imgs {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.oem-custom-imgs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- OEM Workflow（8步图标流） ---------- */
.oem-workflow {
  padding: 6.25rem 0 3.75rem;
  background: #f0f4f8;
  position: relative;
}
/* ⚠️ 标题上方装饰图形（FACTORY ADVANTAGE 水印）：绝对定位居中，与标题重叠且在下层 */
.oem-wf-deco {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  /* z-index:-1 沉到标题与所有内容下层（仍在上层 .oem-workflow 背景之上）；
     若用 0 会盖住普通流步骤网格 */
  z-index: -1;
  pointer-events: none;
}
.oem-wf-deco img {
  /* ⚠️ 20260907：max-width 限 90vw——绝对定位居中的 620px 水印图在手机（~390px 视口）
     左右各溢出 115px，是 OEM 移动端水平滚动条的元凶 */
  max-width: min(620px, 90vw);
  height: auto;
  max-height: 70px;
  object-fit: contain;
  opacity: 1;
}
.oem-wf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
}
.oem-wf-step {
  text-align: center;
  padding: 1.75rem 1rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #eef2f7;
  transition: transform .25s;
}
.oem-wf-step:hover { transform: translateY(-4px); }
.oem-wf-icon {
  font-size: 2.125rem;
  margin-bottom: 0.75rem;
}
.oem-wf-step-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.375rem;
}
.oem-wf-step-desc {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.5;
}

/* ---------- OEM Why Choose（深色底部） ---------- */
.oem-why {
  padding: 4.375rem 0;
  background: linear-gradient(160deg, #1a2332 0%, #2d3748 100%);
  color: #fff;
}
.oem-why-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.oem-why-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 2.25rem;
}
.oem-why-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}
.oem-why-item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.625rem;
}
.oem-why-icon {
  font-size: 1.375rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.oem-why-text {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
}


/* ============================================================
   AUTOMOBILE BUILT-IN PAGE (前装 / Automobile-built-in)
   ============================================================ */

/* ---------- ABI Hero（深色车内背景） ---------- */
.abi-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.abi-hero-inner {
  width: 100%;
  height: 100%;
  min-height: 600px;
  /* ⚠️ 20260815 关键修复：去掉硬编码 background-image（之前写死本地图，导致后台换了 OSS 图后前端永远不显示）
     背景图由 automobile-built-in.js renderHero 用 inline style 动态设 h.image（OSS/本地均可） */
  background-color: #0a2540;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  /* ⚠️ 20260815 用户反馈：内容偏上（之前 center 居中，应是 upper-middle）
     改 align-items: center → flex-start，让 content 落在 hero 上方 */
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.abi-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}
.abi-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;       /* ⚠️ 20260815 用户反馈：内容偏上（之前 center 居中，应是 upper-middle） */
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1100px;
  /* ⚠️ 20260815 上 padding 缩小，让文字块偏靠 Hero 上方 */
  padding: 14vh 2.5rem 2.5rem;
  margin: 0 auto;
  color: #fff;
}
.abi-hero-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0.625rem;            /* ⚠️ 缩短间距 */
}
.abi-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.625rem;            /* ⚠️ 缩短间距 */
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.abi-hero-subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.88);
  /* ⚠️ 20260815 用户反馈：副标题与标题等宽（去掉 640px 限制） */
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.65;
}

/* ---------- ABI Advantage（深色背景） ---------- */
.abi-advantage {
  padding: 70px 0;
  /* 深色渐变作为无图时的 fallback；有背景图时 JS 会覆盖 */
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 100%);
  color: #fff;
  position: relative;
}
/* ⚠️ 20260817：半透明遮罩层，保证背景图上文字可读 */
.abi-adv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 30, 0.65);
  z-index: 0;
}
.abi-adv-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  position: relative;
  z-index: 1;
  text-align: left;
}
.abi-adv-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
  line-height: 1.3;
}
.abi-adv-title-lead {
  color: #60a5fa;
}
.abi-adv-title-tail {
  color: #fff;
}
.abi-adv-subtitle {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  margin-bottom: 2rem;
}
/* ⚠️ 20260815：列表图标项（新样式：深灰色圆形背景 + 白色 SVG 线性图标 + 文字） */
.abi-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  padding: 0;
  transition: transform .2s ease;
}
.abi-list-item:hover { transform: translateX(6px); }
.abi-list-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.abi-list-icon-svg {
  width: 22px;
  height: 22px;
  color: #fff;
  font-style: normal;
  transform: none;
  display: block;
}
.abi-list-text {
  flex: 1;
  display: block;
}

/* ⚠️ 20260815 Advantage 蓝色 ✓ 标记（无圆底背景，纯蓝色 SVG） */
.abi-adv-check-item {
  gap: 0.875rem;
}
.abi-check-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
}
.abi-check-mark .abi-list-icon-svg {
  width: 22px;
  height: 22px;
  color: #60a5fa;
  font-style: normal;
  transform: none;
  display: block;
}
/* ⚠️ 20260817 用户上传的要点图标（替代默认 SVG ✓） */
.abi-check-mark .abi-adv-check-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

/* ⚠️ 旧的小圆点要点样式（保留兜底，新数据用 .abi-list-item 渲染） */
.abi-adv-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.abi-adv-points li {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  padding-left: 0;
  position: relative;
  margin-bottom: 0;
}
/* ⚠️ 20260815 abi-adv-points 现在用 .abi-list-item 渲染（带 SVG 图标），不需要小圆点 ::before */
.abi-adv-points li::before { display: none !important; }
.abi-adv-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.abi-adv-points li { padding-left: 0; }
.abi-adv-img {
  border-radius: 12px;
  overflow: hidden;
  min-height: 360px;
  background-color: #1a1a1a;
}
.abi-adv-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* ---------- ABI Successful Stories ---------- */
/* 外层容器：无背景图，仅作为包裹 */
.abi-stories {
  color: #fff;
  padding: 0;
}
/* ---- 上方：标题+按钮区（带背景图） ---- */
.abi-stories-hero {
  position: relative;
  padding: 80px 0 3.75rem;
  /* 背景图通过 inline style 动态设置 */
  overflow: hidden;
}
.abi-stories-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,20,30,0.55);
  z-index: 0;
}
.abi-stories-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* ---- 下方：案例卡片区（独立深色背景） ---- */
.abi-stories-cards {
  padding: 3.75rem 1.25rem 80px;
  /* 深色背景（与卡片渐变协调） */
  background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
}
.abi-stories-header {
  text-align: center;
  margin-bottom: 2.75rem;
}
.abi-stories-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.abi-stories-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.375rem;
}
.abi-stories-btn {
  display: inline-block;
  padding: 0.6875rem 1.75rem;
  background: #1a73e8;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background .2s;
}
.abi-stories-btn:hover { background: #1557b0; }
.abi-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.abi-story-card {
  background: linear-gradient(180deg, #1c2530 0%, #2a3441 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s;
  display: flex;
  flex-direction: column;
}
.abi-story-card:hover { transform: translateY(-4px); }
.abi-story-img {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.abi-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ⚠️ 20260815 案例卡底部 1/2 浅灰蓝色玻璃蒙层（设计稿"深色玻璃"效果） */
.abi-story-img::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(60,75,95,0) 0%, rgba(40,55,75,0.55) 50%, rgba(25,38,55,0.85) 100%);
  pointer-events: none;
}
/* ⚠️ 设计稿还原：标签浮在图片底部（深色半透明底条 + 白色大写文字）
   20260817：从蓝色圆角药丸改为全宽深色 overlay 条 */
.abi-story-tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  padding: 0.625rem 0.875rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  z-index: 2;
}
.abi-story-name {
  padding: 0.75rem 0.875rem 0.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 2;
}
.abi-story-desc {
  padding: 0.25rem 0.875rem 1.125rem;
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.75;
  position: relative;
  z-index: 2;
  /* ⚠️ 防截断防御：确保长描述完整展开、不被省略 */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  visibility: visible;
}

/* ---------- ABI Solutions Section ---------- */
.abi-solutions {
  padding: 80px 0;
  background: linear-gradient(160deg, #0f1621 0%, #1a2332 100%);
  color: #fff;
}
.abi-sol-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
/* ⚠️ 20260817 解决方案模块：图片铺满整个模块背景，加半透明遮罩保证文字可读 */
.abi-sol-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 30, 0.62);
  z-index: 0;
}
.abi-sol-left { padding-right: 0; }
.abi-sol-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.625rem;
  line-height: 1.3;
}
.abi-sol-subtitle {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
  line-height: 1.6;
}
.abi-sol-list { display: flex; flex-direction: column; gap: 1.125rem; }
.abi-sol-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 2px 0;
}
.abi-sol-text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.abi-sol-item-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
}
.abi-sol-item-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
}
/* ⚠️ 20260817 描述类字段支持「分段」：多行文本按段落(<p>)渲染，统一段落间距 */
.odm-hero-subtitle p, .odm-why-subtitle p, .odm-why-desc p, .odm-feat-card-sub p,
.odm-cases-subtitle p, .odm-cases-footer p, .odm-case-desc p, .odm-models-subtitle p,
.odm-model-item-sub p, .odm-cta-desc p,
.oem-hero-subtitle p, .oem-svc-desc p, .oem-about-desc p, .oem-about-extra p,
.oem-custom-intro p, .oem-wf-step-desc p, .oem-why-text p,
.ss-case-subtitle p, .ss-partner-desc p, .ss-col-content p, .ss-hl-desc p,
.au-hero-subtitle p, .au-why-subtitle p, .au-philo-subtitle p, .au-section-subtitle p,
.au-prod-desc p, .au-eng-icon-desc p, .au-exc-f-desc p, .au-beyond-desc p,
.abi-hero-subtitle p, .abi-adv-subtitle p, .abi-stories-sub p, .abi-story-desc p,
.abi-sol-subtitle p, .abi-sol-item-desc p {
  margin: 0 0 0.5rem;
}
.odm-hero-subtitle p:last-child, .odm-why-subtitle p:last-child, .odm-why-desc p:last-child, .odm-feat-card-sub p:last-child,
.odm-cases-subtitle p:last-child, .odm-cases-footer p:last-child, .odm-case-desc p:last-child, .odm-models-subtitle p:last-child,
.odm-model-item-sub p:last-child, .odm-cta-desc p:last-child,
.oem-hero-subtitle p:last-child, .oem-svc-desc p:last-child, .oem-about-desc p:last-child, .oem-about-extra p:last-child,
.oem-custom-intro p:last-child, .oem-wf-step-desc p:last-child, .oem-why-text p:last-child,
.ss-case-subtitle p:last-child, .ss-partner-desc p:last-child, .ss-col-content p:last-child, .ss-hl-desc p:last-child,
.au-hero-subtitle p:last-child, .au-why-subtitle p:last-child, .au-philo-subtitle p:last-child, .au-section-subtitle p:last-child,
.au-prod-desc p:last-child, .au-eng-icon-desc p:last-child, .au-exc-f-desc p:last-child, .au-beyond-desc p:last-child,
.abi-hero-subtitle p:last-child, .abi-adv-subtitle p:last-child, .abi-stories-sub p:last-child, .abi-story-desc p:last-child,
.abi-sol-subtitle p:last-child, .abi-sol-item-desc p:last-child {
  margin-bottom: 0;
}
/* ⚠️ 20260817 用户上传的解决方案图标（替代默认 SVG / emoji） */
.abi-list-icon .abi-sol-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.abi-list-icon .abi-sol-icon-svg {
  width: 22px;
  height: 22px;
  color: #fff;
  display: block;
}
.abi-sol-img {
  border-radius: 12px;
  overflow: hidden;
  min-height: 380px;
  background-color: #1a1a1a;
}
.abi-sol-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}


/* ============================================================
   SUCCESSFUL STORIES PAGE (successful-stories.html)
   详细案例页：每个案例含头部+三列+亮点图标
   设计稿参考：蓝湖导出（1920px 固定画布，品牌色 #035385）
   ============================================================ */

.ss-cases { background: #fff; font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }

/* 每个案例 = 三个全屏色带：白底标题带 / 深色高亮带 / 灰底详情带（蓝湖 1:1 还原） */
.ss-case { background: #fff; }

/* 全屏色带 + 内部居中容器（背景铺满，内容 max-width 居中） */
.ss-band { width: 100%; }
.ss-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== 标题带（白底，左文字 / 右大图突破版心） =====
   20260901 重构：改为 flex 左右分栏，文字列宽度由 --ss-text-ratio 控制（默认 45%），
   图片列自动占剩余宽度 → 不同分辨率下自动适配，不再依赖固定 vw。
   斜角由 CSS clip-path 统一处理（用户上传完整矩形图即可），不再让用户切图。 */
.ss-band-header {
  background: #fff;
  position: relative;
  /* 20260901：最低高度不低于视口 42%（40%~45% 区间取中），同时保留 420px 桌面下限 */
  min-height: max(26.25rem, 42vh);
  display: flex;
  align-items: stretch;
  /* 左侧 gutter 与顶部导航 Logo 对齐：大屏 = 居中 1200px 容器的左边缘，小屏 = 24px */
  --ss-gutter: max(24px, calc((100vw - 1200px) / 2));
  --ss-text-ratio: 45%;
  padding: 0 0 0 var(--ss-gutter);
}
.ss-case:first-child > .ss-band-header {
  min-height: calc(var(--header-height) + max(26.25rem, 42vh));
  /* 首屏整体在顶部让出导航栏高度：文字列与大图都从导航栏下方开始，不再被固定导航遮挡 */
  padding-top: var(--header-height);
}
/* 文字列：宽度 = --ss-text-ratio，内部自带上下留白（原 header 的 padding 移到此处） */
.ss-band-header > .ss-inner {
  flex: 0 0 var(--ss-text-ratio);
  max-width: 1200px;
  margin: 0;
  padding: 3.75rem 1.5rem 4rem;
}
.ss-case:first-child > .ss-band-header > .ss-inner { padding-top: 5rem; }
/* 无 hero 图时文字列占满全宽（避免只占 45% 留下大片空白） */
.ss-band-header:not(:has(.ss-hero-wrap)) > .ss-inner { flex: 1 1 0; max-width: 1200px; }
/* 图片列：占剩余宽度，相对容器充满整个标题带高度 */
.ss-hero-wrap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}
/* Hero 大图 — 铺满 wrap；斜角 = clip-path 左上角切角（顶部约 22%、底部约 5%，比初版更斜） */
.ss-case-hero {
  position: absolute;
  inset: 0;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 5% 100%);
}
.ss-case-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 小圆叠加图 — 相对 .ss-hero-wrap 定位：底部贴图片底，水平居中于斜角裁剪左下角点（图片可见左缘在 5%），
   即圆图一半压白色斜角区、一半压大图，完全让出左侧文字列，不再遮挡合作方文字 */
.ss-hero-circle {
  position: absolute;
  bottom: 0;
  left: calc(5% - 100px);
  right: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 2;
}
.ss-hero-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-case-tag {
  display: inline-block;
  padding: 0.4375rem 1.375rem;
  background: #035385;           /* 品牌蓝 */
  color: #fff;
  font-size: 2.25rem;               /* 蓝湖：Case N 36px */
  font-weight: 500;
  line-height: 1;
  border-radius: 0.75rem;           /* 蓝湖圆角 12px */
  margin-bottom: 1.5rem;
  width: fit-content;
}
.ss-case-title {
  font-size: 3rem;              /* 蓝湖：48px Inter-Bold */
  font-weight: 700;
  color: #000;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
/* 文字区宽度已由 .ss-band-header > .ss-inner 的 flex-basis 控制，无需再限宽 */
.ss-case-subtitle {
  font-size: 1.875rem;              /* 蓝湖：30px 蓝色副标题 */
  color: #035385;               /* 品牌蓝 */
  font-weight: 700;
  margin-bottom: 2.25rem;
  line-height: 1.3;
}
.ss-partner { display: flex; align-items: center; gap: 0.875rem; margin-top: 0; }
.ss-partner-logo { width: 64px; height: 57px; object-fit: contain; flex-shrink: 0; }
.ss-partner-icon { font-size: 1.875rem; }
.ss-partner-icon-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.ss-partner-info { line-height: 1.5; }
.ss-partner-label { font-size: 1.25rem; font-weight: 500; color: #000; }
.ss-partner-name { font-size: 1rem; color: rgba(0,0,0,0.8); }
.ss-partner-desc { font-size: 0.875rem; color: rgba(0,0,0,0.6); margin-top: 0.25rem; line-height: 1.5; }

/* ===== 高亮带（深色全屏，4 列白描线图标 + 白字） ===== */
.ss-band-hl { background-color: #0f1b29; background-size: cover; background-position: left center; padding: 2.75rem 0; }
.ss-hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ss-hl-item {
  text-align: center;
  padding: 1rem 1.125rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.ss-hl-item:first-child { border-left: none; }
.ss-hl-icon-img { width: 50px; height: 50px; object-fit: contain; display: block; margin: 0 auto 0.875rem; }
.ss-hl-icon { font-size: 2.5rem; margin-bottom: 0.875rem; }
.ss-hl-title { font-size: 1.125rem; font-weight: 500; color: rgba(255,255,255,0.95); margin-bottom: 0.375rem; line-height: 1.2; }
.ss-hl-desc { font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.4; }

/* ===== 详情带（灰底 #F1F1F2 全屏，3 列） ===== */
.ss-band-body { background: #F1F1F2; padding: 3.75rem 0; }
.ss-body-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ss-col {
  padding: 0 2.5rem;
  border-left: 1px solid rgba(3,83,133,0.14);  /* 蓝湖列间 1px 分隔 */
}
.ss-col:first-child { padding-left: 0; border-left: none; }
.ss-col:last-child { padding-right: 0; }
.ss-col-icon-img { width: 51px; height: 51px; object-fit: contain; display: block; margin: 0 auto 1.125rem; }
.ss-col-icon {
  width: 51px; height: 51px; border-radius: 50%; background: #035385;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.375rem; margin-bottom: 1.125rem; color: #fff;
}
/* 图二设计稿：图标和标题水平居中于列内容，正文左对齐 */
.ss-col { text-align: center; }
.ss-col-title { font-size: 1.5rem; font-weight: 700; color: #035385; margin-bottom: 1rem; line-height: 1.3; }
.ss-col-content { font-size: 1rem; color: rgba(0,0,0,0.85); line-height: 1.7; text-align: left; }

.ss-empty {
  text-align: center;
  padding: 5rem 1.25rem;
  color: #999;
}


/* ========== 新页面响应式 ========== */

@media (max-width: 1024px) {
  /* ODM — 1024px 保持左对齐（与 .header-inner 的 padding:0 1.25rem 对齐） */
  .odm-hero-content { flex-direction: column; text-align: left; padding: 2.5rem 1.25rem; }
  .odm-hero-text { text-align: left; }
  .odm-hero-inner { justify-content: flex-start; }
  .odm-hero-subtitle { margin-left: auto; margin-right: auto; }
  .odm-hero-img { flex: 0 0 auto; max-width: 400px; }
  .odm-why-grid { flex-direction: column; padding: 0; min-height: auto; }
  .odm-why-text { flex: 0 1 auto; width: 100%; max-width: 100%; padding: 0 1.25rem; justify-content: flex-start; min-height: auto; }
  .odm-why-combined { flex: 0 0 auto; width: 100%; max-width: 100%; height: auto; aspect-ratio: 21 / 10; margin-right: 0; min-height: 220px; }
  .odm-why-scenes { grid-template-columns: repeat(2, 1fr); }
  .odm-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .odm-proc-grid { grid-template-columns: 1fr 1fr; }
  .odm-cases-inner { grid-template-columns: 1fr; }
  .odm-cases-left { width: auto; max-width: none; padding-right: 0; margin-bottom: 1.5rem; }
  .odm-case-grid { grid-template-columns: repeat(2, 1fr); }
  .odm-models-wrap { grid-template-columns: 1fr; }
  .odm-models-left { min-width: auto; padding-right: 0; margin-bottom: 1.5rem; }
  .odm-model-grid { grid-template-columns: repeat(2, 1fr); }
  .odm-cta-inner { flex-direction: column; text-align: center; }

  /* OEM */
  .oem-hero-content { flex-direction: column; text-align: center; }
  .oem-hero-text { text-align: center; }
  .oem-hero-subtitle { margin-left: auto; margin-right: auto; }
  .oem-hero-img { flex: 0 0 auto; max-width: 340px; }
  /* .oem-svc-grid: 4 columns persist to 900px (see @media max-width 900 below) */
  .oem-about-grid { grid-template-columns: 1fr; }
  .oem-custom-grid { grid-template-columns: 1fr; }
  .oem-wf-grid { grid-template-columns: repeat(2, 1fr); }
  .oem-why-list { grid-template-columns: 1fr; }

  /* ABI — advantage 已改为全背景图+单栏文字，无需 grid 响应式 */
  .abi-story-grid { grid-template-columns: repeat(2, 1fr); }
  .abi-sol-inner { grid-template-columns: 1fr; }
  .abi-sol-left { padding-right: 0; }

  /* SS — 标题带：平板缩小文字比例，图片略降透明度 */
  .ss-band-header { --ss-text-ratio: 38%; }
  .ss-hero-wrap { opacity: 0.85; }
  /* 合作方描述文字：小屏收窄 20%，避免右侧被小圆图压住 */
  .ss-partner-desc { width: 80%; }
  .ss-body-grid { grid-template-columns: 1fr; }
  .ss-hl-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-col { border-left: none; padding: 0; margin-bottom: 2rem; }
  .ss-col:last-child { margin-bottom: 0; }
  .ss-hl-item { border-left: none; }
}

/* OEM service cards: 4→2 columns at tablet narrow */
@media (max-width: 900px) {
  .oem-svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* ODM */
  .odm-hero { min-height: 420px; }
  .odm-hero-inner { min-height: 420px; }
  .odm-hero-title { font-size: 1.75rem; }
  .odm-feat-grid { grid-template-columns: 1fr; }
  .odm-proc-grid { grid-template-columns: 1fr; }
  .odm-case-grid { grid-template-columns: 1fr; }
  .odm-model-grid { grid-template-columns: 1fr; }

  /* OEM */
  .oem-hero { min-height: 400px; }
  .oem-hero-inner { min-height: 400px; }
  .oem-hero-title { font-size: 1.625rem; }
  .oem-svc-grid { grid-template-columns: 1fr; }
  .oem-custom-grid { grid-template-columns: 1fr; }
  .oem-wf-grid { grid-template-columns: repeat(2, 1fr); }

  /* ABI */
  .abi-hero { min-height: 380px; }
  .abi-hero-inner { min-height: 380px; }
  .abi-hero-title { font-size: 1.625rem; }
  .abi-story-grid { grid-template-columns: 1fr; }

  /* SS */
  .ss-band-header { flex-direction: column; min-height: 0; padding-left: 0; }
  .ss-band-header > .ss-inner { flex: none; max-width: none; width: 100%; padding: 2.5rem 1.5rem 0; }
  .ss-case-tag { font-size: 1.5rem; padding: 0.3125rem 1rem; }
  .ss-case-title { font-size: 1.75rem; }
  .ss-case-subtitle { font-size: 1.25rem; }
  /* ⚠️ 手机端：图片全宽堆叠在文字下方，斜角转直角（不裁切） */
  .ss-hero-wrap { width: 100%; min-height: 13.75rem; margin-top: 1.5rem; opacity: 0.85; }
  .ss-case-hero { position: absolute; inset: 0; clip-path: none; }
  /* 手机端小圆图：定位在 hero 图左下角 */
  .ss-hero-circle { left: 1rem; bottom: 0; right: auto; top: auto; width: 7.5rem; height: 7.5rem; }
  .ss-band-hl { padding: 1.75rem 0; }
  .ss-hl-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-hl-item { padding: 0.875rem 0.5rem; }
  .ss-band-body { padding: 2.5rem 0; }
}

/* ============================================================
 * 前装 / ODM / OEM / 成功案例 通用动效（20260815）
 * - Hero 大图：8s 慢速轻微缩放，进入视口后内容从下方淡入上升
 * - 按钮：箭头 hover 时向右滑出
 * - 卡片：hover 时图片放大 + 卡片上浮
 * - 滚动渐入：通用 .rise-on-scroll，给各区块标题/列表/图片用
 * ============================================================ */

/* Hero 大图背景慢缩放（仅当 background-image 存在时由 JS 添加 .abi-hero-zoom） */
.abi-hero-zoom {
  animation: heroZoom 8s ease-out forwards;
}
@keyframes heroZoom {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}

/* Hero 文字内容进入时上升 + 淡入 */
.abi-hero-rise {
  opacity: 0;
  transform: translateY(24px);
  animation: heroRise .9s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ⚠️ 20260815 设计稿 Hero 没有按钮——已删除 .abi-hero-btn 相关样式 */

/* 案例卡 hover：图片缓速放大 + 卡片整体上浮 */
.abi-story-card { will-change: transform; }
.abi-story-img img {
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.abi-story-card:hover .abi-story-img img {
  transform: scale(1.06);
}
.abi-story-card:hover {
  border-color: rgba(26,115,232,0.4);
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}

/* 按钮悬浮微动（CONTACT US 等） */
.abi-stories-btn {
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.abi-stories-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26,115,232,0.35);
}

/* Advantage / Solutions 列表项：hover 微平移 + 颜色加深 */
.abi-adv-points li,
.abi-sol-item {
  transition: transform .2s ease, color .2s ease;
}
.abi-adv-points li:hover {
  transform: translateX(6px);
  color: #fff;
}
.abi-sol-item:hover {
  transform: translateX(6px);
}

/* 通用滚动渐入（IntersectionObserver 在各页面 JS 里挂） */
.rise-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.rise-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 滚动渐入的 stagger 延迟（按 nth-child 自动阶梯） */
.rise-on-scroll.in-view[data-rise-delay="1"] { transition-delay: .05s; }
.rise-on-scroll.in-view[data-rise-delay="2"] { transition-delay: .10s; }
.rise-on-scroll.in-view[data-rise-delay="3"] { transition-delay: .15s; }
.rise-on-scroll.in-view[data-rise-delay="4"] { transition-delay: .20s; }
.rise-on-scroll.in-view[data-rise-delay="5"] { transition-delay: .25s; }

/* 尊重系统级「减少动画」偏好 */
@media (prefers-reduced-motion: reduce) {
  .abi-hero-zoom,
  .abi-hero-rise,
  .rise-on-scroll {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
 * OEM 页面（蓝湖 6 区块 v3 — 像素级还原设计稿） 20260824c
 * 顺序：Hero(浅底深字) → WhatIsOem标签卡(上浮) → WhatIsOem文字 →
 *       Customization(深底渐变卡) → WhyChoose(深底图标行) → Workflow(圆图标+箭头) → Gallery
 * 色值全部提取自 Lanhu index.css
 * ============================================================ */
.oem-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== 1. HERO — 浅色背景 + 深色文字（Lanhu box_2 / paragraph_1: color #181818） ===== */
/* 20260902b: 视口层级处理——hero 整体下移避让固定导航，且整屏高度扣掉导航高度，
   底部预留 8rem 空白带供上浮标签卡悬浮，卡片落在空白带上不压 hero 文字 */
.oem-hero { position: relative; overflow: visible; margin-top: var(--header-height); }
.oem-hero-inner {
  position: relative; min-height: calc(100vh - var(--header-height));
  padding-bottom: 8rem;
  box-sizing: border-box;   /* 关键：让 8rem 空白带内收进 min-height，否则 content-box 下会叠加在 100vh 之外导致首屏超一屏 */
  background-size: cover; background-position: right center;
  background-repeat: no-repeat;
  display: flex; align-items: center;
  background-color: #e8eef4;
}
/* 左侧可读性渐变（文字在左、冷柜在右自然露出）；保持雪地图干净，不额外叠加装饰层 */
.oem-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 42%, transparent 68%);
}
/* 整屏版心容器：居中 1200px，与下方各区块左边缘对齐 */
.oem-hero .oem-container { width: 100%; }
/* 文字内容区：版心内左侧窄栏（左对齐，约 46% 宽，最大 600px） */
.oem-hero .oem-hero-content {
  position: relative; z-index: 2;
  width: 46%; max-width: 600px;
  margin: 0; padding: 3rem 0 0;   /* 顶部留白避免 logo 顶到导航栏 */
  display: block; color: #181818;
}
/* 标题：Lanhu paragraph_1 — 46px Inter-Black, #181818 */
.oem-hero-title {
  font-size: 2.875rem; line-height: 1.15; font-weight: 900;
  color: #181818; margin: 0 0 1.5rem; letter-spacing: .3px;
}
/* Subtitle pill：Lanhu block_1 — rgba(0,0,0,.30) 圆角14px, 内白字 */
.oem-hero-sub {
  display: inline-flex; align-items: center; gap: 0.875rem;
  background-color: rgba(0, 0, 0, 0.30); border-radius: 0.875rem;
  padding: 0.875rem 1.5rem; margin-bottom: 1.5rem;
}
.oem-hero-sub-text { font-size: 1.1875rem; font-weight: 600; color: #fff; letter-spacing: .2px; }
.oem-hero-arrow { font-size: 1.375rem; color: #fff; font-weight: 300; }
/* 描述：Lanhu paragraph_2 — 深色文字，不设 max-width（窄栏已限制） */
.oem-hero-desc { font-size: 1rem; line-height: 1.75; color: #181818; }
.oem-hero-desc p { margin: 0 0 0.625rem; }

/* ===== 通用区块标题（Lanhu text_5/text_16/text_17/text_28: #015a92, 48px Bold） ===== */
.oem-sec-title {
  font-size: 2.5rem; font-weight: 700; color: #015a92;
  margin: 0 0 1.125rem; letter-spacing: .2px;
}
.oem-sec-intro {
  font-size: 1.25rem; line-height: 1.7; color: #fff; text-align: center;
  max-width: 1000px; margin: 0 auto 2.75rem; font-weight: 250;
}
.oem-sec-intro p { margin: 0 0 0.375rem; }

/* ===== 2. WHAT IS OEM — 标签卡悬浮在 Hero 与 WhatIs 背景之间 ===== */
/* WhatIs 整体区块：向上延伸 -80px 进入 Hero 区域 */
.oem-whatis {
  padding: 0;
  margin-top: -64px;
  background-color: #f8fafc;
  overflow: visible;
  /* 20260827: 修复背景图平铺问题：默认 cover + 不重复 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
/* 标签卡行 — 向上偏移使其真正悬浮在 Hero 与 WhatIs 交界处 */
.oem-whatis-tags {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  margin: -2rem auto 0; position: relative; z-index: 20;
  max-width: 1000px; padding: 0 1.5rem;
}
/* Lanhu group_3~6: 纯白卡、圆角 12px、柔和投影、Flex 垂直居中、统一高度 */
.oem-whatis-tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 0.875rem; background-color: #fff; border-radius: 0.75rem;
  padding: 2.25rem 1.25rem; min-height: 220px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.oem-whatis-tag:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); }
.oem-whatis-tag-icon { width: 64px; height: 64px; }
.oem-whatis-tag-icon img { width: 64px; height: 64px; object-fit: contain; }
/* Lanhu paragraph_25/text_40/paragraph_26/text_41: 24px Regular, #000, 居中 */
.oem-whatis-tag-label { font-size: 1.25rem; font-weight: 400; color: #000; line-height: 1.35; }

/* 背景层 — 承载文字区，背景图由 JS 注入 */
.oem-whatis-inner {
  background-color: transparent;
  background-size: cover; background-position: center;
  padding: 3.75rem 0 4.375rem;
  margin-top: 0;
  position: relative; z-index: 5;
}
/* WhatIs 文字区：双栏网格 — 左侧插图，右侧文字 */
.oem-whatis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  align-items: start;
}
/* WhatIs 文字区：无左侧插图时，文字仍靠右对齐（占右栏宽度） */
.oem-whatis-grid-single {
  grid-template-columns: 1fr;
}
.oem-whatis-grid-single .oem-whatis-right {
  justify-self: end;
  width: calc(50% - 30px);
}
/* 左侧：插图区 — 背景图/装饰图（仅当有图时渲染） */
.oem-whatis-left {
  min-height: 360px;
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
/* 右侧：文字区 */
.oem-whatis-right { padding-top: 0.625rem; }
.oem-whatis-text { margin-top: 0; }
.oem-whatis-desc {
  font-size: 1.0625rem; line-height: 1.75; color: #000; font-weight: 300;
}
.oem-whatis-desc p { margin: 0 0 0.625rem; }
/* Core advantage label */
.oem-whatis-adv-label {
  font-size: 1rem; font-weight: 600; color: #000; margin-bottom: 0.875rem; margin-top: 1.5rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.oem-whatis-adv { list-style: none; padding: 0; margin: 0; }
/* 优势要点：图标 + 文字横排 */
.oem-whatis-adv li {
  display: flex; align-items: center; gap: 0.875rem;
  font-size: 1rem; line-height: 1.5; color: #000; margin-bottom: 0.75rem; font-weight: 400;
}
.oem-whatis-adv-icon {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.oem-whatis-adv-icon img { width: 24px; height: 24px; object-fit: contain; }
/* 默认图标占位（未上传图标时）— 设计稿中的小圆点 */
.oem-whatis-adv-icon-placeholder {
  width: 14px; height: 14px; border-radius: 50%;
  background-color: #015a92;
}
.oem-whatis-adv-text { flex: 1; }

/* ===== 3. CUSTOMIZATION（Lanhu box_3: #181818 深底, 渐变卡 bbc9d6→485967） ===== */
.oem-customization { padding: 5.625rem 0 6.25rem; background: #181818; }
/* 第三屏定制方案：区块标题居中 */
.oem-customization .oem-sec-title { text-align: center; }
.oem-cust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem; max-width: 1345px; margin: 2.5rem auto 0;
}
/* Lanhu box_5/6/7: linear-gradient(180deg, #bbc9d6, #485967), 440x533, radius 14 */
.oem-cust-card {
  background-image: linear-gradient(180deg, #bbc9d6 0%, #485967 100%);
  border-radius: 0.875rem; padding: 1.875rem 1.625rem;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.oem-cust-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
/* 数字+标题同行 */
.oem-cust-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.5rem; }
/* Lanhu text_6/10/13: #19699c, 51px Bold */
.oem-cust-num { font-size: 3rem; font-weight: 700; color: #19699c; line-height: 1; flex-shrink: 0; }
/* Lanhu paragraph_4/8/11: #fff, 24px Bold */
.oem-cust-title { font-size: 1.375rem; font-weight: 700; color: #fff; line-height: 1.3; min-height: 58px; }
/* 要点列表 — ⚠️ 20260829：去掉 flex:1，描述紧贴标题顶对齐 */
.oem-cust-points { list-style: none; padding: 0; margin: 0 0 1rem; }
/* Lanhu paragraph_5~7/9/10/12/13: #fff, 18px Regular */
.oem-cust-points li {
  position: relative; padding-left: 1.125rem; font-size: 0.9375rem; line-height: 1.75;
  color: rgba(255,255,255,.90); margin-bottom: 0.625rem;
}
.oem-cust-points li::before { content: "\00B7"; position: absolute; left: 0; color: #fff; font-size: 1.375rem; line-height: 1.5; top: -1px; }
/* 产品图 */
.oem-cust-img { margin-top: auto; text-align: center; }
.oem-cust-img img { width: 100%; max-width: 320px; height: auto; object-fit: contain; border-radius: 0.5rem; }

/* ===== 4. WHY CHOOSE（深底 + 图标容器行） ===== */
.oem-why {
  padding: 5rem 0; background-color: #181818;
  /* ⚠️ 20260825：用户后台可上传区块背景图（whyChoose.backgroundImage），
     未上传则 --oem-why-bg 未设置，背景图为 none，仅显示深色底色 */
  background-image: var(--oem-why-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.oem-why-title { color: #015a92; }
.oem-why-inner { padding: 1.25rem 0; }
/* Lanhu group_7~12: 单列, 723px 宽居中 */
.oem-why-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; max-width: 723px; margin: 3.125rem auto 0; }
/* ⚠️ 20260825：每个优势项不加矩形底框（透明），与设计稿一致 */
.oem-why-item {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* Lanhu image-wrapper_1~6: 90x78, radius 15, gradient黑→灰, shadow 0 4px 5px rgba(0,0,0,.47), border 1px solid rgba(0,0,0,.39) */
.oem-why-icon {
  flex: 0 0 90px; width: 90px; height: 78px; border-radius: 0.9375rem;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.47);
  background-image: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(175,175,175,.4) 100%);
  border: 1px solid rgba(0, 0, 0, 0.39);
  display: flex; align-items: center; justify-content: center;
}
.oem-why-icon img { width: 50px; height: 52px; object-fit: contain; }
/* Lanhu paragraph_14~19: #fff, 21px Regular, line-height 20 */
.oem-why-text { font-size: 1.125rem; line-height: 1.55; color: #fff; font-weight: 400; }
.oem-why-text p { margin: 0; }

/* ===== 5. WORKFLOW（圆图标 + 箭头） ===== */
.oem-workflow {
  padding: 5rem 0 3.75rem;
  background-color: #f5f7fa;
  /* ⚠️ 20260825：用户后台可上传区块背景图（workflow.backgroundImage），
     未上传则 --oem-wf-bg 未设置，仅显示默认浅蓝底色 */
  background-image: var(--oem-wf-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ⚠️ 20260825：grid 布局，每行 N 个 step + (N-1) 个箭头（JS 通过 --oem-wf-cols 控制）。
   默认 cols=4 → 7 槽位：step arrow step arrow step arrow step */
.oem-wf-grid {
  display: grid;
  grid-template-columns: repeat(calc(var(--oem-wf-cols, 4) * 2 - 1), 1fr);
  gap: 6.25rem 0;
  max-width: 1100px;
  margin: 3.125rem auto 0;
  align-items: start;
  justify-items: center;
}
.oem-wf-step {
  text-align: center;
  position: relative;
  /* ⚠️ 20260825：兜底清除旧版 .oem-wf-step 的白色卡片背景/边框/圆角，避免覆盖旧缓存时显示白色方框 */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* Lanhu image-wrapper_7/9/11/13: 圆形, 主色 实心 */
/* image-wrapper_8/10/14: 圆形, 主色半透明（70% 透明度）— 奇偶交替，与设计稿一致 */
.oem-wf-icon {
  width: 110px; height: 110px; margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* ⚠️ 20260825：图标圆形背景色由后台配置（workflow.iconBg），未配则用 CSS 变量默认 #3273a1 */
  background-color: var(--oem-wf-icon-bg, #3273a1);
}
/* ⚠️ 20260825：偶数 step（按 8 个里的索引）图标用主色半透明，呈现设计稿的两色交替效果。
   用 class 而非 nth-child，避免 grid 里 arrow 元素打乱索引 */
.oem-wf-step.wf-step-odd .oem-wf-icon {
  background-color: var(--oem-wf-icon-bg, #3273a1);
}
.oem-wf-step.wf-step-even .oem-wf-icon {
  background-color: var(--oem-wf-icon-bg-soft, rgba(50, 115, 161, 0.7));
}
.oem-wf-icon img { width: 60px; height: 60px; object-fit: contain; }
/* 箭头：与图标同高，垂直居中 */
.oem-wf-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 110px;
  font-size: 1.75rem; color: #b8c5d0; font-weight: 400;
  align-self: start;
  user-select: none;
}
/* ⚠️ 20260825：用户上传的分隔符图片 */
.oem-wf-arrow-img img { width: 28px; height: 28px; object-fit: contain; }
/* ⚠️ 20260825：工作流区块标题居中（z-index:1 确保在装饰水印上层） */
.oem-workflow .oem-sec-title { text-align: center; position: relative; z-index: 1; }
.oem-workflow .oem-container { position: relative; z-index: 1; }
/* Lanhu paragraph_20~27: #000, 23px Medium 500, 居中 */
.oem-wf-step-title { font-size: 1.0625rem; font-weight: 500; color: #000; line-height: 1.35; margin-bottom: 0.125rem; }
.oem-wf-step-desc { display: none; }

/* ===== 6. GALLERY ===== */
.oem-gallery { padding: 4.375rem 0; background: #f5f7fa; }
.oem-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.125rem; }
.oem-gallery-item { border-radius: 0.75rem; overflow: hidden; background: #fff; box-shadow: 0 8px 20px rgba(20,40,80,.06); }
.oem-gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .3s ease; }
.oem-gallery-item:hover img { transform: scale(1.05); }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
  .oem-cust-grid { gap: 0.625rem; }
  .oem-cust-card { padding: 1.5rem 1.25rem; }
  .oem-cust-num { font-size: 2.5rem; }
  .oem-cust-title { font-size: 1.1875rem; }
  /* tags 保持 4 列，仅收紧间距 */
  .oem-whatis-tags { gap: 0.875rem; }
}
/* 平板宽屏（~1024px 类 iPad 横屏）：Hero 文字左对齐 + 标签卡紧凑
   ⚠️ 20260907：用户反馈居中显示奇怪——改为左对齐（logo/标题/pill/描述全部靠左） */
@media (max-width: 1060px) {
  /* Hero：从桌面左 46% 切换为全宽垂直布局（文字左对齐），避免文字与产品图重叠 */
  .oem-hero-inner { background-position: center center; min-height: 520px; }
  .oem-hero-overlay { background: rgba(255,255,255,.55); }
  .oem-hero .oem-hero-content { width: 46%; max-width: 600px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .oem-hero-text { text-align: left; }
  .oem-hero-subtitle, .oem-hero-sub { margin-left: 0; margin-right: auto; }
  .oem-hero-img { flex: 0 0 auto; max-width: 360px; margin: 0 auto; }
  .oem-hero-logo { margin-bottom: 2rem; }
  .oem-hero-logo img { max-width: 220px; margin: 0; }
  /* 标签卡：4 列紧凑（不切 2 列） */
  /* 笔记本/平板：hero 整体下移避让固定导航；缩小悬浮卡片上移量，避免爬进 Hero 文字区 */
  .oem-hero { margin-top: var(--header-height); }
  .oem-hero-content { padding-top: 1.5rem; padding-bottom: 2rem; }
  .oem-whatis { margin-top: -48px; }
  .oem-whatis-tags { margin: -1rem auto 0; max-width: 800px; gap: 1rem; }
  .oem-whatis-tag { padding: 1.25rem 0.875rem; min-height: 150px; }
  .oem-whatis-tag-icon { width: 52px; height: 52px; }
  .oem-whatis-tag-icon img { width: 52px; height: 52px; }
  .oem-whatis-tag-label { font-size: 1.0625rem; }
}
@media (max-width: 980px) {
  .oem-cust-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .oem-cust-card:nth-child(3) { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; width: 100%; }
  .oem-why-grid { max-width: 100%; }
  .oem-wf-grid { gap: 0.5rem; }
  .oem-wf-step { width: 130px; }
  .oem-wf-icon { width: 130px; height: 130px; }
  .oem-wf-icon img { width: 65px; height: 65px; }
  .oem-whatis-grid, .oem-whatis-grid-single { grid-template-columns: 1fr; gap: 1.875rem; }
  .oem-whatis-grid-single .oem-whatis-right { justify-self: stretch; width: 100%; }
  .oem-whatis-left { min-height: 240px; order: -1; }
  .oem-whatis-right { padding-left: 0; padding-top: 0; }
  .oem-whatis-inner { padding: 2.5rem 0 3.125rem; margin-top: 0; }
  .oem-whatis { margin-top: -40px; }
  /* 20260827: 中尺寸 2 列布局下，悬浮卡片需要更小、更紧凑，避免遮挡 Hero 文字 */
  .oem-whatis-tags { margin: -1rem auto 0; max-width: 720px; gap: 0.875rem; }
  .oem-whatis-tag { padding: 1.5rem 1rem; min-height: 160px; }
  .oem-whatis-tag-icon { width: 48px; height: 48px; }
  .oem-whatis-tag-icon img { width: 48px; height: 48px; }
  .oem-whatis-tag-label { font-size: 1rem; }
  /* Hero 适配中尺寸（⚠️ 20260907：文字左对齐） */
  .oem-hero { margin-top: var(--header-height); }
  .oem-hero-content { padding-top: 1.5rem; }
  .oem-hero-inner { background-position: center center; min-height: 560px; }
  .oem-hero-overlay { background: rgba(255,255,255,.50); }
  .oem-hero .oem-hero-content { width: 46%; max-width: 600px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
  /* 20260827: 中尺寸 2 列时 hero-content 应垂直布局 */
  .oem-hero-text { text-align: left; }
  .oem-hero-subtitle, .oem-hero-sub { margin-left: 0; margin-right: auto; }
  .oem-hero-img { flex: 0 0 auto; max-width: 340px; margin: 0 auto; }
  .oem-hero-logo { margin-bottom: 2.5rem; }
  .oem-hero-logo img { max-width: 240px; margin: 0; }
}
@media (max-width: 640px) {
  .oem-hero { margin-top: var(--header-height); }
  .oem-hero-content { padding-top: 1.25rem; }
  .oem-hero-inner { background-position: center center; min-height: 480px; }
  .oem-hero .oem-hero-content { width: 46%; max-width: 600px; margin: 0; padding: 1.5rem 0; display: flex; flex-direction: column; align-items: flex-start; }
  .oem-hero-text { text-align: left; }
  .oem-hero-title { font-size: 1.875rem; }
  .oem-hero-sub-text { font-size: 1.0625rem; }
  .oem-hero-sub { padding: 0.625rem 1.125rem; gap: 0.625rem; }
  .oem-hero-img { flex: 0 0 auto; max-width: 280px; margin: 0 auto; }
  .oem-hero-logo { margin-bottom: 1.875rem; }
  .oem-hero-logo img { max-width: 200px; margin: 0; }
  .oem-sec-title { font-size: 1.625rem; }
  .oem-cust-grid, .oem-why-grid, .oem-wf-grid { grid-template-columns: 1fr; }
  .oem-cust-card:nth-child(3) { max-width: 100%; }
  .oem-cust-header { flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
  .oem-cust-img img { max-width: 200px; }
  .oem-wf-grid { flex-direction: column; align-items: center; }
  .oem-wf-step { width: 100%; max-width: 160px; }
  .oem-wf-icon { width: 120px; height: 120px; }
  .oem-wf-arrow { display: none !important; }
  .oem-whatis-tags { grid-template-columns: repeat(2, 1fr); max-width: 480px; margin: -0.75rem auto 0; gap: 0.625rem; }
  .oem-whatis-tag { padding: 1.125rem 0.75rem; min-height: 130px; }
  .oem-whatis-tag-icon { width: 40px; height: 40px; }
  .oem-whatis-tag-icon img { width: 40px; height: 40px; }
  .oem-whatis-tag-label { font-size: 0.875rem; }
  .oem-whatis { margin-top: -24px; }
  .oem-whatis-inner { padding: 1.875rem 0 2.5rem; margin-top: 0; }
  .oem-whatis-left { min-height: 180px; }
  .oem-whatis-grid { gap: 1.5rem; }
  .oem-whatis-adv li { gap: 0.625rem; font-size: 0.9375rem; }
}
/* 超小屏（<375px，如 iPhone SE）：标签卡不再上浮重叠 Hero */
@media (max-width: 374px) {
  .oem-whatis { margin-top: 0; }
  .oem-whatis-tags { margin: 0 auto 0; }
  /* 降低 Hero 最小高度，避免内容结束后留白过多 */
  .oem-hero-inner { min-height: 380px; }
}
/* ⚠️ 20260907：≤425px 小屏 Hero 文字块恢复铺满（46% 太窄放不下文字）；>425px 保持 46% 左对齐占位 */
@media (max-width: 425px) {
  .oem-hero .oem-hero-content { width: 100%; max-width: 100%; }
}