/* ==========================================================================
   恒美 HENGMEI · 招商官网（浅色极简版）
   --------------------------------------------------------------------------
   设计语言参考：农夫山泉「水健康知识」内容页
     · 纯白底 + 全站单一强调色  · 正文 14px / 行高 2.0  · 字重常规不加粗
     · 全宽摄影图 hero + 白色居中大标题  · 3–4 栏等宽文字栅格
     · 短横线做块前强调  · 几乎无圆角、无阴影、无卡片描边
     · 靠留白分层，不靠边框与投影
   品牌色值来自《HENGMEI 恒美品牌 VI_UI 视觉规范》，未做改动。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计 Token
   -------------------------------------------------------------------------- */
:root {
  /* —— 品牌色（VI §03，原值） —— */
  --brand:       #2154C2;   /* 恒美蓝 · 全站唯一强调色 */
  --brand-deep:  #14337E;
  --brand-dk:    #1A44A0;   /* hover 压深 */
  --navy:        #0D1F4D;   /* 藏蓝 · 摄影图遮罩 / 深色块 */
  --gold:        #C9A45C;   /* 辅助金 · 仅小面积点缀 */

  /* —— 浅色体系（VI §05：页面背景 #F5F6F8，描边 #D9DDE4） —— */
  --white:       #FFFFFF;
  --paper:       #F5F6F8;
  --paper-2:     #FAFBFC;
  --line:        #D9DDE4;   /* VI 指定描边 */
  --line-soft:   #ECEEF2;

  /* —— 文字 ——
     灰阶两级都必须过 WCAG AA（4.5:1），因为在 #FFF 与 #F5F6F8 两种底上都会被用到。
     实测：--muted 6.2:1 / 5.7:1，--muted-2 5.0:1 / 4.7:1。 */
  --ink:         #1A1A1A;   /* VI 墨黑 · 标题 */
  --text:        #333333;   /* 正文 */
  --muted:       #5C616B;   /* 次级说明 */
  --muted-2:     #6B6F78;   /* 三级 / 序号 / 免责 / 占位 */

  /* —— 尺寸 —— */
  /* --wrap 1240→1180、--gutter 40→48：
     笔记本（1080–1440px）下左右只留约 50px，避免内容挤成窄带浮在大片空白里，
     同时保持宽屏的宽松呼吸感。断点内的 --gutter 递减值不变。 */
  --wrap:        1180px;
  --gutter:      48px;
  --sec-y:       96px;      /* 区块上下留白，大留白是本风格的核心 */
  --r-btn:       6px;       /* VI §05：按钮 / 输入框 6px */
  --r-card:      8px;       /* VI §05：卡片 8px */

  /* —— 字体 —— */
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
          "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", Times, serif;  /* 西文标题 / 数字 */
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. Reset & 基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 2;                 /* 参考站的关键：行高 2.0，读起来很透气 */
  font-weight: 400;               /* 全站不加粗 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dk); }
button { font: inherit; color: inherit; }

/* 焦点可见性：保留 outline，不做全局取消 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

::selection { background: rgba(33, 84, 194, .14); }

/* 跳到主要内容 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-btn) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. 排版
   参考站特征：标题大而不粗（400），靠字号与留白建立层级
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 400; line-height: 1.45; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

h1 { font-size: 40px; letter-spacing: .01em; }
h2 { font-size: 32px; letter-spacing: .01em; }
h3 { font-size: 21px; }
h4 { font-size: 16px; line-height: 1.6; }

/* 中英混排的长标题，避免末行只落一两个字 */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* 导航/区块上的小标签 */
.kicker {
  display: inline-block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px; font-weight: 500;
}
.kicker--en { font-family: var(--mono); letter-spacing: .12em; }

/* 短横线强调（参考站的标志性小元素）
   注意：<hr> 带 UA 默认的 margin-inline:auto，必须显式清零，否则会被居中 */
.dash {
  display: block; width: 28px; height: 3px; background: var(--brand);
  margin: 0 0 20px; border: 0; padding: 0;
}
.dash--center { margin-left: auto; margin-right: auto; }
.dash--gold { background: var(--gold); }
.dash--navy { background: var(--navy); }

.lead { font-size: 16px; line-height: 1.95; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.9; color: var(--muted); }
.mono { font-family: var(--mono); font-size: .94em; letter-spacing: .01em; }
.num { font-family: var(--serif); font-size: 1.04em; letter-spacing: .01em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* --------------------------------------------------------------------------
   4. 布局
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 900px; }

.sec { padding: var(--sec-y) 0; }
.sec--paper { background: var(--paper); }
.sec--tight { padding: 64px 0; }
.sec--flush-top { padding-top: 0; }

.sec__head { margin-bottom: 48px; max-width: 780px; }
/* 标题下接多栏内容（.cards / .metrics / .caps 等）时，
   窄标题会与下方宽内容形成错位、右侧留白。加 .sec__head--wide
   把标题放宽到内容宽度，正文段落仍限长，不影响可读性。
   宽度跟随 --wrap（--wrap 已含左右 gutter，故减去 2×gutter）。 */
.sec__head--wide { max-width: calc(var(--wrap) - 2 * var(--gutter)); }
.sec__head--wide p { max-width: 780px; }
.sec--center .sec__head { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.sec__head p { margin-top: 16px; }

/* 栅格：等宽多栏，栏间距留大 */
.grid { display: grid; gap: 40px 44px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--gap-lg { gap: 56px 52px; }

/* --------------------------------------------------------------------------
   5. 导航
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__in { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand__mark { height: 26px; width: auto; flex: none; }
.brand__sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.brand__name { font-size: 16px; letter-spacing: .06em; line-height: 1.2; }
.brand__name small {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 10px; letter-spacing: .16em; color: var(--muted-2); text-transform: uppercase;
}

.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative; padding: 8px 14px; font-size: 14px; color: var(--text);
  border-radius: var(--r-btn);
}
.nav__link:hover { color: var(--brand); background: var(--paper); }
.nav__link[aria-current="page"] { color: var(--brand); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--brand);
}
.nav__tel {
  padding: 8px 12px; font-size: 13px; color: var(--muted);
  font-family: var(--mono); letter-spacing: .02em;
}
.nav__tel:hover { color: var(--brand); }
.nav__cta { flex: none; }

.nav__burger {
  display: none; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: #fff; cursor: pointer; position: relative; margin-left: auto;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  position: absolute; left: 50%; width: 18px; height: 1.5px; background: var(--ink);
  transform: translateX(-50%); content: '';
}
.nav__burger span { top: 50%; margin-top: -.75px; }
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }

/* --------------------------------------------------------------------------
   6. 首屏 Hero —— 全宽摄影图 + 藏蓝遮罩 + 白色居中大标题
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy) url(../img/hero-home.jpg) center / cover no-repeat;
  padding: 158px 0 150px;
  text-align: center;
}
/* 遮罩：底图换成实拍街景后，明暗分布由画面决定而不是设计预设，
   原来的 .30/.14/.26 是按「底图最亮处白字≥5.6:1」反算的，
   对新图不再成立——人物与车体正好落在文字区，会吃掉副标题的对比度。
   这里改为中间更实、上下更透的压法：文字区（约 20%–80% 高度）保证
   白字与正文都压在 ≥4.5:1 之上，同时保留上下街景的通透感。 */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 48%,
      rgba(13, 31, 77, .58) 0%, rgba(13, 31, 77, .40) 62%, rgba(13, 31, 77, .16) 100%),
    linear-gradient(180deg,
      rgba(13, 31, 77, .34) 0%,
      rgba(13, 31, 77, .22) 34%,
      rgba(13, 31, 77, .22) 66%,
      rgba(13, 31, 77, .40) 100%);
}
.hero__in { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.hero h1 {
  color: #fff; font-size: 44px; line-height: 1.42; letter-spacing: .015em;
  margin-bottom: 24px;
}
.hero .lead { color: rgba(255, 255, 255, .9); font-size: 16px; max-width: 720px; margin: 0 auto 36px; }
.hero .kicker { color: rgba(255, 255, 255, .86); }
.hero__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 首屏下方压住图片的白色数据条（参考站「白面板叠图」的做法） */
.hero-strip {
  position: relative; z-index: 2;
  margin: -72px auto 0; max-width: var(--wrap);
  background: #fff; border: 1px solid var(--line-soft);
  padding: 34px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.hero-strip__i { text-align: center; }
.hero-strip__n {
  font-family: var(--serif); font-size: 30px; color: var(--brand);
  line-height: 1.2; letter-spacing: .01em;
}
.hero-strip__t { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 6px; }

/* --------------------------------------------------------------------------
   7. 内页页头
   -------------------------------------------------------------------------- */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--navy) url(../img/hero-page.jpg) center / cover no-repeat;
  padding: 92px 0 84px;
}
/* 页头底图（hero-page.jpg）为「左留白 + 右车列」构图：文字走左侧留白区，
   车列在右侧完整保留。遮罩只需压住左侧幕墙的亮度、保住文字对比度，
   不必像上一版那样把左半屏整体压死，否则会丢掉玻璃幕墙的质感层次。 */
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,31,77,.68) 0%, rgba(13,31,77,.54) 44%, rgba(13,31,77,.26) 76%, rgba(13,31,77,.16) 100%),
    linear-gradient(180deg, rgba(13,31,77,.30), rgba(13,31,77,.22));
}
/* 页头内容块。三个坑记在这里，改之前先读：
   ① 它本身就是 .wrap，继承 `margin: 0 auto` —— 块的居中**不能动**，
      否则整块会滑到视口最左边。所以限宽只能加在子元素上，让文字在网格内左对齐。
   ② 子元素限宽 980 = 站内最长标题（招商页 h1）单行 959 + 余量，
      保证四个内页标题都单行、页头等高；引言另有 .pagehead .lead 的 720 限宽。
   ③ min-height 212 = 面包屑 45 + 单行标题 73 + 三行引言 94，
      文案短的页（关于我们）头图不再比其它页矮：四个内页页头实测统一 388px。 */
.pagehead__in { position: relative; z-index: 1; min-height: 212px; }
.pagehead__in > * { max-width: 980px; }
.pagehead h1 { color: #fff; font-size: 38px; line-height: 1.45; margin-bottom: 18px; }
.pagehead .lead { color: rgba(255, 255, 255, .88); max-width: 720px; }
.crumb { font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.66); margin-bottom: 20px; }
.crumb a { color: inherit; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 8px; opacity: .6; }

/* --------------------------------------------------------------------------
   8. 组件
   -------------------------------------------------------------------------- */

/* —— 8.1 无框要点项（参考站「水的种类」那种：短横线 + 标题 + 说明） —— */
.item { padding-top: 2px; }
.item h3, .item h4 { margin-bottom: 10px; }
.item p { color: var(--muted); font-size: 13.5px; line-height: 1.95; }
.item .dash { margin-bottom: 18px; }

/* —— 8.2 数据块 —— */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.fact__n {
  font-family: var(--serif); font-size: 38px; line-height: 1.15;
  color: var(--ink); letter-spacing: .01em;
}
.fact__n em { font-style: normal; font-size: 15px; color: var(--muted); margin-left: 4px; font-family: var(--sans); }
.fact__d { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
.fact__d b { display: block; color: var(--ink); font-weight: 400; font-size: 13.5px; }

/* —— 8.3 规格行（发丝线分隔，不用卡片） —— */
.specs { border-top: 1px solid var(--line); }
.spec {
  display: grid; grid-template-columns: 96px minmax(0, 260px) 1fr;
  gap: 24px 32px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--line-soft);
}
.spec__k {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--brand); padding-top: 5px;
}
.spec h3 { font-size: 19px; }
.spec h3 small {
  display: block; font-family: var(--serif); font-style: italic; font-size: 12px;
  letter-spacing: .12em; color: var(--muted-2); text-transform: uppercase; margin-top: 5px;
}
.spec p { color: var(--muted); font-size: 13.5px; line-height: 1.95; }
/* 金色仅作点缀：文字用墨黑保证 ≥4.5:1，金色只留描边与极浅底
   （#C9A45C 直接做 12px 正文色在白底只有 2.2:1，不达 AA） */
.spec__tag {
  display: inline-block; font-size: 12px; color: var(--ink);
  background: rgba(201, 164, 92, .12);
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 2px;
  padding: 1px 8px; line-height: 1.8; margin-bottom: 10px;
}
.spec ul { margin: 12px 0 0; padding: 0; list-style: none; }
.spec ul li {
  position: relative; padding-left: 16px; color: var(--muted);
  font-size: 13.5px; line-height: 2;
}
.spec ul li::before {
  content: ''; position: absolute; left: 0; top: .92em;
  width: 5px; height: 1px; background: var(--muted-2);
}

/* —— 8.4 Tab 栏（激活态＝实心品牌蓝底 + 白字） —— */
.tabs__bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line); border-bottom: 0; margin-bottom: 0;
}
.tab {
  appearance: none; border: 0; border-right: 1px solid var(--line);
  background: #fff; color: var(--text); cursor: pointer;
  padding: 17px 18px; font-size: 14px; text-align: center; line-height: 1.6;
}
.tab:last-child { border-right: 0; }
.tab:hover { background: var(--paper); color: var(--brand); }
.tab[aria-selected="true"] { background: var(--brand); color: #fff; }
.tab[aria-selected="true"]:hover { background: var(--brand-dk); color: #fff; }
/* 页签里的序号：不能写在行内，否则激活态的白字会被行内样式压住。
   #6B6F78 压在品牌蓝上只有 1.34:1，远不达 AA，所以激活态必须单独改色。
   顺序要紧：带 [aria-selected] 的规则要排在 :hover 之后，两者特异性相同。 */
.tab__n { margin-right: 8px; color: var(--muted-2); }
.tab:hover .tab__n { color: var(--brand); }
.tab[aria-selected="true"] .tab__n { color: rgba(255, 255, 255, .85); }
.tab[aria-selected="true"]:hover .tab__n { color: rgba(255, 255, 255, .85); }
.tabs__panel { padding-top: 56px; }
.tabs__panel[hidden] { display: none; }

/* —— 8.5 叠图内容面板（参考站「雪山面板」） —— */
.panel {
  position: relative;
  background: #fff url(../img/panel-light.jpg) center / cover no-repeat;
  padding: 56px 52px;
  border: 1px solid var(--line-soft);
}
.panel--flush { border: 0; }

/* —— 8.6 左右交替图文 —— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split__media {
  background: var(--paper) url(../img/panel-light.jpg) center / cover no-repeat;
  min-height: 320px; border: 1px solid var(--line-soft);
}
.split__body h3 { margin-bottom: 14px; font-size: 23px; }
.split__body p { color: var(--muted); font-size: 13.5px; }

/* —— 8.7 流程步骤 —— */
.flow { display: grid; gap: 0; border-top: 1px solid var(--line); }
.flow__i {
  display: grid; grid-template-columns: 84px 1fr; gap: 28px;
  padding: 26px 0; border-bottom: 1px solid var(--line-soft);
}
.flow__n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--brand); padding-top: 5px; }
.flow__b h4 { margin-bottom: 6px; font-size: 16px; }
.flow__b p { color: var(--muted); font-size: 13.5px; }
.flow__deliver { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }

/* 纵向要点列表（与横向流程条 .steps 区分开：不带箭头） */
.bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.bullets li {
  position: relative; padding-left: 18px;
  font-size: 13.5px; line-height: 1.95; color: var(--muted);
}
.bullets li::before {
  content: ''; position: absolute; left: 0; top: .95em;
  width: 6px; height: 1px; background: var(--muted-2);
}
.bullets--tight { gap: 6px; }

/* 横向步骤条（简版） */
.steps { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.steps li {
  display: flex; align-items: baseline; gap: 8px;
  padding-right: 18px; font-size: 13.5px; color: var(--muted);
}
.steps li:not(:last-child)::after {
  content: '→'; color: var(--muted-2); margin-left: 18px;
}

/* —— 8.8 表格（只有发丝线，没有外框与斑马纹） —— */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl caption {
  text-align: left; font-size: 13px; color: var(--muted-2);
  padding-bottom: 14px; letter-spacing: .02em;
}
.tbl th, .tbl td {
  text-align: left; padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
  line-height: 1.9; color: var(--muted);
}
.tbl thead th {
  border-bottom: 1px solid var(--line); color: var(--ink);
  font-weight: 400; font-size: 13px; letter-spacing: .04em; white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { color: var(--ink); }
/* 第一列是「名称 + 小字标签」，中文会在任意字间断行，读起来很难受；
   名称本身不折行，折行只发生在名称与标签之间。窄屏由 .tbl-wrap 横向滚动兜底。 */
.tbl td:first-child b { white-space: nowrap; }
.tbl td b { color: var(--ink); font-weight: 400; }
.tbl .tbl__n { font-family: var(--mono); font-size: 12px; color: var(--muted-2); width: 52px; }
.tbl-wrap { overflow-x: auto; }
.tbl-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.85; }

/* —— 8.9 引述 / 判断块 —— */
.quote {
  border-left: 3px solid var(--brand);
  padding: 6px 0 6px 28px; margin: 0;
}
.quote p { font-size: 19px; line-height: 1.85; color: var(--ink); }
.quote cite { display: block; font-style: normal; font-size: 13px; color: var(--muted-2); margin-top: 12px; }

/* —— 8.10 蓝底提示条 —— */
.note {
  border-left: 3px solid var(--gold);
  background: var(--paper);
  padding: 22px 26px; font-size: 13.5px; color: var(--muted); line-height: 1.95;
}
.note b { color: var(--ink); font-weight: 400; }
.note--brand { border-left-color: var(--brand); }

/* —— 8.11 图标要点网格（能力项） —— */
.cap { padding-top: 2px; }
.cap__k {
  font-family: var(--mono); font-size: 12px; color: var(--brand);
  letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.cap h4 { margin-bottom: 8px; }
.cap p { color: var(--muted); font-size: 13.5px; line-height: 1.95; }

/* —— 8.12 手风琴（FAQ） —— */
/* —— 8.12 折叠面板（把长文字收起来：FAQ / 明细表 / 使用说明） —— */
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line-soft); }
.acc__q {
  width: 100%; display: flex; align-items: center; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 26px 0; color: var(--ink); line-height: 1.7;
}
.acc__q h3 { font-size: 19px; margin: 0; }
.acc__q:hover h3 { color: var(--brand); }
.acc__k { flex: none; width: 34px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.acc__sign { flex: none; margin-left: auto; width: 18px; height: 18px; position: relative; }
.acc__sign::before, .acc__sign::after {
  content: ''; position: absolute; background: var(--brand);
  transition: transform .3s ease;
}
.acc__sign::before { left: 0; right: 0; top: 8.25px; height: 1.5px; }
.acc__sign::after { top: 0; bottom: 0; left: 8.25px; width: 1.5px; }
.acc__q[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); }
/* 用 grid 行高 0fr → 1fr 做高度动画，不需要 JS 量高度 */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1); }
.acc__a > .acc__in { overflow: hidden; }
.acc__q[aria-expanded="true"] + .acc__a { grid-template-rows: 1fr; }
.acc__body { padding: 2px 0 32px; max-width: 880px; }
.acc__body p { color: var(--muted); font-size: 13.5px; line-height: 2; margin-bottom: 14px; }
.acc__body > *:last-child { margin-bottom: 0; }

/* —— 8.13 按钮 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: 14.5px; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  text-align: center;
}
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--on-dark { background: #fff; color: var(--brand); border-color: #fff; }
.btn--on-dark:hover { background: rgba(255,255,255,.9); color: var(--brand-dk); }
.btn--on-dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--on-dark-ghost:hover { border-color: #fff; color: #fff; }
.btn--block { width: 100%; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 13.5px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* 文字链接箭头 */
.tlink { color: var(--brand); font-size: 14px; }
.tlink::after { content: ' →'; }

/* —— 8.14 CTA 区块 —— */
.cta {
  position: relative; overflow: hidden;
  background: var(--navy) url(../img/hero-page.jpg) center / cover no-repeat;
  padding: 76px 0; text-align: center;
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,77,.30), rgba(13,31,77,.24));
}
.cta__in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta h2 { color: #fff; margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,.86); margin-bottom: 30px; }

/* --------------------------------------------------------------------------
   9. 表单
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font-size: 13.5px; color: var(--ink); }
.req { color: var(--brand); }

.inp, .sel, .txt {
  width: 100%; padding: 12px 14px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font-family: inherit; font-size: 14px; line-height: 1.6;
  transition: border-color .18s ease;
}
.inp::placeholder, .txt::placeholder { color: var(--muted-2); }
.inp:hover, .sel:hover, .txt:hover { border-color: #C3C9D4; }
.inp:focus, .sel:focus, .txt:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(33, 84, 194, .1);
}
.sel { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2371757E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.txt { min-height: 116px; resize: vertical; }

.err { display: none; font-size: 12.5px; color: #C0392B; line-height: 1.7; }

/* 字段下方的补充说明（不是错误），如城市可手填的提示 */
.hint { display: block; font-size: 12px; color: var(--muted-2); line-height: 1.6; margin-top: 6px; }
.field--err .inp, .field--err .sel, .field--err .txt { border-color: #C0392B; }
.field--err .err { display: block; }

.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check input { flex: none; width: 16px; height: 16px; margin: 6px 0 0; accent-color: var(--brand); }
.check label { font-size: 13px; color: var(--muted); line-height: 1.9; cursor: pointer; }
.check.check--err label { color: #C0392B; }

.form-note { font-size: 12.5px; color: var(--muted-2); line-height: 1.9; }
.form-ok {
  display: none; border-left: 3px solid var(--brand); background: var(--paper);
  padding: 24px 28px; margin-top: 24px;
}
.form-ok.is-on { display: block; }
.form-ok b { display: block; font-weight: 400; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.form-ok p { font-size: 13.5px; color: var(--muted); }

/* 联系入口（联系页） */
.entry { display: grid; grid-template-columns: 92px minmax(0, 300px) 1fr; gap: 24px 32px;
  padding: 30px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.entry:first-of-type { border-top: 1px solid var(--line); }
.entry__k { font-family: var(--mono); font-size: 12px; color: var(--brand); letter-spacing: .1em; padding-top: 5px; }
.entry h3 { font-size: 18px; }
.entry h3 small { display: block; font-family: var(--serif); font-style: italic; font-size: 12px;
  letter-spacing: .12em; color: var(--muted-2); text-transform: uppercase; margin-top: 4px; }
.entry p { color: var(--muted); font-size: 13.5px; }
.entry__big { font-family: var(--serif); font-size: 26px; color: var(--brand); letter-spacing: .01em; }
.entry__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tag {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 2px; padding: 1px 9px; line-height: 1.8;
}
.tag--brand { color: var(--brand); border-color: rgba(33,84,194,.4); }

/* 地图占位 */
.map {
  border: 1px solid var(--line-soft); background: var(--paper);
  min-height: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px;
}
.map__k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--muted-2); }
.map p { font-size: 13px; color: var(--muted); max-width: 420px; }

/* --------------------------------------------------------------------------
   10. 页脚
   -------------------------------------------------------------------------- */
.foot { background: var(--paper); border-top: 1px solid var(--line-soft); padding: 68px 0 0; }
.foot__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 40px; padding-bottom: 56px; }
.foot__t { font-size: 14px; color: var(--ink); margin-bottom: 20px; }
.foot__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot__l a { font-size: 13.5px; color: var(--muted); }
.foot__l a:hover { color: var(--brand); }
.foot__tel { font-family: var(--serif); font-size: 34px; color: var(--brand); line-height: 1.2; letter-spacing: .01em; }
.foot__tel:hover { color: var(--brand-dk); }
.foot__tel-d { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.foot__addr { font-size: 13.5px; color: var(--muted); line-height: 1.95; margin-top: 20px; }
/* 注：页脚原有一块「企业微信 / 公众号」二维码占位（.foot__qr），
   因无真实二维码素材、且空占位显得未完成，已于 2026-10-06 连HTML 结构一并移除。
   将来若要加回真实二维码：结构放回 .foot__addr 之后，
   两个 <div> 内容换成 <img src="assets/img/qr-*.png" alt="...">，
   再把下面这段样式加回即可。 */
.foot__base {
  border-top: 1px solid var(--line); padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted-2);
}
/* 品牌色底条（参考站最底部那条红条的同位替代：改用品牌蓝） */
.foot__bar { background: var(--brand); }
.foot__bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0;
}
.foot__bar-in img { height: 42px; width: auto; }
.foot__bar-in span {
  color: rgba(255,255,255,.92); font-size: 14px; letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   11. 滚动揭示（渐进增强：JS 不可用时内容默认可见）
   -------------------------------------------------------------------------- */
.js-ready [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-ready [data-reveal].is-in { opacity: 1; transform: none; }
.js-ready [data-reveal][data-delay="1"] { transition-delay: .09s; }
.js-ready [data-reveal][data-delay="2"] { transition-delay: .18s; }
.js-ready [data-reveal][data-delay="3"] { transition-delay: .27s; }
.js-ready [data-reveal][data-delay="4"] { transition-delay: .36s; }
.js-ready [data-reveal][data-delay="5"] { transition-delay: .45s; }

/* --------------------------------------------------------------------------
   12. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --sec-y: 76px; --gutter: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 38px; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .spec { grid-template-columns: 72px 1fr; }
  .spec p { grid-column: 2; }
  .entry { grid-template-columns: 80px 1fr; }
  .entry p { grid-column: 2; }
  .split, .split--wide-left { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  body { line-height: 1.95; }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  .hero { padding: 108px 0 116px; }
  .hero h1 { font-size: 30px; }
  .pagehead { padding: 64px 0 60px; }
  .pagehead__in { min-height: 0; }   /* 窄屏不再锁高，按内容自适应 */
  .pagehead h1 { font-size: 27px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: 32px; }
  .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .hero-strip { margin-top: -56px; padding: 26px 24px; }
  .fact__n { font-size: 32px; }
  .quote p { font-size: 17px; }

  /* 移动端导航抽屉 */
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 0 16px; display: none;
  }
  .nav[data-open="true"] .nav__menu { display: flex; }
  .nav__link { padding: 14px var(--gutter); font-size: 15px; border-radius: 0; }
  .nav__link[aria-current="page"]::after { left: var(--gutter); right: auto; width: 24px; bottom: 8px; }
  .nav__tel { padding: 12px var(--gutter); }

  .tabs__bar { grid-template-columns: 1fr; }
  .tab { border-right: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 15px 18px; }
  .tab:last-child { border-bottom: 0; }

  .field-row { grid-template-columns: 1fr; }
  .panel { padding: 36px 24px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 40px; }
  .foot__bar-in span { display: none; }
  .spec, .entry { grid-template-columns: 1fr; gap: 10px; }
  .spec p, .entry p { grid-column: 1; }
  .flow__i { grid-template-columns: 56px 1fr; gap: 18px; }
  .steps li { display: block; padding-bottom: 6px; }
  .steps li:not(:last-child)::after { content: '↓'; display: block; margin: 4px 0 4px 2px; }
}

@media (max-width: 560px) {
  :root { --gutter: 22px; --sec-y: 62px; }
  .wrap--narrow { max-width: none; }
  .hero { padding: 92px 0 104px; }
  .hero__btns .btn { width: 100%; }
  .facts { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot__grid { grid-template-columns: 1fr; }
}

/* —— 12.1 变体 ——
   必须放在响应式之后：与上面媒体查询里的选择器同权重，靠源码顺序取胜，
   写成行内 style 会反过来压死媒体查询（首页数据条踩过这个坑）。 */
/* 只有 3 项的数据条（首页）：删掉「14 件商标」后用它保持三栏等宽 */
.hero-strip--trio { grid-template-columns: repeat(3, 1fr); }
/* 单列数据卡（关于我们）：3 张卡竖排，比 2×2 少一格留空位更整齐 */
.facts--single { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .hero-strip--trio { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   14. 图片化区块（2026-09 改版：仿农夫山泉的「大图 + 灰面板 + 左右切换 + 折叠」）
   --------------------------------------------------------------------------
   设计口径：一屏只讲一件事。图片满幅、直角、不加阴影；文字一律放进
   .split2__body 这种半幅浅灰面板里，长内容一律进 .acc 折叠，不再整段铺开。
   本层放在响应式之后：与媒体查询同权重时靠源码顺序取胜（同 12.1 的约定）。
   -------------------------------------------------------------------------- */

/* —— 14.1 满幅图带（首屏 / 图片分隔 / 结尾行动区） —— */
.bleed { position: relative; overflow: hidden; background: var(--navy); }
.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%,
      rgba(13,31,77,.56) 0%, rgba(13,31,77,.40) 60%, rgba(13,31,77,.24) 100%),
    linear-gradient(180deg, rgba(13,31,77,.46) 0%, rgba(13,31,77,.28) 48%, rgba(13,31,77,.56) 100%);
}
/* 首屏文字靠左，左侧要额外压暗：否则副标题会压在天光的高亮区上，读不清。
   两段渐变叠加：横向负责左暗右亮（保住右侧骑手主体），纵向负责天地压边。 */
.bleed--hero .bleed__scrim {
  background:
    linear-gradient(90deg, rgba(13,31,77,.90) 0%, rgba(13,31,77,.74) 40%, rgba(13,31,77,.22) 74%, rgba(13,31,77,.08) 100%),
    linear-gradient(180deg, rgba(13,31,77,.36) 0%, rgba(13,31,77,.08) 46%, rgba(13,31,77,.44) 100%);
}
/* 图上文字再补一层极淡投影：万一压在某个高光点上也不影响阅读 */
.bleed h1, .bleed p, .bleed__crumb { text-shadow: 0 1px 14px rgba(13,31,77,.5); }
.bleed__in { position: relative; z-index: 2; }
.bleed--hero { min-height: 600px; display: flex; align-items: center; }
.bleed--hero .wrap { width: 100%; }
.bleed--band { min-height: 360px; display: flex; align-items: center; text-align: center; }
.bleed--band .bleed__in { max-width: 720px; margin: 0 auto; }
.bleed h1, .bleed h2 { color: #fff; }
.bleed h1 { font-size: 46px; letter-spacing: .01em; max-width: 700px; }
.bleed p { color: rgba(255,255,255,.9); max-width: 470px; }
.bleed--band p { margin-left: auto; margin-right: auto; }
.bleed__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.bleed--band .bleed__acts { justify-content: center; }
.bleed__crumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .1em; color: rgba(255,255,255,.72);
  margin-bottom: 26px;
}
.bleed__crumb b { font-weight: 400; color: #fff; }

/* —— 14.2 50/50 图文分屏（左边浅灰文字面板 + 右边满幅图，可左右互换） —— */
.split2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.split2--white { background: var(--white); }
.split2--flip > .split2__media { order: -1; }
.split2__body {
  padding: 96px clamp(40px, 6vw, 112px);
  display: flex; flex-direction: column; justify-content: center;
}
.split2__media { position: relative; min-height: 470px; overflow: hidden; background: var(--line-soft); }
.split2__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split2__media--contain { background: var(--white); }
.split2__media--contain img { object-fit: contain; }
.split2__body h2 { font-size: 38px; line-height: 1.42; margin-bottom: 20px; }
.split2__body p { color: var(--muted); font-size: 14px; line-height: 2; max-width: 430px; }
.split2__body p + p { margin-top: 14px; }
.split2__acts { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.split2__meta {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; gap: 34px; flex-wrap: wrap; max-width: 430px;
}
.split2__meta div { font-size: 12.5px; color: var(--muted-2); }
.split2__meta b { display: block; font-weight: 400; font-size: 26px; color: var(--ink); font-family: var(--serif); line-height: 1.3; }

/* —— 14.3 图片卡片行（三条业务线 / 城市网络） —— */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trio__i { display: block; color: inherit; }
.trio__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); }
.trio__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
a.trio__i:hover .trio__media img { transform: scale(1.045); }
.trio__k { margin-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--brand); }
.trio__i h3 { margin-top: 10px; font-size: 21px; }
.trio__i p { margin-top: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.95; }

/* —— 14.4 左右切换（左满幅图 + 右文字面板 + 底部圆形箭头） —— */
.slider { position: relative; background: var(--white); }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .62s cubic-bezier(.22,.61,.36,1); }
.slider__item { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.slider__media { position: relative; min-height: 520px; overflow: hidden; background: var(--line-soft); }
.slider__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 60px 34px 28px; color: #fff; font-size: 13px; letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(13,31,77,0), rgba(13,31,77,.66));
}
.slider__body { padding: 84px clamp(40px, 5vw, 92px); display: flex; flex-direction: column; justify-content: center; }
.slider__body h3 { font-size: 30px; line-height: 1.45; margin: 14px 0 16px; }
.slider__body p { color: var(--muted); font-size: 13.5px; line-height: 2; max-width: 420px; }
.slider__body p + p { margin-top: 12px; }
.slider__nav { display: flex; align-items: center; gap: 14px; margin-top: 46px; }
.slider__btn {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.slider__btn svg { width: 18px; height: 18px; }
.slider__btn:hover { border-color: var(--brand); color: var(--brand); }
.slider__btn--next { background: var(--brand); border-color: var(--brand); color: #fff; }
.slider__btn--next:hover { background: var(--brand-dk); border-color: var(--brand-dk); color: #fff; }
.slider__btn[disabled] { opacity: .3; cursor: default; }
.slider__btn[disabled]:hover { border-color: var(--line); color: var(--ink); }
.slider__count { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); margin-left: 4px; }
.slider__dots { display: flex; gap: 8px; margin-left: auto; }
.slider__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: background-color .25s ease;
}
.slider__dots button[aria-current="true"] { background: var(--brand); }

/* —— 14.5 数字条（细线上下、无边框卡片，比 8.2 的数据块更克制） —— */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__i { padding: 34px 0; }
.stats__n { font-family: var(--serif); font-size: 34px; line-height: 1.2; color: var(--ink); }
.stats__n em { font-style: normal; font-size: 14px; font-family: var(--sans); color: var(--muted); margin-left: 4px; }
.stats__t { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* —— 14.6 图片上的小标签（如「实拍 · 上海网点」） —— */
.phototag {
  position: absolute; left: 22px; bottom: 22px; z-index: 1;
  padding: 6px 12px; background: rgba(255,255,255,.92);
  font-size: 12px; letter-spacing: .04em; color: var(--ink);
}

/* —— 14.7 「标签 + 一句话」列表：替代成段描述，一屏能扫完 —— */
.lines { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.lines li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.lines b { flex: none; width: 76px; font-weight: 400; font-size: 14px; color: var(--ink); }
.lines span { font-size: 13.5px; line-height: 1.9; color: var(--muted); }

/* —— 14.8 产品截图展示（手机竖屏截图并排悬浮在白底面板上） —— */
.shots {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 30px; padding: 48px;
}
.shots img {
  position: static; width: auto; height: 100%; max-height: 84%;
  box-shadow: 0 14px 44px rgba(13,31,77,.14);
}

/* —— 14.9 分屏正文对齐修正 ——
   分屏是满幅的（图片贴视口边），若正文只按 clamp 缩进，宽屏下正文左边缘
   会落在 x≈86，而页头标题落在 x≈133（.wrap 内容边缘），同页内一上一下错位。
   这里让正文的水平缩进＝"半列宽 − 半个容器宽 + gutter"，
   正好等于 .wrap 内容左边缘，宽屏下正文区域恒定 468px、且与页头对齐。
   （100% 在这里＝半边列宽＝视口内容宽的一半，故算式精确，无滚动条误差。） */
@media (min-width: 1081px) {
  .split2__body {
    padding-left: max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter)));
  }
  .split2--flip > .split2__body {
    padding-left: clamp(40px, 6vw, 112px);
    padding-right: max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter)));
  }
}

@media (max-width: 1080px) {
  .split2__body { padding: 72px 44px; }
  .split2__body h2 { font-size: 32px; }
  .slider__body { padding: 64px 44px; }
  .slider__body h3 { font-size: 26px; }
  .bleed h1 { font-size: 40px; }
}
@media (max-width: 860px) {
  .split2, .slider__item { grid-template-columns: 1fr; }
  .split2__body { padding: 56px 32px; }
  .split2__body h2 { font-size: 26px; }
  .split2__media { min-height: 300px; }
  .split2--flip > .split2__media { order: 0; }      /* 窄屏统一「文字在上、图在下」 */
  .trio { grid-template-columns: 1fr; gap: 40px; }
  .slider__media { min-height: 260px; }
  .slider__body { padding: 44px 32px 52px; }
  .slider__body h3 { font-size: 22px; }
  .slider__nav { margin-top: 30px; }
  .slider__dots { margin-left: auto; }
  .bleed--hero { min-height: 480px; }
  .bleed--hero .bleed__in { padding-top: 40px; }
  .bleed h1 { font-size: 30px; }
  .bleed__acts .btn { width: 100%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__n { font-size: 28px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stats__i { padding: 26px 0; }
}

/* --------------------------------------------------------------------------
   13. 无障碍 / 打印
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .nav, .hero__btns, .cta, .foot__bar, .acc__sign, .bleed__acts,
  .slider__nav, .slider__dots, .split2__media, .slider__media, .bleed__img { display: none; }
  body { font-size: 11pt; line-height: 1.7; color: #000; }
  .hero, .pagehead, .cta, .bleed { background: none !important; padding: 16px 0; min-height: 0; }
  .hero::before, .pagehead::before, .cta::before, .bleed__scrim { display: none; }
  .hero h1, .pagehead h1, .cta h2, .bleed h1, .bleed h2 { color: #000 !important; }
  .hero .lead, .pagehead .lead, .cta p, .bleed p { color: #333 !important; }
  .sec { padding: 18px 0; }
  /* 打印时把折叠内容摊开、幻灯片竖排，保证纸上信息完整 */
  .acc__a { grid-template-rows: 1fr !important; }
  .slider__track { display: block !important; transform: none !important; }
  .split2, .split2--flip, .slider__item { display: block !important; }
  a { color: #000; }
}