/* ==========================================================================
   彩一膜业 · 首页样式
   设计语言参考 sdhnedu.com（固定导航 + 通栏 Banner + 分栏/宫格内容 + 页脚服务条），
   配色改为车膜行业常用的「深色 + 科技蓝」。
   目录：
     01 设计变量 / 基础重置
     02 通用组件（容器、按钮、栏目标题、标签）
     03 顶部导航
     04 移动端抽屉
     05 公司形象 Banner
     06 门店地图
     07 企业文化（16 字）
     08 关于我们
     09 数据统计
     10 产品中心
     11 品牌优势
     12 技术实力（选项卡）
     13 施工流程与保障
     14 案例展示
     15 新闻资讯
     15B 子页面（新闻列表页外壳 / 分类筛选 / 分页）
     15C 新闻详情页（正文排版 / 上一篇下一篇）
     16 联系我们
     17 官方平台（APP 官网）
     18 页脚 / 回到顶部
     19 滚动动效 / 响应式
   ========================================================================== */

/* ------------------------------ 01 设计变量 ------------------------------ */
:root {
  /* 蓝白配色：底色白 / 浅蓝，主色 #1a73e8，深蓝只用在 Banner 与页脚 */
  --bg: #ffffff;
  --bg-soft: #f1f5fa;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef4fd;

  /* 描边 */
  --line: #e4eaf2;
  --line-strong: #cfdaea;

  /* 文字 */
  --text: #1f2937;
  --text-2: #5f6b7c;
  --text-3: #93a0b2;
  --heading: #14243d;

  /* 主色 */
  --brand: #1a73e8;
  --brand-light: #1a73e8;
  --brand-deep: #1557b0;
  --cyan: #1a73e8;
  --glow: rgba(26, 115, 232, .26);

  /* 浅蓝底（按钮、标签、hover） */
  --tint: rgba(26, 115, 232, .07);
  --tint-line: rgba(26, 115, 232, .18);

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #2f8bf5 0%, #1a73e8 45%, #1557b0 100%);
  --grad-line: linear-gradient(90deg, #1a73e8, #7ab4f7 60%, rgba(26, 115, 232, 0));

  --radius: 14px;
  --radius-lg: 20px;
  --header-h: 74px;
  --container: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img, svg { max-width: 100%; display: block; }

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

h1, h2, h3, h4, p, ul, figure { margin: 0; }

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

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

::selection { background: var(--brand); color: #fff; }

/* 深色滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: #c8d5e6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #aebfda; }

/* ------------------------------ 02 通用组件 ------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.sec {
  position: relative;
  padding: 104px 0;
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* 交替底色，让长页面有呼吸感 */
.sec--soft {
  background:
    radial-gradient(900px 380px at 12% 0%, rgba(26, 115, 232, .07), transparent 70%),
    var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sec--tight { padding: 76px 0; }

/* 栏目标题：中文主标题 + 英文副标题 + 渐变短线（对标模板的 title / english）
   2026-10-09 业主意见：栏目标题字号偏小 → 主标题 34px → 40px，英文副标题 12px → 13px
   2026-10-09 第二轮（业主：「企业概况这几个字后面的大小位置都要一致」）：
     · 默认改成**左对齐**（原来 760px 居中 + margin auto）——
       以「企业概况」为准，后面每个板块的标题大小、位置全部跟它对齐；
       原来这套居中样式还会把「技术实力」「新闻资讯」的标题推到版面正中，
       跟「企业概况」「产品中心」不在一条竖线上。改这里一处，全站（含
       企业文化 / 施工流程 等子页面）的栏目标题就都站在容器左边缘了。
     · 主标题字号本来就已统一（40px），只有「资质与认证」是 28px，
       那个不在这里改，见 .sec--certs 那段注释。
     · `.sec-head--left` 现在是空操作（默认就是左对齐），保留着不影响任何东西。 */
.sec-head {
  max-width: 760px;
  margin: 0 0 56px;
  text-align: left;
}

.sec-head--left {
  margin-left: 0;
  text-align: left;
}

.sec-head__title {
  font-size: 40px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--heading);
}

.sec-head__en {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--brand-light);
}

.sec-head__line {
  width: 56px;
  height: 3px;
  margin: 18px 0 0;
  border-radius: 3px;
  background: var(--grad-line);
}

.sec-head--left .sec-head__line { margin-left: 0; }

.sec-head__desc {
  margin-top: 18px;
  font-size: 15.5px;
  color: var(--text-2);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, border-color .25s, box-shadow .25s, color .25s;
}

.btn--primary {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 10px 26px -12px var(--glow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px var(--glow);
}

.btn--ghost {
  color: var(--heading);
  border: 1px solid var(--line-strong);
  background: #fff;
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--tint);
  transform: translateY(-2px);
}

.btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }

/* 文字箭头链接 */
.link-more {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-light);
  transition: gap .25s var(--ease), color .25s;
}

.link-more::after { content: "→"; font-size: 15px; }
.link-more:hover { gap: 11px; color: var(--cyan); }

/* 小标签 */
.chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ------------------------------ 03 顶部导航 ------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.site-header.is-scrolled {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .35);
}

/* -------- 首页专用：头部浮在首屏照片上（2026-10-08） --------
   只有首页有全幅照片 banner，需要把图片顶到页面最上沿，
   所以做成修饰类，**不要去改 .site-header 的基样式** ——
   子页面（/news、/stores、/culture）用的也是 .site-header，但那几页不加载 main.js，
   永远拿不到 .is-scrolled，基样式一改就会变成永久透明、导航直接看不见。
   未滚动：透明底 + 浅色文字 + 白色 logo；滚过 40px 由 main.js 加 .is-scrolled 恢复白底深字。 */
.site-header--overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header--overlay:not(.is-scrolled) .logo img { filter: brightness(0) invert(1); }

.site-header--overlay:not(.is-scrolled) .main-nav__link { color: rgba(255, 255, 255, .9); }

.site-header--overlay:not(.is-scrolled) .main-nav__link:hover,
.site-header--overlay:not(.is-scrolled) .main-nav__item.is-active > .main-nav__link {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.site-header--overlay:not(.is-scrolled) .main-nav__item.is-active > .main-nav__link::after {
  background: #fff;
}

.site-header--overlay:not(.is-scrolled) .header-side { border-left-color: rgba(255, 255, 255, .26); }

.site-header--overlay:not(.is-scrolled) .header-phone__label { color: rgba(255, 255, 255, .66); }

.site-header--overlay:not(.is-scrolled) .header-phone__num { color: #fff; }

.site-header--overlay:not(.is-scrolled) .header-phone__num:hover { color: #cfe3ff; }

.site-header--overlay:not(.is-scrolled) .nav-toggle { border-color: rgba(255, 255, 255, .36); }

.site-header--overlay:not(.is-scrolled) .nav-toggle span { background: #fff; }

.site-header__inner {
  display: flex;
  /* 垂直居中（2026-10-08 业主意见：下滑时字上面留白太多）——
     原来写的是 flex-end，内容全压在 74px 头部的下沿：量出来文字占 y=35..70，
     上方空 35px、下方只剩 3px，看着就是"字上面一大片白"。改成 center 后上下各约 15px。 */
  align-items: center;
  gap: 26px;
  height: 100%;
}

/* -------- 头部横向铺开（2026-10-08 业主调整，照同行站点「左 logo、右导航」的效果） --------
   原来头部用的是跟正文一样的 1240px 容器，logo 就落在距屏幕左边约 340px 的位置，
   看着不像"最左侧"。这里让首页头部（.site-header__inner）与二级页头部（.subnav）
   单独放开到 1680px：logo 贴左、导航与电话贴右；超宽屏仍留边距，不会贴屏幕边。
   ⚠️ 只改这两个头部容器，.container 本身不动 —— 正文与页脚仍是 1240px。 */
.site-header__inner,
.subnav {
  max-width: 1680px;
  /* 左右留白收窄（2026-10-08 业主调整）：原来 4vw、最宽 64px，
     logo 在 1920 屏上离左边 64px 显得太靠里；现在 2.2vw、最宽 44px。 */
  padding-left: clamp(16px, 1.4vw, 28px);
  padding-right: clamp(16px, 1.4vw, 28px);
}
/* ⚠️ 首页导航外面还套了一层 <nav>，而"靠右"的 margin-left: auto 原本写在里面的
   .main-nav 上 —— 那只作用于 nav 内部，对外层布局无效，所以导航与电话一直卡在
   中间偏左。把 auto 加在外层 <nav> 上才能真正靠右（2026-10-08 修）。
   二级页头部没有这层包裹（.subnav__links 自己就是弹性子元素），所以那页一直正常。 */
.site-header__inner > nav {
  margin-left: auto;
}


/* ⚠️ 头部 logo 节点已按业主要求于 2026-10-08 在 HTML 里注释掉
   （index.html 与 lib/views-site.mjs 各一处，注释里写了怎么恢复）。
   下面这段样式先留着 —— 恢复 logo 时不用再动 CSS。 */
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 52px; width: auto; }

/* 2026-10-08：业主确认头部 logo 保持显示 —— 「隐藏 logo」的兜底规则已删除，首页与子页面模板里的 logo 都已恢复。 */

/* 小屏时 logo 收一点，避免跟汉堡按钮挤在一起。
   ⚠️ 必须写在 .logo img 基样式「之后」：同权重时靠后的生效 */
@media (max-width: 760px) {
  .logo img { height: 46px; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.main-nav__item { position: relative; }

.main-nav__link {
  position: relative;
  display: block;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .22s, background-color .22s;
}

.main-nav__link:hover,
.main-nav__item.is-active > .main-nav__link {
  color: var(--brand);
  background: var(--tint);
}

/* 选中态下划线 */
.main-nav__item.is-active > .main-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--grad-brand);
}

/* 二级下拉（对标模板 child_nav） */
.sub-nav {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 178px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(14, 22, 38, .98);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .95);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}

.main-nav__item.has-children:hover > .sub-nav,
.main-nav__item.has-children:focus-within > .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 悬浮小三角 */
.sub-nav::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: rotate(45deg);
  background: rgba(14, 22, 38, .98);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.sub-nav__link {
  display: block;
  position: relative;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text-2);
  transition: color .2s, background-color .2s, padding-left .2s;
}

.sub-nav__link:hover {
  color: #fff;
  background: rgba(43, 127, 255, .16);
  padding-left: 19px;
}

.header-side {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.header-phone__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  color: var(--text-3);
}

.header-phone__num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--heading);
  transition: color .22s;
}

.header-phone__num:hover { color: var(--brand); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  padding: 0 10px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .3s;
}

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------ 04 移动端抽屉 ------------------------------ */
.mobile-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: 880;
  width: min(360px, 86vw);
  padding: 22px;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
}

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

.mobile-nav__item { border-bottom: 1px solid var(--line); }.mobile-nav__toggle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: var(--text);
}

.mobile-nav__toggle::after {
  content: "+";
  font-size: 20px;
  color: var(--text-3);
  transition: transform .3s var(--ease), color .3s;
}

.mobile-nav__item.is-open .mobile-nav__toggle::after { transform: rotate(45deg); color: var(--brand-light); }

.mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}

.mobile-nav__item.is-open .mobile-nav__sub { grid-template-rows: 1fr; }

.mobile-nav__sub > div { overflow: hidden; }

.mobile-nav__sub a {
  display: block;
  padding: 11px 2px 11px 16px;
  font-size: 14.5px;
  color: var(--text-2);
  border-left: 1px solid var(--line);
  margin-left: 4px;
}

.mobile-nav__cta { margin-top: 28px; display: grid; gap: 12px; }

.nav-mask {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 870;
  background: rgba(15, 36, 61, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s, visibility .34s;
}

body.nav-open .nav-mask { opacity: 1; visibility: visible; }

/* ------------------------------ 05 公司形象 Banner ------------------------------ */
.hero {
  /* Banner 是深蓝底，局部把变量切回浅色文字 */
  --text: #eaf2ff;
  --text-2: #c6d9f5;
  --text-3: #9fb8db;
  --heading: #ffffff;
  --line: rgba(255, 255, 255, .18);
  --line-strong: rgba(255, 255, 255, .34);
  --brand-light: #cfe3ff;
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 全屏背景图需要足够高度才好看；矮屏自动缩短 */
  min-height: clamp(560px, 68vh, 780px);
  padding: calc(var(--header-h) + 56px) 0 72px;
  overflow: hidden;
  background: var(--bg);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #0c3d8f 0%, #1359c4 42%, #1a73e8 100%);
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
  z-index: 0;
}

/* 文字压暗遮罩：文字在左边，所以左边深、右边浅。
   z-index 必须高于照片层，否则照片一出来文字就糊了。
   —— 之前这里放的是一层白色/青色光晕，压在照片上把画面冲淡，
      这正是「白字压亮天空看不清」的根本原因。 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(5, 22, 50, .93) 0%,
      rgba(5, 22, 50, .86) 30%,
      rgba(5, 22, 50, .62) 50%,
      rgba(5, 22, 50, .24) 72%,
      rgba(5, 22, 50, .04) 100%),
    linear-gradient(180deg,
      rgba(5, 22, 50, .42) 0%,
      rgba(5, 22, 50, .04) 28%,
      rgba(5, 22, 50, .06) 60%,
      rgba(5, 22, 50, .52) 100%);
}

/* 背景照片层：全幅铺开。不加模糊 —— 清晰度优先，可读性交给上面的遮罩解决 */
.hero__bg-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero__bg-slide.is-active { opacity: 1; }

.hero__inner {
  position: relative;
  /* 要高于压暗遮罩（z-index: 2），否则文字会被遮罩盖住 */
  z-index: 3;
  display: block;
  /* Banner 的文字整体靠左：不用居中的 1240px 容器
     （那样宽屏时左边距 = (视口-1240)/2+24，1420 视口下有 102px，太靠中间），
     改成放开到全宽 + 4vw 的响应式左边距：任何宽度下都稳定留出约 4% 的空隙，
     既贴近左边缘，又不会贴死。文字栏本身只有 660px，右侧大面积仍留给照片。 */
  max-width: none;
  padding-left: clamp(26px, 4vw, 84px);
  padding-right: clamp(26px, 4vw, 84px);
}

/* 文字只占左侧一栏，右半边留给照片露出来 */
.hero__text { max-width: 660px; }

.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 轮播控制条 */
.hero__controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 30px;
}

.hero__arrow,
.hero__pause {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .14);
  color: var(--text-2);
  transition: color .24s, background .24s, border-color .24s, transform .24s var(--ease);
}

.hero__arrow { font-size: 19px; line-height: 1; }

.hero__arrow:hover,
.hero__pause:hover {
  color: #fff;
  border-color: transparent;
  background: var(--grad-brand);
  transform: scale(1.06);
}

.hero__dots { display: flex; align-items: center; gap: 9px; }

.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  transition: width .3s var(--ease), background .3s;
}

.hero__dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: #fff;
}

/* 图标：默认两根竖线＝暂停中；按下后变三角＝继续 */
.hero__pause-icon {
  width: 11px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.hero__pause.is-paused .hero__pause-icon {
  width: 0;
  height: 0;
  border-left: 10px solid currentColor;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.hero__figure-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  /* 图片还没加载出来时的兜底底色 */
  background: #0a2c5e;
  box-shadow: 0 30px 60px -30px rgba(6, 28, 66, .55), 0 0 0 1px rgba(255, 255, 255, .18);
}

.hero__figure-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}

.hero__figure-stack img.is-active { opacity: 1; visibility: visible; }.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .10);
}.hero .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, .22);
}

/* ------------------------------ 06 门店地图 ------------------------------ */
.map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.map-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(480px 260px at 80% 0%, rgba(26, 115, 232, .07), transparent 70%),
    #fff;
  overflow: hidden;
}

.map-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.map-card__title { font-size: 17.5px; font-weight: 700; color: var(--heading); }
.map-card__meta { font-size: 13px; letter-spacing: .4px; color: var(--brand); }

.map-card__body { position: relative; padding: 14px 18px 20px; }

/* 两张地图的 viewBox 比例不同（山东 620×398 / 全国 1000×709），
   直接 width:100% 会让山东那张矮一截、两张卡片底部对不齐。
   这里统一按「全国图的比例」给地图区占位，两张卡片高度就一致了；
   山东图由 SVG 自带的 preserveAspectRatio="xMidYMid meet" 居中留白。 */
.map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 709;
  overflow: visible;
}

/* 地图卡片要允许圆点/角标溢出到 padding 外，
   否则贴着省界的点、以及「山东 38 家」这样的角标会被裁掉。 */
.map-card__body { overflow: visible; }

/* 省 / 市 边界 */
.map__shape {
  fill: rgba(26, 115, 232, .10);
  stroke: rgba(26, 115, 232, .34);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .25s, stroke .25s;
}

.map__shape--city { fill: rgba(26, 115, 232, .13); }

/* 有门店的省份整体加深 —— 全国地图上只有 4 个省有店，
   原来它们和"完全没店的省"一样淡，等于看不出哪里有店。
   必须写在 .is-hot 之前：两者优先级相同，靠后的悬停态要能盖住它。 */
.map__shape.is-store {
  fill: rgba(26, 115, 232, .26);
  stroke: rgba(26, 115, 232, .52);
}

.map__shape.is-hot {
  fill: rgba(26, 115, 232, .40);
  stroke: var(--brand-deep);
}

/* 门店圆点 */
.mk { cursor: pointer; outline: none; }

.mk__pulse {
  fill: rgba(26, 115, 232, .38);
  transform-box: fill-box;
  transform-origin: center;
  animation: mkPulse 2.8s ease-out infinite;
}

@keyframes mkPulse {
  0%   { transform: scale(.7); opacity: .85; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.mk__dot {
  fill: var(--brand);
  stroke: #fff;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: fill .22s;
}

.mk.is-on .mk__dot,
.mk:focus-visible .mk__dot { fill: var(--brand-deep); }

.mk:focus-visible .mk__dot { stroke-width: 2.6; }

/* 全国地图：viewBox 1000 宽、屏幕只有 ~547px，圆点缩到只剩 8px，几乎看不见。
   但 markerScale 一放大会把标签文字一起放大（会糊），所以这里只单独放大圆点/光晕。
   CSS 的 r 会覆盖 SVG 的属性，Chrome / Safari / Firefox 都支持。 */
#map-china .mk__dot { r: 6.5; stroke-width: 1.6; }
#map-china .mk__pulse { r: 12; }

.mk__label {
  font-size: 10px;
  font-weight: 600;
  fill: var(--text-2);
  pointer-events: none;
  transition: fill .22s;
}

.mk.is-on .mk__label { fill: var(--brand-deep); }

.mk__badge-bg { fill: rgba(26, 115, 232, .94); }

.mk__badge {
  font-size: 9.5px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
}

/* 悬停信息卡
   用固定宽度而不是 min/max：绝对定位元素是「收缩适应」宽度，
   会随 left 变化而重排，JS 量到的宽度就不准，翻转时提示卡会离圆点忽远忽近。 */
.map-tip {
  position: absolute;
  z-index: 5;
  width: 218px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 20px 40px -20px rgba(16, 40, 80, .35);
  /* 允许鼠标移入卡片本身（门店多时可以滚轮翻看），
     配合 JS 里的「延迟隐藏」避免鼠标一离开圆点就消失 */
  pointer-events: auto;
}

.map-tip strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14.5px;
  color: var(--heading);
}

.map-tip__row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
}

.map-tip__row i {
  flex: none;
  width: 30px;
  font-style: normal;
  color: var(--text-3);
}

/* ---------------- 一市多店：弹窗里的门店列表 ---------------- */
.map-tip__stores {
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
  max-height: 186px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 细滚动条，别在弹窗里出现一根粗灰条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 115, 232, .35) transparent;
}

.map-tip__stores::-webkit-scrollbar { width: 4px; }
.map-tip__stores::-webkit-scrollbar-track { background: transparent; }
.map-tip__stores::-webkit-scrollbar-thumb {
  background: rgba(26, 115, 232, .32);
  border-radius: 4px;
}

.map-tip__store {
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}

.map-tip__store:first-child { border-top: 0; padding-top: 1px; }

.map-tip__store-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-deep);
  line-height: 1.45;
}

.map-tip__store-addr {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  word-break: break-all;
  /* 地址最多两行，超出省略：弹窗太高会盖住地图 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 门店很多时给个「可以滚」的提示，否则用户以为列表就这几家 */
.map-tip__hint {
  display: block;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  letter-spacing: .2px;
}

/* ---------------- 点击固定：弹窗锁住，方便滚动查看门店 ----------------
   悬停时弹窗会随鼠标移出而消失，用户根本来不及滚列表；
   点击圆点后进入「固定」状态：加一圈品牌色描边 + 右上角关闭按钮，
   提示"这个弹窗已经锁住了，可以慢慢滚"。 */
.map-tip.is-pinned {
  z-index: 6;
  border-color: rgba(26, 115, 232, .5);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12), 0 22px 44px -20px rgba(16, 40, 80, .42);
}

.map-tip.is-pinned strong { padding-right: 18px; }

.map-tip__close {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  align-items: flex-end;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 115, 232, .09);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

.map-tip.is-pinned .map-tip__close { display: flex; }
.map-tip__close:hover { background: rgba(26, 115, 232, .18); color: var(--brand); }

/* 引导线：从圆点连到信息卡 */
.map-tip__leader {
  position: absolute;
  display: none;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(26, 115, 232, .95) 0%,
    rgba(26, 115, 232, .7) 70%,
    rgba(26, 115, 232, .45) 100%);
  /* 线是弹窗的子元素，从卡片边缘向外延伸；
     父元素的白色背景不会盖住子元素，所以别给负 z-index */
  pointer-events: none;
}
/* 线头的小圆点，让"从这个圆点连过去"这层关系一眼可见 */
.map-tip__leader::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(26, 115, 232, .95);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .18);
}

.map-hint {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* 南海诸岛小图 */
.map__inset-box { fill: rgba(26, 115, 232, .05); stroke: rgba(26, 115, 232, .3); stroke-width: 1; }
.map__inset-line { fill: rgba(26, 115, 232, .16); stroke: rgba(26, 115, 232, .45); stroke-width: 1; }
.map__inset-label { font-size: 12px; fill: var(--text-3); }

/* ------------------------------ 07 企业文化（16 字） ------------------------------ */
.creed {
  /* 深蓝面板：局部切回浅色文字 */
  --text-2: #d6e6fb;
  --text-3: #a9c4e6;
  --heading: #ffffff;
  --line: rgba(255, 255, 255, .18);
  position: relative;
  margin-bottom: 46px;
  padding: 54px 26px;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(255, 255, 255, .18), transparent 70%),
    linear-gradient(150deg, #1560c4, #0f3f86);
  overflow: hidden;
}

.creed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}

.creed__words {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

/* 面板顶部的小标签，点明这 16 个字是什么 */
.creed__eyebrow {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.creed__word {
  position: relative;
  padding: 0 clamp(10px, 2.4vw, 34px);
  font-size: clamp(22px, 2.7vw, 38px);
  font-weight: 800;
  line-height: 1.72;
  letter-spacing: .12em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 30%, #bcdcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 字组之间的细分隔线 */
.creed__word + .creed__word::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 46%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(120, 170, 240, .55), transparent);
}

.creed-card {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s;
}

.creed-card::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 115, 232, .16), transparent 66%);
  opacity: 0;
  transition: opacity .4s;
}

.creed-card:hover { transform: translateY(-5px); border-color: rgba(26, 115, 232, .38); }
.creed-card:hover::after { opacity: 1; }

/* 卡片头部：左边图标、右边序号 */
.creed-card__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.creed-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: var(--brand);
  background: var(--tint);
  border: 1px solid var(--tint-line);
  transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}

.creed-card__icon svg { width: 22px; height: 22px; }

.creed-card:hover .creed-card__icon {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  transform: translateY(-2px);
}

.creed-card__no {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.creed-card__title {
  margin-top: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--heading);
}

.creed-card__desc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
}

/* ------------------------------ 08 关于我们 ------------------------------ */

/* 2026-10-09 第五批：背景改成「一条带共用一个图层」。
   业主反馈：「这里拼接有点明显，能不能两个板块共用一个背景图，看不出来拼接」。

   原先的做法是**每个板块各画一层** ::before（企业概况 / 数据统计 / 资质认证 各一层），
   同一张图在三个高度不同的框里各自 cover 缩放 → 图案对不上，
   板块交界处能看到一条缝。现在改成：这几块套进同一个外壳 `.bg-band--silk`，
   外壳上只画**一层**背景 → 图案在整条带上天然连续，任何位置都不会有接缝。

   · 外壳 overflow:hidden   把模糊晕出去的那圈裁掉，免得糊到上下相邻板块
   · 外壳 isolation:isolate 让它自己成为层叠上下文，配 z-index:-1 把背景压在内容之下
                            （不加这句，负层级会直接掉到 body 底下、看不见）
   · inset:-60px            比整条带大一圈：模糊会把边缘向外晕开，多出来的部分吃掉白边

   要撤掉：HTML 里去掉 .bg-band 外壳 div，再删掉 `.bg-band*` 这段即可。
   要换图 / 改糊的程度：覆盖 assets/img/bg/site-bg-silk.jpg，或调下面的 blur / opacity。

   ⚠️⚠️ `background-size` 必须是 **100% 100%（拉伸填满）而不是 cover**：
   一条带有两三个板块那么高（桌面端 ≈1480px），用 cover 的话图会被放大近 2 倍、
   而且只取中间一条 —— 丝绸纹会几乎看不见，蓝底那张更糟（它最重的深蓝在图的左侧，
   一裁就正好裁掉了）。拉伸填满能保证「整张图的构图完整可见」，
   对这种柔软抽象纹理来说，纵向拉长一点点看不出来。
   竖屏窄机上这条带会更高、拉伸更狠，但实测仍是一层柔和的竖向纹理，可接受。 */
.bg-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ⚠️ 带内的板块**不能再画自己的底色**，否则会把共用的背景层整个盖住。
   原来 #about 的 var(--bg)、#stats / #products 的 #fff 都已改成透明
   （见文件末尾「数据统计改白底」「产品中心改白底」两处的 background）。
   #tech / .sec--certs 本来就没有底色，不用动。 */
.bg-band > .sec { background: transparent; }

.bg-band--silk::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: url("../img/bg/site-bg-silk.jpg") center / 100% 100% no-repeat;
  filter: blur(9px);
  opacity: .9;
  pointer-events: none;
  /* 下沿 100px 渐隐到透明（露出下面的白底），让纹底自然收尾，
     免得跟下面「产品中心」交界处出现一条硬边。
     inset 固定 60px，所以 100% = 图层底边 = 整条带底边 + 60px ——
     渐隐区间正好是这条带最后的 100px（该段是纯留白，不会糊到证书照片）。 */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0, 0, 0, 0) calc(100% - 60px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0, 0, 0, 0) calc(100% - 60px));
}

/* 蓝色那条带：产品中心 + 技术实力，与上面丝绸带同一套做法（共用一层背景，无接缝）。
   ⚠️ site-bg-blue.jpg 比丝绸纹重得多（通道均值 R221/G234/B245，左侧还有一片深蓝），
   所以 opacity 用 .78，避免压住白卡片上的字。
   ⚠️ background-size 用 100% 100% 拉伸填满 —— 理由见上面 `.bg-band` 那段注释
   （用 cover 会把左侧那片深蓝整个裁掉，蓝底就白铺了）。
   ⚠️ 第三批用过的 site-bg-veil.jpg 已于 2026-10-10 连同其它未使用素材一并删除
   （备份在 F:\彩一项目\_备份\背景素材-20261010\）；要退回就把上面的文件名改回 site-bg-veil.jpg
   并从备份目录取回该文件。 */
.bg-band--blue::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: url("../img/bg/site-bg-blue.jpg") center / 100% 100% no-repeat;
  filter: blur(9px);
  opacity: .78;
  pointer-events: none;
  /* 2026-10-10 新增：**上沿淡出**，为了对上上面「资质与认证」天空图的下沿。
     上面那张天空图现在下沿渐隐到页面底色，这一条蓝带要是还从第一像素就满色，
     接壤处就还是"白 → 蓝"一下跳过去。这里把带子顶上 140px 也淡出来，
     两侧都收到页面底色上，交界就彻底没了。
     ⚠️ 数值是相对**伪元素**的：inset:-60px 让伪元素比带子大一圈，
        所以 y=60px 正好是带子的真实上沿，130px 就是带子往下 70px（别拉太长，
        否则产品中心标题那一带会是白的，看着像"上半屏没有蓝底"）。 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60px, #000 130px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60px, #000 130px);
}

.about-split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 64px;
  align-items: start;
}

/* 导语：原来写的是 .about-split__lead（0,1,0），被下面的 .about-split__text p（0,1,1）
   压住，实际渲染成 15.5px —— 跟正文一样大，"导语"完全没起到作用。
   这里把选择器提到 (0,2,0) 并加一条品牌色竖线，让它真正成为"一句话定位"。 */
.about-split__text .about-split__lead {
  position: relative;
  margin-bottom: 24px;
  padding-left: 16px;
  font-size: 21px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--heading);
  text-align: left;
}

.about-split__text .about-split__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: .26em;
  bottom: .26em;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
}

/* 长段落行高与段间距略放大，中文长句更好读 */
.about-split__text p + p { margin-top: 18px; }

.about-split__text p {
  font-size: 15.5px;
  line-height: 2;
  color: var(--text-2);
  text-align: justify;
}

.about-split__actions { margin-top: 32px; }

.culture-card {
  position: relative;
  padding: 26px 26px 26px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(26, 115, 232, .08), transparent 70%),
    #fff;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s;
}

.culture-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-brand);
}

.culture-card:hover { transform: translateY(-4px); border-color: rgba(77, 157, 255, .4); }

.culture-card__title {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
}

.culture-card__title svg { width: 20px; height: 20px; color: var(--brand-light); flex: none; }

.culture-card__text {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
}

/* 企业荣誉标签行（.honor-strip / .honor-strip__title / .honor-strip__list）已撤下
   （2026-10-08）：资质改由 #certs 板块的 4 张证书照片呈现，文字标签重复故删除。
   .chip 小标签样式保留（通用工具类，以后可能再用）。 */

/* ------------------------------ 09 数据统计 ------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  box-shadow: 0 22px 48px -26px rgba(16, 60, 130, .55);
  overflow: hidden;
}

/* 2026-10-08 业主意见：蓝条上方空太多，整条往上挪。
   做法：先去掉这一段的上内边距，再让蓝条负外边距往上顶 ——
   于是浅蓝底（.sec--soft）的边界不动，蓝条压到边界上方一点，
   看上去像「浮在白色与浅蓝交界处」。
   数字：原来离上面内容 180px（104 + 76），现在 56px；窄屏原来 122px，现在 44px。
   想再高/再低，只调下面这一个负值即可（越负越往上）。 */
#stats { padding-top: 0; }
#stats .stats { margin-top: -48px; }

@media (max-width: 760px) {
  #stats .stats { margin-top: -24px; }
}

.stat {
  padding: 34px 20px;
  text-align: center;
  transition: background-color .35s;
}

.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .18); }

.stat:hover { background: rgba(255, 255, 255, .09); }

.stat__num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .5px;
  color: #fff;
}

.stat__num small { font-size: 19px; font-weight: 700; margin-left: 2px; }

.stat__label {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
}

/* ------------------------------ 10 产品中心 ------------------------------ */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.product {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform .38s var(--ease), border-color .38s, box-shadow .38s;
}

.product:hover {
  transform: translateY(-6px);
  border-color: rgba(26, 115, 232, .38);
  box-shadow: 0 30px 60px -34px var(--glow);
}

/* 卡片顶部视觉：深蓝渐变 + 网格 + 大图标 */
.product__visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 168px;
  background: linear-gradient(150deg, #3d95f7 0%, #1a73e8 52%, #1557b0 100%);
  border-bottom: 0; /* ⚠️ 原为 1px solid transparent：边框透明时会透出 .product__visual
                       自己的蓝色渐变底，而照片只按内容区 100% 高度铺，
                       下沿于是漏出一条 1px 蓝线（不是设计，是穿帮）。2026-10-09 修正 */
  overflow: hidden;
}

.product__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}

.product__visual::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 62%);
  filter: blur(6px);
  transition: transform .5s var(--ease);
}

.product:hover .product__visual::after { transform: scale(1.22); }

.product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 22px 22px;
}

.product__name { font-size: 19px; font-weight: 700; color: var(--heading); }

.product__en {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand-light);
}

.product__tagline {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
}

.product__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.product__features li {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  font-size: 12px;
  color: var(--text-2);
}

.product__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.product__warranty { font-size: 12.5px; color: var(--text-3); }
.product__warranty b { color: var(--brand-light); font-weight: 700; }.product:target {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 127, 255, .22), 0 30px 60px -34px var(--glow);
}

/* 11 品牌优势（.advantage / .advantage__title / .advantage__desc）已撤下
   （2026-10-08）：首页「为什么选择我们」4 张卡片按业主决定删除，
   内容与「企业概况」正文、「技术实力」板块重复。
   .grid-4 保留（企业文化页仍在用）。
   .icon-box 已于 2026-10-10 作为无引用样式删除（全项目搜过没有任何地方使用），
   要恢复从 git 历史取回。 */

/* ------------------------------ 资质与认证（图片位预留） ------------------------------ */
/* 上方的「为什么选择我们」撤下后（2026-10-08），这里不再需要分隔虚线和
   额外上间距：与上一板块的间隔改由 .sec 自身的内边距承担 */
.certs {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 2026-10-08 业主意见：标题不再单独占一行（字上方留白多），
   改成压在证书照片上的浮层 —— 左上角标题，右上角「证照齐全」。
   照片顶部是接近 #f6f6f6 的浅灰，深色标题直接压上去对比度足够。
   窄屏恢复成照片上方的普通标题，见下方 @media (max-width: 760px)。 */
.certs__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  /* 内边距随窗口缩放，字始终与照片边缘保持同样的视觉留白 */
  padding: clamp(16px, 3.4vw, 46px) clamp(18px, 3.9vw, 56px) 0;
  margin-bottom: 0;
  pointer-events: none;             /* 只是一层文字，别挡住照片（图本身不可点，纯保险） */
}

/* 2026-10-08 业主意见：标题要更醒目（原来 20px 偏小）——
   20px → 26px，英文副标题同步 11.5px → 12.5px。
   同日第二轮：标题压进照片后改用 clamp 随窗口微调，桌面端约 28px 更压得住整张图。 */
.certs__title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.25;              /* 压进照片后收紧行高，让标题更贴近左上角 */
  color: var(--heading);
  letter-spacing: .5px;
}

.certs__title span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--brand);
}

/* 2026-10-08 按业主决定：原来的 4 个 4:3 证书图位整组撤下，
   换成业主提供的这一张证书合影（2524×970，约 2.6:1 的宽幅）。
   做法：整幅铺满容器宽度、按原比例自适应高度，窄屏也不裁切、不变形。
   原来那组 .certs__list / .cert* (4 图版) 样式已于 2026-10-10 删除（无引用），
   要回退成 4 图版请从 git 历史取回（提交 b92ef43 之前）。 */
.certs__figure {
  position: relative;                     /* 标题浮层的定位基准 */
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f6f6f6;                    /* 照片自带的底灰，图没加载完也不会闪白 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.certs__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------ 12 技术实力（选项卡） ------------------------------ */
.tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}

.tabs__btn {
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  color: var(--text-2);
  transition: color .26s, background-color .26s, border-color .26s;
}

.tabs__btn:hover { color: var(--brand); border-color: rgba(26, 115, 232, .42); }

.tabs__btn.is-active {
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  background: var(--grad-brand);
  box-shadow: 0 12px 28px -14px var(--glow);
}

.tabs__panel { display: none; }

.tabs__panel.is-active {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: flex-end;
  animation: fadeUp .5s var(--ease) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 2026-10-09 业主意见：4 个选项卡各配一张实拍图（依次 = 技师团队 / 专业设备 /
   施工流程 / 质检标准）。原来那块蓝色渐变占位卡（格子底纹 + 图标 + 英文小字）
   整块撤下换成照片，只服务于占位卡的三条规则（::before 格子 / -icon / -en）
   一并删除。要恢复占位卡：从本次改动前的 git 版本取回这几条，再在 index.html
   各 panel 里加回 `<span class="tabs__visual-icon">` 与 `-en` 两个 span。
   换图：直接覆盖 assets/img/tech/ 下的同名 jpg（1080×594），HTML 不用动。 */
.tabs__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);   /* 图片没加载完时的浅色占位，不闪白 */
  box-shadow: 0 26px 46px -30px rgba(16, 40, 80, .5);
}

/* 素材比例 1080×594（≈1.82:1），按同比例出图：桌面端约 590×325，
   跟右边文字栏高度接近；object-fit:cover 保证以后换别的比例的图也不变形。
   ⚠️ 必须写 `height: auto` —— <img> 上的 `height="594"` 属性会作为「表示性提示」
   变成 height:594px，把没声明的 auto 顶掉，框就被定成正方形了（实测踩过）。
   本文件里 .certs__figure img 也是同样的写法。 */
.tabs__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 594;
  object-fit: cover;
}

.tabs__heading { font-size: 25px; font-weight: 700; color: var(--heading); }

.tabs__text {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--text-2);
  text-align: justify;
}

.tabs__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.tabs__points li {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--text);
}

.tabs__points li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2.6px, transparent 2.7px),
    var(--grad-brand);
}

/* ------------------------------ 13 施工流程与保障 ------------------------------ */
.craft {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: craft;
}

.craft__step {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .35s var(--ease), border-color .35s;
}

.craft__step:hover { transform: translateY(-5px); border-color: rgba(26, 115, 232, .38); }

.craft__no {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  color: transparent;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .95;
}

.craft__title { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--heading); }

.craft__desc {
  margin-top: 8px;
  font-size: 13.8px;
  line-height: 1.8;
  color: var(--text-2);
}

/* 质保条款 */
.warranty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px dashed var(--line);
}

.warranty__item {
  padding-left: 18px;
  border-left: 2px solid rgba(26, 115, 232, .38);
}

.warranty__title { font-size: 16px; font-weight: 700; color: var(--heading); }

.warranty__desc {
  margin-top: 8px;
  font-size: 13.8px;
  line-height: 1.8;
  color: var(--text-2);
}
/* 质保与售后页：.warranty 独立成页后不再需要「虚线 + 上间距」的分隔（那是首页给
   施工流程 8 步收尾用的），页面上直接贴着 page-hero 排 */
.warranty--page {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 板块末尾的居中按钮组（2026-10-08 新增，首页「查看质保与售后」入口用） */
.sec-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}

/* ------------------------------ 14 案例展示 ------------------------------ */
.filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter__btn {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--text-2);
  transition: color .25s, border-color .25s, background-color .25s;
}

.filter__btn:hover { color: var(--brand); border-color: rgba(26, 115, 232, .42); }

.filter__btn.is-active {
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  background: var(--grad-brand);
}

.case {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform .38s var(--ease), border-color .38s, box-shadow .38s, opacity .3s;
}

.case:hover {
  transform: translateY(-6px);
  border-color: rgba(26, 115, 232, .38);
  box-shadow: 0 30px 60px -34px var(--glow);
}

.case.is-hidden { display: none; }

.case__visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
  background: linear-gradient(150deg, #3d95f7 0%, #1a73e8 52%, #1557b0 100%);
  border-bottom: 1px solid transparent;
  overflow: hidden;
}

.case__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 50% 55%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000, transparent 74%);
}

.case__icon {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  color: rgba(255, 255, 255, .9);
}

.case__icon svg { width: 100%; height: 100%; }

.case__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(26, 115, 232, .92);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
}

.case__body { padding: 22px; }

.case__title { font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.55; }

.case__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
}

.case__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-3);
}

/* ------------------------------ 15 新闻资讯 ------------------------------ */
.news-list { display: grid; gap: 14px; }

.news-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: flex-end;
  gap: 26px;
  padding: 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .32s var(--ease), border-color .32s, background-color .32s;
}

.news-item:hover {
  transform: translateX(6px);
  border-color: rgba(26, 115, 232, .34);
  background: var(--surface-2);
}

.news-item__date {
  text-align: center;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.news-item__day {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--heading);
  line-height: 1.15;
}

.news-item__ym { font-size: 12.5px; color: var(--text-3); letter-spacing: .5px; }

.news-item__cat {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--tint);
  font-size: 12px;
  color: var(--brand);
}

.news-item__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  transition: color .25s;
}

.news-item:hover .news-item__title { color: var(--brand); }

.news-item__desc {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item__go {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 17px;
  transition: background-color .28s, color .28s, border-color .28s, transform .28s;
}

.news-item:hover .news-item__go {
  color: #fff;
  border-color: transparent;
  background: var(--grad-brand);
  transform: translateX(3px);
}

/* ------------------------------ 15B 子页面（新闻列表 / 详情共用外壳） ------------------------------ */
/* 子页面不加载 main.js，顶栏不做滚动变化，所以这里把偏移和样式都写死 */
.page-main { padding-top: var(--header-h); }

.subnav {
  display: flex;
  /* 与首页头部一致：垂直居中（2026-10-08 同步改，原来是 flex-end，字全贴在白条下沿） */
  align-items: center;
  gap: 22px;
  height: 100%;
}

.subnav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.subnav__links a {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  transition: color .22s, background-color .22s;
}

.subnav__links a:hover { color: var(--brand); background: var(--tint); }

.subnav__links a.is-active {
  color: var(--brand);
  background: var(--tint);
  font-weight: 600;
}

/* 列表页顶部的标题band */
.page-hero {
  padding: 52px 0 40px;
  background: linear-gradient(180deg, var(--surface-3) 0%, rgba(238, 244, 253, 0) 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: .5px;
}

.page-hero__en {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  opacity: .7;
}

.page-hero__desc {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--text-2);
}

/* 分类筛选 */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.cat-chip {
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--text-2);
  transition: .24s;
}

.cat-chip:hover { color: var(--brand); border-color: rgba(26, 115, 232, .45); }

.cat-chip.is-active {
  border-color: transparent;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px -12px var(--glow);
}

/* 首页「查看更多新闻」 */
.news-more { margin-top: 26px; text-align: center; }

.news-empty {
  padding: 44px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

/* 分页 */
.pager {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.pager__btn,
.pager__num {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  font-size: 14px;
  color: var(--text-2);
  transition: .22s;
}

.pager__num { padding: 0 10px; }

.pager__btn:hover,
.pager__num:hover { color: var(--brand); border-color: rgba(26, 115, 232, .45); }

.pager__num.is-active {
  border-color: transparent;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
}

.pager__btn.is-dis { opacity: .45; cursor: not-allowed; }

/* 子页面页脚 */
.subfoot {
  margin-top: 60px;
  padding: 26px 0;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.subfoot__inner {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}

.subfoot__inner a { color: var(--text-2); }
.subfoot__inner a:hover { color: var(--brand); }
.subfoot__sp { flex: 1; }

/* ------------------------------ 15C 新闻详情页 ------------------------------ */
.crumb {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 22px 0 6px;
  font-size: 13px;
  color: var(--text-3);
}

.crumb a { color: var(--text-2); }
.crumb a:hover { color: var(--brand); }
.crumb em { font-style: normal; color: var(--text-3); }

.article {
  margin: 14px 0 0;
  padding: 42px 48px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.article__hd { padding-bottom: 22px; border-bottom: 1px solid var(--line); }

.article__title {
  margin: 12px 0 14px;
  font-size: 27px;
  line-height: 1.45;
  font-weight: 750;
  color: var(--heading);
}

.article__meta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-3);
}

.article__dot { color: var(--line-strong); }

.article__cover { margin: 26px 0 0; }
.article__cover img { width: 100%; border-radius: 12px; display: block; }

/* 正文排版：所有内容都是「块」拼出来的，所以只要管好这几个标签 */
.article__content { padding-top: 26px; font-size: 16px; line-height: 1.95; color: var(--text-2); }
.article__content p { margin: 0 0 20px; }

.article__content h2 {
  margin: 34px 0 14px;
  padding-left: 13px;
  border-left: 4px solid var(--brand);
  font-size: 19.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--heading);
}

.article__content ul { margin: 0 0 20px; padding-left: 4px; list-style: none; }

.article__content li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 22px;
}

.article__content li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}

.article__content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: var(--tint);
  color: var(--heading);
  font-size: 15.5px;
}

.article__content figure { margin: 26px 0; }
.article__content figure img { width: 100%; border-radius: 12px; display: block; }

.article__content figcaption {
  margin-top: 9px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

.article__foot {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* 上一篇 / 下一篇 */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.article-nav__item {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: .26s;
}

.article-nav__item:hover {
  border-color: rgba(26, 115, 232, .4);
  background: var(--surface-2);
}

.article-nav__item.is-next { text-align: right; }
.article-nav__item.is-empty { opacity: .5; }

.article-nav__dir {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--brand);
}

.article-nav__title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .subnav__links { display: none; }
  .subnav__cta { margin-left: auto; }
}

/* ⚠️ 2026-10-10：门店分布页按要求撤掉了「立即预约」按钮，可 ≤1024px 时子页面导航本来
   是隐藏的、顶栏只剩那一个按钮。若不处理，这一页在平板/手机上顶栏就成了一条空白。
   所以这一页在窄屏改为把导航显示出来（放不下就横向滑动，不换行、不挤压）。 */
@media (max-width: 1024px) {
  body.page-stores .subnav__links {
    display: flex;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-stores .subnav__links::-webkit-scrollbar { display: none; }
  body.page-stores .subnav__links a {
    flex: none;
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  .page-hero { padding: 34px 0 26px; }
  .page-hero__title { font-size: 24px; }
  .article { padding: 26px 20px 24px; }
  .article__title { font-size: 21px; }
  .article__content { font-size: 15.5px; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__item.is-next { text-align: left; }
  .subfoot__inner { gap: 12px; font-size: 12.5px; }
  .subfoot__sp { display: none; }
}

/* ------------------------------ 17 官方渠道（页脚，悬停出二维码） ------------------------------ */
.channels {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: flex-end;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
}

.channels__title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .5px; }

.channels__desc { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--text-3); }

.channels__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 10px;
}

.channel { position: relative; }

.channel__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 12px;
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--text-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
  transition: color .28s, background .28s, border-color .28s, transform .28s var(--ease);
}

.channel__icon svg { width: 25px; height: 25px; }

.channel__name {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .24s;
}

.channel__btn:hover .channel__icon,
.channel.is-open .channel__icon {
  color: #fff;
  border-color: transparent;
  background: var(--grad-brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px var(--glow);
}

.channel__btn:hover + .channel__pop + .channel__name,
.channel__btn:hover .channel__name,
.channel.is-open .channel__name { color: #fff; }

/* 二维码弹层：悬停或点击出现
   关闭时用 display:none 而不是 visibility:hidden ——
   visibility:hidden 的盒子仍然参与布局，会把页面撑出横向滚动 */
.channel__pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 194px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(127, 179, 255, .38);
  background: rgba(11, 18, 30, .98);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .95);
  transform: translate(-50%, 0);
}

.channel__pop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: rotate(45deg);
  background: rgba(11, 18, 30, .98);
  border-right: 1px solid rgba(127, 179, 255, .38);
  border-bottom: 1px solid rgba(127, 179, 255, .38);
}

.channel:hover .channel__pop,
.channel.is-open .channel__pop {
  display: flex;
  /* --nudge 由 JS 在贴近屏幕边缘时修正，避免弹层被切掉 */
  animation: channelPop .26s var(--ease) both;
}

@keyframes channelPop {
  from { opacity: 0; transform: translate(calc(-50% + var(--nudge, 0px)), 10px); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--nudge, 0px)), 0); }
}

.channel__qr {
  display: block;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  line-height: 0;
}

.channel__qr img { width: 150px; height: 150px; }

.channel__hint { font-size: 12.5px; color: var(--text-2); }

.channel__link {
  font-size: 11.5px;
  letter-spacing: .2px;
  color: var(--brand-light);
  transition: color .22s;
}

.channel__link:hover { color: var(--cyan); }

/* ------------------------------ 18 页脚 ------------------------------ */
.site-footer {
  /* 页脚保持深色：局部把变量切回浅色文字 */
  --text: #eaf2ff;
  --text-2: #9fb2cc;
  --text-3: #7b8ca6;
  --heading: #ffffff;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);
  --brand-light: #7fb3ff;
  padding-top: 72px;
  background: #141c2e;
  border-top: 1px solid transparent;
}

/* 顶部服务条（对标模板 Footer 的 Nav_box） */
.footer-quick {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-bottom: 40px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.footer-quick a {
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-2);
  transition: color .25s, border-color .25s, background-color .25s;
}

.footer-quick a:hover {
  color: #fff;
  border-color: rgba(127, 179, 255, .55);
  background: rgba(127, 179, 255, .14);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 48px;
  padding-bottom: 52px;
}

.footer-brand img { height: 44px; width: auto; }

.footer-brand__slogan {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-2);
}

.footer-col__title {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .6px;
}

.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }

.footer-links a {
  font-size: 14px;
  color: var(--text-2);
  transition: color .22s, padding-left .22s;
}

.footer-links a:hover { color: var(--brand-light); padding-left: 4px; }

.footer-contact { display: grid; gap: 12px; }

.footer-contact li { display: flex; gap: 12px; font-size: 14px; }

.footer-contact .k { flex: none; width: 66px; color: var(--text-3); }
.footer-contact .v { color: var(--text-2); }
.footer-contact .v a:hover { color: var(--brand-light); }

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

.footer-bottom a:hover { color: var(--brand-light); }

/* 回到顶部 */
.back-top {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: 800;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 19px;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 14px 30px -14px var(--glow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .32s, visibility .32s, transform .32s var(--ease);
}

.back-top.is-show { opacity: 1; visibility: visible; transform: none; }

.back-top:hover { transform: translateY(-3px); }

/* ------------------------------ 19 滚动动效 / 响应式 ------------------------------ */
/* 只在 JS 可用时启用初始隐藏，脚本没跑起来时内容照常可见 */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

html.js .reveal.is-in { opacity: 1; transform: none; }

/* 脚本没能执行时的最终兜底：直接显示全部内容 */
html.reveal-all .reveal { opacity: 1 !important; transform: none !important; }

/* 桌面端隐藏抽屉与汉堡按钮 */
@media (min-width: 1025px) {
  .mobile-nav, .nav-mask, .nav-toggle { display: none !important; }
}

@media (max-width: 1180px) {
  .main-nav__link { padding: 10px 10px; font-size: 14.5px; }
  .header-phone { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .craft { grid-template-columns: repeat(2, 1fr); }
  .warranty { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: block; }
  .main-nav { display: none; }
  .header-side { margin-left: auto; padding-left: 0; border-left: 0; }
  .logo img { height: 36px; }

  .about-split { grid-template-columns: 1fr; gap: 40px; }
  .tabs__panel.is-active { grid-template-columns: 1fr; gap: 34px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 760px) {
  .sec { padding: 68px 0; }
  .sec--tight { padding: 54px 0; }
  .sec-head { margin-bottom: 36px; }
  .sec-head__title { font-size: 25px; }

  .hero { height: auto; min-height: 0; }

  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .craft, .warranty { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tabs__points { grid-template-columns: 1fr; }
  .tabs__nav { gap: 8px; }
  .tabs__btn { padding: 9px 17px; font-size: 14px; }

  .news-item { grid-template-columns: 68px 1fr; gap: 18px; padding: 20px; }
  .news-item__day { font-size: 21px; }
  .news-item__go { display: none; }
  .news-item__date { padding-right: 16px; }
  .news-item:hover { transform: none; }

  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-quick a { padding: 7px 15px; font-size: 13.5px; }
  .footer-bottom { font-size: 12px; }

  .back-top { right: 16px; bottom: 18px; width: 42px; height: 42px; }
}

/* 页脚栏目分栏 + 页脚联系条（补充分组） */
.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.footer-links--1 { grid-template-columns: 1fr; }

.site-footer .footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.site-footer .footer-contact li { font-size: 13.5px; }
.site-footer .footer-contact .k { width: auto; }

/* 页脚联系条之后紧接版权条时不再重复描边 */
.site-footer .footer-contact + .footer-bottom { border-top: 0; }

/* 所有锚点目标都留出固定导航的高度 */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}

/* 页脚在窄屏下的重排 */
@media (max-width: 1024px) {
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .footer-nav-cols { grid-template-columns: 1fr; gap: 24px; }
  .site-footer .footer-contact { flex-direction: column; gap: 10px; }
}

/* 新增组件的响应式 */
@media (max-width: 1180px) {
  .channels { grid-template-columns: 1fr; gap: 22px; }
  .channels__list { gap: 10px 6px; }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .map-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hero { padding: calc(var(--header-h) + 52px) 0 66px; }

  /* 窄屏文字铺满整行，左右渐变压不住右边，改成整体均匀压暗 */
  .hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(5, 22, 50, .74) 0%,
        rgba(5, 22, 50, .58) 38%,
        rgba(5, 22, 50, .64) 72%,
        rgba(5, 22, 50, .78) 100%);
  }

  .map-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .map-card__body { padding: 10px 12px 16px; }
  .map-tip { width: 164px; padding: 10px 12px; }

  .creed { padding: 34px 16px; margin-bottom: 32px; }
  /* 窄屏下 16 字排成整齐的 2×2，避免出现 3+1 的难看断行 */
  .creed__words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 0; }
  .creed__word { padding: 0; font-size: 23px; line-height: 1.9; text-align: center; }
  .creed__word + .creed__word::before { display: none; }
  .creed-card { padding: 24px 20px; }

  .channels { padding: 24px 0 26px; }
  .channel__icon { width: 46px; height: 46px; }
  .channel__icon svg { width: 22px; height: 22px; }
  .channel__name { font-size: 12px; }
  .channel__btn { padding: 6px 7px; }
  .channel__pop { width: 168px; padding: 11px 11px 10px; }
  .channel__qr img { width: 132px; height: 132px; }

  /* 资质与认证：照片在窄屏变矮（约 2.6:1），压在上面的标题字号和内边距同步收小，
     排版规则不变（仍是左标题 + 右说明），挤不下时第二行自动换行。 */
  .certs__head { padding: 18px 18px 0; gap: 4px 16px; }
  .certs__title { font-size: 19px; }
  .certs__title span { margin-top: 4px; font-size: 10.5px; letter-spacing: 1.8px; }
}

/* ============ 企业风采：虚化背景 + 文字叠加 ============ */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}

@media (max-width: 992px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
}

/* 全国图上的城市名 */
.mk__label {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* ---------------- 门店明细清单（按城市折叠） ----------------
   ⚠️ 2026-10-07：这块已按用户要求删除（弹窗里已能看到各市门店，清单太冗余）。
   下面原来的 .store-list / .store-group / .store-item 一组样式已全部移除。
   若要恢复清单，需一并恢复 index.html 里的 .store-list-head + #store-list
   和 maps.js 里的 renderList()。 */

@media (max-width: 760px) {
}

/* -------- 首屏 banner 换成「成品图」（2026-10-08） --------
   原来是「照片 + HTML 文案」：照片靠 .hero__bg::after 那层深蓝渐变压暗，
   白字才看得清。现在换成带文案的成品图（1920×560，标题/卖点都做在图里），
   于是要做四件事，缺一件都会出问题：
   1) 去掉压暗遮罩 —— 否则会把成品图压黑，尤其左半边的文案；
   2) 裁切改成「左对齐 + 贴顶」—— 成品图文案都在左侧，这样任何宽度下都不会裁到字，
      多出来的部分从右侧（车型照片 / 品牌墙）裁走；
   3) 高度回到 560（= 图片原始高度），内容（按钮 / 圆点 / 栏目锚点）沉到底部，
      落在成品图下方的留白里，不会盖住图里的标题；
   4) 原来的三屏 HTML 文案撤下（见 index.html 注释），改由成品图承担。 */
.hero {
  min-height: 560px;
  align-items: flex-end;
  padding: calc(var(--header-h) + 20px) 0 26px;
}
/* 顶部压暗（2026-10-08）：成品图的右上角（4S 品牌墙那屏）是浅色，
   白色导航压上去几乎看不见 —— 之前为成品图把整层遮罩关掉了，现在改成
   「只铺顶部、向下渐隐」：高度 160px 盖住头部（88px）再渐隐，
   对成品图里的标题只在上沿有一点点压暗，几乎看不出来。 */
/* 首屏整体调色 —— 遮罩只做「保导航 + 轻微层次」，不再压在成品图标题上。
   2026-10-08 业主意见：三张成品图的标题「太暗」。
   根因量出来了：图上标题本身是接近纯白（实测 p95 ≈ 240），
   是这一层遮罩在标题所在的高度叠了约 30% 的深蓝，
   把白字压到 ~188（实测渲染值），看着就成了灰字。
   改法：
   1) 顶部渐隐的深蓝只负责头部那一条（74px 头部 ≈ 首屏高的 13%），
      到 26% 就完全退干净 —— 原来一路压到 62%，正好盖住标题；
   2) 暗角大幅减弱（原来中段 .16、四角 .34），只留一点层次；
   3) 纵向明暗只保留下半段，给底部的按钮 / 圆点垫底，上半段不加。
   想更暗：把下面三组 alpha 一起调大；想更亮就一起调小。 */
.hero__bg::after {
  display: block;
  inset: 0;
  height: auto;
  background:
    linear-gradient(180deg, rgba(5, 22, 50, .62) 0%, rgba(5, 22, 50, .30) 14%, rgba(5, 22, 50, 0) 26%),
    radial-gradient(125% 108% at 50% 40%, rgba(5, 20, 46, 0) 0%, rgba(5, 20, 46, .04) 62%, rgba(5, 20, 46, .16) 100%),
    linear-gradient(180deg, rgba(5, 20, 46, 0) 0%, rgba(5, 20, 46, 0) 60%, rgba(5, 20, 46, .14) 100%);
}
.hero__bg-slide { background-position: left top; }
/* 按钮与轮播控件排成一行（原来两行 + 栏目锚点，会盖住成品图里的标签文字） */
.hero__bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px 24px;
}.hero__bar .hero__controls { margin-top: 0; }

/* 视觉隐藏：SEO 与读屏软件可读，页面上看不见（首屏 H1 用） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 小屏专用按钮行：默认不显示（桌面端按钮在 Banner 里） */
.hero-cta-mobile { display: none; }

@media (max-width: 760px) {
  /* 小屏：Banner 里的两个按钮会压住成品图的标签文字，整行隐藏、改到 Banner 下方；
     高度收到 230px —— 成品图按 cover 缩放后可见宽度约占 49%（390 屏）~63%（500 屏），
     而图上最右的文字到 46% 左右，刚好完整可见。 */
  /* 小屏高度只有 230px：把文案收成「只留标题」，按钮统一用 Banner 下方那一行，
     这样高度不会被文字撑高，成品图缩放后左侧文案仍完整可见。 */
  .hero { min-height: 230px; padding: calc(var(--header-h) + 12px) 0 16px; }
  .hero-cta-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px clamp(24px, 4vw, 64px) 0;
  }
}
/* 头部文字在「透明态」再补一点投影：成品图顶部有浅色区域时白字更稳（2026-10-08） */
.site-header--overlay:not(.is-scrolled) .logo img {
  /* 纯白 + 两层投影：近处深色投影保证浅色背景上也看得清，外层白色柔光让它"亮"起来 */
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(4, 18, 42, .55)) drop-shadow(0 0 14px rgba(255, 255, 255, .3));
}
.site-header--overlay:not(.is-scrolled) .main-nav__link,
.site-header--overlay:not(.is-scrolled) .header-phone__num,
.site-header--overlay:not(.is-scrolled) .header-phone__label {
  text-shadow: 0 1px 8px rgba(4, 18, 42, .65);
}
/* -------- 头部 logo 尺寸统一（2026-10-08 业主意见：再大一点） --------
   ⚠️ 必须放在文件最后：原来 ≤1024 的媒体查询里有一条 .logo img { height: 36px }，
   写在它前面会被覆盖（同权重、靠后的生效），窄屏 logo 就一直没变过。 */
@media (max-width: 1024px) { .logo img { height: 46px; } }
@media (max-width: 760px) { .logo img { height: 46px; } }
/* -------- 企业概况右栏照片位（2026-10-08 由三张卡片改成照片） --------
   照片 1200×1080 = 10:9，框按同一比例；高度与原来三张卡片一致（约 468px），
   所以左右两栏仍然齐平、整站不会跟着跳动。悬停轻微放大，跟其它卡片的手感一致。 */
.about-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -36px rgba(16, 40, 80, .5);
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.about-photo:hover img { transform: scale(1.03); }
/* -------- 按钮文字垂直居中（2026-10-08 业主反馈"字体太往下了"） --------
   根因：.btn 里写的是 align-items: flex-end（内容贴底）+ 固定 height: 48px、
   上下又没有内边距，于是文字一直压在下沿。这里改成居中 —— 全站所有按钮一起修正。
   顺带把首屏那个半透明按钮加上毛玻璃，压在 banner 上更有质感。 */
.btn { align-items: center; }
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* -------- 首屏文字整体往左上方移动（2026-10-08 业主意见） --------
   图里的文字是像素、CSS 挪不动，用「放大 + 对齐」换平移余量：
   · 放大到 110% → 图变成 2112×616，比首屏(1920×560)多出 192px 宽、56px 高；
   · 对齐方式 left→-70px、竖向 bottom → 把多出来的空间吃掉：
     文字因此向左约 50px、向上约 47px；
   · 首屏高度仍是 560，不会变扁；底部车轮一带完整保留。
   想移更多：把 -70px 改大（左移更多）、把 110% 调大（上移更多）。
   ⚠️ 只在 ≥761px 生效，小屏不动。 */
@media (min-width: 761px) {
  .hero__bg-slide {
    background-size: auto 110%;
    background-position: -70px bottom;
  }
}
/* -------- 头部压薄（2026-10-08 业主意见：往下滑时白条太高、留白太多） --------
   --header-h 88px → 74px：白底导航条薄了 14px，导航与电话自然上移 7px；
   logo 同步 56 → 52px（上下各留 11px，不至于挤）；
   ≤1024 的小屏 logo 48 → 46px（那边头部本来就只有 66px）。
   首屏顶部内边距与锚点定位都用的是 var(--header-h)，会自动跟着变。 */
/* -------- 资质与认证：往上收 + 与上面连成一片白（2026-10-08 业主意见） --------
   1) 板块上内边距 104px → 56px：标题上方那一大片白收掉；
   2) 「数据统计」那条浅蓝底（.sec--soft）改成白底 —— 于是
      企业概况 → 数据统计 → 资质与认证 连成一片连续的白，
      蓝条本身仍是蓝色卡片，只是它脚下的底不再是浅蓝。
   （标题压在证书照片上的浮层样式由 .certs__head 提供。） */
.sec--certs { padding-top: 56px; }
/* ⚠️ 2026-10-09：底色由 #fff 改成 transparent —— 这一块已经和「企业概况」「数据统计」
   一起套进 `.bg-band--silk`，底色交给那条带**共用的背景层**统一画。
   这里要是还留 #fff，就会把共用的背景层整块盖住（也就没有底纹了）。
   边框那两条归零仍然有效。 */
#stats { background: transparent; border-top: 0; border-bottom: 0; }
/* -------- 证书标题与上方「企业概况」对齐（2026-10-08 业主意见） --------
   浮层原来带 clamp(16px,3.4vw,46px) 的左内边距，桌面端就是 46px ——
   跟「企业概况」标题（贴着容器左边缘）差了整整 46px，两段标题不在一条竖线上。
   这里把左内边距归零，标题左边缘与容器、与「企业概况」完全对齐；
   上内边距保留（字不能贴着照片上沿）。
   想再往里挪一点：给 padding-left 一个小的固定值即可（如 8px）。 */
/* 2026-10-08 第二轮：上一版把左内边距归零去对齐「企业概况」，结果标题贴着证书图
   左边缘、像被切掉 ✗。这里留出一段随窗口缩放的空白（桌面约 26px、小屏约 16px），
   标题不再贴边；比原来的 46px 收窄，仍比"贴边"舒展。 */
.certs__head { padding-left: clamp(16px, 1.8vw, 26px); }
/* -------- 产品中心：4 张卡片完全等高、内部逐块对齐（2026-10-08 业主意见） --------
   卡片外框本来就被网格拉伸成等高，但对不齐的是「卡片内部」：
   四段描述的换行数不同（2 行 / 3 行）、标签换行数也不同，
   于是标题下面的每一块（描述 / 标签 / 底部质保行）在不同卡片上高低不一。
   这里给三段内容各自留出固定最小高度，四张卡片就从标题到页脚逐块对齐：
   · 描述：固定 3 行高（原来 2 行的卡片会补到 3 行）；
   · 标签：固定 2 行高（一行标签的卡片补到两行）；
   · 底部行继续用 margin-top: auto 贴底（原本就是）。
   字体/行高改了的话，这两个数值要跟着调（3 行 = 3 × 1.8em；两行标签 ≈ 58px）。 */
.grid-4 { align-items: stretch; }
.product__desc { min-height: calc(3 * 1.8em); }
.product__features { min-height: 58px; align-content: flex-start; }
/* -------- 产品中心标题横排（2026-10-08 业主意见："产品中心放在左侧"） --------
   原来用默认的 .sec-head：标题 / 英文 / 说明 三行居中竖排。
   现在拆成左右两块、两端对齐：左边「产品中心 + PRODUCT CENTER + 短线」，
   右边一行说明，二者底边对齐；窄屏自动改成上下排列、左对齐。 */
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 44px;
  max-width: none;          /* 默认 .sec-head 是 760px 居中 */
  margin: 0 0 44px;
  text-align: left;
}
.sec-head--split .sec-head__line { margin-left: 0; }
.sec-head--split .sec-head__desc {
  margin-top: 0;
  max-width: 620px;
  text-align: right;
}
@media (max-width: 760px) {
  .sec-head--split { align-items: flex-start; }
  .sec-head--split .sec-head__desc { text-align: left; }
}
/* -------- 页脚：联系信息与「官方平台」并排（2026-10-08 业主意见） --------
   原来「官方平台」(.channels) 是独立一行，自己带一条上分隔线；
   现在把「服务热线 / 总部地址」(.footer-contact) 与它包进同一行：
   左边联系信息、右边官方平台与两个图标，中间用一道竖线分隔。
   窄屏（≤900px）自动换行，官方平台回到下面一行并恢复上分隔线。 */
.footer-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 46px;
}
.footer-contact-row .footer-contact { margin: 0; }
.footer-contact-row .channels {
  grid-template-columns: auto auto;   /* 原来是 260px 1fr 的整行布局 */
  align-items: center;
  gap: 26px;
  padding: 0 0 0 32px;
  border-top: 0;
  border-left: 1px solid var(--line); /* 竖分隔线 */
}
@media (max-width: 900px) {
  .footer-contact-row { align-items: flex-start; }
  .footer-contact-row .channels {
    width: 100%;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line); /* 换行后恢复横分隔线 */
  }
}
/* -------- 页脚微调（2026-10-08 业主意见，三处） --------
   1) 最上面那行快捷导航（药丸按钮）压薄：
      下内边距 40→24px、与下方内容的间距 44→28px，药丸本身也小一号（8px 22px → 6px 18px，
      字号 14.5→13.5px），整条不再那么占地方；
   2) 左下角「彩一膜业 + 一句话」更紧凑：logo 44→40px、标语上间距 18→10px、行高 1.9→1.7；
   3) 联系信息与官方平台之间的**竖分隔线去掉** —— 业主说它们是一个板块，
      改用间距区分（这一处改的是 .footer-contact-row .channels 的 border-left）。 */
.footer-quick { padding-bottom: 24px; margin-bottom: 28px; }
.footer-quick a { padding: 6px 18px; font-size: 13.5px; }
.footer-brand img { height: 40px; }
.footer-brand__slogan { margin-top: 10px; line-height: 1.7; }
.footer-contact-row .channels { padding-left: 0; border-left: 0; }
/* -------- 产品中心改白底（2026-10-08 业主意见） --------
   原来用的是 .sec--soft（极浅的蓝灰底），现在改成白底 ——
   于是 企业概况 → 数据统计 → 资质与认证 → 产品中心 连成一片连续的白。
   卡片本来就是白底，白底上容易"糊"在一起，所以给它们补一层很淡的投影
   （悬停时本来就有更强的投影，这条不影响悬停效果）。

   ⚠️ 2026-10-09：底色由 #fff 改成 transparent —— 产品中心已和「技术实力」
   一起套进 `.bg-band--blue`，底色交给那条带**共用的背景层**统一画。
   这里要是还留 #fff，就会把共用的背景层整块盖住（也就没有底纹了）。 */
#products { background: transparent; border-top: 0; border-bottom: 0; }
#products .product { box-shadow: 0 18px 38px -30px rgba(16, 40, 80, .45); }
/* -------- 产品卡顶部：蓝色图标块 → 照片（2026-10-09 业主意见） --------
   原来 .product__visual 是蓝色渐变 + 白色图标；现在换成实拍产品图。
   图框高度仍是 168px（固定，不改卡片节奏）；图片 900×540 = 5:3，
   与桌面端图框（约 280×168）比例一致，因此基本不裁；窄屏卡片变宽时用
   object-fit: cover 居中裁切，不会变形、不会留白。
   原来那层装饰性光斑（::after 的模糊圆）在照片上没有意义，已关掉；
   细网格（::before）保留 —— 5% 白色叠在照片上只增加一点点质感。 */
.product__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transition: transform .6s var(--ease);
}
.product:hover .product__visual img { transform: scale(1.05); }
.product__visual::after { display: none; }
/* -------- 照片下沿接缝（2026-10-09 业主意见「蓝色线美化一下」） --------
   那条 1px 蓝线是穿帮，已去掉。改用一层极淡的内阴影当接缝：
   照片像"浮"在白卡上，边界干净、有层次，但不会出现硬邦邦的色带。
   想要一条明显的品牌色细线，把下面这条换成
   border-top: 2px solid var(--brand); 即可。 */
.product__body { box-shadow: inset 0 15px 17px -15px rgba(16, 40, 80, .5); }
/* ==========================================================================
   背景：恢复白色打底（2026-10-09 业主决定）
   --------------------------------------------------------------------------
   业主先后试过「浅灰 / 深灰 / 深灰+柔光雾面 / 6 张图片底纹」几轮，最终决定回到
   最初的白色打底。这里把之前所有"背景实验"的代码**整段删除**（不是覆盖），
   配色因此回到 :root 的原始定义：
     · body 走 var(--bg) = #ffffff（白底）；
     · .sec--soft 恢复原来的浅蓝灰交替底（radial-gradient + #f1f5fa）；
     · #stats / #products 恢复实白；
     · 图片底纹层 body::before 整条删除 —— 现在没有任何图片背景。
   当时试过的那些整页背景素材已于 2026-10-10 全部删除（8 张，共 617 KB），
   备份在 F:\彩一项目\_备份\背景素材-20261010\，git 历史里也有。
   本目录现在只剩两张**仍在用**的板块底纹：site-bg-silk.jpg（企业概况那条带）与
   site-bg-blue.jpg（产品中心那条带），见 .bg-band--silk / .bg-band--blue 两段。
   ========================================================================== */

/* -------- 首屏 Banner 换新图 + 去掉全部压暗/渐变（2026-10-09 业主意见） --------
   业主给来三张重新导出的首屏成品图（与原来那三屏同一套版式），要求
   「做 banner 滚动的背景图，不要虚化和渐变」。
   1) 图片：直接同名覆盖 assets/img/culture/banner-01/02/03.jpg，
      HTML 与第 11 行的预加载一行都不用改。三屏顺序不变：
        banner-01 = 彩一膜业 · 专业汽车贴膜服务商（海边车型）
        banner-02 = 正品产品 + 专业施工（刮水板）
        banner-03 = 与 4S 集团店同行（品牌墙）
   2) 去掉压暗层：`.hero__bg::after` 这层从 2026-10-08 起专门负责「顶部压暗保导航
      + 四周暗角 + 底部垫底」，本质就是一整层深蓝渐变。业主这次明确不要渐变，
      于是整层关掉（桌面 3233 行那条、以及 ≤760 小屏 3046 行那条会一起失效）。
      ⚠️ 其它一律不动：`.hero__bg` 底色、`.hero__bg::before` 格纹、三屏的
      裁切与缩放（left top / 110% 放大）全部照旧；将来想把压暗找回来，
      删掉下面这一行即可。
   3) 没有任何模糊 —— 首屏图一直是原图直接铺开，9px 模糊只用在
      #about / #products 那类板块底纹上，与首屏无关。
   ========================================================================== */
.hero__bg::after { display: none; }

/* -------- 资质与认证：改用整幅「证书 + 奖杯 + 天空」背景（2026-10-09 业主意见） --------
   业主给的图 3330×1258（约 2.65:1），构图本身就是「左边留天空放标题、右边放证书和奖杯」，
   所以直接整幅铺成板块背景，原来的标题浮层正好落在左侧天空上。
   说明（2026-10-09 第三版，业主最终确认）：业主明确要用他给的那张原图（3330×1258）
   做背景并"虚化一点"，因此回到直接用原图处理：
     ① 缩到 2400 宽；② 虚化 1/10（约 10px，云和奖杯仍保留轮廓感）；
     ③ 轻度提亮：原图最暗处只有 29（近黑），完全不提会在虚化后留黑斑，
        所以把最暗抬到 185 —— 只压黑、不洗白，保留结构。
   ⚠️ 需要知道的取舍：这张图右半幅是证书/奖杯/展示台，虚化后会在卡片旁形成
      一片柔和浅色团（这是图片内容，不是投影）；要完全避开只能只取天空那一段。
   ⚠️ 换图：覆盖 assets/img/certs/certs-bg.jpg，并把下面 ?v=7 递增。
   ④ 抖动（dither）：大块渐变色在 8 位色深 + JPEG 下会出现"色带断层"（实测最长
      连续同值达 210px，放大能看到一级级台阶）。给每个通道加 ±2.2 的随机噪声可把
      台阶打散（实测降到 46px），噪声必须配高画质保存（q95），低画质 JPEG 会把噪声抹掉。
这张背景图做了两步处理：① 虚化（降 1/22 再放大 ≈ 22px 高斯模糊）；
   ② 压白（把最暗处抬到 232 以上）—— 模糊后的证书/奖杯/展示台会形成一块块深色团，
   看着像"阴影脏印"，压白之后只留柔和天光，背景干净不抢内容—— 它是装饰底，要柔，
   不能跟上面那张清晰的证书卡片抢注意力。原来的白底证书合成图（overview.jpg）
   继续放在卡片里、压在虚化背景之上，版式不变。
   ⚠️ 选择器必须带 .sec（见下面的权重说明），否则会被 .bg-band > .sec 重置。
   ⚠️ 换图：直接覆盖 assets/img/certs/certs-bg.jpg —— 但**必须同时把下面的 ?v=2 改成 ?v=3、?v=4…**
      （服务器对 /assets/ 发 max-age=604800，即 7 天强缓存；不换版本号的话，
       你自己和访客都会看到旧图，而且刷新也未必生效）。
   ⚠️ 调高度：改下面 min-height 里的 37.7vw —— 这个数正好等于背景图的高宽比
      (1258/3330)，取这个值图刚好不被裁；调小会裁上下，调大会裁左右。 */
/* ⚠️ 必须写成 .sec.sec--certs（权重 0,2,0）：
   站内有一条 `.bg-band > .sec { background-image: initial }`（蓝色背景带那套），
   资质与认证的 section 正好被包在 .bg-band 里，而 `.bg-band > .sec` 的权重是 (0,2,0)，
   单写 `.sec--certs` 只有 (0,1,0) 会被它重置成 initial —— 背景图就没了。
   （padding 不受那条影响，所以会出现"规则只生效一半"的假象。） */
.sec.sec--certs {
  padding: 64px 0 84px;
  /* -------- 2026-10-10 方案二：保留天空图，只把它上沿渐隐 --------
     背景：这一块原先自己铺了一张天空图（certs-bg.jpg），把「企业概况 → 数据统计」
     那条 `.bg-band--silk` 共用的丝绸层整块盖住，于是「数据统计 → 资质与认证」
     的交界处出现一条硬边（实测该处蓝通道一跳 18.5，眼睛能看出"中间这块底色不一样"）。
     业主拍板走**方案二**：天空图留着，只让它的**上沿渐隐**融进上面那条带。
     做法：天空图从 section 自己的 background 挪到下面那条 ::before 上，并加顶部 mask。
     ⚠️ 这里必须是 **transparent**（不能留底色）—— 否则 section 自身底色会盖住
        丝绸共用层，"渐隐露出来的"就成了纯色块，等于换了个地方又出现硬边。 */
  background: transparent;
  position: relative;                    /* 天空图伪元素的定位基准 */
}

/* 天空图层：整幅铺满这一块，**上沿 140px 由透明渐变到完全显示**。
   为什么用 mask 而不是"叠一层纯色渐变"：叠色得先猜"上面到底是什么颜色"，
   猜偏一点就等于把硬边挪个位置；mask 是直接露底，露出来的必然就是上方丝绸层的
   真实颜色，两边永远对得上。下沿**不做渐隐** —— 这一块与下面「产品中心」交界处
   实测色差只有 3.5（基本无缝），动了反而会出新问题。 */
.sec--certs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                           /* 沉到内容之下（.bg-band 的 isolation 兜住，不会掉到 body 后面） */
  background: #dce9f7 url("../img/certs/certs-bg.jpg?v=7") center center / cover no-repeat;
  pointer-events: none;
  /* 2026-10-10 第二轮：**上沿和下沿都淡出**。
     上沿 140px（融进上面丝绸带）、下沿 130px（融进下面产品中心那条蓝带）。
     业主实测反馈「上面改好了，下面还是有一条」—— 因为原来只做了上沿：
     天空图底部直接怼上蓝带的顶部，两侧色差 4~5，中间还夹着一条 1px 的暗色缝（实测跳 17~23）。
     现在两侧都渐隐到**页面底色**，接壤处左右都是同一个底色，硬边和色缝一起没了。
     ⚠️ 下沿 130px 只压到证书照片底部一点点，而照片底色本来就是白（#f6f6f6）→ 看不出区别。 */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0, #000 140px,
      #000 calc(100% - 130px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0, #000 140px,
      #000 calc(100% - 130px), rgba(0, 0, 0, 0) 100%);
}

/* 窄屏：这一块整体矮得多（证书合影按比例缩到约 1/3 高），
   上下渐隐区同步收小，否则半张天空都被洗淡、看着像"上面发白下面发蓝"。
   蓝带的顶部渐隐也跟着收（否则窄屏下产品中心上半屏都成了白的）。 */
@media (max-width: 760px) {
  .sec--certs::before {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0, #000 88px,
        #000 calc(100% - 84px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0, #000 88px,
        #000 calc(100% - 84px), rgba(0, 0, 0, 0) 100%);
  }
  .bg-band--blue::before {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60px, #000 130px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60px, #000 130px);
  }
}

/* 窄屏不再单独调取景：现在背景统一取"纯天空"那一段，
   窄屏照旧用同一个 12%，避免手机上图省移动后又把卡片虚影带出来。 */

/* 2026-10-09 业主意见「阴影去一下」：白卡的投影撤掉。
   原来那条是 0 1px 4px rgba(0,0,0,.06)（本来就是极淡的一层），
   现在背景是虚化图，投影叠上去反而显脏，直接关掉更干净。
   ⚠️ 想找回投影：删掉这一条即可。 */
.sec--certs .certs__figure { box-shadow: none; }

/* -------- 首屏：三张新图「原样呈现」（2026-10-09 业主意见：不要虚化、不要渐变） --------
   业主重新导出三张首屏成品图（1920×560，与旧图同比例 3.428:1 —— 版式与裁切完全不变），
   要求"不要虚化、不要渐变"。核查结论：
     · 虚化：首屏从来没有 filter；站内那几处 blur(9px) 是 #about / #products 的板块底纹，与首屏无关；
     · 渐变：压暗层 .hero__bg::after 早已 display:none（第 3526 行）；
     · 只剩这层格纹遮罩 .hero__bg::before（用 linear-gradient 画的 4.5% 白色网格 + 径向遮罩），
       它同样是"叠在照片上的渐变层"，而且新图自带科技纹样，叠上去会重影 —— 一并关掉。
   ⚠️ 想找回格纹：删掉下面这一行。
   ⚠️ 换图：覆盖 assets/img/culture/banner-01/02/03.jpg，并把 index.html 里那 4 处的
      ?v=2 递增（?v=3、?v=4…）。服务器对 /assets/ 发 max-age=604800（7 天强缓存），
      不动版本号的话，你和访客都会看到旧图。 */
.hero__bg::before { display: none; }

/* -------- 合作伙伴页（2026-10-10 新增）：品牌分组 + 标签墙 --------
   页面主体是文字，所以这里只补 4 条轻量样式：分组标题、分组间距、标签流式排列、
   标签里的英文小字。卡片部分直接复用 .culture-card（企业文化的卡片），风格自动统一。
   ⚠️ 想改标签外观：改下面 .partner-tags span 那两条即可。 */
.partner-card__en { margin-left: 10px; font-size: 12px; font-weight: 600; letter-spacing: .6px; color: var(--text-3); }
.partner-card__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  font-size: 12px;
  color: var(--text-2);
}
.partner-group { margin-top: 34px; }
.partner-group__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
}
.partner-group__title span { font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: .5px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.partner-tags span {
  display: inline-flex;
  align-items: baseline;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  font-size: 13.5px;
  color: var(--text);
}
.partner-tags span i { font-style: normal; margin-left: 7px; font-size: 11.5px; color: var(--text-3); letter-spacing: .3px; }