/* ==========================================================================
 * style.css — 全站样式
 * --------------------------------------------------------------------------
 * 改配色：改下面 :root 里的色值，全站生效。
 * 改手机端样式：找 @media (max-width: 767px)；平板是 @media (max-width: 1024px)。
 * 其余部分都是布局规则，改动前请确认你知道自己在做什么。
 * ========================================================================== */

:root {
  /* ── 配色（改这里就能换整套主题色）─────────────────
   * 全站就一个品牌红，主色和强调色是同一个值：层次靠明度拉开（主色铺面、
   * 强调色上头），不是靠两个色相。想拆成两色，把 --c-accent 改成别的色即可，
   * 但下面「表头第二列」那处要一起看——它是用 --c-highlight 压在红底上的，
   * 就是为了避免在红底上写红字。 */
  --c-primary:    #DB261F;   /* 主色：页头、深色区块、表头。取自 logo 的底色 */
  --c-primary-lit:#E85A50;   /* 主色的浅色版，只用在「开启生育之旅」那块渐变上 */
  --c-accent:     #DB261F;   /* 强调色：按钮、首屏大标题（和主色同色） */
  --c-accent-dark:#B81B15;   /* 按钮鼠标悬停时的强调色 */
  --c-heading:    #2A1A18;   /* 标题文字（暖调近黑，配红底不显脏） */
  --c-text:       #4A3E3C;   /* 正文文字 */
  --c-muted:      #968A88;   /* 次要小字：页脚、手机端卡片的小标签 */
  --c-muted-2:    #5F5452;   /* 二维码下面的说明文字 */
  --c-placeholder:#A89C9A;   /* 输入框里灰着的提示文字 */
  --c-bg-soft:    #FBF4F2;   /* 浅暖背景（原先是冷灰，配红底发青） */
  --c-line:       #F0E3E0;   /* 分隔线 / 边框 */
  --c-highlight:  #FFF5E3;   /* 奶油色高亮：解答列底色、它那一列表头 */
  --c-white:      #FFFFFF;

  /* ── 第三方品牌色 ──────────────────────────────────
   * 微信的官方色，一般不用改。
   * 改了就不像微信的按钮了，除非你在做一整套自有视觉。 */
  --c-wechat:        #07C160;
  --c-wechat-dark:   #06AD56;

  /* ── 咨询框 ────────────────────────────────────────
   * 右下角那个挂件的颜色。原来刻意用聊天软件那种亮蓝，和主色（深蓝）分开，
   * 免得和「官方」的颜色混在一起；现在主色换成了 logo 的红，蓝色就成了全站
   * 唯一一块冷色，反而扎眼——挂件本来就是全站最主要的转化入口，穿的自然是
   * 品牌红，和按钮同色。想单独给它换个色，改这两行就行。 */
  --c-chat:       #DB261F;
  --c-chat-dark:  #B81B15;

  /* ── 尺寸 ─────────────────────────────────────── */
  --container:    1280px;
  --header-h:     90px;
  --radius:       12px;
  --shadow:       0 6px 24px rgba(74, 24, 20, .08);
}

/* ── 基础重置 ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* hidden 属性要靠这条才能真的藏住。
   浏览器默认给 [hidden] 的 display: none 来自 UA 样式表，而我们自己写的
   任何一条 display（.btn 的 inline-flex、.popup 的 flex、.chat-panel 的 flex）
   都是作者样式，会把它整个盖掉——属性还在，元素照样显示，用 JS 设 hidden = true
   也毫无效果。!important 是这里唯一可靠的办法：一条规则管住全站，
   不必每加一个「先写着 flex、再用 hidden 收起」的组件就补一条例外。 */
[hidden] { display: none !important; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.noscript-bar {
  padding: 14px 20px;
  background: var(--c-accent);
  color: var(--c-white);
  text-align: center;
  font-size: 15px;
}

/* ── 按钮 ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(219, 38, 31, .28);
}
.btn-primary:hover { background: var(--c-accent-dark); transform: translateY(-2px); }

.btn-wechat { background: var(--c-wechat); color: var(--c-white); }
.btn-wechat:hover { background: var(--c-wechat-dark); }

/* ── 页头 ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--c-primary);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-white);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* 图标是 content.js 的 brand.markImage（透明底 PNG，见 .scratch/make-brand-assets.js）。
   不套白圆底：徽记是白线红章的，而页头这个红就是 logo 自己的红，直接贴上去就是
   logo 本身的样子——它自己的白边就把轮廓撑开了。原先页头是深蓝，红徽记压在上面
   糊成一片，才需要垫一层白圆。 */
.logo-mark {
  flex: none;
  width: 40px;
  height: 40px;
}

/* 汉堡按钮：桌面端不显示 */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle-box { display: block; width: 24px; height: 16px; position: relative; }
.nav-toggle-box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--c-white); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease, top .22s ease;
}
.nav-toggle-box span:nth-child(1) { top: 0; }
.nav-toggle-box span:nth-child(2) { top: 7px; }
.nav-toggle-box span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.nav-list { display: flex; align-items: center; gap: 34px; }
.nav-list a {
  display: block;
  color: var(--c-white);
  font-size: 16px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
/* 下划线是白的，不是强调色：页头本身就是品牌红，红线上红底下划线等于没画。
   白色和导航文字同色，选中态靠「多一条线」区分。 */
.nav-list a:hover,
.nav-list a[aria-current="page"] { border-bottom-color: var(--c-white); }

/* ── 区块通用 ─────────────────────────────────────── */
.section { padding: 72px 0; }
.section-alt { background: var(--c-bg-soft); }

/* 锚点跳转时给 sticky 页头留出空间 */
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

.section-title {
  font-size: 42px;
  font-weight: 400;
  color: var(--c-heading);
  text-align: center;
  line-height: 1.35;
}
.section-title-light { color: var(--c-white); }

.section-sub {
  margin-top: -18px;
  margin-bottom: 34px;
  text-align: center;
  color: var(--c-text);
  font-size: 17px;
}

.section-cta { margin-top: 46px; text-align: center; }

/* 花纹分隔线 */
.section-divider {
  width: 10em;
  height: 16px;
  margin: 16px auto 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M14 2 L20 8 L14 14 L8 8 Z' fill='none' stroke='%23DB261F' stroke-opacity='.35' stroke-width='1.4'/%3E%3Ccircle cx='14' cy='8' r='1.6' fill='%23DB261F' fill-opacity='.35'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}
.section-divider-wide { width: 14em; }
.section-divider-light {
  width: 60px;
  height: 3px;
  background-image: none;
  background-color: var(--c-white);
  border-radius: 2px;
  margin: 18px auto 40px;
}

/* ── 网格 ────────────────────────────────────────── */
.card-grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── ① 首屏 ──────────────────────────────────────── */
.hero {
  padding: 150px 0;
  background-color: var(--c-bg-soft);
  background-image:
    /* 原来是 48% 全白 → 66% 全透，左边一大片纯白，照片基本看不见。
       现在 26% 就收尾，图片从标题左缘就开始露出来。留这 26% 是因为
       「方案介绍」四个字从 27% 处起，左边总得有个干净的落脚点。 */
    linear-gradient(105deg, var(--c-white) 26%, rgba(255, 255, 255, 0) 56%),
    url("../img/hero-home.jpg");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat;
}

.hero-inner { max-width: 640px; }

/* 白渐变从 48% 收到 26% 之后，照片露出来了，标题右半边会压到孕肚和毛衣上。
   标题用的品牌红本来就比原来的橙色深，压在米色毛衣上不至于化掉，但照片
   这一带明暗都有，所以还是给字留一圈白光撑开自己的底色——和联系区块白字配
   深色投影是同一招，只是方向相反。用白色而不是深色：红字配深影会显脏，
   配白光是在同一个暖色系里提亮，看着还是干净的。 */
.hero-title {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-accent);
  letter-spacing: -.5px;
  text-shadow:
    0 2px 10px rgba(255, 255, 255, .95),
    0 0 26px rgba(255, 255, 255, .8);
}
.hero-title span { display: block; }

.hero-sub {
  margin: 22px 0 36px;
  font-size: 20px;
  color: var(--c-text);
}

/* ── ② 服务对象 ───────────────────────────────────── */
/* 四张卡：图标在上、文字在下。原来是一行两张的大照片卡（图占 320px 高），
   换成图标卡之后每张的字更多、更短，四列才排得下，所以 HTML 那边也换成了
   grid-4（平板两列、手机一列，由下面 @media 里的 grid 规则接管）。
   卡是白底、区块也是白底，边框和投影都留着：只留投影的话，卡片在白底上
   会显得发飘、边界不清楚。 */
.object-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 30px 26px 32px;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.object-card:hover { transform: translateY(-4px); }
.object-card-icon { width: 120px; height: 120px; margin: 0 auto 18px; }
.object-card-title { font-size: 21px; color: var(--c-heading); font-weight: 600; }
.object-card-desc { margin-top: 10px; font-size: 15px; color: var(--c-text); }

/* ── ③ 服务项目 / ⑦ 套餐 ──────────────────────────── */
.info-card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.info-card:hover { transform: translateY(-4px); }
.info-card-icon {
  width: 120px; height: 120px;
  margin: 0 auto 20px;
  transition: transform .25s ease;
}
.info-card:hover .info-card-icon { transform: scale(1.06); }
.info-card-title { font-size: 22px; font-weight: 600; color: var(--c-heading); }
.info-card-desc { margin-top: 10px; color: var(--c-text); }
.info-card .btn { margin-top: 22px; padding: 11px 28px; font-size: 15px; }

/* 价格套餐：只有图标 + 标题 */
.cost-card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cost-card img { width: 104px; height: 104px; margin: 0 auto 16px; }
.cost-card h3 { font-size: 19px; font-weight: 600; color: var(--c-heading); }

/* ── ④ 为什么选择我们 ─────────────────────────────── */
.why-card { text-align: center; padding: 8px 12px; }
.why-card img { width: 120px; height: 120px; margin: 0 auto 18px; }
.why-card h3 { font-size: 21px; font-weight: 600; color: var(--c-heading); }
.why-card p { margin-top: 10px; font-size: 15px; }

/* ── ⑤ 机构对比表 ─────────────────────────────────── */
.diff-wrap { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }

.diff-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
}
.diff-table th,
.diff-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.diff-table tbody tr:last-child th,
.diff-table tbody tr:last-child td { border-bottom: 0; }

.diff-table thead th {
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 17px;
  font-weight: 600;
}
/* 「解答」那一列的表头用奶油色，不是强调色：表头底色就是主色（品牌红），
   强调色和它同色，写红字等于写了个看不见。奶油色压在红上，正好和这一列
   正文的奶油底呼应。 */
.diff-table thead th:nth-child(2) { color: var(--c-highlight); }

.diff-table tbody th { width: 22%; font-weight: 600; color: var(--c-heading); }
/* 解答列吃掉剩下的全部宽度（表里只有「问题」「解答」两列），文字左对齐。
   原来是 39%，那是三列时的写法，留着会在右边空出一条。
   要改成居中：这里加 text-align: center，并在上面那条 nth-child(2) 里
   加同一个值 —— 两处必须一起改，否则标题居中、正文靠左，看着是错位的。 */
.diff-table tbody td { width: 78%; vertical-align: middle; }
/* 高亮第 2 列。这一列以前是「本机构」，表收成两列之后它就是「解答」，
   底色留着没改：它现在的用处是把答案从问题里拎出来。标题里的强调色同理。 */
.diff-table tbody td:nth-child(2) {
  background: var(--c-highlight);
  color: var(--c-heading);
  font-weight: 500;
}

/* ── ⑥ 转化条 ─────────────────────────────────────── */
/* 照片不压遮罩了，整张露出来（参考站就是这样，一眼能看出是张照片）。
   文字的可读性改由各自负责：标题是 46px 深色大字，自己压得住；
   正文是 17px 灰字，压在照片的细节上会被吃掉，所以给它自己一块半透明白底
   （见下面的 .cta-band-body）。这比整片遮罩好在哪：遮罩要照顾最细的那行字，
   就得厚到把照片压没；分开处理，照片和文字都能各自到位。 */
.cta-band {
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background-color: var(--c-bg-soft);
  background-image: url("../img/cta-band.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-band-inner { max-width: 760px; text-align: center; margin: 0 auto; }
.cta-band-title { font-size: 46px; font-weight: 400; color: var(--c-heading); line-height: 1.3; }
/* 白底块只包住文字，不占满整行 —— 占满就成了「一条白带」，把照片重新拦腰截断，
   等于把刚撤掉的遮罩又加回来一半。fit-content 让块宽跟着最长的那行文字走，
   再靠 auto 的左右外边距居中（父级是 text-align: center，块级元素不受它影响）。 */
.cta-band-body {
  width: fit-content;
  margin: 0 auto 34px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .82);
  font-size: 17px;
}

/* ── ⑧ 助孕流程手风琴 ─────────────────────────────── */
.accordion { max-width: 900px; margin: 0 auto; }

.acc-item {
  background: var(--c-white);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 24, 20, .05);
}

.acc-trigger {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
}
.acc-index {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: .5px;
}
.acc-title { flex: 1; font-size: 19px; font-weight: 600; color: var(--c-heading); }
.acc-icon {
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.acc-item.is-open .acc-icon { transform: rotate(-135deg) translate(-2px, -2px); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
/* 折叠时同样要 visibility: hidden：仅靠 overflow: hidden 的话，
   读屏软件仍会把收起的说明念出来，访客会听到 6 步的内容全挤在一起。 */
.acc-panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .28s;
}
.acc-item.is-open .acc-panel-inner {
  visibility: visible;
  transition: visibility 0s;
}
.acc-desc { padding: 0 24px 22px 56px; color: var(--c-text); font-size: 15px; }

/* ── ⑨ 联系我们 ───────────────────────────────────── */
/* 这一段铺的是地图。遮罩换过三次，最后定在「深色半透明」，和参考站一致：
   不是把地图染成一个颜色（那等于把「地图」这个意思撤掉），是整体压暗一档，
   让白字有对比度。颜色是「只带一点暖的近黑」，不是深红棕：红要是压过绿蓝太多，
   这么一大片压在浅色地图上就不是「压暗」而是「染红」，整张图泛粉。这组数字是量
   出来的，不是估的——地图像素本身的均值是 rgb(219,229,237)（偏蓝），压完之后
   落在 rgb(139,134,136)：只留一点暖，底色还是灰。原先那版（74,24,20）压完是
   rgb(157,141,144)，红比绿蓝高出十几，所以才泛粉。判断方法是看**压完的合成色**，
   不是遮罩本身的色值。
   白底会压成中灰——这是参考站那张的样子，也是浓度对不对的参照：压完如果路名还
   清清楚楚、底色还发白，就是压得不够。底色仍然是主色，那是图片没加载出来时的兜底。 */
.section-contact {
  background-color: var(--c-primary);
  background-image:
    linear-gradient(rgba(48, 27, 23, .5), rgba(48, 27, 23, .5)),
    url("../img/map.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 标题白色，和参考站一致。
   上一版没有遮罩，白字压在浅灰地图上色差几乎为零，只能靠两层投影硬撑。
   现在底色被压暗了，对比度由遮罩出，投影退成一层的保险——不是必需，
   是留给「以后换一张本身就暗的地图」的余量，那时候遮罩会撤掉，投影还在。 */
.section-contact .section-title-light {
  color: var(--c-white);
  text-shadow: 0 1px 3px rgba(74, 24, 20, .45);
}
/* 分隔线同理，跟着退成一层的浅投影 */
.section-contact .section-divider-light {
  background-color: var(--c-white);
  box-shadow: 0 1px 3px rgba(74, 24, 20, .4);
}

.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; }

.contact-card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.contact-card-qr { text-align: center; }
.contact-card-title { font-size: 22px; font-weight: 600; color: var(--c-heading); margin-bottom: 22px; }

.contact-list { display: grid; gap: 18px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item-icon { flex: none; width: 22px; height: 22px; color: var(--c-primary); margin-top: 3px; }
.contact-item-icon svg { width: 100%; height: 100%; fill: currentColor; }
.contact-item-body { flex: 1; min-width: 0; }
.contact-item-label { display: block; font-size: 13px; color: var(--c-muted); }
.contact-item-value { display: block; font-size: 16px; color: var(--c-heading); word-break: break-all; }
.contact-item-value a { color: inherit; }

.contact-list-lg { margin-top: 26px; }
.contact-list-lg .contact-item-label { font-size: 14px; }
.contact-list-lg .contact-item-value { font-size: 17px; font-weight: 500; }

.qr-img { width: 140px; height: 140px; margin: 0 auto; }
.qr-caption { margin-top: 12px; font-size: 14px; color: var(--c-muted-2); }

/* 联系页信息卡下方的二维码块 */
.contact-qr {
  margin-top: 22px;
  padding: 26px 20px;
  text-align: center;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
}

/* ── 页脚 ────────────────────────────────────────── */
.site-footer { background: var(--c-white); border-top: 1px solid var(--c-line); }
.footer-inner {
  padding: 46px 20px 40px;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.footer-network { font-size: 15px; color: var(--c-text); }
.footer-social { display: flex; gap: 16px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--c-white);
  transition: transform .18s ease, opacity .18s ease;
}
.social-link:hover { transform: translateY(-2px); opacity: .9; }
.social-link svg { width: 22px; height: 22px; fill: currentColor; }
.social-wechat { background: var(--c-wechat); }
.footer-copy { font-size: 14px; color: var(--c-text); }
.footer-icp { font-size: 13px; color: var(--c-muted); }
.footer-icp:empty { display: none; }

/* ── 微信弹窗 ─────────────────────────────────────── */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 遮罩是「把底下的页面压下去」，不是「给页面盖一层色」。所以它是只带一点暖的近黑，
   红不能压过绿蓝太多——否则整页会跟着泛粉，弹窗反而像出了错。 */
.popup-backdrop { position: absolute; inset: 0; background: rgba(26, 21, 20, .55); }

.popup-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 28px 30px;
  background: var(--c-white);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(74, 24, 20, .3);
  animation: popup-in .22s ease;
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.popup-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c-muted);
}
.popup-close:hover { background: var(--c-bg-soft); color: var(--c-heading); }
.popup-close svg { width: 20px; height: 20px; }

.popup-title { font-size: 20px; font-weight: 600; color: var(--c-heading); margin-bottom: 20px; }
.popup-qr { width: 200px; height: 200px; margin: 0 auto 14px; border: 1px solid var(--c-line); border-radius: 10px; }
.popup-copy-hint { min-height: 22px; font-size: 14px; color: var(--c-wechat); margin-bottom: 4px; }
.popup-number {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-heading);
  letter-spacing: 1px;
  padding: 10px 0 16px;
  user-select: all;
}
.popup-steps { display: grid; gap: 6px; margin-bottom: 16px; font-size: 14px; color: var(--c-text); }
.popup-note { font-size: 13px; color: var(--c-muted); margin-bottom: 20px; }
.popup-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.popup-actions .btn { padding: 11px 26px; font-size: 15px; }

body.popup-open { overflow: hidden; }

/* ── 回到顶部 ─────────────────────────────────────── */
/* 右下角最低那格让给了咨询框，它抬到咨询框上面一档 */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 60;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(74, 24, 20, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg { width: 22px; height: 22px; fill: currentColor; }

/* ── 手机端吸底条 ─────────────────────────────────── */
.bottom-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -2px 14px rgba(74, 24, 20, .1);
}
.bottom-bar .btn { width: 100%; }

/* ── 咨询框（右下角常驻挂件）────────────────────────
 * 它不是模态框：没有遮罩、不锁滚动、不困焦点，所以 body 上不需要状态类。
 * 层级压在微信弹窗（100）之下 —— 弹窗打开时它要被盖住，不能浮在上面。
 * 「回到顶部」原本也占右下角，现在被它顶到上面去了，见 .back-to-top。 */
.chat {
  position: fixed;
  right: 22px;
  bottom: 30px;
  z-index: 70;
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 380px;
  /* 高度写死，不是 max-height。以前只给上限，面板高度跟着消息内容长，
     发一条就往上蹿一截（实测 443px 起，最多长到 560px），整个挂件跟着晃。
     现在定死，多出来的消息在 .chat-log 里滚动，面板纹丝不动。
     上限里的 170px 是留给上面 sticky 页头（90px）和按钮与面板之间的空隙的。 */
  height: min(560px, calc(100vh - 170px));
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(74, 24, 20, .24);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  background: var(--c-chat);
  color: var(--c-white);
}
.chat-head-mark { flex: none; width: 24px; height: 24px; }
.chat-head-title { flex: 1; font-size: 15px; font-weight: 600; }
.chat-head-close {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  opacity: .85;
}
.chat-head-close:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.chat-head-close svg { width: 15px; height: 15px; }

.chat-log {
  flex: 1;
  /* 面板高度已经定死，这里不能再写 min-height —— 它会把面板顶破，
     高度又开始跟着内容跑。消息区的高度由「面板高 - 其余各行」算出来。 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  background: var(--c-bg-soft);
}

.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.chat-msg-visitor { align-self: flex-end; align-items: flex-end; }
.chat-msg-body {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  background: var(--c-white);
  word-break: break-word;
}
.chat-msg-visitor .chat-msg-body { background: var(--c-chat); color: var(--c-white); }
/* 「自动回复」标签。少了它，访客会坐着等一个不会来的回音，理由见 docs/adr/0002 */
.chat-msg-tag { margin-bottom: 3px; font-size: 11px; color: var(--c-muted); }
.chat-reply-action {
  margin-top: 6px;
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--c-wechat);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 600;
}
.chat-reply-action:hover { background: var(--c-wechat-dark); }

/* 下边距不能省。这一行下面本来该有个 .chat-hint 隔着，但提示行没有内容时整行
   是 display:none，于是「扫码加微信 / 复制手机」就直接贴在输入区的上边框上，
   只剩输入区自己的 10px，看着像两个东西挤在一起。 */
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; }
.chat-actions:empty { display: none; }
.chat-action {
  padding: 7px 13px;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  background: var(--c-white);
  color: var(--c-chat);
  font-size: 13px;
  font-weight: 600;
}
.chat-action:hover { border-color: var(--c-chat); }

/* 上边距写 0（不是漏了）：间距由上面 .chat-actions 那 10px 下边距出，这里再写一份
   就叠成 16px 了。下边距必须自己出——它是输入区上边框上面最后一个元素，
   写 0 的话整行盒子的底边正好压在分隔线上，字看着就是「贴着线」。 */
.chat-hint { padding: 0 12px 10px; font-size: 12px; color: var(--c-muted-2); }
.chat-hint:empty { display: none; }

/* 输入区排成两栏：左边文本域，右边发送钮，两行共用一套间距。
   没有改 HTML —— 文本域和发送钮（.chat-input-bar）本来就是兄弟节点，
   用 grid 把「猜你想问」按到第一行跨两栏，剩下两个自然落在第二行。
   发送钮原来是独占一行的右对齐小胶囊，左边空着 240px，看着就是「没边距」；
   挪到文本域右边之后，那一整行都被用上了。 */
.chat-input {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--c-line);
  background: var(--c-white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.chat-suggestions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-suggestions:empty { display: none; }
.chat-suggestion {
  padding: 5px 11px;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-size: 12px;
}
.chat-suggestion:hover { border-color: var(--c-chat); color: var(--c-chat); }

.chat-text {
  grid-column: 1;
  display: block;
  width: 100%;
  /* 撑到三行上下。原来是两行（62px），打字时看不了几行就得往上翻 */
  min-height: 72px;
  padding: 10px 11px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
  resize: none;
}
.chat-text::placeholder { color: var(--c-placeholder); }
.chat-text:focus { outline: 2px solid var(--c-chat); outline-offset: 1px; }

/* 发送钮和文本域并排、同高（grid 默认就拉伸到行高），圆角跟着文本域走。
   站上其他按钮都是全圆角的胶囊，这里刻意不用：它俩是配套的一个输入行，
   圆角不一致会像两个不相干的东西凑在一起。 */
.chat-input-bar { grid-column: 2; display: flex; }
.chat-send {
  padding: 0 20px;
  border-radius: 8px;
  background: var(--c-chat);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 600;
}
.chat-send:hover { background: var(--c-chat-dark); }

.chat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px 0 15px;
  border-radius: 100px;
  background: var(--c-chat);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(219, 38, 31, .38);
  transition: background-color .2s ease;
}
.chat-toggle:hover { background: var(--c-chat-dark); }
.chat-toggle-icon { display: flex; }
.chat-toggle-icon svg { width: 22px; height: 22px; fill: currentColor; }
.chat-toggle-arrow { display: flex; }
.chat-toggle-arrow svg {
  width: 16px; height: 16px;
  transition: transform .22s ease;
}
.chat.is-open .chat-toggle-arrow svg { transform: rotate(180deg); }

/* ── 联系页：首屏 ─────────────────────────────────── */
/* 遮罩整层撤掉，照片按原样铺满（参考站就是这样，一眼能看出是张照片）。
   文字翻成白色压在照片上——这和首页首屏是相反的两条路：那边底图浅、用红字，
   这边底图有明有暗（脚丫、白布、木篮），深色字会掉进暗部里，白字反而立得住。
   上一版那层 .5 的白色遮罩就是为了迁就深色字，字翻白之后它就没用了。 */
.page-hero {
  padding: 100px 0;
  text-align: center;
  background-color: var(--c-bg-soft);
  background-image: url("../img/hero-contact.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 白字全靠投影撑：照片上有白布也有脚丫的阴影，白字压到浅色区域会化掉，
   投影给它造一圈自己的底色，底图怎么花都不影响。和联系区块用同一招。
   颜色用暖调的深红棕而不是纯黑，免得白字边上出现一圈脏灰。
   两层：近处一层收紧字的轮廓，远处一层在大面积浅底上扩开。 */
.page-hero-title {
  font-size: 52px;
  font-weight: 700;
  color: var(--c-white);
  text-shadow:
    0 1px 3px rgba(74, 24, 20, .6),
    0 3px 18px rgba(74, 24, 20, .5);
}
.page-hero-body {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 18px;
  color: var(--c-white);
  text-shadow:
    0 1px 3px rgba(74, 24, 20, .6),
    0 2px 12px rgba(74, 24, 20, .45);
}

/* ── 联系页：单栏 ───────────────────────────────────
   原先这里是「左信息 / 右表单」两栏。表单整块撤掉后只剩信息卡，
   一栏内容居中放，宽度收在 720px —— 联系方式那几行摊满整幅会很难读。 */
.contact-page { max-width: 720px; margin: 0 auto; }

.contact-banner {
  padding: 40px 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-lit));
}
.contact-banner-title { font-size: 30px; font-weight: 700; line-height: 1.45; color: var(--c-white); max-width: 460px; }

/* ==========================================================================
 * 平板：≤ 1024px
 * ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 80px; }

  /* 导航折叠为汉堡菜单 */
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--c-primary);
    box-shadow: 0 12px 24px rgba(74, 24, 20, .18);
    max-height: 0;
    overflow: hidden;
    /* 收起时把整块设为 visibility: hidden。只靠 max-height: 0 是不够的：
       被裁掉的链接仍在 Tab 顺序里，键盘用户会 Tab 进一片看不见的菜单。
       visibility 的切换延后到收起动画结束，避免菜单在滑动中就消失。 */
    visibility: hidden;
    transition: max-height .28s ease, visibility 0s linear .28s;
  }
  .site-nav.is-open {
    max-height: 480px;
    visibility: visible;
    transition: max-height .28s ease, visibility 0s;
  }
  .nav-list {
    display: block;
    padding: 8px 20px 18px;
    gap: 0;
  }
  .nav-list a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 17px;
  }
  .nav-list li:last-child a { border-bottom: 0; }

  .section-title { font-size: 36px; }
  .hero { padding: 110px 0; }
  .hero-title { font-size: 48px; }
  .cta-band-title { font-size: 38px; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
 * 手机：≤ 767px
 * ========================================================================== */
@media (max-width: 767px) {
  :root { --header-h: 70px; }

  body { font-size: 15px; }

  /* 首屏：桌面端是左白右透的横向渐变，手机上文字压在整张图上，所以换成整片浅色遮罩。
     原来（.9→.74）是配灰色占位图的厚度，图基本看不见；上一版压到 .86→.6，桌面端
     又收到 .26→.56 之后，两边反差太大，这里跟着压到 .62→.35。
     手机比桌面还是厚一档，因为手机上文字横跨整幅图，没有「左边」可以留白。
     桌面端那条规则不用动——两边遮罩是各自独立的两条，手机上不接受它的覆盖。 */
  .hero {
    padding: 78px 0 90px;
    background-image:
      linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .35)),
      url("../img/hero-home.jpg");
  }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 16px; margin: 16px 0 28px; }

  .section { padding: 48px 0; }
  .section-title { font-size: 32px; }
  .section-divider { margin: 12px auto 32px; }
  .section-cta { margin-top: 34px; }
  .section-sub { margin-top: -6px; font-size: 15px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card-grid { gap: 20px; }

  .object-card-img { height: 220px; }

  .cta-band { min-height: 0; padding: 56px 0; }
  .cta-band-title { font-size: 28px; }
  .cta-band-body { font-size: 15px; }

  /* 对比表：从表格变卡片（同一份 HTML，靠样式重排） */
  .diff-wrap { border-radius: 0; box-shadow: none; overflow: visible; }
  .diff-table { background: transparent; }
  .diff-table thead { display: none; }
  /* 这里必须带 tbody 前缀，否则特异性格不过桌面端的 `.diff-table tbody th { width: 22% }`
     ——媒体查询不增加特异性，写短了就会被 22% 和 39% 压回去，卡片被挤成窄条。 */
  .diff-table tbody,
  .diff-table tbody tr,
  .diff-table tbody th,
  .diff-table tbody td { display: block; width: 100%; }

  .diff-table tbody tr {
    background: var(--c-white);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .diff-table tbody th {
    padding: 14px 18px;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 16px;
    border-bottom: 0;
  }
  .diff-table tbody td { padding: 14px 18px; font-size: 15px; }
  .diff-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--c-muted);
  }

  .acc-trigger { padding: 16px 18px; gap: 12px; }
  .acc-title { font-size: 17px; }
  .acc-desc { padding: 0 18px 18px 46px; font-size: 14px; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 26px 22px; }

  .footer-inner { padding: 36px 20px 32px; }

  /* 吸底条：滚过首屏后才出现 */
  .bottom-bar.is-visible { display: block; }
  body.has-bottom-bar { padding-bottom: 70px; }

  /* 手机端不要回顶按钮：右下角那格让给咨询框，而手机上一划就回到顶了，
     两个圆钮叠在那里只是碍事。main.js 照样会按滚动位置给它加 is-visible，
     这里靠 display 压住 —— 所以上面那条桌面端的 bottom: 92px 在手机端用不着。
     （这也是为什么探针不能只看 class 判断它在不在。）*/
  .back-to-top { display: none; }

  /* 咨询框：按钮缩成圆形（字和箭头都藏起来，名称改由 aria-label 带），
     面板从屏幕底部升起，像原生 App 那样。 */
  .chat { right: 16px; bottom: 30px; }
  body.has-bottom-bar .chat { bottom: 84px; }
  .chat-toggle {
    width: 52px; height: 52px;
    padding: 0;
    justify-content: center;
  }
  .chat-toggle-text, .chat-toggle-arrow { display: none; }
  .chat-toggle-icon svg { width: 26px; height: 26px; }
  .chat-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: auto;
    /* 覆盖桌面端那条高度。手机上是从底部升起来的整片，可以比桌面高；
       留 10vh 是为了顶上还能看见一点页面，不至于全屏盖死。 */
    height: min(620px, 90vh);
    border-radius: 18px 18px 0 0;
    /* 盖住那个圆按钮：面板贴到屏幕底之后，圆按钮会正好压在下方的输入框上。
       收起面板走标题栏里那个叉，不必再留一个能点的圆。 */
    z-index: 1;
  }
  /* 桌面端给消息区留了 12px 内边距、手机贴边显示，这里收紧一圈。
     注意不能再给 .chat-log 写 min-height —— 面板高度是定死的，
     消息区一被撑大就会顶破面板，底下的输入框会被 overflow 裁掉。 */
  .chat-log { padding: 10px; }
  /* 手机上发送钮和文本域并排会把输入宽度挤掉一大块，改回上下两行、按钮占满整行 */
  .chat-input { padding: 8px 10px 10px; grid-template-columns: 1fr; }
  .chat-suggestions { grid-column: 1; }
  .chat-text { grid-column: 1; }
  .chat-input-bar { grid-column: 1; }
  .chat-send { width: 100%; height: 44px; }

  /* 弹窗在小屏上贴底显示，更像原生 */
  .popup { padding: 0; align-items: flex-end; }
  .popup-panel { max-width: none; border-radius: 18px 18px 0 0; max-height: 88vh; }

  /* 页头：高度从 90 降到 70，图标和字号跟着缩一档 */
  .logo { gap: 9px; font-size: 19px; }
  .logo-mark { width: 32px; height: 32px; }

  .hero-title { letter-spacing: 0; }
  .contact-banner-title { font-size: 24px; }
  .contact-banner { padding: 30px 24px; }
  .page-hero { padding: 64px 0; }
  .page-hero-title { font-size: 36px; }
  /* 手机上照片被裁成中间那块（脚丫和浅色布料），白字压在这种浅底上，桌面端
     那套投影就偏轻了。这里把两层都加重一档——底部那层浅的地方最吃亏，
     加的是远处那层（扩开面积），近处只微调，免得字边缘变硬。 */
  .page-hero-body {
    font-size: 16px;
    text-shadow:
      0 1px 4px rgba(74, 24, 20, .72),
      0 2px 18px rgba(74, 24, 20, .6);
  }
}

/* ── 用户偏好减少动效 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}