/* ============================================================================
   净水设备页 · AQUAPURA 设计稿版式
   文件：css/water-health.css   （仅被 water-health.html 引用）

   说明：
   1. 本文件按设计稿 1:1 还原版式（1440 稿 / 内容宽 1160 / 区块上下留白 120），
      不使用 base.css 里的页面级组件（.hero-bleed / .why-grid / .tech-grid /
      .svc-grid / .eng-section / .cta-band / .wat-* 等），只复用：
        · base.css 的重置与设计令牌
        · .container（1200 上限 + 20 内边距 = 内容宽 1160，与设计稿完全一致）
        · .site-header / .site-footer / .btn（页头页脚与全站其他页统一）
   2. 设计稿字体：标题 Noto Serif SC Light、正文 Noto Sans SC、数字 Inter。
      按全站约定优先使用本机字体，逐级回落。
   3. 所有区块类名统一 aq- 前缀，避免与全站既有类名冲突。
   ============================================================================ */

.aq-page {
  /* 色板（取自设计稿） */
  --aq-ink:        #0B2A33;   /* 主深色：标题 / 深色底块 */
  --aq-ink-2:      #17414D;   /* 次级深色：小标题 / 列表文字 */
  --aq-body:       #4A6B74;   /* 正文 */
  --aq-muted:      #5C7A83;   /* 说明文字 */
  --aq-muted-2:    #6E8C94;   /* 弱说明 */
  --aq-muted-3:    #8AA5AD;   /* 最小字 / 价格单位 */
  --aq-band-label: #7FA3AC;   /* 深底小字 */
  --aq-cyan:       #17A8C4;   /* 强调色 */
  --aq-cyan-2:     #7FD8E8;   /* 深底强调色 */
  --aq-mist:       #F5FAFB;   /* 浅底块 */
  --aq-pale:       #EDF6F9;   /* 「九个0」底色 */
  --aq-rule:       #DCE9ED;
  --aq-rule-2:     #E4EFF2;
  --aq-dark-rule:  #1B3B45;
  --aq-on-dark-2:  #A9C4CB;
  --aq-on-dark-3:  #D7E7EA;

  /* 字体（设计稿字体 → 本机常见中文字体逐级回落） */
  --aq-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --aq-sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --aq-num:   "Inter", "DIN Pro", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 节奏 */
  --aq-pad: 120px;
  --aq-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---------------------------------------------------------------------------
   通用：区块 / 标题 / 按钮
   --------------------------------------------------------------------------- */
.aq-sec { padding: var(--aq-pad) 0; }
.aq-sec--white { background: #fff; }
.aq-sec--mist  { background: var(--aq-mist); }

.aq-head { display: flex; flex-direction: column; gap: 18px; }
.aq-head--center { align-items: center; text-align: center; }

.aq-h2 {
  font-family: var(--aq-serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.36;
  color: var(--aq-ink);
  letter-spacing: .005em;
}
.aq-h2--sm { font-size: 38px; line-height: 1.4; }

.aq-lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--aq-muted);
  max-width: 720px;
}
.aq-lead--narrow { max-width: 620px; }

/* 区块头 → 内容 的间距（设计稿 64） */
.aq-head + .aq-body { margin-top: 64px; }

.aq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 36px;
  border-radius: 100px;
  font-family: var(--aq-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .3s var(--aq-ease), color .3s var(--aq-ease),
              box-shadow .3s var(--aq-ease), transform .3s var(--aq-ease);
}
.aq-btn--dark  { background: var(--aq-ink); color: #fff; }
.aq-btn--dark:hover { background: #12404D; }
.aq-btn--white { background: rgba(255,255,255,.88); color: var(--aq-ink); }
.aq-btn--white:hover { background: #fff; }
.aq-btn--light { background: #fff; color: var(--aq-ink); }
.aq-btn--light:hover { background: #EAF4F7; }
.aq-btn--ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.aq-btn--ghost:hover { background: rgba(255,255,255,.08); }
.aq-btn--outline {
  background: #fff; color: var(--aq-ink);
  box-shadow: inset 0 0 0 1px var(--aq-rule);
}
.aq-btn--outline:hover { box-shadow: inset 0 0 0 1px #B9D4DA; }

/* ---------------------------------------------------------------------------
   1. 首屏
   --------------------------------------------------------------------------- */
.aq-hero {
  position: relative;
  /* 高度跟随视口宽度（≈1.67:1），贴近原图 3:2 比例：
     cover 铺满整屏时上下只裁约 5%，靠 center top 把这点裁切全部下压到底部，
     顶部林雾与净水器完整保留，且左右不留任何模糊边 */
  height: clamp(680px, 60vw, 1280px);
  background: var(--aq-mist);
  overflow: hidden;
  isolation: isolate;
}
.aq-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../images/wat-aq-hero.jpg") center top / cover no-repeat;
}
/* 蒙版：左侧保住文案可读性，40% 之后快速转透，让净水器与溪流完整透出 */
.aq-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(249,253,255,.96) 0%,
    rgba(248,252,255,.90) 18%,
    rgba(247,252,255,.74) 30%,
    rgba(246,251,255,.44) 44%,
    rgba(244,250,255,.18) 60%,
    rgba(243,250,255,.04) 78%,
    rgba(242,250,255,0) 100%
  );
}
.aq-hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}
.aq-hero__title {
  font-family: var(--aq-serif);
  font-weight: 300;
  font-size: 68px;
  line-height: 1.32;
  color: var(--aq-ink);
  max-width: 760px;
}
.aq-hero__sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--aq-ink-2);
}
.aq-hero__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--aq-body);
  max-width: 540px;
}
.aq-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.aq-hero__trust { font-size: 13px; line-height: 1.6; color: var(--aq-muted-2); }

/* 蒙版减淡后，文字用浅色光晕兜底，保证压在图上依然清晰 */
.aq-hero__title,
.aq-hero__sub,
.aq-hero__desc,
.aq-hero__trust {
  text-shadow: 0 1px 2px rgba(255,255,255,.90), 0 0 22px rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------------------
   2. 数据条
   --------------------------------------------------------------------------- */
.aq-band { background: var(--aq-ink); }
.aq-band__grid {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.aq-band__item { display: flex; flex-direction: column; gap: 8px; }
.aq-band__v {
  font-family: var(--aq-num);
  font-weight: 300;
  font-size: 50px;
  line-height: 1;
  color: #fff;
}
.aq-band__l { font-size: 14px; line-height: 1.5; color: var(--aq-band-label); }

/* ---------------------------------------------------------------------------
   3. 过滤技术（左图右四步）
   --------------------------------------------------------------------------- */
.aq-stack { display: flex; flex-direction: column; gap: 72px; }

.aq-split { display: flex; gap: 76px; align-items: center; }
.aq-split__media {
  flex: 0 0 520px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--aq-mist);
}
.aq-split__media img {
  width: 100%; height: 496px; object-fit: cover; display: block;
}
.aq-split__body { flex: 1 1 auto; min-width: 0; }

.aq-steps { list-style: none; }
.aq-steps__item {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 30px;
}
.aq-steps__item:last-child { padding-bottom: 0; }
.aq-steps__t {
  font-family: var(--aq-sans);
  font-size: 19px; font-weight: 500; line-height: 1.5;
  color: var(--aq-ink);
}
.aq-steps__no { margin-right: 18px; }
.aq-steps__d { font-size: 15px; line-height: 1.65; color: var(--aq-muted); }

/* ---------------------------------------------------------------------------
   4. 净化系统（整幅实拍 + 三条要点）
   --------------------------------------------------------------------------- */
.aq-stage { border-radius: 24px; overflow: hidden; }
.aq-stage img { width: 100%; height: auto; display: block; }

.aq-points { display: flex; gap: 56px; }
/* 盾牌 Sprite（chrome 定义块）不参与布局 */
.aq-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.aq-stage ~ .aq-points { margin-top: 64px; }
.aq-points__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* 徽章：三枚同款盾牌（内联 SVG），随列宽等比缩放，图标各不相同
   两侧 auto 外边距 → 徽章在本列水平居中；下方分隔线/标题/描述仍保持左对齐 */
.aq-points__badge {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 16px 30px rgba(23, 168, 196, .20));
}
/* 盾牌内图标：主线（青）+ 虚线（额定基准线） */
.aq-points__ico {
  fill: none;
  stroke: var(--aq-cyan);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aq-points__ico--ghost { stroke-opacity: .45; stroke-dasharray: 3 8; stroke-width: 3; }
.aq-points__note {
  margin-top: 56px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--aq-muted-3);
}
.aq-points__note b {
  font-family: var(--aq-num);
  font-weight: 600;
  font-size: 16px;
  color: var(--aq-ink-2);
}
.aq-points__rule { height: 1px; background: var(--aq-rule); }
.aq-points__t { font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--aq-ink); }
.aq-points__d { font-size: 15px; line-height: 1.65; color: var(--aq-muted); }

/* ---------------------------------------------------------------------------
   5. 九个「0」
   --------------------------------------------------------------------------- */
.aq-zeros {
  background: var(--aq-pale);
  padding: 110px 0;
  text-align: center;
}
.aq-zeros__copy {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.aq-zeros__h2 {
  font-family: var(--aq-serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.42;
  color: var(--aq-ink);
}
.aq-zeros__lead { font-size: 15px; line-height: 1.7; color: var(--aq-muted); max-width: 720px; }
.aq-zeros__note { font-size: 13px; line-height: 1.6; color: var(--aq-muted-3); }
.aq-zeros__panel {
  margin-top: 56px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}
.aq-zeros__panel img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   6. 产品细节三卡
   --------------------------------------------------------------------------- */
.aq-cards { display: flex; gap: 28px; }
.aq-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--aq-mist);
  border-radius: 20px;
  overflow: hidden;
}
.aq-card__media { height: 330px; }
.aq-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 30px 34px;
}
.aq-card__t { font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--aq-ink); }
.aq-card__d { font-size: 15px; line-height: 1.65; color: var(--aq-muted); }

/* ---------------------------------------------------------------------------
   7. 厨下工程（左图右文）
   --------------------------------------------------------------------------- */
.aq-install { display: flex; gap: 72px; align-items: center; }
.aq-install__media {
  flex: 0 0 560px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--aq-mist);
}
.aq-install__media img { width: 100%; height: 479px; object-fit: cover; display: block; }
.aq-install__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 26px;
}
.aq-mini { display: flex; flex-direction: column; gap: 20px; }
.aq-mini__t { font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--aq-ink); }
.aq-mini__d { font-size: 14px; line-height: 1.6; color: var(--aq-muted-2); margin-top: 6px; }

/* ---------------------------------------------------------------------------
   8. 全屋净水
   --------------------------------------------------------------------------- */
.aq-whole { display: flex; gap: 80px; align-items: center; }
.aq-whole__media {
  flex: 0 0 520px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--aq-mist);
}
.aq-whole__media img { width: 100%; height: 709px; object-fit: cover; display: block; }
.aq-whole__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 30px;
}
.aq-whole__t { font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--aq-ink); }
.aq-whole__d { font-size: 15px; line-height: 1.65; color: var(--aq-muted); margin-top: 8px; }
.aq-whole__note { font-size: 14px; line-height: 1.65; color: var(--aq-muted-3); }

.aq-banner { margin-top: 64px; border-radius: 24px; overflow: hidden; }
.aq-banner img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   9. 服务方案三档
   --------------------------------------------------------------------------- */
.aq-plans { display: flex; gap: 28px; align-items: stretch; }
.aq-plan {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  padding: 38px;
  background: #fff;
  border-radius: 22px;
}
.aq-plan--dark { background: var(--aq-ink); }
.aq-plan__name { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--aq-cyan); }
.aq-plan--dark .aq-plan__name { color: var(--aq-cyan-2); }
.aq-plan__price-row { display: flex; align-items: baseline; gap: 6px; }
.aq-plan__price {
  font-family: var(--aq-num);
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  color: var(--aq-ink);
}
.aq-plan--dark .aq-plan__price { color: #fff; }
.aq-plan__price--text { font-family: var(--aq-sans); font-weight: 500; font-size: 30px; line-height: 1.2; }
.aq-plan__unit { font-size: 14px; line-height: 1.4; color: var(--aq-muted-3); }
.aq-plan--dark .aq-plan__unit { color: var(--aq-band-label); }
.aq-plan__desc { font-size: 14px; line-height: 1.65; color: var(--aq-body); }
.aq-plan--dark .aq-plan__desc { color: var(--aq-on-dark-2); }
.aq-plan__rule { height: 1px; background: var(--aq-rule-2); margin: 6px 0; }
.aq-plan--dark .aq-plan__rule { background: var(--aq-dark-rule); }
.aq-plan__feats {
  list-style: none;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 15px; line-height: 1.6;
  color: var(--aq-ink-2);
}
.aq-plan--dark .aq-plan__feats { color: var(--aq-on-dark-3); }
.aq-plan__cta { margin-top: auto; padding-top: 4px; }
.aq-plan__cta .aq-btn { width: 100%; padding: 15px 24px; }

/* ---------------------------------------------------------------------------
   10. 底部 CTA
   --------------------------------------------------------------------------- */
.aq-cta {
  padding: 110px 0;
  background: linear-gradient(135deg, #12404D 0%, #08212A 100%);
  text-align: center;
}
.aq-cta__inner {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.aq-cta__title {
  font-family: var(--aq-serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.36;
  color: #fff;
}
.aq-cta__sub { font-size: 16px; line-height: 1.7; color: #8FB0B8; }
.aq-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.aq-cta__note { font-size: 13px; line-height: 1.6; color: var(--aq-muted-2); }

/* ---------------------------------------------------------------------------
   响应式
   --------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .aq-hero__title { font-size: 60px; }
}

@media (max-width: 1100px) {
  .aq-page { --aq-pad: 96px; }
  .aq-split,
  .aq-install,
  .aq-whole { flex-direction: column; align-items: stretch; gap: 40px; }
  .aq-split__media,
  .aq-install__media,
  .aq-whole__media { flex: 0 0 auto; width: 100%; }
  .aq-split__media img { height: 380px; }
  .aq-install__media img { height: 400px; }
  .aq-whole__media img { height: 520px; }
  .aq-points { gap: 32px; }
}

@media (max-width: 900px) {
  .aq-hero { height: 680px; }
  .aq-hero__title { font-size: 50px; }
  .aq-hero__sub { font-size: 17px; }
  .aq-band__grid { height: 150px; }
  .aq-band__v { font-size: 38px; }
  .aq-h2 { font-size: 34px; }
  .aq-h2--sm { font-size: 30px; }
  .aq-cards { flex-wrap: wrap; }
  .aq-card { flex: 1 1 300px; }
  .aq-plans { flex-wrap: wrap; }
  .aq-plan { flex: 1 1 300px; }
  .aq-cta__title { font-size: 34px; }
}

@media (max-width: 768px) {
  .aq-page { --aq-pad: 72px; }
  .aq-hero { height: auto; min-height: 0; padding: 120px 0 88px; }
  .aq-hero__inner { height: auto; }
  .aq-hero__title { font-size: 40px; max-width: none; }
  .aq-hero__veil {
    background: linear-gradient(
      to bottom,
      rgba(247,252,255,.97) 0%,
      rgba(245,251,255,.92) 46%,
      rgba(243,250,255,.70) 72%,
      rgba(242,250,255,.40) 100%
    );
  }
  .aq-band__grid {
    height: auto;
    padding: 40px 0;
    flex-wrap: wrap;
    gap: 28px 24px;
  }
  .aq-band__item { flex: 1 1 42%; }
  .aq-band__v { font-size: 32px; }
  .aq-points { flex-direction: column; gap: 30px; }
  .aq-card__media { height: 260px; }
  .aq-split__media img,
  .aq-install__media img { height: 280px; }
  .aq-whole__media img { height: 400px; }
  .aq-points__t,
  .aq-steps__t,
  .aq-card__t,
  .aq-whole__t { font-size: 17px; }
  .aq-zeros { padding: 72px 0; }
  .aq-zeros__h2 { font-size: 30px; }
  .aq-zeros__panel { margin-top: 40px; border-radius: 18px; }
  .aq-cta { padding: 80px 0; }
}

@media (max-width: 560px) {
  .aq-page { --aq-pad: 56px; }
  .aq-hero { padding: 96px 0 64px; }
  .aq-hero__title { font-size: 32px; }
  .aq-hero__desc { font-size: 15px; }
  .aq-hero__ctas .aq-btn { flex: 1 1 100%; }
  .aq-h2 { font-size: 27px; }
  .aq-h2--sm { font-size: 25px; }
  .aq-lead { font-size: 15px; }
  .aq-band__item { flex: 1 1 100%; }
  .aq-plan { padding: 28px; }
  .aq-plan__price { font-size: 34px; }
  .aq-plan__price--text { font-size: 25px; }
  .aq-plan__feats { gap: 16px; }
  .aq-cta__title { font-size: 27px; }
}