/* 科丽艾官网 · 基础样式 + 设计令牌 */
/* 状态：已按 2026-08-31 首页视觉稿落地配色与组件原子类 */
/* 字体体系：
   标题 = 方正悠黑（中文）+ Inter（西文/数字，按字形自动回落）
   正文 = 系统默认（PingFang SC / Microsoft YaHei）
   西文/数据/域名/电话 = DIN Pro → Inter
   已在 <head> 引入 Google Fonts「Inter」；方正悠黑如需自托管见 css/fonts/README.txt */

/* 方正悠黑（标题字体）：优先使用本机已安装字体；自托管时按 css/fonts/README.txt 启用 url() */
@font-face {
  font-family: "方正悠黑";
  src: local("方正悠黑"), local("FZYuanHei-Medium"), local("Founder YouHei"), local("FounderYuanHei");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- 设计令牌（Design Tokens）---------- */
:root {
  /* 主色：云蓝（#C9DCE3 浅云蓝作品牌主色：大背景/浅块/页脚底；#2C6E8F 深云蓝作可读锚点：标题/导航/logo/主按钮/白字大块） */
  --c-brand: #C9DCE3;
  --c-brand-dark: #9DB8C9;
  --c-brand-2: #B5D0DC;
  --c-brand-deep: #2C6E8F;

  /* 辅色：暖调琥珀金（占比 ~5%，仅用于 CTA / 图标高亮 / 装饰线 / 编号小标签，绝不多用） */
  --c-accent: #C07A2E;
  --c-accent-hover: #D89A47;
  --c-accent-deep: #974F12;

  /* 透明暖调：空气流线、渐变背景、辅助图形（少量使用） */
  --c-ice: #EAD7B8;
  /* 暖金光晕（用于 hero 柔光与节点） */
  --c-glow: #E8BE78;

  --c-mid: #B5D0DC;
  --c-water: #9DB8C9;
  --c-orange: #D98A3D;
  --c-danger: #C0492F;

  /* 70% 基础色：柔光白 / 浅灰，凸显呼吸感 */
  --c-text-heading: #2C6E8F;
  --c-text-body: #333333;
  --c-text-secondary: #666666;
  --c-text-muted: #A1A1A1;

  --c-border: #E4E8EE;
  --c-surface: #F4F6F8;
  --c-white: #FFFFFF;

  /* 页脚：品牌深天蓝（2026-09-24 由纯黑 #0A0A0A 改为深天蓝） */
  --c-footer-bg: #2C6E8F;
  --c-footer-text: rgba(255, 255, 255, 0.80);
  --c-footer-line: rgba(255, 255, 255, 0.20);

  /* 图片占位色块（蓝系；接入实拍图后删除 .ph 即可） */
  --ph-a: #DCE4EC;
  --ph-b: #C2D0DE;
  --ph-c: #9DB2C8;
  --ph-d: #6E8AA8;
  --ph-e: #3E5C7E;
  --ph-f: #2A4A6E;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --container: 1200px;
  /* 满宽区块（页眉 / 通栏页正文）的左右留白：窄屏恒为 20px，宽屏平滑放大到 48px。
     901–1100 这段中英文导航本身就挤，留白不能去抢可用宽度（会把语言胶囊挤出容器），
     所以约 1100px 及以下与原来的 20px 完全一致；1440→38px，≥1650 封顶 48px。 */
  --gutter: clamp(20px, calc(5.6vw - 42px), 48px);
  --space-section: 96px;
  --space-section-sm: 88px;
  /* 正文：系统默认 */
  --font-base: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* 标题：中文用方正悠黑，西文/数字按字形回落到 Inter */
  --font-title: "Inter", "方正悠黑", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 西文 / 数据 / 域名 / 电话：DIN Pro 优先，回落 Inter */
  --font-num: "DIN Pro", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-base);
  color: var(--c-text-body);
  line-height: 1.6;
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 92px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

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

/* ---------- 顶部导航 ---------- */
.site-header {
  background: var(--c-white);
  border-bottom: 1px solid rgba(201, 220, 227, 0.06);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(44, 110, 143, .08);
  border-bottom-color: rgba(201, 220, 227, .22);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  /* 页眉满宽（2026-09-28 用户要求「logo 放到左边」）：解除 .container 的 1200px 居中约束，
     logo 贴屏幕左缘、预约按钮贴右缘，导航自然居中；页面内容区仍走 .container 居中。
     左右留白（2026-09-29 用户要求）：原来沿用 .container 的 20px，logo 贴边太紧不好看。
     改用全站统一的 --gutter（见 :root）。 */
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  text-decoration: none;
}
/* CLA 图形标记：源图已裁到内容边界（216×81），40px 高 → 约 107px 宽 */
.logo > img {
  height: 40px;
  width: auto;
  display: block;
}
/* 注册商标标注 ®：紧跟 CLA 图形商标，颜色跟随所标注的商标（白底深色 / 深底白色）
   注意 .logo 是 inline-flex + gap:8px，<sup> 作为 flex item 会白吃 8px 间隙，
   故用负左边距抵消，保证 logo 整体宽度不变 */
.logo .tm {
  align-self: flex-start;
  margin: 0 0 0 -6px;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #1A1A1A;
}
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.logo-name {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 800;
  color: #1A1A1A;
  letter-spacing: 0.01em;
}
/* 「呼吸里的爱」：新 VI 中为「绿色 + 宽字距」的无衬线字，
   故弃用旧的手写笔刷体位图 slogan-brush.png，改用文本还原（清晰、可随底色走、字距可控）。
   注意 letter-spacing 会在末字之后也留出一份空隙，用等量负右边距吃掉，保证文字块右缘齐平。 */
.logo-slogan {
  margin-top: 4px;
  margin-right: -0.5em;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5em;
  line-height: 1;
  color: #77AA57;
  white-space: nowrap;
}
.main-nav ul { list-style: none; display: flex; gap: 10px; }
.main-nav > ul > li { position: relative; }
.main-nav a {
  display: block;
  padding: 10px 18px;
  color: var(--c-text-body);
  white-space: nowrap;
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover { color: var(--c-brand-deep); background: rgba(201, 220, 227, 0.05); }
.main-nav li.active > a { font-weight: 600; color: var(--c-brand-deep); box-shadow: inset 0 -2px 0 var(--c-accent); }
.has-sub > a::after { content: " ▾"; font-size: 11px; color: var(--c-text-muted); }

/* 导航右侧工具图标（搜索 + 汉堡） */
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.header-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-heading);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.header-tools a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(192, 122, 46, 0.05);
}
.lang-switch .lang-current { color: var(--c-brand-deep); }
.lang-switch .lang-divider {
  color: var(--c-text-secondary);
  margin: 0 4px;
  font-weight: 400;
}
.lang-switch .lang-alt { color: var(--c-text-secondary); }
.header-tools a:hover .lang-current,
.header-tools a:hover .lang-divider,
.header-tools a:hover .lang-alt { color: var(--c-accent); }
.header-tools svg { width: 22px; height: 22px; }

/* ---------- 中英文切换胶囊（2026-09-28 新增，全站 40 页页眉） ----------
   结构：<div class="header-tools"><a class="lang-switch" href="…">
           <span class="lang-current">中</span><span class="lang-divider">/</span><span class="lang-alt">EN</span></a></div>
   lang-current = 当前语言（深天蓝高亮），lang-alt = 可切换到的另一种语言（灰），整颗胶囊指向另一种语言。 */
.lang-switch { min-width: 62px; letter-spacing: .02em; }
/* 英文版 slogan 是英文单词，中文版的 .5em 字距会把 logo 撑得过宽，收紧一档 */
html[lang="en"] .logo-slogan {
  font-size: 11px;
  letter-spacing: .16em;
  margin-right: -.16em;
}
@media (max-width: 480px) {
  .lang-switch { min-width: 54px; padding: 0 10px; font-size: 12px; }
}

/* 英文导航词条比中文长得多（Air Purification / Fresh Air Systems / HVAC Engineering …），
   901–1100px 区间会把语言胶囊和预约按钮挤出容器 —— 只在英文版收紧导航间距。
   用 html[lang="en"] 限定作用域，中文版已调好的间距不受影响。2026-09-28 */
@media (max-width: 1200px) {
  html[lang="en"] .main-nav ul { gap: 2px; }
  html[lang="en"] .main-nav a { padding: 10px 11px; font-size: 14px; }
}
/* 1201–1359px：英文导航在绝对居中断点（≥1240）后仍偏宽，1280 宽度下右缘会贴上语言胶囊
   （实测 1280 时 nav 右缘 1012 == lang 左缘 1012），这段沿用 ≤1200 的紧凑间距。2026-09-28 */
@media (min-width: 1201px) and (max-width: 1359px) {
  html[lang="en"] .main-nav a { padding: 10px 7px; font-size: 13px; }
}
@media (max-width: 1100px) {
  html[lang="en"] .main-nav a { padding: 10px 7px; font-size: 13px; }
  html[lang="en"] .lang-switch { min-width: 56px; padding: 0 10px; }
}
.has-sub .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  min-width: 236px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 18px 48px rgba(44, 110, 143, 0.16);
}
.has-sub:hover .submenu,
.has-sub.open .submenu { display: block; }
.has-sub .submenu a {
  position: relative;
  display: block;
  padding: 12px 16px 12px 18px;
  border-radius: 6px;
  color: var(--c-text-body);
  transition: background 0.18s ease, color 0.18s ease;
}
/* 悬停：浅云蓝底 + 左侧浮出一条暖金细线（纯文字菜单的层级提示） */
.has-sub .submenu a::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.has-sub .submenu a:hover {
  background: rgba(201, 220, 227, 0.30);
  color: var(--c-brand-deep);
  font-weight: 600;
}
.has-sub .submenu a:hover::before { opacity: 1; }

/* 窄屏回退：901–1100px 时导航右侧几项离视口边缘很近，
   236px 的面板若仍向左对齐会顶出屏外 → 改为向左展开（右边缘对齐父项） */
@media (min-width: 901px) and (max-width: 1100px) {
  .has-sub .submenu {
    left: auto;
    right: 0;
  }
}

/* 汉堡菜单按钮：桌面隐藏，移动端显示（由 nav.js 注入到 .nav-wrap） */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 12px;
  flex: 0 0 auto;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  color: var(--c-brand-deep);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle[aria-expanded="true"] { border-color: var(--c-accent); color: var(--c-accent); background: rgba(192, 122, 46, 0.05); }

.main-nav .nav-cta { display: none; }

/* 宽屏页眉三段式（2026-09-28 用户要求）：logo 贴左、导航 + 预约按钮整体居中、
   语言胶囊贴右。左右各占 1fr 等宽，中间组自然居中，按钮紧跟在「品牌故事」右侧。
   DOM 顺序已是 logo | nav | 预约按钮 | header-tools（move_cta.py 已把按钮挪到胶囊之前）。
   1240 以下不启用：回退 space-between，nav 留在文档流里避免与 logo / 胶囊重叠 */
@media (min-width: 1240px) {
  .site-header .logo { flex: 1 1 0; min-width: 0; }
  .site-header .main-nav { flex: 0 0 auto; }
  .site-header .btn-primary { flex: 0 0 auto; margin-left: 16px; }
  .site-header .header-tools {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    margin-left: 16px;
  }
}

/* 移动端：导航收起为顶部下拉面板（≤900px） */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* header 顶部的免费预约按钮在手机上收进菜单 */
  .site-header .btn-primary { display: none; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 18px 48px rgba(44, 110, 143, 0.16);
    padding: 10px 16px 18px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 90;
  }
  body.nav-open .main-nav { display: block; }

  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav > ul > li { position: static; }
  .main-nav a { padding: 13px 14px; border-radius: 8px; white-space: normal; }
  .main-nav li.active > a { box-shadow: none; background: rgba(192, 122, 46, 0.07); }

  /* 二级菜单：移动端平铺展开，不浮层 */
  .has-sub .submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    min-width: 0;
    padding: 2px 0 4px 12px;
    background: transparent;
  }
  .has-sub .submenu a { padding: 11px 14px; font-size: 14px; }
  /* 移动端平铺列表里不需要悬停竖线（触摸设备 hover 会残留） */
  .has-sub .submenu a::before { display: none; }
  .has-sub > a::after { content: " ▾"; }

  /* 移动端菜单内的免费预约按钮 */
  .main-nav .nav-cta { display: block; margin-top: 10px; }
  .main-nav .nav-cta a {
    display: block;
    padding: 13px 14px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: var(--c-accent);
    border-radius: 10px;
  }
  .main-nav .nav-cta a:hover { background: var(--c-accent-hover); color: #fff; }

  /* 移动端 logo 文字适当缩小 */
  .logo-name { font-size: 15px; }
  .logo-slogan { font-size: 11.5px; letter-spacing: 0.42em; margin-right: -0.42em; }
}

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-heading);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.btn-primary:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: #fff; }
.btn-primary:active { background: #7A3E0E; border-color: #7A3E0E; color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn-outline:hover { background: var(--c-accent); color: var(--c-white); }

.btn-outline-white {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}
.btn-outline-white:hover { background: var(--c-white); color: var(--c-accent-deep); }

/* ---------- 板块标题 ---------- */
/* 西文 / 数字专用字体工具类（域名、电话、数据指标） */
.latin { font-family: var(--font-num); }

.section-header { margin-bottom: 44px; }
.section-eyebrow {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--c-brand-deep);
  text-transform: uppercase;
}
.section-dash {
  width: 60px;
  height: 3px;
  background: var(--c-accent);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  color: var(--c-text-heading);
  line-height: 1.35;
  margin: 14px 0 12px;
  padding: 0;
  border: none;
}
.section-desc {
  font-size: 16px;
  color: var(--c-text-secondary);
  line-height: 1.75;
  max-width: 760px;
}

/* ---------- 卡片通用 ---------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); border-color: var(--c-border); }
.card-body { padding: 28px; }
.card-title { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 8px; }
.card-text { font-size: 14px; color: var(--c-text-secondary); line-height: 1.75; }
.card-link { font-size: 14px; font-weight: 500; color: var(--c-accent); margin-top: 12px; display: inline-block; }
.card-link:hover { color: var(--c-accent-deep); }

/* ---------- 服务对象 Logo 云（球形悬停效果） ---------- */
.logo-cloud {
  --logo-scale: 1;
  position: relative;
  height: clamp(300px, 34vw, 440px);
  margin: 0 auto;
}
/* 独立页面版（cases.html）：Logo 云放大；已并入「行业覆盖」模块，自带上下留白 */
.logo-cloud--large {
  --logo-scale: 1.5;
  height: clamp(440px, 50vw, 640px);
  margin: 56px auto 44px;
}
.logo-cloud .logo-item {
  position: absolute;
  width: calc(var(--sz) * var(--logo-scale) * 1px);
  height: calc(var(--sz) * var(--logo-scale) * 1px);
  transform: translate(-50%, -50%) translate(var(--fmx, 0px), var(--fmy, 0px));
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: transform 0.32s var(--ease-out-quart), box-shadow 0.32s var(--ease-out-quart),
    border-color 0.32s var(--ease-out-quart), color 0.32s var(--ease-out-quart);
  cursor: pointer;
}
.logo-cloud .logo-item:hover {
  transform: translate(-50%, -50%) translate(var(--fmx, 0px), var(--fmy, 0px)) scale(1.12);
  z-index: 5;
  border-color: var(--c-accent);
  color: var(--c-brand-deep);
  box-shadow: 0 10px 28px rgba(30, 143, 208, 0.2);
}
.logo-cloud .logo-item.featured {
  border-color: var(--c-accent);
  background: var(--c-white);
  color: var(--c-brand-deep);
  box-shadow: 0 8px 24px rgba(30, 143, 208, 0.18);
}

/* ---------- 客户 LOGO 墙（cases.html「覆盖多行业 · 多场景」） ----------
   33 个客户商标要求全部展示 → 改用居中的弹性换行网格，替代原先的绝对定位散射
   （散射布局装不下 33 个，且窄屏必然重叠）。
   图片统一规格：裁到内容边界 + 长边 280px 透明 PNG（images/partners/），
   所以这里只要固定「图片占贴片 70%」即可让所有商标视觉大小一致。 */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1120px;
  margin: 52px auto 8px;
}
.logo-wall__item {
  flex: 0 0 auto;
  width: 144px;
  height: 144px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform .25s var(--ease-out-quart), border-color .25s ease, box-shadow .25s ease;
}
.logo-wall__item img { display: block; width: 70%; height: 70%; object-fit: contain; }
.logo-wall__item:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
  box-shadow: 0 14px 30px rgba(30, 143, 208, .18);
}
@media (max-width: 1100px) {
  .logo-wall { gap: 15px; }
  .logo-wall__item { width: 122px; height: 122px; }
}
@media (max-width: 780px) {
  .logo-wall { gap: 13px; max-width: 560px; }
  .logo-wall__item { width: 96px; height: 96px; }
}
@media (max-width: 480px) {
  .logo-wall { gap: 10px; }
  .logo-wall__item { width: 74px; height: 74px; }
}

/* ---------- 实力数据条 ---------- */
.stats-band {
  background: var(--c-brand-deep);
  padding: 76px 0;
}
.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  text-align: center;
}
.stat-item { flex: 1; }
.stat-value {
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat-label {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 10px;
}

/* ---------- 新闻卡片 ---------- */
.news-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; }
.news-card .thumb { height: 220px; background: var(--c-surface); }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card .body { padding: 28px; }
.news-card .meta {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: 12px;
}
.news-card .title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text-heading);
  line-height: 1.5;
  margin-bottom: 10px;
}
.news-card .excerpt {
  font-size: 14px;
  color: var(--c-text-secondary);
  line-height: 1.75;
}

/* ---------- 咨询 CTA ---------- */
.cta-band { background: var(--c-surface); padding: 88px 0; text-align: center; }
.cta-band .section-title { max-width: 800px; margin: 14px auto 12px; }
.cta-band .section-desc { margin: 0 auto 24px; }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: 72px 0 32px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.footer-brand { max-width: 320px; }
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand .logo-name { color: var(--c-white); }
.footer-brand .logo .tm { color: var(--c-white); }
.footer-brand p { font-size: 14px; line-height: 1.75; }
.footer-col h4 { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--c-white); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 14px; color: var(--c-footer-text); }
.footer-col a:hover { color: #E8BE78; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-footer-line);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

/* ---------- 页脚「关注我们」：平台图标常显 + 悬停/点击弹出二维码 ---------- */
/* 页脚高度基本不变；图标纯内联 SVG（由 js/footer-qr.js 注入），颜色跟随文字色 */
/* inline-flex：行宽收缩到图标实际宽度，窄屏下卡片才能对准图标居中，
   而不是按整列居中（列比图标行宽时会明显偏右） */
.qi-row { display: inline-flex; gap: 14px; }
.qi { position: relative; }

.qi__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.40);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.qi__btn svg { width: 22px; height: 22px; display: block; }
.qi:hover .qi__btn,
.qi.is-open .qi__btn {
  border-color: var(--c-glow);
  color: var(--c-glow);
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
}
.qi__btn:focus-visible { outline: 2px solid var(--c-glow); outline-offset: 2px; }

/* padding-bottom 同时充当「视觉间隙」和「悬停桥接区」：
   鼠标从图标移向卡片途中不会掉 hover，避免卡片提前收起 */
.qi__pop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 30;
  padding-bottom: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  /* 关闭时延迟 0.18s 再置 visibility:hidden，让淡出动画走完；
     展开时由下面的 transition-delay:0s 立即显形，不依赖 visibility 插值规则 */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.qi:hover .qi__pop,
.qi.is-open .qi__pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.qi__card {
  position: relative;
  width: 148px;
  padding: 8px 8px 9px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
  text-align: center;
}
.qi__card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 1px;
  transform: rotate(45deg);
}
.qi__code {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #fff;
}
.qi__cap {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.2;
  color: #4A6B74;
  white-space: nowrap;
}

/* 最右一个改为右对齐展开：它右边空间不足，居中会顶出容器 */
.qi-row > .qi:last-child .qi__pop { left: auto; right: -14px; transform: translateY(6px); }
.qi-row > .qi:last-child:hover .qi__pop,
.qi-row > .qi:last-child.is-open .qi__pop { transform: translateY(0); }
.qi-row > .qi:last-child .qi__card::after { left: auto; right: 26px; margin-left: 0; }

/* 页脚整体断点：4 列在 1100px 以下挤不下 → 品牌独占一行，其余列等分换行 */
@media (max-width: 1100px) {
  .footer-grid { flex-wrap: wrap; gap: 34px 28px; }
  .footer-brand { flex: 1 1 100%; max-width: none; }
  .footer-col { flex: 1 1 0; min-width: 0; }
}
/* 窄于 760px 时「关注我们」独占一行（4 枚图标横排需 218px，等分列装不下） */
@media (max-width: 760px) {
  .footer-col--social { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .footer-grid { gap: 30px 0; }
  .footer-col { flex: 1 1 100%; }
}

/* 触屏/窄屏：没有悬停，卡片改在图标行下方居中展开，避免盖住上方内容 */
@media (max-width: 1100px) {
  .qi { position: static; }
  .qi-row { position: relative; }
  .qi__pop,
  .qi-row > .qi:last-child .qi__pop {
    left: 50%;
    right: auto;
    top: calc(100% + 10px);
    bottom: auto;
    padding: 10px 0 0;
    transform: translateX(-50%) translateY(-6px);
  }
  .qi:hover .qi__pop,
  .qi.is-open .qi__pop,
  .qi-row > .qi:last-child:hover .qi__pop,
  .qi-row > .qi:last-child.is-open .qi__pop {
    transform: translateX(-50%) translateY(0);
  }
  .qi__card { width: 168px; padding: 10px 10px 11px; }
  .qi-row > .qi .qi__card::after { display: none; }
  .qi__cap { font-size: 12px; }
  /* 给该列预留展开高度，展开时不会压住下方版权行 */
  .footer-col--social { padding-bottom: 214px; }
}

/* ---------- 主体内容 ---------- */
main { min-height: 50vh; }

/* ---------- 占位块（开发阶段使用）---------- */
.placeholder { border: 1px dashed #ccc; padding: 40px 20px; margin: 16px 0; color: #999; background: #fafafa; text-align: center; }
.placeholder.sm { padding: 24px 16px; }

/* ---------- 面包屑 ---------- */
.breadcrumb { color: #999; font-size: 14px; margin-bottom: 8px; }
.breadcrumb a { color: #666; }

/* =========================================================
   首页板块（2026-09-01 落地）
   ========================================================= */

/* ---------- 板块节奏 ---------- */
.section { padding: var(--space-section) 0; }
.section--surface { background: var(--c-surface); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.section-head .section-desc { margin-bottom: 0; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-accent);
  white-space: nowrap;
}
.text-link svg { transition: transform 0.3s var(--ease-out-quart); }
.text-link:hover { color: var(--c-accent-deep); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- 图片占位色块 ---------- */
.ph {
  position: relative;
  background: var(--ph-a);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph > span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(44, 110, 143, 0.6);
  text-align: center;
  padding: 0 16px;
}
.ph--b { background: var(--ph-b); }
.ph--c { background: var(--ph-c); }
.ph--d { background: var(--ph-d); }
.ph--e { background: var(--ph-e); }
.ph--f { background: var(--ph-f); }

/* =========================================================
   1. 全屏主视觉 Banner
   ========================================================= */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-brand-dark);
}
/* 轮播背景层 */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 7s linear;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
/* 左重右透斜向蒙版：左侧保字可读，右侧大幅露图 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    95deg,
    rgba(157, 184, 201, 0.76) 0%,
    rgba(201, 220, 227, 0.34) 54%,
    rgba(201, 220, 227, 0) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 96px 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--c-accent);
}
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--c-white);
  max-width: 17ch;
  margin-bottom: 24px;
  text-shadow: 0 2px 24px rgba(157, 184, 201, .42), 0 1px 4px rgba(0, 0, 0, .22);
}
.hero-lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 48ch;
  margin-bottom: 40px;
  text-shadow: 0 1px 10px rgba(157, 184, 201, .35);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-scroll {
  position: absolute;
  bottom: 32px;
  right: 38px;
  left: auto;
  transform: none;
  z-index: 2;
}
/* 轮播指示点 */
.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-dot.is-active {
  width: 26px;
  border-radius: 6px;
  background: var(--c-accent);
}
@media (max-width: 768px) {
  .hero-scroll { display: none; }
  .hero-dots { bottom: 22px; gap: 8px; }
  .hero-dot { width: 8px; height: 8px; }
  .hero-dot.is-active { width: 20px; }
}
.hero-scroll i {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  animation: heroScroll 2.4s var(--ease-out-quart) infinite;
}
@keyframes heroScroll {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* 入场动效：只给「当前激活的那组文案」的子元素播放（每组文案是 .hero-copy 包裹层，
   旧的 .hero-inner > * 会把 5 组文案全点亮，且 animation-fill-mode:both 会压过隐藏样式）。
   离场由 .hero-copy 自身的 opacity 过渡负责。2026-09-26 */
.hero-inner > .hero-copy.is-active > * { animation: heroIn 0.9s var(--ease-out-expo) both; }
.hero-eyebrow { animation-delay: 0.05s; }
.hero-title   { animation-delay: 0.14s; }
.hero-lead    { animation-delay: 0.24s; }
.hero-actions { animation-delay: 0.34s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   1b. 首页浅色调 Banner（参考图风格）
   ========================================================= */
.hero--light {
  background-color: #F4F8FC;
  color: var(--c-text-heading);
  min-height: calc(100vh - 92px);
  position: relative;
  z-index: 1;
  box-shadow: 0 24px 55px -28px rgba(44, 110, 143, 0.5);
}
.hero--light .hero-slide { background-position: center right; }
/* 左侧浅色蒙版：保证文字可读，右侧大幅露图（不压深，保留通透科技感） */
.hero--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(244, 248, 252, 0.82) 36%,
    rgba(244, 248, 252, 0.30) 64%,
    rgba(244, 248, 252, 0) 100%
  );
}
.hero--light .hero-inner {
  position: relative;
  z-index: 2;
  /* 5 组文案叠在同一个网格单元里（.hero-copy 全部 grid-area:1/1），
     由 is-active 决定谁可见 —— 不能用 flex，否则 5 组文案会横向并排。2026-09-26 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  min-height: calc(100vh - 92px);
  padding: 110px 0 90px;
}
/* Banner 文案组：与背景图、指示点同步切换（home.js 切 is-active）。
   离场用 opacity 过渡（配合 visibility 延迟隐藏，避免隐藏文案仍能被点到）。 */
.hero--light .hero-copy {
  grid-area: 1 / 1;
  max-width: 600px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .6s var(--ease-out-expo), visibility 0s linear .45s;
}
.hero--light .hero-copy.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .55s ease .08s, transform .6s var(--ease-out-expo) .08s, visibility 0s linear 0s;
}
.hero--light .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  color: var(--c-accent);
  background: rgba(30, 143, 208, 0.08);
  border: 1px solid rgba(30, 143, 208, 0.28);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 28px;
  letter-spacing: 0.16em;
}
.hero--light .hero-eyebrow::before { display: none; }
.hero--light .hero-title {
  color: var(--c-brand-deep);
  text-shadow: none;
  max-width: 14ch;
  margin-bottom: 26px;
}
.hero--light .hero-lead {
  color: var(--c-text-body);
  text-shadow: none;
  max-width: 52ch;
  margin-bottom: 38px;
}
.hero--light .hero-actions { gap: 16px; }
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 420px;
}
.hero-visual img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(201, 220, 227, 0.16));
}
@media (max-width: 900px) {
  .hero--light .hero-inner {
    align-items: end;
    justify-items: center;
    text-align: center;
    padding-bottom: 64px;
  }
  .hero--light .hero-copy { max-width: none; margin: 0 auto; }
  /* 第 3 张（新风）主体在画面中部，手机端 cover 横向只显示约 25% 宽，
     center right 会把主体裁到窗外 → 这张单独改成居中对齐。2026-09-26 */
  .hero--light .hero-slide:nth-child(3) { background-position: center center; }
  .hero--light .hero-title { max-width: none; }
  .hero--light .hero-actions { justify-content: center; }
  /* 移动端：图铺满，文字落在底部，全宽浅蒙版保证可读 */
  .hero--light::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(244, 248, 252, 0.78) 46%,
      rgba(244, 248, 252, 0.94) 100%
    );
  }
}

/* =========================================================
   2. 关于我们
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.about-features {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 32px 0 36px;
}
.about-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--c-text-body);
}
.about-features li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: rgba(30, 143, 208, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8FD0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.about-media { position: relative; }
.about-media .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}
.about-badge {
  position: absolute;
  left: -24px;
  bottom: -24px;
  background: var(--c-accent);
  color: var(--c-white);
  padding: 22px 28px;
  border-radius: var(--radius-md);
  min-width: 168px;
}
.about-badge strong {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.about-badge span { font-size: 13px; opacity: 0.9; }

/* =========================================================
   4. 解决方案展示（参考 vrvlink：全宽大图 + 底部分栏 + 巨序号）
   ========================================================= */
.section--solutions { padding: 0; }
.showcase-media {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
}
/* 轮播图片层：每张对应一个标签 */
.showcase-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.showcase-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s var(--ease-out-quart), transform 6s ease;
}
.showcase-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.showcase-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 去掉蓝调滤镜，改用中性暗角保证白色标题可读 */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.46) 100%
  );
}

/* 顶部标题区：宽幅左对齐（参考 vrvlink 的 86vw 容器，文字不被版心限制） */
.showcase-inner {
  position: relative;
  z-index: 2;
  width: 90vw;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 110px) 0 0;
  color: var(--c-white);
}
.showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.showcase-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.showcase-tag {
  background: var(--c-white);
  color: var(--c-brand-deep);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
}
.showcase-title .section-title {
  color: var(--c-white);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.showcase-head > .showcase-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 8px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.showcase-head > .showcase-nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.85);
}
.nav-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-brand-deep);
  display: grid;
  place-items: center;
}

/* 底部分栏：左下、64% 宽白底、三列 */
.showcase-tabs {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 64%;
  display: flex;
  background: var(--c-white);
  border-top-right-radius: 2vw;
  overflow: hidden;
  list-style: none;
}
.showcase-tab {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: clamp(34px, 4vh, 56px) clamp(24px, 3vw, 48px);
  cursor: pointer;
  background: var(--c-white);
  transition: background 0.36s var(--ease-out-quart), color 0.36s var(--ease-out-quart);
}
.showcase-tab + .showcase-tab {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.showcase-tab:hover .tab-ico {
  background: rgba(201, 220, 227, 0.18);
}
.showcase-tab:hover .tab-title {
  color: var(--c-brand-deep);
}
.showcase-tab .tab-ico {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(201, 220, 227, 0.1);
  color: var(--c-brand-deep);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  transition: background 0.3s ease, color 0.3s ease;
}
.showcase-tab .tab-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-title);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--c-text-heading);
  transition: color 0.3s ease;
}
.showcase-tab .tab-num {
  position: absolute;
  right: -0.06em;
  bottom: -0.42em;
  z-index: 1;
  font-family: var(--font-num);
  font-size: 9vw;
  line-height: 1;
  font-weight: 800;
  color: #DCE4EC;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
/* 激活态：整栏填充品牌绿 */
.showcase-tab.is-active {
  background: var(--c-brand-deep);
  color: var(--c-white);
}
.showcase-tab.is-active .tab-ico {
  background: rgba(255, 255, 255, 0.18);
  color: var(--c-white);
}
.showcase-tab.is-active .tab-title { color: var(--c-white); }
.showcase-tab.is-active .tab-num { color: rgba(255, 255, 255, 0.14); }

/* =========================================================
   6. 产品展示
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.product-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out-quart), box-shadow 0.45s var(--ease-out-quart);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.product-card .ph {
  aspect-ratio: 16 / 10;
  transition: transform 0.6s var(--ease-out-quart);
}
.product-card:hover .ph { transform: scale(1.05); }
.product-body { padding: 22px 20px 24px; }
.product-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-brand-deep);
  background: rgba(201, 220, 227, 0.08);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.product-body h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--c-text-heading);
  margin-bottom: 8px;
}
.product-body p {
  font-size: 14px;
  color: var(--c-text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* =========================================================
   6. 产品中心（左侧列表 + 右侧大图，hover 联动切换）
   ========================================================= */
.products-split {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 520px;
}

/* ---- 左侧列表 ---- */
.ps-list {
  flex: 1 1 42%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(201, 220, 227, 0.08);
  border: 1px solid rgba(201, 220, 227, 0.06);
}
.ps-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 0;
  padding: 0 26px;
  text-decoration: none;
  color: var(--c-text-body);
  border-bottom: 1px solid rgba(201, 220, 227, 0.07);
  transition: background 0.35s ease;
  overflow: hidden;
}
.ps-item:last-child { border-bottom: 0; }
.ps-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--c-brand-deep);
  transition: width 0.35s ease;
}
.ps-item__num {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: rgba(44, 110, 143, 0.18);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  transition: color 0.35s ease;
}
.ps-item__body { flex: 1 1 auto; min-width: 0; }
.ps-item__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ps-item__name {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text-body);
  transition: color 0.35s ease;
}
.ps-item__en {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(44, 110, 143, 0.62);
}
.ps-item__desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-body);
  margin-top: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

/* 激活态（hover / 默认第一项） */
.ps-item.is-active {
  background: linear-gradient(90deg, rgba(192, 122, 46, 0.09) 0%, rgba(192, 122, 46, 0.02) 100%);
}
.ps-item.is-active::before { width: 4px; background: var(--c-accent); }
.ps-item.is-active .ps-item__num { color: var(--c-accent); }
.ps-item.is-active .ps-item__name { color: var(--c-accent); }
.ps-item.is-active .ps-item__en { color: var(--c-accent); }
.ps-item.is-active .ps-item__desc {
  max-height: 120px;
  opacity: 1;
  margin-top: 10px;
}

/* hover 态切换为暖色 */
.ps-item:hover {
  background: linear-gradient(90deg, rgba(192, 122, 46, 0.09) 0%, rgba(192, 122, 46, 0.02) 100%);
}
.ps-item:hover::before { width: 4px; background: var(--c-accent); }
.ps-item:hover .ps-item__num { color: var(--c-accent); }
.ps-item:hover .ps-item__name { color: var(--c-accent); }
.ps-item:hover .ps-item__en { color: var(--c-accent); }

/* ---- 右侧大图 ---- */
.ps-media-wrap {
  flex: 1 1 58%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(201, 220, 227, 0.16);
}
.ps-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.55s ease, transform 6s ease;
}
.ps-media.is-active {
  opacity: 1;
  transform: scale(1);
}
.ps-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(157, 184, 201, 0.10) 0%, rgba(157, 184, 201, 0.55) 100%);
}
.ps-media__wm {
  position: absolute;
  right: 22px;
  bottom: 8px;
  font-family: var(--font-num);
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: -0.03em;
  z-index: 1;
}

/* 5 种蓝色占位背景（接入实拍图时换成 <img> 或 background-image: url(...)） */
.pm-1 { background: linear-gradient(135deg, #2C6E8F 0%, #3E7E96 100%); }
.pm-2 { background: linear-gradient(135deg, #3E7E96 0%, #9DB8C9 100%); }
.pm-3 { background: linear-gradient(135deg, #4F7FA8 0%, #9DB8C9 100%); }
.pm-4 { background: linear-gradient(135deg, #2C6E8F 0%, #1E5A75 100%); }
.pm-5 { background: linear-gradient(135deg, #3E7E96 0%, #9DB8C9 100%); }

/* 响应式：窄屏改纵向堆叠，列表在上、大图在下 */
@media (max-width: 900px) {
  .products-split { flex-direction: column; min-height: 0; }
  .ps-list { flex: none; }
  .ps-item { padding: 18px 22px; }
  .ps-item__desc { max-height: 120px; opacity: 1; margin-top: 10px; }
  .ps-media-wrap { flex: none; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-media,
  .ps-item,
  .ps-item::before,
  .ps-item__desc { transition: none; }
  .ps-media { transform: none; }
}

/* =========================================================
   7. 新闻中心（3 列卡片：缩略图 + 分类 + 日期 + 标题 + 摘要）
   ========================================================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(201, 220, 227, 0.08);
  text-decoration: none;
  color: var(--c-text-body);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(201, 220, 227, 0.16);
}
.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out-quart);
}
.news-card:hover .news-card__media { transform: scale(1.05); }
.news-card__cat {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--c-accent);
  padding: 5px 12px;
  border-radius: 999px;
}
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}
.news-card__meta {
  font-size: 13px;
  color: var(--c-text-secondary);
  margin-bottom: 10px;
}
.news-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text-heading);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}
.news-card:hover .news-card__title { color: var(--c-accent); }
.news-card__excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-secondary);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .card-link { margin-top: auto; }

/* 新闻缩略图占位（接入实拍图时换成 background-image: url(...)） */
.nh-1 { background: linear-gradient(135deg, #2C6E8F 0%, #4F7FA8 100%); }
.nh-2 { background: linear-gradient(135deg, #4F7FA8 0%, #9DB8C9 100%); }
.nh-3 { background: linear-gradient(135deg, #3E7E96 0%, #9DB8C9 100%); }

/* 新闻中心响应式 */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   响应式
   ========================================================= */

/* 数字展示墙：桌面端保持一行，加竖向分隔线 */
.stats-row .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, 0.18); }

@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-badge { left: auto; right: 20px; bottom: -20px; }
  .showcase-tabs { width: 72%; }
  .logo-cloud { --logo-scale: 0.78; }
  .logo-cloud--large { --logo-scale: 1.2; }
}
@media (max-width: 640px) {
  .logo-cloud { --logo-scale: 0.6; }
  .logo-cloud--large { --logo-scale: 0.9; }
}
@media (max-width: 480px) {
  .logo-cloud { --logo-scale: 0.5; height: 250px; }
  .logo-cloud--large { --logo-scale: 0.7; height: 340px; }
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --space-section: 64px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .nav-wrap { min-height: 68px; }
  .hero { min-height: calc(100svh - 68px); }
  .hero-inner { padding-top: 72px; padding-bottom: 84px; }
  .showcase-media { min-height: 620px; }
  .showcase-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .showcase-title .section-title { font-size: 32px; }
  .showcase-tabs { width: 100%; border-top-right-radius: 0; }
  .showcase-tab { padding: clamp(24px, 5vw, 36px) 18px; }
  .showcase-tab .tab-ico { width: 44px; height: 44px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-row { flex-wrap: wrap; gap: 28px 16px; }
  .stat-item { flex: 0 0 calc(50% - 8px); }
  .stats-row .stat-item + .stat-item { border-left: none; }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   子页：空气健康（page-hero + 服务子栏目）
   ========================================================= */
.page-hero {
  position: relative;
  padding: 148px 0 90px;
  background: linear-gradient(135deg, #2C6E8F 0%, #1E5A75 100%);
  color: #fff;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(111, 200, 245, 0.22), transparent 55%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.page-hero__eyebrow {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.page-hero__title {
  font-family: var(--font-title);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 16px;
}
.page-hero__lead {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
}

/* 服务子栏目版块 */
.svc-section {
  padding: clamp(48px, 7vw, 84px) 0;
  border-bottom: 1px solid #E4E8EE;
  scroll-margin-top: 104px;
}
.svc-section:last-of-type { border-bottom: none; }
.svc-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.svc-grid__media {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(201, 220, 227, 0.12);
  background-size: cover;
  background-position: center;
}
.svc-index {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-brand-deep);
  margin-bottom: 10px;
}
.svc-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  margin-bottom: 8px;
}
.svc-en {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--c-brand-deep);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.svc-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text-secondary);
  margin-bottom: 20px;
}
.svc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
}
.svc-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--c-text);
  line-height: 1.6;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand-deep);
}
/* 交替布局：偶数版块图片在左 */
.svc-section:nth-of-type(even) .svc-grid { direction: rtl; }
.svc-section:nth-of-type(even) .svc-grid > * { direction: ltr; }

/* 子页底部 CTA */
.cta-band {
  background: linear-gradient(135deg, #2C6E8F 0%, #1E5A75 100%);
  color: #fff;
  text-align: center;
  padding: clamp(48px, 7vw, 80px) 0;
}
.cta-band__title { font-family: var(--font-title); font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin-bottom: 12px; }
.cta-band__desc { font-size: 16px; color: rgba(255, 255, 255, 0.86); margin-bottom: 26px; }

@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-section:nth-of-type(even) .svc-grid { direction: ltr; }
}

/* =========================================================
   子页导航增强（2026-09-04）：当前子栏目高亮 · 场景卡片
   ========================================================= */
/* 下拉中标记当前所处栏目 */
.has-sub .submenu a.is-active {
  color: #fff;
  background: var(--c-accent);
  font-weight: 600;
}
/* 适用场景：三列卡片 */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .scene-grid { grid-template-columns: 1fr; }
}

/* 适用场景：宜诺首页解决方案模块风格（横向展开式手风琴） */
/* 整模块突破版心铺满屏幕，但左右留缝隙；标题与卡片在同一全宽区域内对齐 */
.section--full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.section--full-bleed .container {
  max-width: none;
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: clamp(24px, 5vw, 96px);
}
.section--full-bleed .section-header {
  margin-bottom: 56px;
}
.section--full-bleed .scene-grid--yinuo {
  height: clamp(420px, 32vw, 540px);
}
.scene-grid--yinuo {
  display: flex;
  gap: 16px;
  height: 460px;
}
.scene-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-width: 72px;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--c-brand-deep);
  box-shadow: 0 8px 24px rgba(44, 110, 143, .12);
  transition: flex .55s cubic-bezier(.25,.46,.45,.94), filter .3s ease;
}
.scene-card:hover,
.scene-card.is-active {
  flex: 3.6;
}
.scene-grid--yinuo:hover .scene-card {
  filter: brightness(.94);
}
.scene-grid--yinuo:hover .scene-card:hover,
.scene-card.is-active {
  filter: brightness(1);
}
.scene-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}
.scene-card:hover .scene-card__bg { transform: scale(1.05); }
.scene-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 58, 74, .22) 0%, rgba(26, 58, 74, .72) 70%, rgba(26, 58, 74, .88) 100%);
  transition: background .3s ease;
}
.scene-card:hover .scene-card__overlay,
.scene-card.is-active .scene-card__overlay {
  background: linear-gradient(180deg, rgba(26, 58, 74, .32) 0%, rgba(26, 58, 74, .78) 70%, rgba(26, 58, 74, .92) 100%);
}
.scene-card__num {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 2;
  transition: font-size .35s ease, left .35s ease, top .35s ease;
}
.scene-card__body {
  position: relative;
  padding: 26px 24px;
  z-index: 2;
  transition: padding .35s ease;
}
.scene-card__title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size .35s ease, margin .35s ease;
}
.scene-card:hover .scene-card__title,
.scene-card.is-active .scene-card__title {
  font-size: 22px;
  margin-bottom: 10px;
}
.scene-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
  opacity: 0;
  max-height: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, max-height .35s ease, transform .35s ease, margin .35s ease;
  overflow: hidden;
}
.scene-card:hover .scene-card__desc,
.scene-card.is-active .scene-card__desc {
  opacity: 1;
  max-height: 120px;
  transform: translateY(0);
  margin-bottom: 14px;
}
.scene-card__cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, border-color .2s ease;
}
.scene-card:hover .scene-card__cta,
.scene-card.is-active .scene-card__cta {
  opacity: 1;
  transform: translateY(0);
}
.scene-card:hover .scene-card__cta { border-color: var(--c-accent); }
@media (max-width: 900px) {
  .section--full-bleed .section-header { margin-bottom: 44px; }
  .section--full-bleed .scene-grid--yinuo { height: clamp(360px, 36vw, 420px); gap: 10px; }
  .scene-grid--yinuo { height: 420px; gap: 10px; }
  .scene-card { min-width: 60px; }
  .scene-card:hover, .scene-card.is-active { flex: 3; }
  .scene-card__num { font-size: 38px; top: 14px; left: 16px; }
  .scene-card__title { font-size: 15px; }
  .scene-card:hover .scene-card__title,
  .scene-card.is-active .scene-card__title { font-size: 18px; }
  .scene-card__body { padding: 20px 16px; }
  .scene-card__desc { font-size: 13px; }
}
@media (max-width: 560px) {
  .section--full-bleed .section-header { margin-bottom: 36px; }
  .scene-grid--yinuo {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }
  .scene-card {
    min-width: 0;
    flex: none !important;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }
  .scene-card__title { font-size: 18px; white-space: normal; }
  .scene-card__desc,
  .scene-card__cta { opacity: 1; max-height: none; transform: none; margin-bottom: 12px; }
  .scene-card__desc { font-size: 13px; }
}

/* =========================================================
   子页：空气香氛 · 编辑式香氛版式（2026-09-10）
   参考 diptyqueparis.com 的叙事结构：
   全幅主视觉 → 宣言 → 香型系列 → 扩香设备 → 服务流程 → 场景 → CTA
   仅在本页 <body class="scent-page"> 下生效，不影响其它页面
   ========================================================= */
.scent-page { --font-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif; }

/* ---- 香氛氛围图：实拍图 + 深海蓝蒙层，强化品牌主色 ---- */
.sp-1, .sp-2, .sp-3, .sp-4, .sp-5, .sp-6, .sp-7 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sp-1 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-1.jpg"); }
.sp-2 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-2.jpg"); }
.sp-3 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-3.jpg"); }
.sp-4 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-4.jpg"); }
.sp-5 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-5.jpg"); }
.sp-6 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.30) 0%, rgba(157, 184, 201,0.55) 100%), url("../images/scent-6.jpg"); }
/* sp-7（冷雾扩香机）用独立蒙版：底图本身是深蓝调产品图，通用蒙版叠加后蓝味过重、洗掉机器金属质感
   → 浓度降到 0.10 / 0.22，只保留一层品牌冷调倾向。2026-09-26 */
.sp-7 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.10) 0%, rgba(157, 184, 201,0.22) 100%), url("../images/scent-7.jpg"); }
/* 扩香设备卡的 sp-1 / sp-4 同理减淡（用户反馈「滤镜还是太厚」）：
   sp-1 还被 hero、sp-4 还被 .scent-scene 引用 → 不能动通用规则，按 .scent-device__media 限定。2026-09-26 */
.scent-device__media.sp-1 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.10) 0%, rgba(157, 184, 201,0.22) 100%), url("../images/scent-1.jpg"); }
.scent-device__media.sp-4 { background-image: linear-gradient(180deg, rgba(201, 220, 227,0.10) 0%, rgba(157, 184, 201,0.22) 100%), url("../images/scent-4.jpg"); }

/* ---- 香型系列卡片：香薰产品图（3:4 竖版，不加蒙层，保留产品质感） ---- */
.spc-1, .spc-2, .spc-3, .spc-4, .spc-5, .spc-6, .spc-7, .spc-8 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.spc-1 { background-image: url("../images/spc-1.jpg"); }
.spc-2 { background-image: url("../images/spc-2.jpg"); }
.spc-3 { background-image: url("../images/spc-3.jpg"); }
.spc-4 { background-image: url("../images/spc-4.jpg"); }
.spc-5 { background-image: url("../images/spc-5.jpg"); }
.spc-6 { background-image: url("../images/spc-6.jpg"); }
.spc-7 { background-image: url("../images/spc-7.jpg"); }
.spc-8 { background-image: url("../images/spc-8.jpg"); }

/* ---- 编辑式通用元素 ---- */
.scent-label {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin-bottom: 20px;
}
.scent-rule {
  width: 1px;
  height: 46px;
  background: var(--c-accent);
  margin: 0 auto 22px;
}
.scent-head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.scent-head__title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.03em;
  color: var(--c-text-heading);
  margin-bottom: 16px;
}
.scent-head__desc {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--c-text-secondary);
  max-width: 62ch;
  margin: 0 auto;
}

/* ---- 1. 全幅主视觉 ---- */
.scent-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-brand-dark);
  color: #fff;
}
.scent-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  animation: scentKen 16s var(--ease-out-quart) both;
}
@keyframes scentKen { from { transform: scale(1.14); } to { transform: scale(1); } }
.scent-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(44, 110, 143, 0.40) 0%,
    rgba(44, 110, 143, 0.16) 36%,
    rgba(44, 110, 143, 0.86) 100%
  );
}
.scent-hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vh, 140px) 0 clamp(48px, 8vh, 96px);
}
.scent-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  margin-bottom: 18px;
}
.scent-hero__eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--c-accent); }
.scent-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(46px, 8.4vw, 112px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.scent-hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 26px;
}
.scent-hero__lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.86);
  max-width: 54ch;
  margin-bottom: 36px;
}
.scent-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.scent-link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.scent-link:hover { color: var(--c-accent); border-color: var(--c-accent); }
.scent-hero__scroll {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- 2. 宣言 ---- */
.scent-manifesto {
  padding: clamp(64px, 10vw, 128px) 0;
  background: var(--c-white);
  text-align: center;
}
.scent-manifesto__quote {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-brand-deep);
  margin-bottom: 28px;
}
.scent-manifesto__text {
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--c-text-secondary);
  max-width: 62ch;
  margin: 0 auto;
}

/* ---- 3. 香型系列 ---- */
.scent-collections { padding: clamp(64px, 9vw, 120px) 0; background: var(--c-surface); }

/* 香型系列：横向轮播（不换行、按卡片吸附滚动，数量不限） */
.scent-carousel { position: relative; }
.scent-grid {
  --per: 4;                       /* 单屏显示的卡片数 */
  --card-gap: clamp(18px, 2.4vw, 34px);
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.scent-grid::-webkit-scrollbar { display: none; }
.scent-grid:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 8px; }
.scent-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.scent-grid > .scent-card {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--card-gap)) / var(--per));
  scroll-snap-align: start;
}
@media (max-width: 1024px) { .scent-grid { --per: 3; } }
@media (max-width: 768px)  { .scent-grid { --per: 2; } }
@media (max-width: 520px)  { .scent-grid { --per: 1.15; } }

/* 轮播控制条：上一组 / 进度 / 下一组 */
.scent-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.scent-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--c-accent);
  background: transparent;
  color: var(--c-brand-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.32s ease, color 0.32s ease, opacity 0.32s ease;
}
.scent-arrow svg { width: 17px; height: 17px; }
.scent-arrow:hover { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; }
.scent-arrow[disabled] { opacity: 0.26; cursor: default; }
.scent-arrow[disabled]:hover { background: transparent; border-color: var(--c-accent); color: var(--c-brand-deep); }
.scent-progress {
  position: relative;
  width: clamp(90px, 15vw, 190px);
  height: 1px;
  background: rgba(201, 220, 227, 0.16);
  overflow: hidden;
}
.scent-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background: var(--c-accent);
  transition: transform 0.35s var(--ease-out-quart), width 0.35s var(--ease-out-quart);
}
@media (prefers-reduced-motion: reduce) {
  .scent-grid { scroll-behavior: auto; }
  .scent-progress__bar { transition: none; }
}
.scent-card { display: block; color: inherit; }
.scent-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.scent-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease-out-quart);
}
.scent-card:hover .scent-card__img { transform: scale(1.06); }
.scent-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(157, 184, 201, 0) 42%, rgba(157, 184, 201, 0.62) 100%);
  transition: opacity 0.4s ease;
}
.scent-card:hover .scent-card__media::after { opacity: 0.82; }
.scent-card__no {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.88);
}
.scent-card__notes {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}
.scent-card__name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  color: var(--c-text-heading);
  margin-bottom: 4px;
}
.scent-card__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--c-accent-deep);
  margin-bottom: 10px;
}
.scent-card__desc { font-size: 13.5px; line-height: 1.85; color: var(--c-text-secondary); }

/* ---- 4. 扩香设备 ---- */
.scent-devices { padding: clamp(64px, 9vw, 120px) 0; background: var(--c-white); }
.scent-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.scent-device { display: flex; flex-direction: column; }
.scent-device__media {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  margin-bottom: 22px;
  transition: transform 0.7s var(--ease-out-quart);
}
.scent-device:hover .scent-device__media { transform: scale(1.02); }
.scent-device__tag {
  align-self: flex-start;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  border: 1px solid rgba(30, 143, 208, 0.5);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.scent-device__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-text-heading);
  margin-bottom: 10px;
}
.scent-device__desc { font-size: 14px; line-height: 1.85; color: var(--c-text-secondary); margin-bottom: 18px; }
.scent-device__meta {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-brand-deep);
  border-top: 1px solid var(--c-border);
  padding-top: 12px;
  margin-top: auto;
}

/* ---- 5. 服务流程（深底 + 衬线序号） ---- */
/* 服务流程：深锚点蓝底白字（--c-brand-dark 实为 #9DB8C9 中浅雾蓝，白字对比仅 ~1.9:1 看不清；
   换 --c-brand-deep 与页脚同色，对比 ~5.5:1。金色眉标/序号用浅金 --c-glow，深底更清楚）。2026-09-26 */
.scent-ritual { padding: clamp(64px, 9vw, 120px) 0; background: var(--c-brand-deep); color: #fff; }
.scent-ritual .scent-label { color: var(--c-glow); }
.scent-ritual .scent-head__title { color: #fff; }
.scent-ritual .scent-head__desc { color: rgba(255, 255, 255, 0.85); }
.scent-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.scent-step { padding: 32px 22px 8px; }
.scent-step + .scent-step { border-left: 1px solid rgba(255, 255, 255, 0.10); }
.scent-step__no {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--c-glow);
  margin-bottom: 16px;
}
.scent-step__title { font-family: var(--font-title); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.scent-step__desc { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.82); }

/* ---- 6. 应用场景 ---- */
.scent-scenes { padding: clamp(64px, 9vw, 120px) 0; background: var(--c-surface); }
.scent-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.scent-scene {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out-quart);
}
.scent-scene:hover { transform: scale(1.015); }
/* sp-2/3/4 自带一层「浅雾蓝蒙版」，本模块另有一层 ::after 托底，两层叠加把图片刷白。
   此处按 .scent-scene 限定重写背景，把该层压到近乎透明 —— 不动 sp-N 本身，
   以免影响「扩香设备」卡（.scent-device__media sp-4）等其它引用处。 */
.scent-scene.sp-2 { background-image: linear-gradient(180deg, rgba(157, 184, 201, 0.06) 0%, rgba(157, 184, 201, 0.16) 100%), url("../images/scent-2.jpg"); }
.scent-scene.sp-3 { background-image: linear-gradient(180deg, rgba(157, 184, 201, 0.06) 0%, rgba(157, 184, 201, 0.16) 100%), url("../images/scent-3.jpg"); }
.scent-scene.sp-4 { background-image: linear-gradient(180deg, rgba(157, 184, 201, 0.06) 0%, rgba(157, 184, 201, 0.16) 100%), url("../images/scent-4.jpg"); }
/* 蒙版只做「底部托底」：浅雾蓝会整体刷白图片，改用深墨蓝压暗，图片层次与色彩得以保留 */
.scent-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 32, 44, 0) 0%,
    rgba(10, 32, 44, 0) 50%,
    rgba(10, 32, 44, 0.22) 72%,
    rgba(10, 32, 44, 0.62) 100%
  );
}
.scent-scene__body { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1; color: #fff; }
.scent-scene__title { font-family: var(--font-serif); font-size: 24px; font-weight: 500; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(8, 26, 36, 0.45); }
.scent-scene__desc { font-size: 13.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.90); text-shadow: 0 1px 3px rgba(8, 26, 36, 0.42); }

/* ---- 7. 收尾 CTA ---- */
.scent-cta { padding: clamp(72px, 10vw, 132px) 0; background: var(--c-white); text-align: center; }
/* 脑机香氛收尾句并入本区（2026-09-26 合并）：代替原竖线+眉标，作标题上方的情绪引导句 */
.scent-cta__slogan {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-text-heading);
  margin-bottom: 28px;
}
.scent-cta__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.4vw, 50px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-text-heading);
  margin-bottom: 18px;
}
.scent-cta__desc { font-size: 15.5px; line-height: 1.9; color: var(--c-text-secondary); max-width: 56ch; margin: 0 auto 32px; }
.scent-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }

/* ---- 7. 脑机香氛（左文右图 + 四步定制流程，位于应用场景之后、收尾 CTA 之前） ----
   配图 images/bci-scent.jpg 2275×1278（严格 16:9），深色调与浅底页面形成节奏对比 */
.scent-bci { padding: clamp(64px, 9vw, 120px) 0; background: var(--c-white); }
.scent-bci__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5.5vw, 84px);
  align-items: center;
}
.scent-bci__media {
  order: 2;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #101A1E;
}
.scent-bci__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scent-bci__body { order: 1; }

.scent-bci__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.03em;
  color: var(--c-text-heading);
  margin-bottom: 16px;
}
.scent-bci__sub {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-brand-deep);
  margin-bottom: 24px;
}
.scent-bci__desc { font-size: 15px; line-height: 2.05; color: var(--c-text-secondary); }
.scent-bci__desc + .scent-bci__desc { margin-top: 14px; }
.scent-bci__desc-kicker { color: var(--c-text-heading); font-weight: 600; }
.scent-bci__desc-punch {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--c-accent-deep);
}

/* 四步定制流程：2 列 × 2 行 */
.scent-bci__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px);
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--c-border);
}
.scent-bci__step { display: flex; gap: 16px; align-items: flex-start; }
.scent-bci__step-no {
  flex: none;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  padding-top: 2px;
}
.scent-bci__step-txt {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text-body);
}

/* 锚点定位避开粘性头部 */
.scent-collections, .scent-devices, .scent-ritual, .scent-scenes, .scent-bci { scroll-margin-top: 112px; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .scent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scent-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; border-top: none; }
  .scent-step { padding: 0; }
  .scent-step + .scent-step { border-left: none; }
  /* 脑机香氛：图在上、文在下（窄屏先看图更直观） */
  .scent-bci__grid { grid-template-columns: 1fr; gap: 32px; }
  .scent-bci__media { order: 1; }
  .scent-bci__body { order: 2; }
}
@media (max-width: 900px) {
  .scent-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scent-scene-grid { grid-template-columns: 1fr; }
  .scent-scene { aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
  .scent-hero__scroll { display: none; }
  .scent-hero { min-height: clamp(520px, 78vh, 680px); }
}
@media (max-width: 640px) {
  .scent-grid { grid-template-columns: 1fr; }
  .scent-device-grid { grid-template-columns: 1fr; }
  .scent-steps { grid-template-columns: 1fr; }
  .scent-bci__steps { grid-template-columns: 1fr; gap: 20px; }
  .scent-scene__body { left: 20px; right: 20px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scent-hero__media { animation: none; }
  .scent-card__img, .scent-device__media, .scent-scene { transition: none; }
}

/* =========================================================
   空调工程（air-conditioning）：服务能力 / 工程师 / 项目分档 / 保障
   服务导向，全程不展示具体品牌型号
   ========================================================= */

/* 五大服务能力（白底，5 列卡片） */
.cap-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cap-item {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-accent);
  border-radius: var(--radius-md);
  padding: 26px 22px 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cap-item:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(201, 220, 227,.08); }
.cap-item__no { font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--c-accent); letter-spacing: 2px; line-height: 1; margin-bottom: 14px; }
.cap-item__name { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 10px; }
/* 描述行数不一导致交付行参差：改为 flex 推底对齐（deli 用 margin-top:auto 压到卡底），
   替代旧的 min-height:88px 兜底（描述超 4 行时失效）。2026-09-26 */
.cap-item__do { font-size: 13px; color: var(--c-text); line-height: 1.7; margin-bottom: 14px; }
.cap-item__deli {
  margin-top: auto;
  /* 虚线对齐的关键：auto margin 只对齐块底，虚线在块顶 —— 交付文字有 1 行/2 行之分，
     设两行最小高让虚线位置统一（超两行自然撑开，当前两页最长恰好两行）。2026-09-26 */
  min-height: 52px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border);
  font-size: 12px;
  color: var(--c-brand-deep);
  line-height: 1.65;
  letter-spacing: .3px;
}
.cap-item__deli::before { content: "交付 ›  "; font-weight: 700; }

/* 工程师团队（深蓝底，4 张浅卡） */
.eng-section { background: var(--c-surface); color: var(--c-text-body); padding: clamp(72px, 9vw, 110px) 0; }
/* 白色变体：用于灰白交替收尾的页面（空气净化 / 饮水健康） */
.eng-section--plain { background: var(--c-white); }
.eng-section--plain .eng-card { background: var(--c-surface); border-color: transparent; }
.eng-section .section-eyebrow,
.eng-section .section-title,
.eng-section .section-desc { color: var(--c-text-heading); }
.eng-section .section-dash { background: var(--c-accent); }
.eng-section .section-header { text-align: center; }
.eng-section .section-header > * { margin-left: auto; margin-right: auto; }
.eng-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.eng-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 30px 24px;
}
.eng-card__num { font-family: var(--font-num); font-size: 34px; font-weight: 700; color: var(--c-accent); letter-spacing: 2px; line-height: 1; margin-bottom: 16px; }
.eng-card__name { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 8px; letter-spacing: .5px; }
.eng-card__en { font-family: var(--font-num); font-size: 11px; letter-spacing: 2px; color: var(--c-accent-deep); margin-bottom: 14px; text-transform: uppercase; }
.eng-card__desc { font-size: 13px; color: var(--c-text-secondary); line-height: 1.78; }

/* 项目类型（按面积分档，4 档横排相连） */
.scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; background: var(--c-white); }
.scope-card { padding: 32px 26px; border-right: 1px solid var(--c-border); position: relative; }
.scope-card:last-child { border-right: 0; }
.scope-card__size { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--c-accent); letter-spacing: 2px; margin-bottom: 12px; }
.scope-card__name { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 14px; line-height: 1.4; }
.scope-card__list { list-style: none; padding: 0; margin: 0; }
.scope-card__list li { font-size: 13px; color: var(--c-text-secondary); line-height: 1.9; padding-left: 14px; position: relative; }
.scope-card__list li::before { content: "·"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; }

/* 服务保障（白底，4 卡带方形小色块） */
.warr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.warr-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 32px 26px 30px;
  transition: border-color .25s ease, transform .25s ease;
}
.warr-card:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.warr-card__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); color: var(--c-brand-deep);
  border-radius: 10px;
  font-family: var(--font-num);
  font-size: 20px; font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.warr-card__name { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 10px; }
.warr-card__desc { font-size: 13px; color: var(--c-text-secondary); line-height: 1.75; }

/* 响应式 */
@media (max-width: 1100px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .eng-grid, .warr-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-card { border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
  .scope-card:nth-child(2n) { border-right: 0; }
  .scope-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .eng-grid, .warr-grid { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-card { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .scope-card:last-child { border-bottom: 0; }
}

/* =========================================================
   新风净化页（2026-09-10）
   全幅首屏大图 + 无新风危害 + 选择理由 + 产品矩阵 + 过滤技术 + 管路设计 + 案例
   ========================================================= */

/* ---------- 首屏：全幅大图 ---------- */
.hero-bleed {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 132px 0 104px;
  color: #fff;
  background-image: url("../images/fresh-hero.jpg");
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}
.hero-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 透明云蓝空气层：右上大柔光 + 左下淡入（弱量，避免整体泛蓝） */
    radial-gradient(130% 100% at 85% 2%, rgba(168,213,242,.28) 0%, rgba(168,213,242,0) 55%),
    radial-gradient(100% 85% at 6% 100%, rgba(168,213,242,.14) 0%, rgba(168,213,242,0) 60%),
    /* 少量青色光点 */
    radial-gradient(circle at 15% 80%, rgba(111,200,245,.50) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 66%, rgba(111,200,245,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 22%, rgba(111,200,245,.25) 0 2px, transparent 3px),
    /* 深海蓝品牌线条（云蓝细线，底部 2px） */
    linear-gradient(to right, transparent 0, transparent 10%, rgba(168,213,242,.45) 10%, rgba(168,213,242,.45) 46%, transparent 46%) bottom/100% 2px no-repeat,
    /* 文字区局部加深：在左侧再叠一层暗蓝，确保小字也清晰 */
    radial-gradient(120% 130% at 0% 55%, rgba(12, 44, 64, .55) 0%, rgba(12, 44, 64, 0) 60%),
    /* 主遮罩：左侧保证文字可读，右侧完全透明露出实拍图 */
    linear-gradient(100deg, rgba(20, 60, 84, .94) 0%, rgba(28, 80, 110, .66) 42%, rgba(28, 80, 110, .30) 70%, rgba(28, 80, 110, 0) 100%),
    radial-gradient(circle at 88% 12%, rgba(111,200,245,.12), transparent 55%);
}
.hero-bleed__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.hero-bleed__eyebrow {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.hero-bleed__title {
  font-family: var(--font-title);
  font-size: clamp(32px, 5.2vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  margin-bottom: 22px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45);
}
.hero-bleed__lead {
  font-size: 16px;
  line-height: 1.9;
  color: #fff;
  max-width: 560px;
  margin-bottom: 32px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.hero-bleed__lead strong { color: var(--c-accent-hover); font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.hero-bleed--ac .hero-bleed__lead strong { color: #fff; }
.hero-bleed__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 没有安装新风系统的危害 ---------- */
.risk-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--c-white);
}
.risk-section .container { position: relative; z-index: 1; }
.risk-section .section-eyebrow { color: var(--c-brand-deep); }
.risk-section .section-dash { background: var(--c-accent); }
.risk-section .section-title { color: var(--c-text-heading); }
.risk-section .section-desc { color: var(--c-text-secondary); }
/* 危害：图文左右分栏（左图 + 右清单，与下方卡片网格区分） */
.risk-body {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 56px;
  align-items: stretch;
  margin-top: 48px;
}
.risk-media {
  position: relative;
  margin: 0;
  height: 600px;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(201, 220, 227,.14);
}
.risk-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.risk-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 18px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .94);
  letter-spacing: .04em;
  background: linear-gradient(to top, rgba(12, 34, 48, .68), rgba(12, 34, 48, 0));
  border-radius: 0 0 14px 14px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.risk-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid var(--c-border);
  height: 600px;
}
.risk-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: start;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--c-border);
  transition: border-color .3s ease;
}
.risk-row:hover { border-bottom-color: var(--c-accent); }
.risk-row__no {
  font-family: var(--font-num);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.9;
  color: var(--c-accent-deep);
}
.risk-row__name {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-heading);
  margin-bottom: 8px;
  line-height: 1.6;
}
.risk-row__desc {
  font-size: 13px;
  line-height: 1.78;
  color: var(--c-text-secondary);
}
.risk-note {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-text-secondary);
  max-width: 880px;
}
.risk-note strong { color: var(--c-brand-deep); font-weight: 600; }

/* ---------- 为什么要选择我们 ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.why-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 30px 26px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(201, 220, 227,.09);
  border-color: rgba(30,143,208,.55);
}
.why-card__no {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.why-card__name {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-heading);
  margin-bottom: 10px;
}
.why-card__desc {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.78;
  margin-bottom: 18px;
}
.why-card__metric {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--c-border);
  font-size: 12px;
  color: var(--c-text-secondary);
  letter-spacing: .03em;
}
.why-card__metric strong {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-brand-deep);
  margin-right: 2px;
  letter-spacing: .5px;
}

/* ---------- 产品矩阵：八类设备 ---------- */
/* 「设备配置」段内的承接块：六类设备的实物与安装细节（不是独立模块，用细分隔线接在设备清单之后） */
.device-more {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--c-border);
}
.device-more__title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text-heading);
  margin-bottom: 12px;
}
.device-more__desc {
  font-size: 14px;
  color: var(--c-text-secondary);
  line-height: 1.85;
  max-width: 720px;
  margin-bottom: 32px;
}
@media (max-width: 960px) {
  .device-more { margin-top: 48px; padding-top: 34px; }
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(201, 220, 227,.09);
  border-color: rgba(30,143,208,.55);
}
.prod-card__media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(160deg, #F8FAFC 0%, #EDF1F6 100%);
}
.prod-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prod-card__body { padding: 20px 20px 24px; border-top: 1px solid var(--c-border); }
.prod-card__name { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 6px; }
.prod-card__en { font-family: var(--font-num); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-accent-deep); margin-bottom: 10px; }
.prod-card__desc { font-size: 13px; color: var(--c-text-secondary); line-height: 1.72; }
/* 净水设备介绍：实拍图卡片（water-health.html），图片铺满不留白边 */
.prod-card__media--photo { padding: 0; background: var(--c-surface); }
.prod-card__media--photo img { width: 100%; height: 100%; object-fit: cover; }

/* 净水设备介绍：示意图 / 指标图卡片，半宽两列，统一 420px 图高保证图内文字可读 */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.doc-card__media {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--c-white);
}
.doc-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.doc-card__body { padding: 0 20px 22px; }
.doc-card__name { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 6px; }
.doc-card__desc { font-size: 13px; color: var(--c-text-secondary); line-height: 1.72; }
/* 设备介绍模块内部各块之间的间距（section-header 已自带 44px 下边距，不再重复叠加） */
.prod-grid + .doc-grid { margin-top: 44px; }
@media (max-width: 900px) {
  .doc-card__media { height: 300px; padding: 12px; }
}
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr; }
}

/* ---------- 过滤技术 ---------- */
.tech-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: stretch;
}
.tech-grid__media {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(201, 220, 227,.10);
  min-height: 0;
}
.tech-grid__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tech-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-auto-rows: 1fr; }
.tech-list__item { position: relative; padding-left: 62px; display: flex; flex-direction: column; justify-content: flex-start; }
.tech-list__no {
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-num);
  font-size: 24px; font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 1px; line-height: 1;
}
.tech-list__name { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 8px; }
.tech-list__name span { font-family: var(--font-num); font-size: 10.5px; font-weight: 500; letter-spacing: 1.6px; color: var(--c-text-muted); margin-left: 8px; }
.tech-list__desc { font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.78; }

/* ---------- 结构解析 ---------- */
.struct-block {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items: center;
  margin-top: 72px;
  padding-top: 64px;
  border-top: 1px solid var(--c-border);
}
.struct-block__media {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
}
.struct-block__media img { display: block; width: 100%; height: auto; }
.struct-block__title { font-family: var(--font-title); font-size: 22px; font-weight: 800; color: var(--c-text-heading); margin-bottom: 14px; }
.struct-block__desc { font-size: 14px; color: var(--c-text-secondary); line-height: 1.85; margin-bottom: 20px; }
.struct-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.struct-tags li {
  font-size: 12.5px;
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 7px 14px;
  line-height: 1.4;
}
/* 服务过的空间类型：长列表胶囊（空气净化页），白底提高在灰底 section 上的对比 */
.struct-tags--room { gap: 12px; }
.struct-tags--room li {
  font-size: 14px;
  padding: 10px 20px;
  background: var(--c-white);
}
/* 覆盖行业（cases.html）：放大版胶囊 */
.struct-tags--lg { gap: 12px; }
.struct-tags--lg li {
  font-size: 14px;
  padding: 10px 20px;
}
.scope-note {
  margin: 28px 0 0;
  font-size: 14.5px;
  color: var(--c-text-secondary);
  text-align: center;
  line-height: 1.8;
}

/* ---------- 管路设计 ---------- */
.duct-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.duct-card {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.duct-card:hover { border-color: rgba(30,143,208,.55); transform: translateY(-3px); }
.duct-card__media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--c-border);
}
.duct-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.duct-card__cap { padding: 18px 18px 22px; }
.duct-card__cap h3 { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 8px; }
.duct-card__cap p { font-size: 12.5px; color: var(--c-text-secondary); line-height: 1.7; }

/* ---------- 标杆案例 ---------- */
.case-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.case-panel .section-title { margin-bottom: 14px; }
.case-panel__desc { font-size: 14.5px; color: var(--c-text-secondary); line-height: 1.9; margin-bottom: 26px; }
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 14px;
  margin-bottom: 24px;
}
.case-stats__num { font-family: var(--font-num); font-size: 30px; font-weight: 800; color: var(--c-brand-deep); line-height: 1; }
.case-stats__num span { font-size: 12.5px; font-weight: 600; color: var(--c-text-secondary); margin-left: 3px; }
.case-stats__label { font-size: 12px; color: var(--c-text-muted); margin-top: 7px; letter-spacing: .04em; }
.case-panel__device {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border-left: 2px solid var(--c-accent);
  padding: 11px 16px;
  margin-bottom: 18px;
}
.case-panel__shots { display: grid; grid-template-columns: 1fr; gap: 14px; }
.case-shot { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(201, 220, 227,.12); }
.case-shot--wide { grid-column: 1 / -1; }
.case-shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.case-shot--wide img { aspect-ratio: 16 / 7; }

/* ---------- 保障区电话 ---------- */
.eng-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.eng-note { text-align: center; margin-top: 34px; font-size: 14px; color: var(--c-text-secondary); letter-spacing: .04em; }
.eng-note strong { font-family: var(--font-num); font-size: 16px; font-weight: 700; color: var(--c-accent); letter-spacing: 1px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eng-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-bleed { min-height: 540px; padding: 100px 0 80px; background-position: center; }
  .tech-grid, .struct-block, .case-panel { grid-template-columns: 1fr; gap: 32px; }
  .struct-block { margin-top: 52px; padding-top: 44px; }
}
@media (max-width: 640px) {
  .prod-grid, .duct-grid, .eng-grid--5 { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-panel__shots { grid-template-columns: 1fr; }
  .case-shot--wide { grid-column: auto; }
  .tech-list__item { padding-left: 0; padding-top: 36px; }
  .tech-list__no { top: 0; }
}

/* 为什么要选择我们 · 响应式 */
@media (max-width: 960px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }

/* 没有新风系统的危害 · 响应式 */
@media (max-width: 900px) {
  .risk-body { grid-template-columns: 1fr; gap: 34px; }
  .risk-media { height: auto; }
  .risk-media img { height: 300px; }
  .risk-list { display: grid; grid-template-columns: 1fr; height: auto; }
}
@media (max-width: 640px) {
  .risk-row { grid-template-columns: 40px 1fr; padding: 18px 0 20px; }
}


/* =========================================================
   空调工程页（2026-09-11）：复用新风页版式 + 专属修补
   ========================================================= */
/* 空调页首屏图（覆盖 .hero-bleed 里新风页的背景图）。
   2026-09-26 换「安装空调」场景图：新图左侧为亮墙窗区（亮度~182），白字需左深右浅的
   斜向渐变护字层（不压整体，右侧人物区保持明亮）；?v=2 破缓存。
   2026-09-26b 修正：宽屏 cover 只显示中部 512px 条带，center 时空调内机与人物上半身被裁出画面
   → position-y 偏上 18% 保住「内机+人物上身」；左侧渐变同步减淡（.52→.42），细节不再糊。 */
.hero-bleed--ac {
  background-image:
    linear-gradient(90deg, rgba(10,30,42,.42) 0%, rgba(10,30,42,.20) 42%, rgba(10,30,42,.05) 100%),
    url('../images/ac-hero.jpg?v=2');
  background-position: center 18%;
}

/* 浅底版工程师卡（空调页第 8 段；深底 .eng-section 内的 eng-card 不受影响） */
.eng-grid--light .eng-card { background: var(--c-white); border-color: var(--c-border); }
.eng-grid--light .eng-card__num { color: var(--c-accent-deep); }
.eng-grid--light .eng-card__name { color: var(--c-text-heading); }
.eng-grid--light .eng-card__en { color: var(--c-accent-deep); }
.eng-grid--light .eng-card__desc { color: var(--c-text-secondary); }


/* 空气净化页（2026-09-11） */
.hero-bleed--pur { background-image: url('../images/pur-hero.jpg'); background-position: center; }
/* 设备配置块（净化页第 5 段） */
.device-block { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--c-border); }
.device-block__title { font-family: var(--font-title); font-size: 22px; font-weight: 800; color: var(--c-text-heading); margin-bottom: 14px; }
.device-block__desc { font-size: 14px; color: var(--c-text-secondary); line-height: 1.85; margin-bottom: 20px; max-width: 720px; }
.device-block .struct-tags li { padding: 9px 18px; font-size: 13px; }
/* 独立成段的设备配置：模块已自带 section 间距，去掉与上方模块的分隔线 */
.device-block--bare { margin-top: 0; padding-top: 0; border-top: none; }
/* 标题已交给标准 section-header，设备区不再额外留上间距 */
.device-block--bare .device-stage { margin-top: 0; }
@media (max-width: 960px) {
  .device-block { margin-top: 52px; padding-top: 44px; }
  .device-block--bare { margin-top: 0; padding-top: 0; }
}

/* 饮水健康 / 净水设备页（2026-09-11） */
.hero-bleed--wat { background-image: url('../images/wat-hero.jpg'); background-position: center; }

/* ============ 资料图展示（净水页 2026-09-22 重做） ============ */
/* 左图右文：图片完整显示不裁切，用于带标注的信息图 */
.pic-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* 图列加宽变体：带文字的示意图需要更宽才能看清标注（图左 / 图右各一个） */
.pic-split--wide-media { grid-template-columns: 1.25fr 1fr; }
.pic-split--wide-media-rev { grid-template-columns: 1fr 1.25fr; }
.pic-split__media {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(201, 220, 227,.12);
}
.pic-split__media img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 通栏大图：宽度铺满版心 */
.pic-full {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(201, 220, 227,.12);
}
.pic-full img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* 竖向九宫格图限宽居中，避免撑得过高 */
.pic-full--narrow img { max-width: 840px; margin: 0 auto; }

/* 多图网格 */
.pic-grid { display: grid; gap: 24px; }
.pic-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pic-grid + .pic-split { margin-top: 24px; }
.pic-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
}
.pic-card__media {
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}
.pic-card__media img { display: block; max-width: 100%; max-height: 100%; }
.pic-card__body { padding: 20px 24px 24px; }
.pic-card__name { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--c-text-heading); margin-bottom: 8px; }
.pic-card__desc { font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.8; }

/* 要点列表：与示意图并排使用（安装前置条件等） */
.pic-note__list { list-style: none; padding: 0; margin: 0; }
.pic-note__list li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.9; }
.pic-note__list li + li { margin-top: 12px; }
.pic-note__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.pic-split .pic-note__list { margin-top: 18px; }

@media (max-width: 960px) {
  .pic-split { grid-template-columns: 1fr; gap: 32px; }
  /* 平板起改为单列：资料图窄于半屏时图内标注会糊掉，宁可纵向排 */
  .pic-grid--2 { grid-template-columns: 1fr; }
  .pic-card__media { height: auto; padding: 20px; }
  .pic-card__media img { width: 100%; height: auto; }
}
@media (max-width: 640px) {
  .pic-card__media { padding: 14px; }
  .pic-split__media, .pic-full { padding: 16px; }
}

/* 锚点跳转时预留粘性导航高度（饮水健康 #water-purification / 新风 #products / 空调 #capabilities） */
.section[id] { scroll-margin-top: 104px; }

/* 品牌故事页（2026-09-11）：模块按二级菜单 关于我们 / 技术壁垒 / 权威资质 / 专业团队 */
.hero-bleed--bra { background-image: url('../images/bra-hero.jpg'); background-position: center; }
/* 真实案例页（2026-09-11） */
.hero-bleed--cases { background-image: url('../images/fresh-case1.jpg'); background-position: center; }
/* 健康百科页（2026-09-17）：与其他子页 hero 同款全幅暖色 banner */
.hero-bleed--wiki { background-image: url('../images/wiki-hero.jpg'); background-position: center; }
/* 四格数据行（关于我们） */
.case-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
@media (max-width: 960px) { .case-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .case-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   权威资质 · 证书轮播（brand.html）
   ========================================================= */
.cert-carousel { position: relative; margin-top: 46px; padding: 0 62px; }
.cert-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.cert-track::-webkit-scrollbar { display: none; }
.cert-track:focus { outline: none; }
.cert-track.is-dragging { cursor: grabbing; }
.cert-track.is-dragging .cert-card { pointer-events: none; }

.cert-card {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(201, 220, 227,.10);
  border-color: rgba(30,143,208,.55);
}
.cert-card__media {
  position: relative;
  aspect-ratio: 10 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: linear-gradient(160deg, #F8FAFC 0%, #EDF1F6 100%);
  border-bottom: 1px solid var(--c-border);
}
.cert-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 3px 12px rgba(201, 220, 227,.10);
}
.cert-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: var(--c-brand-deep);
  padding: 4px 9px;
  border-radius: 3px;
}
.cert-card__badge--honor { background: var(--c-accent); color: #fff; }
.cert-card__body { padding: 20px 18px; }
.cert-card__name {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-heading);
  line-height: 1.55;
  margin-bottom: 0;
  /* 证书名称强制单行显示（卡片已加宽到 3 栏，长名称可完整容下）；极窄宽度用省略号兜底防溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cert-card__meta { font-size: 12px; color: var(--c-text-muted); line-height: 1.65; }

.cert-arrow {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-brand-deep);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(201, 220, 227,.12);
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  z-index: 2;
}
.cert-arrow:hover:not(:disabled) { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; }
.cert-arrow:disabled { opacity: .32; cursor: default; }
.cert-arrow--prev { left: 0; }
.cert-arrow--next { right: 0; }
.cert-arrow svg { width: 16px; height: 16px; }

.cert-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.cert-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D5DCE5;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.cert-dot.is-active { width: 22px; border-radius: 4px; background: var(--c-accent); }

.cert-note {
  margin-top: 26px;
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.8;
}

/* 901–1200px 视口：卡片变窄，证书名称降一档字号，避免单行文字被省略号截断 */
@media (min-width: 901px) and (max-width: 1200px) { .cert-card__name { font-size: 13px; } }
@media (max-width: 900px) {
  .cert-carousel { padding: 0; }
  .cert-arrow { display: none; }
  .cert-card { flex-basis: calc((100% - 20px) / 2); }
  /* 移动端卡片更窄，允许长名称换行，避免被省略号截断 */
  .cert-card__name { white-space: normal; overflow: visible; }
}
@media (max-width: 560px) { .cert-card { flex-basis: 82%; } }

/* 专业团队 · 上岗资质证书网格（brand.html） */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
.team-card {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(201, 220, 227,.10);
  border-color: rgba(30,143,208,.55);
}
.team-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(201, 220, 227,.10);
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* =========================================================
   首页配图（2026-09-11）：占位块接入实拍图
   .hero-slide / .showcase-slide / .ps-media / .news-card__media 本身已 cover，
   只有 .ph 系列没有，需要补上，否则图片会被拉伸。
   ========================================================= */
.ph--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* 客户 logo 墙：接入真实 logo 后，给图片留出内边距保证不贴边 */
.logo-cloud .logo-item img { max-width: 72%; max-height: 72%; object-fit: contain; }

/* =========================================================
   香氛详情页（2026-09-11，scent-detail.html）
   概览轮播复用 .scent-carousel / .scent-card / js/scent.js；
   下面是新增的详情区 .scent-detail 两列块。
   ========================================================= */
.page-hero__link { display: inline-block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.72); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 2px; }
.page-hero__link:hover { color: #fff; border-color: var(--c-accent); }

.scent-detail { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.scent-detail__media img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 22px 54px rgba(201, 220, 227,.16); display: block; }

/* ---- 产品图集轮播（香型详情页 hero 位置，多张产品图） ----
   结构与首页 hero 一致：多张图叠加 + is-active 淡入，容器比例锁定 800×1125 竖版。
   单张时后台不输出箭头/圆点，视觉上与原来的单图完全相同。 */
.scent-gallery { position: relative; }
.scent-gallery__stage { position: relative; }
.scent-gallery__viewport {
  position: relative;
  aspect-ratio: 800 / 1125;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(201, 220, 227,.16);
  background: var(--c-surface);
}
.scent-gallery__track { position: absolute; inset: 0; }
.scent-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.scent-gallery__slide.is-active { opacity: 1; visibility: visible; }
.scent-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 箭头：圆形半透明白底压在图上，左右垂直居中 */
.scent-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  color: var(--c-brand-deep);
  box-shadow: 0 6px 20px rgba(44,110,143,.18);
  cursor: pointer;
  transition: background .24s, transform .24s, box-shadow .24s;
  z-index: 2;
}
.scent-gallery__arrow svg { width: 20px; height: 20px; }
.scent-gallery__arrow--prev { left: 12px; }
.scent-gallery__arrow--next { right: 12px; }
.scent-gallery__arrow:hover { background: #fff; box-shadow: 0 10px 26px rgba(44,110,143,.26); }
.scent-gallery__arrow:active { transform: translateY(-50%) scale(.94); }
.scent-gallery__arrow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 圆点：图下方居中 */
.scent-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.scent-gallery__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-border);
  cursor: pointer;
  transition: background .24s, width .24s;
}
.scent-gallery__dot.is-active { width: 20px; border-radius: 4px; background: var(--c-accent); }
.scent-gallery__dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 拖拽态：禁用过渡，避免跟手卡顿 */
.scent-gallery.is-dragging .scent-gallery__slide { transition: none; }
.scent-gallery.is-dragging { cursor: grabbing; }

@media (max-width: 900px) {
  /* 窄屏箭头缩小并贴近边缘；触屏可拖拽，箭头仍保留方便点击 */
  .scent-gallery__arrow { width: 36px; height: 36px; }
  .scent-gallery__arrow svg { width: 17px; height: 17px; }
  .scent-gallery__arrow--prev { left: 8px; }
  .scent-gallery__arrow--next { right: 8px; }
}
@media (max-width: 560px) {
  .scent-gallery__arrow { display: none; }
}

.scent-detail__no { font-family: var(--font-serif); font-style: italic; font-size: 15px; letter-spacing: .14em; color: var(--c-accent); margin-bottom: 12px; }
.scent-detail__name { font-family: var(--font-title); font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; color: var(--c-text-heading); line-height: 1.18; margin-bottom: 20px; }
.scent-detail__name span { font-family: var(--font-serif); font-style: italic; font-size: 0.48em; font-weight: 400; color: var(--c-text-secondary); margin-left: 16px; letter-spacing: .08em; }
.scent-detail__inspire { font-size: 16px; line-height: 1.85; color: var(--c-text); margin-bottom: 24px; padding-left: 14px; border-left: 2px solid var(--c-accent); }
.scent-detail__desc { font-size: 14.5px; line-height: 1.92; color: var(--c-text-secondary); margin-bottom: 26px; }
.scent-detail__label { font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--c-text-muted); margin-bottom: 12px; text-transform: uppercase; }

.scent-notes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.scent-notes li { display: flex; align-items: baseline; gap: 14px; font-size: 14px; line-height: 1.85; color: var(--c-text); }
.scent-notes__tag { display: inline-block; min-width: 48px; padding: 4px 0; font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--c-brand-deep); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 2px; text-align: center; flex-shrink: 0; }

/* 偶数详情块左右翻转（避免视觉单调，沿用项目 .svc-grid 的 rtl 模式） */
.scent-detail--flip { direction: rtl; }
.scent-detail--flip > * { direction: ltr; }

@media (max-width: 900px) {
  .scent-detail, .scent-detail--flip { grid-template-columns: 1fr; gap: 32px; direction: ltr; }
}

/* 香氛详情页（单款）：面包屑 / 产品副行 / 相关香调迷你卡 */
.scent-crumb { font-size: 13px; color: var(--c-text-muted); margin-bottom: 36px; letter-spacing: .02em; }
.scent-crumb a { color: var(--c-text-secondary); text-decoration: none; }
.scent-crumb a:hover { color: var(--c-brand-deep); }
.scent-crumb span { color: var(--c-text-heading); font-weight: 600; }

.scent-detail__product { font-family: var(--font-title); font-size: 18px; font-weight: 600; color: var(--c-brand-deep); margin: -6px 0 18px; }
.scent-detail__product em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.92em; color: var(--c-text-secondary); margin-left: 12px; letter-spacing: .04em; }

.scent-mini { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; }
.scent-mini__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease-out-quart); }
.scent-mini:hover .scent-mini__img { transform: scale(1.06); }
.scent-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(157, 184, 201,0) 40%, rgba(157, 184, 201,.78) 100%); }
.scent-mini__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; color: #fff; display: flex; flex-direction: column; }
.scent-mini__no { font-family: var(--font-serif); font-style: italic; font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.scent-mini strong { font-family: var(--font-title); font-size: 19px; font-weight: 700; }
.scent-mini__en { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: rgba(255,255,255,.8); margin-top: 2px; }

/* 空气净化页设备配置：左序号列表 + 右大图联动 */
.device-stage {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 36px;
  align-items: stretch;
  margin-top: 46px;
}
.device-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.device-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 18px;
  padding: 16px 20px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.device-list__item:hover { transform: translateX(2px); border-color: rgba(30,143,208,.55); }
.device-list__item.is-active {
  background: #F4F8FC;
  border-color: var(--c-accent);
  box-shadow: 0 10px 24px rgba(201, 220, 227,.08);
}
.device-list__item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.device-list__no {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--c-accent-deep);
  text-align: center;
  padding: 6px 0;
  background: var(--c-surface);
  border-radius: 3px;
}
.device-list__item.is-active .device-list__no { background: var(--c-accent); color: #fff; }
.device-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-list__name {
  font-family: var(--font-title);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-text-heading);
  line-height: 1.45;
}
.device-list__role { font-size: 12.5px; color: var(--c-text-secondary); line-height: 1.55; }
.device-list__fit { font-size: 12px; color: var(--c-text-muted); line-height: 1.55; margin: 0; }

.device-stage__media {
  position: relative;
  margin: 0;
  min-height: 380px;
  background:
    radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F4F8FC 55%, #E8EEF5 100%);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.device-stage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: opacity .35s ease;
}

.device-stage__media img.is-switching { opacity: .35; }

@media (max-width: 900px) {
  .device-stage { grid-template-columns: 1fr; gap: 22px; }
  .device-stage__media { min-height: 300px; }
}

/* ============================================================
   健康百科 wiki.html（新闻中心式列表 + 文章正文）
   ============================================================ */
.wiki-articles { min-width: 0; }
.wiki-article {
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--c-border);
  scroll-margin-top: 104px;
}
.wiki-article:first-child { padding-top: 4px; }
.wiki-article:last-child { border-bottom: none; }
.wiki-article__cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.wiki-article__title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-text-heading);
  margin-bottom: 18px;
}
.wiki-article p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-text-body);
  margin-bottom: 16px;
}
.wiki-article h3 {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-brand-deep);
  margin: 28px 0 12px;
}
.wiki-article ul,
.wiki-article ol { margin: 0 0 16px; padding-left: 22px; }
.wiki-article li {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text-body);
  margin-bottom: 9px;
}
.wiki-article strong { color: var(--c-text-heading); font-weight: 700; }
.wiki-tip {
  background: rgba(201, 220, 227, .18);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text-body);
}
.wiki-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 20px;
  font-size: 15px;
}
.wiki-table th,
.wiki-table td {
  border: 1px solid var(--c-border);
  padding: 11px 14px;
  text-align: left;
  line-height: 1.6;
}
.wiki-table th {
  background: var(--c-surface);
  font-weight: 700;
  color: var(--c-text-heading);
  white-space: nowrap;
}
.wiki-table td:first-child { font-weight: 600; color: var(--c-text-heading); }
/* 表格横向滚动容器：移动端避免表格撑破页面宽度 */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .wiki-table { min-width: 520px; }

/* =========================================================
   健康百科列表页：全宽紧凑卡片（参考新闻中心式布局）
   ========================================================= */
.wiki-list .container {
  max-width: 100%;
  padding-left: 64px;
  padding-right: 64px;
}
.wiki-list .section-head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.wiki-list .news-grid {
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wiki-list .news-card {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid var(--c-border);
}
.wiki-list .news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(44, 110, 143, .10);
}
.wiki-list .news-card__media {
  aspect-ratio: 16 / 7;
  border-radius: 10px 10px 0 0;
}
.wiki-list .news-card__cat {
  position: static;
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
}
.wiki-list .news-card__body { padding: 12px; }
.wiki-list .news-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--c-text-secondary);
}
.wiki-list .news-card__meta time { color: var(--c-accent); font-weight: 600; }
.wiki-list .news-card__title {
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 6px;
}
.wiki-list .news-card__excerpt {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.wiki-list .card-link { font-size: 12px; }

@media (max-width: 1280px) {
  .wiki-list .news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .wiki-list .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .wiki-list .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wiki-list .container { padding-left: 24px; padding-right: 24px; }
  .wiki-list .news-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   健康百科分类筛选标签（参考新闻中心：标题+计数左侧 / 筛选右侧）
   ========================================================= */
.wiki-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
}
.wiki-header { display: flex; flex-direction: column; gap: 2px; }
.wiki-header .section-title { margin-bottom: 0; }
.wiki-count {
  font-size: 14px;
  color: var(--c-text-secondary);
  margin: 0;
}
.wiki-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.wiki-filter__btn {
  appearance: none;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.wiki-filter__btn:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.wiki-filter__btn.is-active {
  background: var(--c-brand-deep);
  border-color: var(--c-brand-deep);
  color: #fff;
}
@media (max-width: 860px) {
  .wiki-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wiki-filter { justify-content: flex-start; }
}

/* =========================================================
   联系我们 contact.html
   ========================================================= */
.contact-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 24px;
  align-items: stretch;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(10, 29, 44, .06);
  overflow: hidden;
}
.contact-info {
  padding: 32px;
}
.contact-info .section-title { margin-bottom: 6px; }
.contact-info .section-desc { color: var(--c-text-secondary); font-size: 15px; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(201, 220, 227, .35);
  color: var(--c-brand-deep);
}
.contact-item__body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.contact-item__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
  letter-spacing: .04em;
}
.contact-item__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-body);
}
.contact-item__value a { color: inherit; text-decoration: none; }
.contact-item__value a:hover { color: var(--c-brand-deep); text-decoration: underline; }

.contact-map {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.contact-map__placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-text-secondary);
  text-align: center;
  padding: 24px;
}
.contact-map__pin {
  color: var(--c-brand-deep);
  margin-bottom: 12px;
}
.contact-map__addr {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-heading);
  margin: 0 0 6px;
}
.contact-map__tip {
  font-size: 12px;
  color: var(--c-text-secondary);
}

/* 地图容器：高德 SDK 靠容器尺寸算中心点与缩放，容器没有确定高度就一片空白。
   占位块 absolute 居中叠在容器上，data-map-state="on" 时由 JS 移除。
   ⚠️ .contact-card 本身无 padding（只有 border + overflow:hidden），
      所以地图只需铺满容器即可；卡片高度由 .contact-wrap 的 align-items:stretch 决定，
      容器要 flex:1 撑满，否则底部会露出一条白带。 */
.contact-map {
  overflow: hidden;
}
.contact-map__canvas {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  background: var(--c-brand, #C9DCE3);
}
.contact-map__canvas .contact-map__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  background: var(--c-brand, #C9DCE3);
  transition: opacity .3s ease;
}
.contact-map__canvas[data-map-state="on"] .contact-map__placeholder {
  display: none;
}

.contact-form {
  max-width: 760px;
  margin: 0 auto;
}
.contact-form__head { text-align: center; margin-bottom: 36px; }
.contact-form__head .section-title { margin-bottom: 8px; }
.contact-form__head .section-desc { margin-bottom: 0; }

.contact-form__form { display: flex; flex-direction: column; gap: 20px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-body);
}
.form-group .required { color: #E04A3A; margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--c-text-body);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
  font-family: inherit;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A9B6C1; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-brand-deep);
  box-shadow: 0 0 0 3px rgba(44, 110, 143, .10);
}
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239DB8C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.form-group select option { color: var(--c-text-body); }
.form-group textarea { resize: vertical; min-height: 110px; }

.contact-form__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.btn--wide { padding-left: 56px; padding-right: 56px; }
.contact-form__privacy {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin: 0;
}

@media (max-width: 860px) {
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-map { min-height: 260px; }
  .contact-map__placeholder { min-height: 260px; }
  .contact-map__canvas { min-height: 260px; }
  .form-grid { grid-template-columns: 1fr; }
}


/* ========== 健康百科详情页（新闻详情风格） ========== */
.wiki-breadcrumb-section {
  background: var(--c-surface);
  padding: 16px 0;
}
.wiki-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-text-secondary);
}
.wiki-breadcrumb a {
  color: var(--c-text-body);
  text-decoration: none;
}
.wiki-breadcrumb a:hover { color: var(--c-accent); }
.wiki-breadcrumb .sep { color: var(--c-text-muted); }
.wiki-breadcrumb .current { color: var(--c-text-muted); }

.wiki-detail-head-section { padding-top: 32px; padding-bottom: 24px; }
.wiki-detail-head { max-width: 900px; }
.wiki-detail-title {
  font-family: var(--font-title);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--c-text-heading);
  margin: 0 0 16px;
}
.wiki-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13.5px;
  color: var(--c-text-secondary);
}
.wiki-detail-meta .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.wiki-detail-meta .meta-dot { color: var(--c-text-muted); }
.wiki-detail-meta a.meta-cat {
  color: var(--c-brand-deep);
  text-decoration: none;
  font-weight: 500;
}
.wiki-detail-meta a.meta-cat:hover { color: var(--c-accent); }

.wiki-detail-body-section { padding-top: 0; }
.wiki-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.wiki-article--detail {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 40px;
}
.wiki-sidebar { position: sticky; top: 90px; }
.wiki-sidebar__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-heading);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-accent);
}

.wiki-related { display: flex; flex-direction: column; gap: 14px; }
.wiki-related__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.wiki-related__item:hover { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.wiki-related__media {
  width: 88px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-surface);
}
.wiki-related__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.wiki-related__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--c-text-secondary);
  margin-bottom: 5px;
}
.wiki-related__cat {
  color: var(--c-accent);
  font-weight: 600;
}
.wiki-related__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-text-heading);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wiki-post-nav-section { padding-top: 0; padding-bottom: 60px; }
.wiki-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.wiki-post-nav__prev,
.wiki-post-nav__next,
.wiki-post-nav__prev.is-disabled,
.wiki-post-nav__next.is-disabled {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wiki-post-nav__prev:hover,
.wiki-post-nav__next:hover { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.wiki-post-nav__prev.is-disabled,
.wiki-post-nav__next.is-disabled { color: var(--c-text-muted); background: var(--c-surface); cursor: default; }
.wiki-post-nav__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent);
}
.wiki-post-nav__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text-heading);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wiki-post-nav__next { text-align: right; align-items: flex-end; }

/* 整页通栏：标题 / 正文 / 右侧栏一起铺满屏宽，保留「文章 + 侧栏」两栏结构。
   这些类只被 6 个百科详情页使用（wiki.html 列表页用的是 wiki-list / wiki-filter 等），
   所以直接覆盖 .container 的 1200px 上限不会影响其它页面。 */
.wiki-breadcrumb-section .container,
.wiki-detail-head-section .container,
.wiki-detail-body-section .container,
.wiki-post-nav-section .container {
  max-width: none;
  /* 通栏后正文贴边——改用与页眉一致的 --gutter，正文卡片左缘与 logo 左缘对齐 */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wiki-detail-head { max-width: none; }

@media (max-width: 900px) {
  .wiki-detail-layout { grid-template-columns: 1fr; gap: 36px; }
  .wiki-sidebar { position: static; }
  .wiki-article--detail { padding: 24px; }
  .wiki-detail-title { font-size: 26px; }
  .wiki-post-nav { grid-template-columns: 1fr; }
}


/* =========================================================
   净水设备页 · 产品主线重构（2026-09-23）
   结构沿用净水品牌稿，视觉统一到科丽艾设计令牌
   ========================================================= */

/* ---------- 首屏信任行 ---------- */
.hero-bleed__note {
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .74);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* ---------- 数据条（深色） ---------- */
.wat-band { background: var(--c-footer-bg); padding: 56px 0; }
.wat-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wat-band__item { padding: 0 34px; border-right: 1px solid rgba(255, 255, 255, .10); }
.wat-band__item:first-child { padding-left: 0; }
.wat-band__item:last-child { border-right: 0; padding-right: 0; }
.wat-band__value {
  font-family: var(--font-num);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.wat-band__label { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .60); }

/* ---------- 九个「0」（深色九宫格） ---------- */
.wat-zero { background: var(--c-footer-bg); padding: clamp(64px, 8vw, 96px) 0; }
.wat-zero__head { max-width: 760px; margin-bottom: 46px; }
.wat-zero__title {
  font-family: var(--font-title);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 16px;
}
.wat-zero__lead { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .66); }
.wat-zero__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wat-zero__item {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-md);
  padding: 26px 24px 24px;
  transition: border-color .25s ease, background .25s ease;
}
.wat-zero__item:hover { border-color: var(--c-glow); background: rgba(255, 255, 255, .04); }
.wat-zero__num {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-glow);
  line-height: 1;
  margin-bottom: 14px;
}
.wat-zero__label {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.wat-zero__desc { font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .58); }
.wat-zero__note { margin-top: 28px; font-size: 12.5px; color: rgba(255, 255, 255, .40); }

/* ---------- 图片「contain」适配（技术示意图不被裁） ---------- */
.media-contain img { object-fit: contain; padding: 18px; }

/* ---------- 三列图片卡（产品优势） ---------- */
.duct-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 图文分栏反向（图右文左） ---------- */
.tech-grid--rev { grid-template-columns: .95fr 1.05fr; }
.tech-grid--rev .tech-grid__media { order: 2; }

/* ---------- 服务方案 · 三档 ---------- */
.wat-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.wat-plan__card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 34px 30px 32px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wat-plan__card:hover { border-color: var(--c-accent); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(201, 220, 227, .16); }
.wat-plan__card--featured { border-color: var(--c-accent); }
.wat-plan__name {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-brand-deep);
  margin-bottom: 14px;
}
.wat-plan__price {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--c-text-heading);
  line-height: 1.25;
}
.wat-plan__price small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-muted);
  margin-top: 6px;
  letter-spacing: .02em;
}
.wat-plan__desc { font-size: 13.5px; line-height: 1.75; color: var(--c-text-secondary); margin: 14px 0 22px; }
.wat-plan__rule { height: 1px; background: var(--c-border); margin-bottom: 22px; }
.wat-plan__features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.wat-plan__features li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--c-text-body); }
.wat-plan__features li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand-deep); }
.wat-plan__cta { margin-top: auto; }
.wat-plan__cta .btn { width: 100%; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .duct-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .wat-band { padding: 44px 0; }
  .wat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .wat-band__item:nth-child(odd) { padding-left: 0; }
  .wat-band__item:nth-child(even) { border-right: 0; padding-right: 0; }
  .tech-grid--rev { grid-template-columns: 1fr; }
  .tech-grid--rev .tech-grid__media { order: 0; }
  .wat-plan { grid-template-columns: 1fr; }
  .wat-zero__item { padding: 22px 18px 20px; }
}
@media (max-width: 640px) {
  .duct-grid--3 { grid-template-columns: 1fr; }
  .wat-band__grid { grid-template-columns: 1fr; gap: 0; }
  .wat-band__item { padding: 0 0 24px; border-right: 0; }
  .wat-band__item:last-child { padding-bottom: 0; }
  .wat-zero__grid { gap: 10px; }
  .wat-zero__item { padding: 18px 12px 16px; }
  .wat-zero__num { font-size: 24px; margin-bottom: 10px; }
  .wat-zero__label { font-size: 13.5px; }
  .wat-zero__desc { font-size: 11.5px; line-height: 1.6; }
}

/* ---------- 产品中心（products.html，双态：全部产品 + 分类页） ---------- */
.hero-bleed--prod { background-position: center; }
.prd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 14px;
}
.prd-crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s ease; }
.prd-crumbs a:hover { color: var(--c-glow, #E8BE78); }
.prd-crumbs .sep { opacity: .55; }
.prd-crumbs .current { color: #fff; font-weight: 600; }

.prd-section { padding: 72px 0 88px; }
.prd-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* 左侧分类栏 */
.prd-side {
  position: sticky;
  top: 96px;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 22px 18px;
}
.prd-side__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-heading);
  padding: 0 10px;
  margin-bottom: 10px;
}
.prd-side__nav { display: grid; gap: 4px; }
.prd-side__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--c-text-body, #444);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.prd-side__link:hover { background: var(--c-surface); color: var(--c-brand-deep); }
.prd-side__link.is-active { background: var(--c-brand, #C9DCE3); color: var(--c-brand-deep); font-weight: 700; }
.prd-side__num { font-size: 12px; color: var(--c-text-muted, #999); font-family: Inter, Arial, sans-serif; }
.prd-side__link.is-active .prd-side__num { color: var(--c-brand-deep); }

/* 右侧主体 */
.prd-main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.prd-main__title { font-size: 26px; font-weight: 700; color: var(--c-text-heading); margin: 0; }
.prd-main__count { font-size: 13px; color: var(--c-text-secondary); margin: 0; }

.prd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.prd-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(44, 110, 143, .14);
  border-color: rgba(44, 110, 143, .35);
}
.prd-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--c-surface);
  background-size: cover;
  background-position: center;
}
.prd-card__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-brand-deep);
}
.prd-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}
.prd-card__title { font-size: 17px; font-weight: 700; color: var(--c-text-heading); margin: 0; line-height: 1.4; }
.prd-card__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-text-secondary);
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prd-card__more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent, #C07A2E);
  transition: color .2s ease;
}
.prd-card:hover .prd-card__more { color: var(--c-accent-deep, #974F12); }

.prd-empty {
  padding: 64px 24px;
  text-align: center;
  background: var(--c-surface);
  border-radius: 16px;
  color: var(--c-text-secondary);
  font-size: 14.5px;
}

/* 分页 */
.prd-page { margin-top: 36px; }
.pc-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pc-pagination a,
.pc-pagination .dots {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-white, #fff);
  font-size: 14px;
  color: var(--c-text-body, #444);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pc-pagination a:hover { border-color: var(--c-accent); color: var(--c-accent-deep, #974F12); }
.pc-pagination a.active { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; font-weight: 700; }
.pc-pagination .dots { border: 0; background: none; color: var(--c-text-muted, #999); }

@media (max-width: 1100px) {
  .prd-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 32px; }
  .prd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .prd-section { padding: 52px 0 64px; }
  /* minmax(0,1fr)：不用 minmax 的话 grid 项按内容 min-width:auto 撑宽轨道（导航横排 515px 会顶破视口） */
  .prd-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prd-side { position: static; min-width: 0; max-width: 100%; }
  .prd-side__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .prd-side__link { white-space: nowrap; }
}
@media (max-width: 640px) {
  .prd-grid { grid-template-columns: 1fr; }
  .prd-main__title { font-size: 22px; }
}