/* ===================================================================
   tax24h.cn 官网样式 · v4（墨绿）
   取向：Apple 式版式 —— 深色首屏 / 大留白 / 大标题 / 浅色分区 /
        圆润卡片 / 单一点缀色（香槟金）。零依赖、零外链。
   主色：墨绿（冷调森林绿）--deep-*　点缀：香槟金 --gold*
   =================================================================== */
:root {
  /* 文字与分隔（Apple 系灰度） */
  --ink:      #1d1d1f;
  --ink-2:    #424245;
  --muted:    #6e6e73;
  --line:     #d2d2d7;
  --line-2:   #e8e8ed;
  --bg:       #ffffff;
  --bg-2:     #f3f6f4;

  /* 深色（首屏 / 页脚） */
  --deep-950: #061a16;
  --deep-900: #0b2a24;
  --deep-800: #123f35;
  --deep-700: #1a5245;

  /* 唯一点缀色：香槟金 */
  --gold:     #c8a15a;
  --gold-2:   #e6ce9c;
  --gold-soft:#faf5ec;

  --radius:   20px;
  --radius-s: 14px;
  --radius-xs:10px;

  --shadow-s: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px -8px rgba(0,0,0,.10);
  --shadow:   0 2px 6px rgba(0,0,0,.04), 0 16px 40px -20px rgba(0,0,0,.20);
  --shadow-l: 0 4px 10px rgba(0,0,0,.05), 0 30px 60px -24px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22,.61,.36,1);

  --maxw: 1180px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16.5px/1.9 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  letter-spacing: .01em;
}
::selection { background: rgba(200,161,90,.28); }
a { color: var(--deep-800); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 顶部细条 ---------- */
.topstrip {
  background: linear-gradient(90deg, var(--deep-950) 0%, var(--deep-900) 50%, #0e2f28 100%);
  color: rgba(255,255,255,.72); font-size: 12.5px; letter-spacing: .04em;
  border-bottom: 1px solid rgba(200,161,90,.28);
}
.topstrip .wrap { display: flex; justify-content: space-between; gap: 16px; min-height: 38px; align-items: center; flex-wrap: wrap; }
.topstrip a { color: rgba(255,255,255,.92); }
.topstrip a:hover { color: var(--gold-2); text-decoration: none; }
.topstrip .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); margin: 0 9px; vertical-align: 3px; }

/* ---------- 页头 ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: linear-gradient(145deg, #17493d 0%, var(--deep-900) 100%);
  color: var(--gold-2); display: flex; align-items: center; justify-content: center;
  font: 400 19px/1 var(--serif);
  box-shadow: 0 6px 14px -8px rgba(8,33,28,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.brand .txt { line-height: 1.28; }
.brand .txt b { display: block; font-size: 17.5px; font-weight: 600; letter-spacing: .02em; }
.brand .txt small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.nav a {
  position: relative; color: var(--ink-2); font-size: 14px; padding: 8px 13px; border-radius: 9px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(0,0,0,.045); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
.nav a.cta-link {
  margin-left: 8px; padding: 9px 18px; border-radius: 980px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--deep-800) 0%, var(--deep-700) 100%);
  box-shadow: 0 8px 20px -12px rgba(8,33,28,.9);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.nav a.cta-link:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* ---------- 首屏（深色） ---------- */
.hero {
  position: relative; overflow: hidden; color: #f3f6f4;
  background:
    radial-gradient(1100px 520px at 18% -18%, rgba(26,82,69,.95) 0%, rgba(26,82,69,0) 62%),
    radial-gradient(900px 460px at 88% 4%, rgba(18,63,53,.90) 0%, rgba(18,63,53,0) 58%),
    linear-gradient(158deg, var(--deep-950) 0%, #0d332b 52%, var(--deep-950) 100%);
  padding: 104px 0 96px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(900px 460px at 30% 10%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(900px 460px at 30% 10%, #000 0%, transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: 980px; padding: 7px 16px; margin-bottom: 26px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.hero h1 {
  margin: 0 0 22px; font-size: clamp(34px, 5.4vw, 60px); font-weight: 600;
  line-height: 1.22; letter-spacing: -.02em; color: #fff;
}
.hero h1 .hl {
  background: linear-gradient(96deg, var(--gold-2) 0%, var(--gold) 55%, #d9b877 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { font-size: 17.5px; line-height: 1.85; color: rgba(255,255,255,.74); max-width: 680px; margin: 0 0 34px; }
.hero .lead strong { color: #fff; font-weight: 600; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 980px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), filter .22s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.hero .btn { background: #fff; color: var(--deep-900); box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); }
.hero .btn:hover { box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); }
.btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.15); }
.hero .note { margin-top: 26px; font-size: 13.5px; color: rgba(255,255,255,.55); letter-spacing: .02em; }
.hero .note b { color: rgba(255,255,255,.85); font-weight: 600; }

/* 浅色区块里的按钮 */
section .btn { background: linear-gradient(135deg, var(--deep-800), var(--deep-700)); color: #fff; box-shadow: 0 12px 26px -16px rgba(8,33,28,.9); }
section .btn.ghost { background: #fff; color: var(--deep-800); border-color: var(--line); box-shadow: var(--shadow-s); }
section .btn.ghost:hover { border-color: var(--gold); background: var(--gold-soft); }

/* ---------- 数字条（浮起卡片） ---------- */
.stats { position: relative; z-index: 5; margin-top: -52px; }
.stats .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-l); padding: 14px 0;
}
.stats .item { padding: 18px 28px; border-left: 1px solid var(--line-2); }
.stats .item:first-child { border-left: 0; }
.stats b { display: block; font-size: 38px; font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--deep-900); font-variant-numeric: tabular-nums; }
.stats b i { font: 600 14px/1 var(--sans); font-style: normal; color: var(--gold); margin-left: 5px; letter-spacing: 0; }
.stats span { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.6; }

/* ---------- 区块 ---------- */
section { padding: 104px 0; }
section.alt { background: var(--bg-2); }
section.tight { padding-top: 64px; }
section:first-of-type { padding-top: 92px; }
.sec-head { margin-bottom: 46px; max-width: 800px; }
.sec-head .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .16em; color: var(--gold); font-weight: 700; margin-bottom: 14px;
}
.sec-head .kicker::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
h1, h2, h3 { letter-spacing: -.015em; }
h2 { font-size: clamp(26px, 3.3vw, 40px); font-weight: 600; line-height: 1.28; margin: 0 0 14px; color: var(--ink); }
h3, .card h2 { font-size: 17.5px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.005em; }
.sub { color: var(--muted); font-size: 16px; margin: 0 0 24px; line-height: 1.85; }
p { margin: 0 0 14px; }
.lead { color: var(--ink-2); font-size: 17px; line-height: 1.9; }
hr.rule { border: 0; border-top: 1px solid var(--line-2); margin: 40px 0; }
.divider { display: flex; align-items: center; gap: 14px; margin: 8px 0 40px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.divider span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); opacity: .75; }

/* ---------- 卡片 ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 28px 28px 30px; box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), transparent);
  transition: opacity .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #dededf; }
.card:hover::before { opacity: 1; }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.82; }
.card p + p { margin-top: 12px; }
.card .num { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--gold); margin-bottom: 13px; font-variant-numeric: tabular-nums; }
.card.calm { background: #f1f7f3; border-color: #e0ece5; }

/* 图标带 */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.why .ico {
  width: 50px; height: 50px; border-radius: 15px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--deep-800) 0%, var(--deep-900) 100%);
  color: var(--gold-2);
  box-shadow: 0 12px 24px -14px rgba(8,33,28,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.why .ico svg { width: 23px; height: 23px; }
.why h2 { font-size: 16.5px; }
.why p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.8; }

/* ---------- 流程 ---------- */
.steps { display: grid; gap: 16px; counter-reset: s; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius-s); padding: 24px 28px 24px 82px; box-shadow: var(--shadow-s);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.step:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: 26px; top: 24px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--sans); color: var(--gold-2); font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg, var(--deep-800), var(--deep-900));
  box-shadow: 0 10px 20px -12px rgba(8,33,28,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.step b { color: var(--ink); font-weight: 600; }
.step .who {
  display: inline-block; font-size: 11.5px; letter-spacing: .04em; color: var(--deep-800);
  background: #eef5f1; border: 1px solid #dfeae4; border-radius: 980px;
  padding: 2px 11px; margin-left: 10px; vertical-align: 1.5px;
}
.step em { font-style: normal; color: var(--muted); font-size: 14.8px; display: block; margin-top: 8px; line-height: 1.8; }

/* ---------- 列表 ---------- */
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line-2); position: relative; font-size: 15.4px; color: var(--ink-2); line-height: 1.85; }
ul.clean li:last-child { border-bottom: 0; }
ul.clean li::before { content: ""; position: absolute; left: 6px; top: 23px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); opacity: .8; }
ul.clean li strong { color: var(--ink); }

/* ---------- FAQ ---------- */
details {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-s);
  margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-s);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
details[open] { box-shadow: var(--shadow); border-color: #dededf; }
summary { cursor: pointer; font-weight: 600; font-size: 16px; padding: 20px 60px 20px 26px; list-style: none; position: relative; color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 23px;
  font-size: 15px; color: var(--gold); background: var(--gold-soft); border: 1px solid #f0e4cf;
}
details[open] summary::after { content: "–"; }
details p { padding: 0 26px 24px; margin: 0; color: var(--ink-2); font-size: 15.2px; line-height: 1.9; }
.faq { margin-top: 4px; }

/* ---------- 联系 ---------- */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
/* 三卡布局：内容区（按钮/二维码框）顶部对齐 + 说明文字贴底对齐。
   ⚠️ 不强求三卡等高：二维码（含白边与扫描留白）天然比一行文字高，
      压扁会让码失真、影响扫出率。真正该对齐的是「上边缘」和「说明文字」，
      这两处对齐后视觉上是齐的，卡片底边高出一截反而能让人注意到二维码更大。 */
.contact .card { display: flex; flex-direction: column; }
.contact .card .v { flex: none; }
.contact .card .v.qrbox { flex: 1 1 auto; }
/* 说明文字永远贴卡片底部，三张卡的这行字就在同一水平线上 */
.contact .card .sub { margin-top: auto !important; }
.contact .card b { display: block; font-size: 11.5px; letter-spacing: .16em; color: var(--gold); font-weight: 700; margin-bottom: 9px; }
.contact .card .v { font-size: 17.5px; color: var(--ink); font-weight: 600; line-height: 1.6; word-break: break-all; }
/* ---------- B1-13 三卡按钮等宽 + 地址可复制/导航（2026-10-17）----------
   老许要求：
     ① 「把那个地址做成可以复制导航的按钮」
     ② 「地址/电话/二维码 三个按钮区域的宽度做成一致的看起来容易对齐」

   实测改前（1440px，卡片等宽 381px，但三个可点区宽度各不相同）：
     办公地址  .v 内层 323px  ← 纯文字
     电话      按钮 149px      ← 只有一半宽
     企业微信  二维码 210px    ← 又一个宽度
   → 眼睛对不齐，也不知道该点哪个。

   本段做两件事：
     ① 抽出 .v-btn 统一形态：width:100% + 浅金底 + 金描边 + 内高光
        地址、电话、二维码三处共用，宽度自动绝对相等
     ② 地址升级为按钮：点一下先复制、350ms 后唤起地图导航
        —— "复制" 对应客户要发给别人，"导航" 对应本地客户要过来，
        一次点击把两种需求都接住。
        导航延迟 350ms 的原因：部分浏览器会因未激活的剪贴板操作
        阻塞后续的页面跳转，先让复制落地再导航更稳。
   -------------------------------------------------------------------- */
.contact .card .v .v-btn {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;                       /* ← 对齐的关键 */
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(200,161,90,.42);
  border-radius: 10px;
  background: rgba(250,245,236,.85);
  box-shadow: 0 1px 2px rgba(8,33,28,.05), 0 4px 12px -8px rgba(8,33,28,.16),
              inset 0 1px 0 rgba(255,255,255,.9);
  font: inherit; font-size: 16.5px; font-weight: 600;
  color: var(--deep-800);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease), background .2s var(--ease);
}
/* 内容超长时（窄屏下地址 14 字）允许换行，不撑破按钮 */
/* B1-16：原文为 flex:1（用于左右布局的横向拉伸），现布局已改为纵向居中，
   保留 flex:1 会把文字块拉伸到整个方框高度，导致文字偏上。已改为 0 0 auto，
   详见下方 .v-btn .vb-text 处的说明。 */
.contact .card .v .v-btn .vb-text { min-width: 0; line-height: 1.5; word-break: break-all; }
/* 右侧小标签：说明"点这里会怎样" */
.contact .card .v .v-btn .vb-tag {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  color: var(--gold-ink); opacity: .82;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(200,161,90,.14);
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.contact .card .v .v-btn:hover {
  color: var(--deep-900); background: #fff;
  border-color: rgba(200,161,90,.75);
  box-shadow: 0 2px 4px rgba(8,33,28,.06), 0 12px 26px -10px rgba(8,33,28,.28),
              inset 0 1px 0 #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
.contact .card .v .v-btn:hover .vb-tag { opacity: 1; background: rgba(200,161,90,.22); }
.contact .card .v .v-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(8,33,28,.10);
  background: rgba(250,245,236,.95);
}
/* 复制成功反馈：标签转绿 */
.contact .card .v .v-btn.copied { border-color: rgba(26,122,92,.45); }
.contact .card .v .v-btn.copied .vb-tag {
  color: #0F6E56; background: rgba(26,122,92,.16); opacity: 1;
}
/* 电话按钮：号码居中，不需要右侧标签 */
.contact .card .v a.v-btn { justify-content: center; }

/* 热区外扩（与 B1-12 同一手法）：纯扩展命中区域，视觉不变 */
.contact .card .v .v-btn::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: -8px; bottom: -8px;
}

/* 二维码区也撑满内层宽度，与前两个按钮左右对齐
   ⚠️ B1-15（2026-10-17）老许建议：「把地址和电话的卡片上下结构布局，
      这样就和后面的二维码卡片高度基本一致，微调一下就对齐了。」

   原来的问题：按钮框 44px、二维码框 170px，卡片高度 161 vs 287，差 126px。
   强行用 flex:1 撑高只是"看起来齐"，但卡片内部留白不均。

   按老许的思路改成上下结构：
     · 每张卡的可见区 = 标题 + 一个填满宽度的方框 + 说明文字
     · 方框统一 min-height:170px（对齐二维码的自然高度）
     · 按钮在方框内垂直居中，宽度100% —— 上下留白由方框高度给出
   这样三张卡的高度由同一个变量决定，天然对齐，且内部留白均匀。
   窄屏单列时方框降为 120px，避免二维码页出现大块空白。 */
.contact .card .v.qrbox {
  width: 100%; word-break: normal;
  min-height: 170px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  border: 1px solid rgba(200,161,90,.42);
  border-radius: 10px;
  background: rgba(250,245,236,.85);
  box-shadow: 0 1px 2px rgba(8,33,28,.05), 0 4px 12px -8px rgba(8,33,28,.16),
              inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
/* 按钮/地址也放进同样高度的方框里 —— 与二维码框同一规格
   ⚠️ .vb-text 与 .vb-tag 是兄弟节点（不在 .vb-text 里面），
   所以垂直居中靠父级 justify-content:center + 统一 gap 实现，
   不要试图把 .vb-tag 塞进 .vb-text，那会改变 HTML 结构。 */
.contact .card .v .v-btn {
  min-height: 170px;
  flex-direction: column;
  justify-content: center;          /* 文字 + 标签作为一个整体垂直居中 */
  align-items: center;
  gap: 12px;
}
.contact .card .v .v-btn .vb-text {
  text-align: center;
  font-size: 18px;
  line-height: 1.45;
  /* ⚠️ B1-16（2026-10-17）去掉 flex:1
     老许反馈：「地址卡片的地址文字需要上下居中」。
     实测：文字块元素盒 116px 高，但里面只有 1 行、行高 21px——
     多出的 95px 是 flex:1 拉伸出来的空白，全部堆在文字下方，
     视觉上就"文字偏上"。

     ⚠️ 注意：量上下留白时是「上 9px / 下 9px = 差 0px」，看起来已居中——
     那是因为量的是 flex 盒子边界，不是字形墨迹。
     **对齐必须量"内容实际占的范围"，不能量被拉伸后的容器。**

     修法：flex:0 0 auto 让文字块按内容高度，
     垂直居中交给父级 justify-content:center。 */
  flex: 0 0 auto;
}
/* 电话按钮：号码居中，不需要右侧标签，但与地址保持同一高度 */
.contact .card .v a.v-btn { justify-content: center; }

@media (max-width: 1020px) {
  .contact .card .v.qrbox,
  .contact .card .v .v-btn { min-height: 130px; }
}
@media (max-width: 700px) {
  .contact .card .v.qrbox,
  .contact .card .v .v-btn { min-height: 118px; }
}

/* 窄屏档：缩小二维码，让它不撑破统一高度。
   实测 390px 下二维码图150px > 方框 118px，卡片比另两张高 46px。
   二维码必须留白才能扫（不宜压到 110px 以下），所以同步把方框抬高到 150px，
   而不是把码压小 —— 扫不出码是功能损失，盒子高一点只是观感。 */
@media (max-width: 1020px) {
  .contact .card .v.qrbox img { width: 130px; }
}
@media (max-width: 700px) {
  .contact .card .v.qrbox,
  .contact .card .v .v-btn { min-height: 148px; }
}
.contact .card .v.qrbox:hover {
  border-color: rgba(200,161,90,.75);
  background: #fff;
  box-shadow: 0 2px 4px rgba(8,33,28,.06), 0 12px 26px -10px rgba(8,33,28,.28),
              inset 0 1px 0 #fff;
}
/* 二维码本体不跟着上浮（那张图不该动），只让外框动 */
.contact .card .qrbox img {
  display: block; width: 150px; max-width: 100%; height: auto;
  border-radius: 8px; background: #fff; padding: 5px;
  border: 1px solid var(--line-2);
  transition: none;
}
/* 首页那张卡是窄栏（150px 二维码），限一档宽度避免撑破 */
.contact .card .qrbox img[width="180"] { width: 150px; }
/* 两栏/单列档：二维码区随卡宽收缩，保证框与按钮同宽 */
/* 窄屏档：缩小二维码，让它不撑破统一高度。
   实测 390px 下二维码图150px > 方框 118px，卡片比另两张高 46px。
   二维码必须留白才能扫（不宜压到 110px 以下），所以同步把方框抬高到 150px，
   而不是把码压小 —— 扫不出码是功能损失，盒子高一点只是观感。 */
@media (max-width: 1020px) {
  .contact .card .v.qrbox img { width: 130px; }
}
@media (max-width: 700px) {
  .contact .card .v.qrbox,
  .contact .card .v .v-btn { min-height: 148px; }
}

/* ---------- 页脚（与首屏呼应） ---------- */
footer {
  color: rgba(255,255,255,.62); font-size: 13.5px; padding: 64px 0 50px;
  background:
    radial-gradient(900px 380px at 12% -20%, rgba(26,82,69,.60) 0%, rgba(26,82,69,0) 60%),
    linear-gradient(180deg, var(--deep-950) 0%, #08211c 100%);
}
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
footer b { display: block; color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: .02em; margin-bottom: 14px; }
footer b::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--gold), transparent); }
footer a { color: rgba(255,255,255,.78); }
footer a:hover { color: var(--gold-2); text-decoration: none; }
footer .cols > div > div { margin-bottom: 9px; line-height: 1.8; }
footer .fine { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); line-height: 2; }
footer .fine strong { color: rgba(255,255,255,.9); }

/* ---------- B1-14 页脚电话也做成按钮（2026-10-17） ----------
   老许发现首页最下方电话"没有按钮、也不能点击弹出"——
   查出来是我上一轮只改了联系页，漏了 index.html 那张卡。
   本段补两处：
     ① 首页联系卡的 tel-btn（HTML 层，已在 index.html 修）
     ② 页脚的电话链接（这里）—— 原本是「电话 + 裸 a 标签」，
        跟站内其他可点元素不一致

   配色要单独一套：页脚是深绿底，不能用白底浅金的按钮，
   否则会像块补丁。这里用「半透明描边 + 透明底」，
   与深底融合，hover 时填浅金。 */
footer .foot-tel { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
footer .ft-lbl {
  font-size: 12px; letter-spacing: .06em;
  color: rgba(255,255,255,.55);
}
footer .foot-tel-btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 14.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}
footer .foot-tel-btn:hover {
  background: rgba(200,161,90,.20);      /* 深底上 hover 转金，不刺眼 */
  border-color: rgba(200,161,90,.65);
  color: var(--gold-2);
  text-decoration: none;
}
footer .foot-tel-btn:active { background: rgba(200,161,90,.28); }
/* 热区外扩，与站内其他按钮同一手法 */
footer .foot-tel-btn::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: -8px; bottom: -8px;
}

/* ---------- 内页头（与首屏同源深墨绿，避免"换页就掉色"） ---------- */
.pagehead {
  position: relative; overflow: hidden; padding: 58px 0 50px; color: #f5f5f7;
  background:
    radial-gradient(900px 400px at 14% -34%, rgba(26,82,69,.95) 0%, rgba(26,82,69,0) 62%),
    radial-gradient(720px 340px at 88% 2%, rgba(18,63,53,.88) 0%, rgba(18,63,53,0) 58%),
    linear-gradient(158deg, var(--deep-950) 0%, #0e362c 55%, var(--deep-950) 100%);
  border-bottom: 1px solid rgba(200,161,90,.28);
}
.pagehead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(780px 400px at 26% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(780px 400px at 26% 0%, #000 0%, transparent 72%);
}
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .crumb { font-size: 13px; color: rgba(255,255,255,.60); margin-bottom: 14px; letter-spacing: .02em; }
.pagehead .crumb a { color: rgba(255,255,255,.60); }
.pagehead .crumb a:hover { color: var(--gold-2); text-decoration: none; }
.pagehead h1 { margin: 0 0 12px; font-size: clamp(28px, 3.8vw, 44px); font-weight: 600; line-height: 1.25; color: #fff; }
.pagehead .sub { margin: 0; max-width: 740px; color: rgba(255,255,255,.72); }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .grid, .grid.four, .why { grid-template-columns: repeat(2, 1fr); }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); padding: 8px 0; }
  .stats .item { padding: 16px 22px; }
  .stats .item:nth-child(3) { border-left: 0; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
  section { padding: 64px 0; }
  .hero { padding: 68px 0 78px; }
  .hero h1 { letter-spacing: -.01em; }
  .stats { margin-top: -46px; }
  .stats .wrap { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .stats b { font-size: 30px; }
  .top .wrap { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0; }
  .nav { gap: 0; }
  .nav a { padding: 7px 9px; font-size: 13px; }
  .nav a[aria-current="page"]::after { left: 9px; right: 9px; }
  .nav a.cta-link { display: none; }
  .grid, .grid.two, .grid.four, .contact, footer .cols, .why { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px 22px 26px; }
  .step { padding: 22px 22px 22px 74px; }
  .step::before { left: 22px; }
  .topstrip .wrap { justify-content: center; text-align: center; }
  .topstrip .hide-sm { display: none; }
  h2 { letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, .topstrip, footer, .cta { display: none; }
  body { font-size: 12pt; color: #000; }
  .hero { background: none; color: #000; padding: 0 0 18pt; }
  .hero h1, .hero .lead { color: #000; }
  section { padding: 12pt 0; break-inside: avoid; }
  .card, .step, details, .stats .wrap { box-shadow: none; border-color: #ccc; }
  a { color: #000; }
}

/* ---------- 财税观察（文章） ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post {
  display: block; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 26px 26px 24px; box-shadow: var(--shadow-s); color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow); border-color: #dededf; }
.post-date { display: block; font-size: 12px; letter-spacing: .1em; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.post h2 { font-size: 18px; line-height: 1.5; margin: 0 0 10px; }
.post p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.8px; line-height: 1.8; }
.post-more { color: var(--deep-800); font-weight: 600; font-size: 14px; }

.prose { padding: 62px 0 88px; }
.prose .wrap { max-width: 780px; }
.prose h2 { font-size: 24px; margin: 42px 0 14px; }
.prose h3 { font-size: 18.5px; margin: 30px 0 10px; }
.prose p { font-size: 16.5px; line-height: 1.95; color: var(--ink-2); margin: 0 0 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 9px; color: var(--ink-2); line-height: 1.9; }
.prose blockquote { margin: 0 0 20px; padding: 16px 22px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; color: var(--ink-2); font-size: 15.5px; }
.prose em { color: var(--muted); font-style: normal; font-size: 14.5px; }

/* ---------- 图片 ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-s); }
.photo-wide { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 26px; }

@media (max-width: 1000px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .posts, .gallery { grid-template-columns: 1fr; gap: 16px; }
  .prose { padding: 44px 0 64px; }
}

/* ---------- 示意图容器 ---------- */
.figure {
  margin: 26px 0 34px; padding: 24px 22px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-s); overflow-x: auto;
}
.figure svg { display: block; width: 100%; height: auto; min-width: 620px; }
@media (max-width: 700px) { .figure { padding: 16px 14px; } .figure svg { min-width: 560px; } }

/* 整卡可点击 */
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; }
a.card::after {
  content: "查看详情 →"; display: block; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--deep-800);
  opacity: .55; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
a.card:hover::after { opacity: 1; transform: translateX(3px); }

/* ===================================================================
   v5 · 产品页系统（service detail）
   设计要点：详情页不再是"文章排版"，而是"产品页"。
   1) 深色产品首屏 + 专属主视觉（视觉力量的来源）
   2) 一句话定义（verdict）——先把这项服务"是什么"钉死
   3) 交付物清单——把"你买到什么"变成看得见的实物
   4) 章节编号 + 锚点导航——长页面可跳转
   5) 深色收尾边界区——与首屏呼应，页面有头有尾
   =================================================================== */

/* ---------- 产品首屏 ---------- */
.phero {
  position: relative; overflow: hidden; color: #f3f6f4;
  background:
    radial-gradient(1200px 560px at 14% -22%, rgba(26,82,69,.95) 0%, rgba(26,82,69,0) 62%),
    radial-gradient(900px 480px at 92% 8%, rgba(18,63,53,.92) 0%, rgba(18,63,53,0) 58%),
    linear-gradient(158deg, var(--deep-950) 0%, #0d332b 54%, var(--deep-950) 100%);
  padding: 52px 0 0;
  border-bottom: 1px solid rgba(200,161,90,.30);
}
.phero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(900px 440px at 26% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(900px 440px at 26% 0%, #000 0%, transparent 72%);
}
.phero .wrap { position: relative; z-index: 1; }
.phero .crumb { font-size: 13px; color: rgba(255,255,255,.58); letter-spacing: .02em; margin-bottom: 30px; }
.phero .crumb a { color: rgba(255,255,255,.58); }
.phero .crumb a:hover { color: var(--gold-2); text-decoration: none; }

.phero .pnum {
  display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
  font-size: 12px; letter-spacing: .22em; color: var(--gold); font-weight: 700;
}
.phero .pnum b { font: 400 34px/1 var(--serif); letter-spacing: .04em; color: var(--gold-2); }
.phero .pnum i {
  font-style: normal; letter-spacing: .18em; color: rgba(255,255,255,.52); font-weight: 400;
}
.phero h1 {
  margin: 0 0 26px; font-size: clamp(36px, 6.2vw, 72px); font-weight: 600;
  line-height: 1.14; letter-spacing: -.025em; color: #fff;
}
.phero h1 .hl {
  background: linear-gradient(96deg, var(--gold-2) 0%, var(--gold) 58%, #d9b877 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 一句话定义：把"这项服务是什么"钉死 */
.phero .verdict {
  max-width: 780px; margin: 0 0 34px; padding: 22px 0 22px 26px;
  border-left: 2px solid var(--gold);
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.75; color: rgba(255,255,255,.86);
}
.phero .verdict strong { color: var(--gold-2); font-weight: 600; }
.phero .psum { max-width: 720px; color: rgba(255,255,255,.64); font-size: 15.5px; line-height: 1.85; margin: 0 0 40px; }

/* 主视觉槽 */
.phero .visual { margin: 0 -28px -1px; }
.phero .visual svg { display: block; width: 100%; height: auto; }

/* ---------- 关键承诺三条（浮起，跨深浅交界） ---------- */
.ppromise {
  position: relative; z-index: 6; margin-top: -1px;
  background: var(--bg-2); padding: 0 0 0;
}
.ppromise .wrap { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
.ppromise .cell { padding: 30px 28px 32px; border-left: 1px solid var(--line-2); }
.ppromise .cell:first-child { border-left: 0; }
.ppromise .cell .k { display: block; font-size: 11.5px; letter-spacing: .16em; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.ppromise .cell b { display: block; font-size: 17.5px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 7px; }
.ppromise .cell span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.75; }

/* ---------- 章节锚点导航 ---------- */
.panchor { position: sticky; top: 68px; z-index: 30; background: rgba(255,255,255,.90); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line-2); }
.panchor .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.panchor .wrap::-webkit-scrollbar { display: none; }
.panchor a {
  flex: 0 0 auto; padding: 15px 14px 13px; font-size: 13.5px; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s var(--ease);
}
.panchor a:hover { color: var(--deep-800); text-decoration: none; }
.panchor a.on { color: var(--deep-900); font-weight: 600; border-bottom-color: var(--gold); }

/* ---------- B1-15 锚点栏左侧加产品名（2026-10-17）----------
   老许反馈：「这个导航希望把产品名称加上去，翻到下面都不知道是描述的哪款产品了。」

   实测：.panchor 是 sticky（top:68px），滚到服务页中下部时一直挂着，
   但它原本只有「解决什么问题 / 我们怎么做 / …」五个栏目名，
   全站有 8 款服务，滚下去确实分不清在看哪一款。

   做法：最左侧加产品名，做成 sticky 分隔条（不是普通导航项）：
     · 与栏目名之间用 1px竖线分隔，视觉上"这是标题，不是可点的章节"
     · 不可点击、不响应 hover，避免被当成锚点
     · 窄屏时与栏目名一起横向滚动，不占额外高度
------------------------------------------------------------- */
.panchor .pa-prod {
  flex: 0 0 auto;
  display: flex; align-items: center;
  align-self: stretch;
  padding-right: 16px; margin-right: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--deep-900);
  white-space: nowrap;
  /* 与右侧栏目名之间的竖线：把"产品名"和"章节导航"在视觉上分开 */
  border-right: 1px solid var(--line);
  cursor: default;
  user-select: none;
}
/* 极窄屏：产品名保留但缩小，避免挤掉章节名 */
@media (max-width: 700px) {
  .panchor .pa-prod { font-size: 13px; padding-right: 11px; margin-right: 6px; }
}

/* ---------- 章节 ---------- */
.psection { padding: 88px 0; }
.psection.alt { background: var(--bg-2); }
.psection .phead { margin-bottom: 40px; max-width: 840px; }
.psection .phead .pno {
  display: block; font: 400 15px/1 var(--serif); letter-spacing: .14em; color: var(--gold); margin-bottom: 14px;
}
.psection .phead h2 { margin: 0 0 12px; }
.psection .phead .sub { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.psection .prose-in { max-width: 780px; }
.psection .prose-in h3 { font-size: 19px; margin: 34px 0 12px; }
.psection .prose-in h3:first-child { margin-top: 0; }
.psection .prose-in p { font-size: 16.5px; line-height: 1.95; color: var(--ink-2); margin: 0 0 16px; }
.psection .prose-in ul { margin: 0 0 16px; padding-left: 22px; }
.psection .prose-in li { margin-bottom: 11px; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.psection .prose-in li strong { color: var(--ink); font-weight: 600; }
.psection .prose-in ol { margin: 0 0 16px; padding-left: 24px; }
.psection .prose-in ol li { margin-bottom: 13px; }
.psection .prose-in blockquote {
  margin: 20px 0; padding: 18px 24px; border-left: 2px solid var(--gold);
  background: var(--gold-soft); border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.85;
}
.psection .prose-in strong { color: var(--ink); font-weight: 600; }
.psection .prose-in hr.rule { margin: 32px 0; }
.psection .prose-in em { color: var(--muted); font-style: normal; }

/* ---------- 交付物清单（把"买到什么"变成实物） ---------- */
.pdeliver { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pdeliver .d {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 26px 26px 28px;
  box-shadow: var(--shadow-s); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pdeliver .d:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pdeliver .d::after {
  content: ""; position: absolute; right: -22px; top: -22px; width: 76px; height: 76px;
  border-radius: 50%; background: var(--gold-soft); opacity: .9;
}
.pdeliver .d .no {
  position: relative; z-index: 1; display: inline-block; font: 400 13px/1 var(--serif);
  letter-spacing: .1em; color: var(--gold); margin-bottom: 14px;
}
.pdeliver .d b { position: relative; z-index: 1; display: block; font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 9px; }
.pdeliver .d span { position: relative; z-index: 1; display: block; font-size: 15px; color: var(--muted); line-height: 1.8; }

/* ---------- 作业流程（竖向带连线） ---------- */
.pflow { display: grid; gap: 0; counter-reset: f; max-width: 880px; }
.pflow .frow { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 24px; padding: 0 0 34px; }
.pflow .frow:last-child { padding-bottom: 0; }
.pflow .frow::before {
  counter-increment: f; content: counter(f, decimal-leading-zero);
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans); color: var(--gold-2); font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg, var(--deep-800), var(--deep-900));
  box-shadow: 0 10px 20px -12px rgba(8,33,28,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.pflow .frow:not(:last-child)::after {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: -6px; width: 2px;
  background: linear-gradient(180deg, rgba(200,161,90,.55), rgba(200,161,90,.10));
}
.pflow .fbody { padding-top: 6px; }
.pflow .fbody b { display: block; font-size: 18.5px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 8px; }
.pflow .fbody .who {
  display: inline-block; font-size: 11.5px; letter-spacing: .04em; color: var(--deep-800);
  background: #eef5f1; border: 1px solid #dfeae4; border-radius: 980px;
  padding: 2px 11px; margin-left: 10px; vertical-align: 2px;
}
.pflow .fbody span { display: block; font-size: 15.5px; color: var(--muted); line-height: 1.85; }

/* ---------- 误区对照 ---------- */
.pwrong { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pwrong .w { border-radius: var(--radius); padding: 24px 26px 26px; border: 1px solid var(--line-2); background: #fff; }
.pwrong .w .tag {
  display: inline-block; font-size: 11.5px; letter-spacing: .12em; font-weight: 700;
  padding: 3px 11px; border-radius: 980px; margin-bottom: 13px;
}
.pwrong .w.no .tag { color: #993c1d; background: #fceceb; border: 1px solid #f2d6d2; }
.pwrong .w.no b { color: #6b2a15; }
.pwrong .w.yes { background: #eef5f1; border-color: #d8e7de; }
.pwrong .w.yes .tag { color: var(--deep-800); background: #fff; border: 1px solid #d5e5dc; }
.pwrong .w b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.55; margin-bottom: 9px; color: var(--ink); }
.pwrong .w span { display: block; font-size: 14.8px; color: var(--ink-2); line-height: 1.8; }

/* ---------- 深色边界区（与首屏呼应） ---------- */
.pbound { position: relative; overflow: hidden; color: rgba(255,255,255,.74); padding: 84px 0 88px;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(26,82,69,.80) 0%, rgba(26,82,69,0) 62%),
    linear-gradient(180deg, var(--deep-950) 0%, #08211c 100%);
}
.pbound::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 68px 68px;
}
.pbound .wrap { position: relative; z-index: 1; }
.pbound h2 { color: #fff; }
.pbound .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.pbound .kicker::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.pbound ul.list-x { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.pbound ul.list-x li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 15.8px; line-height: 1.85; }
.pbound ul.list-x li:last-child { border-bottom: 0; }
.pbound ul.list-x li::before {
  content: ""; position: absolute; left: 4px; top: 25px; width: 13px; height: 13px;
  border: 1.5px solid rgba(200,161,90,.65); border-radius: 3px;
}
.pbound ul.list-x li::after {
  content: ""; position: absolute; left: 7.5px; top: 29px; width: 7px; height: 4px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.pbound ul.list-x li strong { color: #fff; font-weight: 600; }

/* ---------- 相关服务 ---------- */
.prel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prel a {
  display: block; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-s);
  padding: 20px 22px 22px; color: inherit; box-shadow: var(--shadow-s);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.prel a:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); }
.prel a .no { display: block; font: 400 12px/1 var(--serif); letter-spacing: .1em; color: var(--gold); margin-bottom: 9px; }
.prel a b { display: block; font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 7px; }
.prel a span { display: block; font-size: 14px; color: var(--muted); line-height: 1.75; }

/* ---------- 产品页响应式 ---------- */
@media (max-width: 1020px) {
  .ppromise .wrap { grid-template-columns: 1fr; }
  .ppromise .cell { border-left: 0; border-top: 1px solid var(--line-2); padding: 22px 24px; }
  .ppromise .cell:first-child { border-top: 0; }
  .pdeliver, .pwrong { grid-template-columns: 1fr; }
  .prel { grid-template-columns: 1fr; }
  .panchor { top: 0; }
}
@media (max-width: 700px) {
  .phero { padding: 34px 0 0; }
  .phero .crumb { margin-bottom: 20px; }
  .phero .pnum b { font-size: 26px; }
  .phero h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .phero .verdict { padding: 16px 0 16px 18px; font-size: 16.5px; }
  .phero .visual { margin: 0 -20px; overflow-x: auto; }
  .phero .visual svg { min-width: 700px; }
  .psection { padding: 56px 0; }
  .pflow .frow { grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 28px; }
  .pflow .frow::before { width: 42px; height: 42px; font-size: 13px; }
  .pflow .frow:not(:last-child)::after { left: 20px; top: 42px; }
  .pbound { padding: 58px 0 62px; }
}
@media print {
  .panchor, .pflow .frow::after { display: none; }
  .phero { background: none; color: #000; }
  .phero h1, .phero .verdict, .phero .psum { color: #000; }
  .pbound { background: none; color: #000; }
  .pbound h2, .pbound ul.list-x li, .pbound ul.list-x li strong { color: #000; }
}

/* 产品页面包屑分隔点 */
.phero .crumb .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); margin: 0 10px; vertical-align: 4px; opacity: .8; }
/* 流程里的次级要点 */
.pflow .psub { list-style: none; padding: 0; margin: 10px 0 0; }
.pflow .psub li { position: relative; padding-left: 20px; font-size: 14.8px; color: var(--muted); line-height: 1.8; margin-bottom: 4px; }
.pflow .psub li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); opacity: .8; }

/* ---------- 图注：让示意图成为可附注的专业读图素材 ---------- */
.figure.captioned { padding: 26px 24px 20px; }
.figure figcaption {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px; color: var(--muted); line-height: 1.8;
}
.figure figcaption .capno {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
  background: var(--gold-soft); border: 1px solid #f0e4cf;
  font: 400 12px/1 var(--serif); color: #9a7a3c;
}
.psection .figure { margin: 40px 0 0; }
.psection.alt .figure { border-color: #e0ece5; }
@media (max-width: 700px) {
  .figure.captioned { padding: 18px 14px 14px; }
  .figure figcaption { font-size: 14px; margin-top: 16px; padding-top: 14px; }
}

/* ===================================================================
   v5.1 · 图文交错排版
   问题：.figure 是独立白卡浮在区块里，与文字成两个孤岛，读起来"图是插进来的"。
   做法：图文成组（.figgroup）——文字与图交替出现，形成呼吸节奏；
        窄图走侧边浮动（.figgroup.side），宽图走整幅但去掉浮卡感。
   原则：图是文字的延伸，不是独立的插图。
   =================================================================== */

/* 图文成组：文字与图交替的容器 */
.figgroup { margin: 0; }
.figgroup > * + * { margin-top: 34px; }
.figgroup > .figure { margin: 0; }
.figgroup .figure {
  border-radius: var(--radius); padding: 24px 24px 20px;
  box-shadow: none; border-color: var(--line-2);
}
.figgroup.alt .figure { background: #fbfcfb; border-color: #e3ebe7; }

/* 图与文字的连接：图上边缘留一小段"引线"，暗示承接上文 */
.figgroup .figure { position: relative; }
.figgroup .figure::before {
  content: ""; position: absolute; left: 34px; top: -1px; width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* 图注升级：左对齐 + 细引线，与文字块形成呼吸 */
.figgroup .figure figcaption { margin-top: 18px; padding-top: 16px; }

/* 侧边型：窄图靠右，文字环绕 */
@media (min-width: 1021px) {
  .figgroup.side {
    display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start;
  }
  .figgroup.side .figure { margin-top: 0; }
  .figgroup.side.reverse { grid-template-columns: 380px 1fr; }
  .figgroup.side.reverse .text { order: 2; }
}

/* 图文穿插块：图旁边带一个"要点条"，把图上的信息提到文字层 */
.figgroup .callout {
  border-left: 2px solid var(--gold); padding: 4px 0 4px 20px;
  font-size: 15.5px; line-height: 1.85; color: var(--ink-2);
}
.figgroup .callout b { color: var(--ink); font-weight: 600; }

/* 图内文字在窄屏不塌：SVG 保持最小宽度，允许横向滚动 */
@media (max-width: 700px) {
  .figgroup > * + * { margin-top: 26px; }
  .figgroup .figure { padding: 16px 14px 14px; }
  .figgroup .figure figcaption { font-size: 14px; margin-top: 14px; padding-top: 13px; }
  .figgroup .callout { font-size: 15px; padding-left: 16px; }
}

/* 图文三层的对齐收口：图注与引文同一左基线，避免视觉散开 */
.figgroup .figure figcaption { padding-left: 0; }
.figgroup .callout { margin-left: 26px; padding-left: 18px; }
@media (max-width: 700px) {
  .figgroup .callout { margin-left: 4px; padding-left: 15px; }
}

/* 服务项目列表页：卡片带英文标签，与产品页首屏呼应 */
.services-page .grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.services-page .card { padding: 24px 22px 26px; display: flex; flex-direction: column; }
.services-page .card .num { margin-bottom: 10px; }
.services-page .card h2 { font-size: 16.5px; line-height: 1.45; margin-bottom: 8px; }
.services-page .card .cdesc { font-size: 14.2px; line-height: 1.78; color: var(--muted); flex: 1; }
.services-page .card .cen {
  display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--gold);
  font-weight: 700; margin-bottom: 9px;
}
@media (max-width: 1020px) { .services-page .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .services-page .grid { grid-template-columns: 1fr; gap: 14px; } }

/* ===================================================================
   v5.2 · 首屏节奏修正
   问题：首屏 1105px，主视觉 584px 占 53%。常见笔记本(1440×700)下
        主视觉只露 72px，滚动时它既不是完整的话也不是完整的图——最难受的位置。
   改法（不加内容，只改节奏）：
   1) 文字区收紧，让主视觉尽量在首屏内开始
   2) 主视觉限高到视口的 58vh，下缘渐隐，给出"还有"的暗示
   3) 主视觉与承诺条之间加一道薄过渡带，让滚动有承接
   =================================================================== */

@media (min-width: 701px) {
  /* 1) 文字区收紧：减间距、缩 verdict 行高 */
  .phero { padding: 40px 0 0; }
  .phero .crumb { margin-bottom: 22px; }
  .phero .pnum { margin-bottom: 14px; }
  .phero h1 { margin-bottom: 20px; }
  .phero .verdict { margin-bottom: 22px; padding: 18px 0 18px 24px; line-height: 1.68; }
  .phero .psum { margin-bottom: 26px; line-height: 1.75; }

  /* 2) 主视觉限高 + 下缘渐隐，暗示还有内容 */
  .phero .visual {
    max-height: 58vh; overflow: hidden; position: relative;
  }
  .phero .visual svg { max-width: 100%; }
  .phero .visual::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11,42,36,0) 0%, rgba(9,36,31,.55) 55%, rgba(8,32,28,.92) 100%);
  }

  /* 3) 过渡带：很薄，不做成又一个区块 */
  .pfade {
    position: relative; z-index: 7; margin-top: 0; height: 46px;
    background: linear-gradient(180deg, #08211c 0%, #0b2a24 55%, var(--bg-2) 100%);
  }
  .pfade .wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
  .pfade .hint {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; letter-spacing: .14em; color: var(--gold);
  }
  .pfade .hint::after {
    content: ""; width: 1px; height: 18px; background: linear-gradient(180deg, var(--gold), transparent);
  }
}

/* ===================================================================
   深底示意图在浅色容器里的衬底
   flow / deadline / xinshe-timeline / hero-* 等为透明底深色系 SVG，
   放在白色 .figure 里会白字看不见。给它们加深绿衬底，形成"图内深底"。
   =================================================================== */
.figure.on-dark {
  background: linear-gradient(158deg, var(--deep-950) 0%, #0d332b 54%, var(--deep-950) 100%) !important;
  border-color: #1c4a3f !important;
  padding: 22px 22px 18px !important;
}
.figure.on-dark figcaption { border-top-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.62) !important; }
.figure.on-dark .capno { background: rgba(200,161,90,.20) !important; border-color: rgba(200,161,90,.36) !important; color: var(--gold-2) !important; }
.figure.on-dark .figure svg, .figure.on-dark svg { min-width: 0; }

/* ---------- 理念横条（把账做在业务上 · 各服务用自己的动作表达） ---------- */
.pbelief { position: relative; z-index: 6; background: #fff; border-bottom: 1px solid var(--line-2); }
.pbelief .wrap {
  display: grid; grid-template-columns: 132px 1fr; gap: 0 30px;
  align-items: start; padding-top: 30px; padding-bottom: 30px;
}
/* 徽标收为标识，不与标题争视觉重心 */
.pbelief .bmark {
  grid-row: 1 / span 2; align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 0; padding: 7px 14px; border-radius: 9px;
  background: linear-gradient(150deg, var(--deep-800), var(--deep-900));
  color: var(--gold-2); font: 400 12.5px/1.5 var(--serif); letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 10px 22px -14px rgba(8,33,28,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.pbelief .btitle {
  margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--ink);
}
.pbelief .btitle strong { color: var(--deep-800); font-weight: 600; }
.pbelief .bdesc {
  margin: 0; max-width: 760px; font-size: 15px; line-height: 1.85; color: var(--muted);
}
.pbelief .bdesc strong { color: var(--ink-2); font-weight: 600; }
@media (max-width: 820px) {
  .pbelief .wrap { grid-template-columns: 1fr; gap: 14px; padding-top: 24px; padding-bottom: 24px; }
  .pbelief .bmark { grid-row: auto; justify-self: start; min-height: 0; padding: 6px 13px; }
  .pbelief .btitle { font-size: 16.5px; }
  .pbelief .bdesc { font-size: 15px; }
}

/* 理念条与锚点导航之间留呼吸，避免两块贴在一起 */
.pbelief { border-bottom: 0; }
.pbelief .wrap { padding-bottom: 34px; }
.panchor { border-top: 1px solid var(--line-2); }


/* ===================================================================
   v6 · 全端自适应（手机 / 平板 / 桌面）
   断点体系（三档，与设备物理尺寸对应）：
     手机   ≤ 640px   单列、汉堡菜单、示意图用竖版
     平板   641–1020px 两列、完整导航、示意图用横版但压缩留白
     桌面   > 1020px  原有布局不动
   原则：不改旧规则，全部覆写在末尾，出问题删掉整段即回滚。
   =================================================================== */

/* ---------- 1. 汉堡菜单按钮（默认隐藏，桌面不需要） ---------- */
.navtoggle {
  display: none; align-items: center; gap: 9px;
  padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 10px;
  background: #fff; color: var(--ink-2); cursor: pointer;
  font: 500 14px/1 var(--sans); letter-spacing: .02em;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.navtoggle:hover { border-color: var(--gold); background: var(--gold-soft); }
.navtoggle .bars { display: flex; flex-direction: column; gap: 4px; width: 17px; }
.navtoggle .bars i { display: block; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .24s var(--ease), opacity .2s var(--ease); }
.navtoggle[aria-expanded="true"] { border-color: var(--deep-800); background: var(--deep-800); color: #fff; }
.navtoggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
@media (max-width: 640px) { .navtoggle { position: relative; z-index: 40; } }

.navmask {
  position: fixed; inset: 0; z-index: 38;
  background: rgba(6,26,22,.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.navmask[hidden] { display: none; }

/* ---------- 2. 平板档（641–1020px）：收紧但保持双列 ---------- */
@media (min-width: 641px) and (max-width: 1020px) {
  /* 导航项压缩，避免换行把页头撑到两倍高 */
  .top .wrap { min-height: 60px; gap: 12px; }
  .nav { gap: 0; flex-wrap: nowrap; }
  .nav a { padding: 7px 9px; font-size: 13px; }
  .nav a[aria-current="page"]::after { left: 9px; right: 9px; }
  .nav a.cta-link { margin-left: 4px; padding: 7px 13px; font-size: 13px; }
  .brand .txt b { font-size: 16px; }
  .brand .txt small { font-size: 10px; }
  .brand .mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }

  /* 顶栏一行放下 */
  .topstrip .wrap { min-height: 34px; flex-wrap: nowrap; }
  .topstrip { font-size: 12px; }

  /* 间距收一档，但比手机宽裕 */
  section { padding: 76px 0; }
  .wrap { padding: 0 24px; }
  .hero { padding: 80px 0 76px; }
  .grid { gap: 18px; }
  .card { padding: 24px 22px 26px; }

  /* 示意图：横版可用，但不再锁死最小宽度，改为自然缩放 */
  .figure svg { min-width: 0; }
  .figure { padding: 20px 18px; }
  .phero .visual { margin: 0 -24px -1px; overflow-x: visible; }
  .phero .visual svg { min-width: 0; }
  .figgroup.side { grid-template-columns: 1fr 320px; gap: 28px; }
  .figgroup.side.reverse { grid-template-columns: 320px 1fr; }

  /* 锚点栏跟随页头高度，不被压住 */
  .panchor { top: 60px; }
  .psection { padding: 68px 0; }

  /* 正文行高收一点，窄栏不发散 */
  .prose p { line-height: 1.82; }
  .prose .wrap { max-width: 720px; }
}

/* ---------- 3. 手机档（≤ 640px）：单列 + 汉堡菜单 ---------- */
@media (max-width: 640px) {
  html { scroll-behavior: auto; }

  .wrap { padding: 0 18px; }

  /* 顶栏：只留一句承诺文案。
     ⚠️ 原第 951 行有 `.topstrip .ts-lead { display: none }` —— 那是 P1-1-A
     为了解决"顶栏挤成两行"把整句藏掉的临时措施。B1-8 把顶栏压缩成单行后
     这条规则会导致手机端顶栏完全空白（实测 width=0、文字不渲染），已删除。
     勿再加回来。 */
  .topstrip .wrap { min-height: 27px; flex-wrap: nowrap; justify-content: center; }
  .topstrip { font-size: 12px; }

  /* 页头压到 56px：品牌 + 汉堡按钮一行搞定 */
  .top .wrap { min-height: 56px; gap: 12px; flex-direction: row; align-items: center; justify-content: space-between; }
  .brand { gap: 10px; }
  .brand .mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 16px; border-radius: 9px; }
  .brand .txt b { font-size: 15.5px; }
  .brand .txt small { font-size: 9.5px; }
  .navtoggle { display: inline-flex; }
  .navtoggle-txt { font-size: 13px; }

  /* 导航抽屉：从右侧滑出 */
  /* 关闭时 display:none —— position:fixed + right 负值/transform 移出视口，
     浏览器仍会把溢出宽度计入 scrollWidth（实测多出 320px），导致整页能横向拖。
     display:none 是唯一彻底不参与布局的方式，代价是失去滑入动画，改用淡入。 */
  .nav {
    display: none;
    position: fixed; z-index: 39; top: 0; right: 0;
    width: min(78vw, 300px); height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 74px 16px 32px;
    background: #fff; border-left: 1px solid var(--line-2);
    box-shadow: -18px 0 48px -28px rgba(8,33,28,.5);
    overflow-y: auto; flex-wrap: nowrap;
  }
  body.nav-open .nav {
    display: flex;
    animation: navIn .26s var(--ease) both;
  }
  body.nav-open { overflow: hidden; }
  @keyframes navIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  .nav a {
    padding: 14px 16px; font-size: 16px; border-radius: 11px;
    border-bottom: 1px solid var(--line-2); border-radius: 0;
  }
  .nav a[aria-current="page"] { color: var(--deep-900); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
  .nav a.cta-link {
    display: inline-flex; margin: 18px 0 0; padding: 13px 16px;
    justify-content: center; color: #fff; border-bottom: 0; border-radius: 980px;
    background: linear-gradient(135deg, var(--deep-800), var(--deep-700));
  }

  /* 区块间距：64px 太奢侈，收到 44px */
  section { padding: 44px 0; }
  section.tight { padding-top: 36px; }
  section:first-of-type { padding-top: 52px; }
  .sec-head { margin-bottom: 28px; }
  .prose { padding: 36px 0 52px; }

  /* 正文行高收窄，窄栏不发散 */
  body { font-size: 16px; line-height: 1.78; }
  .hero .lead { font-size: 16px; line-height: 1.78; }
  .sub, .lead { font-size: 15.5px; line-height: 1.78; }
  .prose p { font-size: 16px; line-height: 1.8; }
  .prose li { line-height: 1.8; }
  .prose h2 { font-size: 21px; margin: 34px 0 12px; }
  .prose h3 { font-size: 17px; margin: 26px 0 8px; }

  /* 标题档位下调 */
  h2 { font-size: 23px; }
  .phero h1 { font-size: clamp(27px, 8.2vw, 34px); }

  /* 单列 + 紧凑间距 */
  .grid, .grid.two, .grid.four, .contact, footer .cols, .why,
  .posts, .gallery, .prel, .pdeliver, .pwrong, .services-page .grid,
  .stats .wrap, .ppromise .wrap { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 20px 19px 22px; }
  .card p { font-size: 14.5px; line-height: 1.75; }
  .services-page .card .cdesc { font-size: 14px; }
  .steps .step, .step { padding: 20px 20px 20px 66px; }
  .step::before { left: 20px; }

  /* 数字条：两列更省空间，四列在手机上挤成一团 */
  .stats { margin-top: -30px; }
  .stats .wrap { grid-template-columns: 1fr 1fr; border-radius: 14px; padding: 4px 0; }
  .stats .item { padding: 14px 16px; }
  .stats .item:nth-child(3) { border-left: 0; }
  .stats .item:nth-child(odd) { border-left: 0; }
  .stats b { font-size: 26px; }
  .stats span { font-size: 12px; }

  /* 按钮满宽，拇指好点 */
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .btn { justify-content: center; padding: 14px 22px; }

  /* 锚点栏：跟随 56px 页头，不再被压住 */
  .panchor { top: 56px; }
  .panchor .wrap { padding: 0 18px; }
  .panchor a { padding: 13px 12px; font-size: 14px; }

  /* 产品页 */
  .phero { padding: 28px 0 0; }
  .phero h1 { margin-bottom: 16px; }
  .phero .verdict { padding: 14px 0 14px 16px; font-size: 16px; }
  .phero .psum { font-size: 15px; line-height: 1.78; }
  .psection { padding: 44px 0; }
  .pbound { padding: 46px 0 50px; }
  .pflow .frow { grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 24px; }
  .pflow .frow::before { width: 38px; height: 38px; font-size: 12.5px; }
  .pflow .frow:not(:last-child)::after { left: 18px; top: 38px; }
  .pbelief .wrap { padding-top: 22px; padding-bottom: 26px; }
  .prel a { padding: 18px 18px 20px; }

  /* 示意图：窄屏切竖版，不再横向拖 */
  .figure { padding: 14px 12px; margin: 22px 0 28px; }
  .figgroup .figure { padding: 14px 12px 12px; }
  .figure svg { min-width: 0; }
  .phero .visual { margin: 0 -18px; overflow-x: hidden; }
  .phero .visual svg { min-width: 0; }
  .figgroup .callout { font-size: 14.5px; margin-left: 0; padding-left: 14px; }
  .figure figcaption { font-size: 13.5px; }

  /* 团队 / 联系 / 页脚 */
  .post { padding: 20px 20px 18px; }
  footer .cols { gap: 26px; }
}

/* ---------- 4. 图版切换：宽屏显横版，窄屏显竖版 ---------- */
.gfx-m { display: none; }
@media (max-width: 640px) {
  .gfx-d { display: none; }
  .gfx-m { display: block; }
}

/* ---------- 5. 锚点定位补偿：被sticky 页头挡住的问题 ---------- */
:target { scroll-margin-top: 120px; }
@media (max-width: 1020px) { :target { scroll-margin-top: 122px; } }
@media (max-width: 640px)  { :target { scroll-margin-top: 118px; } }
.psection { scroll-margin-top: 120px; }
@media (max-width: 640px) { .psection { scroll-margin-top: 118px; } }

/* ---------- 6. 大屏（≥1440px）：内容不拉散 ---------- */
@media (min-width: 1440px) {
  .wrap { max-width: 1240px; }
}

/* ---------- 7. 横屏矮屏（手机横放）：压缩纵向留白 ---------- */
@media (max-height: 480px) and (max-width: 1020px) {
  .topstrip { display: none; }
  .panchor { top: 52px; }
}

/* ---------- 8. 打印 ---------- */
@media print {
  .navtoggle, .navmask { display: none !important; }
  .nav { position: static; transform: none; height: auto; width: auto; box-shadow: none; padding: 0; }
}

/* ---------- 9. 无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .navtoggle .bars i { transition: none; }
  body.nav-open .nav { animation: none; }
}

/* ---------- 10. 双版图容器 ----------
   ⚠️ 默认必须"宽屏显横版、隐藏竖版"。曾写成 .gfx-d,.gfx-m 都 display:block，
   结果 >640px 时竖版没被隐藏，被拉伸到整栏宽后紧接横版再画一遍
   （首页桌面端实测多出 5827px 无效高度）。窄屏由下面的 media 翻回来。 */
.gfx-d { display: block; }
.gfx-m { display: none; }
.gfx-d > svg, .gfx-m > svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .gfx-d { display: none; } .gfx-m { display: block; } }

/* ---------- 11. 修掉抽屉与滚动条撑出来的横向溢出 ---------- */
/* 抽屉里的导航项在关闭状态下仍参与布局计算，会把文档撑宽 —— 移到视口外并断开命中 */
.nav { contain: layout paint; }
@media (max-width: 640px) {
  /* .visual 用负边距做通栏，但配合 wrap 的 18px 内边距会超出视口 18px */
  .phero .visual { margin: 0; border-radius: 0; }
  /* 锚点栏横向滚动不应计入文档宽度 */
  .panchor .wrap { overflow-x: auto; max-width: 100vw; }
  /* 页脚与理念条可能残留通栏负边距 */
  .pbelief .wrap, .ppromise .wrap, footer .wrap { max-width: 100%; }
}
/* 桌面端补回通栏效果（不受上面窄屏规则影响） */
@media (min-width: 641px) {
  .phero .visual { margin: 0 -24px -1px; }
}

/* ===================================================================
   v7 · 修复独立审计发现的问题（2026-10-16 深夜）
   审计文件：/Users/a77900/Documents/DSH/tax24h-audit/官网问题与修改建议.md
   =================================================================== */

/* ---------- 1. 页头左右内边距被清零（P1-1-B） ----------
   旧的 ≤700px 规则里有 `.top .wrap{padding:12px 0}`，把 .wrap 的左右内边距覆盖成 0，
   导致手机上「税」字标贴死屏幕左边缘、「菜单」贴死右边缘，与下方正文（18px）对不齐。 */
@media (max-width: 700px) {
  .top .wrap { padding: 12px 18px; }
}
/* 极窄屏（360px 常见安卓）品牌名会被挤到折行，页头从 57px 涨到 77px */
@media (max-width: 380px) {
  .brand .txt b { font-size: 14px; }
}

/* ---------- 2. 平板 701–840px 导航折成两行（P1-2） ----------
   v6 平板块设了 flex-wrap:nowrap + 13px 字号，一行放不下时 flex 项被压缩，
   链接宽度小于文字宽度 → 「服务项目」被压成「服务项/目」。 */
@media (min-width: 641px) and (max-width: 1020px) {
  .nav a { white-space: nowrap; }
  .top .wrap { flex-wrap: wrap; }
}

/* ---------- B1-8 顶栏去广告化 + 电话进 sticky 导航栏（2026-10-17）----------

   老许原话：「我认为顶端不需要联系方式，包括电话号码的表述。
   我个人主观感受，我不喜欢这种廉价的广告逻辑。」

   实测依据（1440与 390 两档，scrollY=0/500/1500/3000 四次探针）：
     · 手机页面总高 10626px，顶栏高 34px
     · 顶栏 scrollY=500 起即完全滚出视口
     · sticky 导航栏（position:sticky）全���程在视口内，但**其中无电话**
     · 首页 8 个 sec-head 区块，客户产生"要联系"念头时人在页面中下部

   结论：电话放顶栏**只对"还没决定要不要联系"的人有用**，
   恰好对真正想打电话的人无效。所以要移，不是要删。

   本段做三件事：
     ① 顶栏只留一句承诺文案，删掉电话与「加微信直接沟通」
        ——后者是全站推销味最重的一句，且没说加微信能得到什么
     ② 电话移入 sticky 导航栏（.nav-tel），从"仅首屏可见"变成"全程可见"
     ③ 顶栏配色再压低一档：字色 .72 → .60，弱化金线，营造克制感
   ------------------------------------------------------------------------ */

/* ---------- B1-8① 顶栏：只留一句，色彩压低 ---------- */
.topstrip { border-bottom-color: rgba(200,161,90,.18); }
.topstrip .wrap { justify-content: center; min-height: 30px; }
.ts-lead {
  color: rgba(255,255,255,.58);/* .72→.58：压到"能看清但不抢眼" */
  font-size: 12px; letter-spacing: .05em;
}
/* 「先聊十分钟」是承诺不是标签 —— 用一个更淡的金点做前缀，克制但有识别 */
.ts-lead::before {
  content: ""; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(200,161,90,.55);   /* 原 .ts-lead 用的是 .28 金线，此处点更淡 */
  margin: 0 9px 2px 0; vertical-align: middle;
}

/* ---------- B1-8② 电话进 sticky 导航栏 ---------- */
/* 样式取向：从纯文字 → 轻量小按钮（B1-11）→ 加大热区 + 强化按钮感（B1-12）

   老许反馈：「那个二维码的压力感应是整张卡片，电话号码的压力感应仅仅是那一串数字，
   我希望点这张电话号码的卡片就弹出响应，或者给这个电话号码做成一个按钮形状」

   实测（改前）：
     · 二维码热区 323×177（内容 180px）→ 热区是文字的 1.8 倍
     · 电话热区 147×39（内容 119px）→ 只有 1.24 倍
     · 按钮内部（含左右 padding）能触发，但**上下各 3px 点不到**

   B1-12 三个改动：
     ① 热区用 ::after 撑到上下各 10px（padding 只有 7px），
        垂直可点范围 39px → 59px，超过 44px 触屏标准
     ② 加浅金底 + 双层描边，让它在视觉上就是个"装东西的容器"，
        而不只是导航栏里的一段文字
     ③ 上下左右 padding 各加 2px，配合热区外扩，总视觉重量几乎不变
        ——变的是"感觉得到点得到"，不是"变得更重" */

.nav-tel {
  position: relative;                 /* ::after 热区外扩的定位基准 */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px !important;
  letter-spacing: .01em;
  color: var(--deep-800) !important;
  padding: 9px 15px !important;       /* 7px 13px → 9px 15px */
  border: 1px solid rgba(200,161,90,.42);   /* 描边转金，一眼看出是独立控件 */
  border-radius: 10px;
  background: rgba(250,245,236,.85);  /* 浅金底=--gold-soft，与全站卡片语言同源 */
  box-shadow: 0 1px 2px rgba(8,33,28,.05), 0 4px 12px -8px rgba(8,33,28,.16),
              inset 0 1px 0 rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums;
  margin-right: 12px;
  white-space: nowrap;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease), background .2s var(--ease);
}
/* 扩大热区：::after 不参与布局，向上下各外扩 10px，
   视觉上按钮没变，但手指/鼠标在边缘 3px 处也能命中。 */
.nav-tel::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: -10px; bottom: -10px;
}

.nav-tel .tl {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--gold-ink);            /* B1-2 压深过的那档，在浅金底上 5.02:1 */
  opacity: .78;
  transition: opacity .2s var(--ease);
}

.nav-tel:hover {
  color: var(--deep-900) !important;
  background: #fff;                  /* hover 时底色转纯白，"抬起"的手感 */
  border-color: rgba(200,161,90,.75);
  box-shadow: 0 2px 4px rgba(8,33,28,.06), 0 12px 26px -10px rgba(8,33,28,.28),
              inset 0 1px 0 #fff;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.nav-tel:hover .tl { opacity: 1; }

.nav-tel:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(8,33,28,.10);
  background: rgba(250,245,236,.95);
}
/* 触屏没有 hover，用 :active 让按压感更明确 */
@media (hover: none) {
  .nav-tel:active { transform: scale(.97); }
}

@media (max-width: 1180px) {
  /* 导航项开始变挤时电话先让位（联系页与首屏 CTA 仍在） */
  .nav-tel { display: none !important; }
}
@media (max-width: 640px) {
  /* 手机：顶栏只显示这一句，字号与高度都收到底 */
  .topstrip .wrap { min-height: 26px; }
  .ts-lead { font-size: 11.5px; letter-spacing: .04em; }
}

/* ---------- 4. 顶部药丸被拉满宽并折成两行（P1-1-C） ----------
   .eyebrow 是 border-radius:980px 的胶囊，窄屏被撑到满栏后折行，
   第二行只剩「单位」两字，左边还吊着一颗孤零零的金点。改成圆角矩形。 */
@media (max-width: 640px) {
  .eyebrow {
    display: flex; width: 100%; border-radius: 14px;
    align-items: flex-start; font-size: 12px; line-height: 1.55;
  }
  .eyebrow::before { margin-top: 6px; flex: 0 0 auto; }
}

/* ---------- 5. 移动端点击热区（P2-1） ----------
   实测 15 处可点元素高度 <32px（顶栏电话 15px、页脚链接 16px、菜单按钮 31px），
   手机上热区低于 32px 很难点中。加纵向内边距补足到 44px 左右。 */
@media (max-width: 640px) {
  .topstrip a { display: inline-block; padding: 6px 2px; }
  .navtoggle { min-height: 44px; }
  footer a { display: inline-block; padding: 6px 0; }
  .post-more, .prel a .no + span { display: inline-block; padding: 6px 0; }
}

/* ---------- 6. 服务页 hero 通栏靠裁切掩盖溢出（P2-2） ----------
   `.phero .visual{margin:0 -24px}` 会让元素实测宽出视口 24px，
   靠 .phero{overflow:hidden} 切掉两侧。以后任何贴边元素都会被切。
   改用 left/right 撑满，元素本身仍等于容器宽，不产生溢出。 */
@media (min-width: 641px) {
  .phero .visual {
    margin-left: 0; margin-right: 0;
    width: 100%;
  }
}

/* ===================================================================
   v8 · 视觉审查修复（2026-10-17 凌晨，外网视觉审查）
   =================================================================== */

/* ---------- 1. 「需要你提供什么」只有一段话时的正文排版 ----------
   原文把段落塞进 .sub（副标题位），标题下方 200px 全空，像"点了标题没反应"。
   改成正文段落 + 左侧金色引线，与章节标题拉开层级。 */
.pneed-para {
  max-width: 820px; margin: 0;
  padding: 16px 22px;
  border-left: 2px solid var(--gold);
  background: #fff; border-radius: 0 10px 10px 0;
  font-size: 16px; line-height: 1.85; color: var(--ink-2);
}
.psection.alt .pneed-para { background: #fff; }
@media (max-width: 640px) {
  .pneed-para { font-size: 15.5px; line-height: 1.8; padding: 14px 16px; }
}

/* ---------- 2. 卡片数不整除列数时，末行孤卡不再留大片空白 ----------
   交付物 5 项（2+2+1）、误区 3 项（2+1）、相关服务 2 项（3 列）——
   末行右侧固定空 400~800px，是全站最普遍的视觉松散来源（实测 8 个服务页全中）。
   做法：按实际项数切换列数，或让孤卡横跨整列填满整行。 */
@media (min-width: 1021px) {
  /* 奇数项且末行剩 1 张 → 孤卡横跨两列，填满整行 */
  .pdeliver > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pwrong > :last-child:nth-child(odd)   { grid-column: 1 / -1; }
  /* 相关服务只推 2 个 → 用 2 列，均分整宽 */
  .prel:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .prel:has(> :nth-child(1):last-child) { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1020px) {
  .pdeliver > :last-child:nth-child(odd),
  .pwrong > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 3. 平板档内容不该是单列（实测 768/834/900px 全部单列） ----------
   旧规则在 ≤1020px 把 .pdeliver/.pwrong/.prel 压成单列，且一直没拉回来。
   结果 iPad 上：容器 786–852px 宽，卡片却被拉成 129–157px 高的细长条，
   一屏只放得下 2 个，信息密度极低。平板应该用两列。 */
@media (min-width: 641px) and (max-width: 1020px) {
  .pdeliver, .pwrong { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .prel { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .prel:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  /* 卡片内边距收一档，避免平板上撑得太满 */
  .pdeliver .d { padding: 20px 20px 22px; }
  .pdeliver .d b { font-size: 17px; }
  .pdeliver .d span { font-size: 14.5px; }
  .pwrong .w { padding: 20px 20px 22px; }
}

/* ---------- 4. 首页/列表页：卡片数少时按实际项数收敛列数 ----------
   财税观察只有 1 篇、讲师经历只有 4 条、经验背书只有 2 张——
   固定 3 列会让右侧空 2/3，页面看起来"没做完"。按实际项数切列。 */
@media (min-width: 1021px) {
  /* 1 项 → 限宽居中，不要横在左半边 */
  .posts:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .posts:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
  /* 通用：4 张以下不要 3 列 */
  .grid:has(> :nth-child(2):last-child),
  .why:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; }
  .grid:has(> :nth-child(1):last-child),
  .why:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
}
@media (min-width: 641px) and (max-width: 1020px) {
  .posts:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
}

/* ---------- 5. 联系页：三卡高度被二维码撑齐，前两张卡下方大片空白 ----------
   实测桌面端三卡均高 194px，地址卡/电话卡内容只占约 90px，下方各空 100px。 */
@media (min-width: 641px) {
  .contact:has(.qrbox) { align-items: start; }
}
/* 二维码在手机上仅约 90px，扫描易失败 → 点击放大到独立层 */
.qrbox { position: relative; }
.qrbox a { display: block; cursor: zoom-in; }
/* ⚠️ B1-15（2026-10-17）删除了「点击放大」提示文字
   老许反馈：「二维码下面『点击放大』这几个字可以不要，在这里和描述的文字重叠了」。
   根因：它用 bottom:-20px 定位到qrbox 框外，正好落在下面
        「扫码添加，发材料与问题都在这里沟通」那句上，两行字叠在一起。
   替代方案：cursor:zoom-in 已向鼠标用户暗示可放大；
            触摸端则在下方说明句里已有「扫码添加…」指引，不再重复。 */
.qrlayer {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,26,22,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.qrlayer.on { display: flex; }
.qrlayer img {
  width: min(78vw, 340px); height: auto; border-radius: 12px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
/* ---------- B1-9 修放大层提示条与卡片文字重叠（2026-10-17）----------
   现象（老许反馈）：点开二维码后，「长按或截图保存后扫码 · 点任意处关闭」
   与卡片里那句「扫码添加，发材料与问题都在这里沟通」边缘重叠，两层字叠在一起。

   根因：.qrhint 是 position:absolute; bottom:40px，贴在遮罩最底部；
   而联系页三张卡里，企业微信卡恰好在**最下方**，
   原二维码（314×177）和那句 .sub（y=952）都在那个位置被透出来。

   两个修法都做：
     ① 提示条加自己的深色胶囊底衬 —— 即使底下透出文字也压得住
     ② 底衬不透明到 .90 —— 保留一点点"底层可见"的层次感，但不再撞字
     ③ 底部距离 40 → 32，紧贴安全区，避开原二维码区域
   -------------------------------------------------------------- */
.qrlayer .qrhint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 9px 18px;
  text-align: center; white-space: nowrap;
  background: rgba(6,26,22,.90);
  border: 1px solid rgba(200,161,90,.26);
  border-radius: 980px;
  color: rgba(255,255,255,.82); font-size: 12.5px; letter-spacing: .04em;
  line-height: 1.5;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 6. 平板档「相关服务」3 项应保持 3 列（实测 2+1 会留 401px） ---------- */
@media (min-width: 641px) and (max-width: 1020px) {
  .prel { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .prel a { padding: 16px 16px 18px; }
  .prel a b { font-size: 15.5px; }
  .prel a span { font-size: 13.5px; line-height: 1.7; }
  /* 只有 2 项时回到 2 列 */
  .prel:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   v9 · 公安备案标识图（2026-10-17）
   规范：图标在前、备案号在右，图标官方建议 16×17px。
   这里是 20×20（平台下载的原始尺寸），需与 13px 页脚文字视觉对齐。
   =================================================================== */
/* 整组不可拆：规范要求图标在左、备案号在右，窄屏也不能分到两行 */
.beian-row { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.gongan-icon {
  display: inline-block; flex: 0 0 auto;
  width: 15px; height: 15px;/* 20→15：官方建议 16×17，原尺寸在页脚里视觉过重 */
  /* ⚠️ B1-15（2026-10-17）：原来同时设了 vertical-align:-4px 和父级 align-items:center，
     两套垂直对齐机制打架。实测中心偏移为 0（都是8378），所以偏移不是问题，
     真正的问题是【视觉重量】——20px 饱和彩色徽章 vs 13px 灰色细字，整行像被徽章压住。
     修法：去掉 vertical-align（交给 align-items:center 统一管），
     缩小尺寸 + 降饱和，让它退回"标识"而不是"主角"。 */
  border-radius: 2px;
  opacity: .72;
  filter: saturate(.55);
}

/* 备案号本身也提亮一档，跟警徽的视觉重量拉平 */
.beian-row a { color: rgba(255,255,255,.66) !important; }
.beian-row a:hover { color: var(--gold-2) !important; }

/* 窄屏页脚行距 2.0 过大，实测每行占约 2.4 倍高度，页脚能拉到 4 屏 */
@media (max-width: 640px) {
  footer .fine { margin-top: 32px; padding-top: 18px; line-height: 1.9; }
  .gongan-icon { width: 13px; height: 13px; }
}

/* ===================================================================
   分享取图占位（2026-10-17）
   -------------------------------------------------------------------
   微信有两种取图路径，实测行为不同：
     · 「点链接 → 打开 → 转发」  → 抓【正文第一张图】
     · 「长按 → 搜一搜 → 分享」  → 读【og:image】
   所以要让两种发法显示同一张图，就必须同时控制这两个位置。

   这里在首页首个 section 插入方图当"正文第一张图"，视觉隐藏但留在 DOM 里，
   这样发法A 抓到的也是「税」字方图，而不是原先顶在前面的企微二维码。
   ⚠️ 用 position/clip 而不是 display:none —— 隐藏的元素是否被当"图片"抓取
      取决于微信实现，留在渲染树里更稳妥。 */
.share-lead {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  margin: -1px; padding: 0; border: 0; pointer-events: none;
}

/* ===================================================================
   v10 · 精修批次 B1（2026-10-17）
   依据：开发计划-精修-20261017.md
   原则：全部为增量规则，不修改上方任何既有声明。
        每条都有实测数据支撑，改动原因写进注释，防止以后被误删。

   包含：
   B1-1首屏次级按钮主次丢失
   B1-2 金色小字对比度不足（2.41:1 → 5.02:1）
   B1-3 中文孤字（标题 balance / 正文 pretty）
   B1-4 正文行高收紧 1.9 → 1.75
   B1-5 团队页删卡后末行孤卡
   =================================================================== */

/* ---------- B1-1 首屏次级按钮主次丢失 ----------
   现象：.hero 内两个 CTA 都是纯白药丸，用户不知道该点哪个。
   真因（不是评审说的那样）：.hero 是 <section class="hero">，
   所以 section .btn.ghost（:160，特异性 0-2-1）也命中首屏，
   且高于 .btn.ghost（0-2-0）和 .hero .btn（0-2-0），
   把 ghost 按钮改成 background:#fff。
   做法：用 .hero .btn.ghost（0-3-0）显式还原次级样式。 */
.hero .btn.ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.42);
  box-shadow: none;
}
.hero .btn.ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.60);
}

/* ---------- B1-2 金色小字对比度不足 ----------
   --gold #c8a15a 在白底 = 2.41:1，在 --gold-soft #faf5ec = 2.22:1。
   WCAG AA 要求小字 4.5:1 —— 差了近一倍，属于「看着高级、实际读不清」。
   做法：新增 --gold-ink（同色系压深）专供小字；
        亮金 --gold 保留给大面积装饰（h1 渐变文字、装饰线、hover 边框），
        那些场景对比度要求不同，不能一起改。 */
:root { --gold-ink: #8a6a2f; }

/* 白底上的小字类 */
.sec-head .kicker,
.card .num,
.card .cen,
.services-page .card .cen,
.post-date,
.pbound .kicker,
.promise .cell .k,
.ppanchor .k,
.contact .card b { color: var(--gold-ink); }

/* 浅金底上的小字（.tag 一类：gold 压 gold-soft 仅 2.22:1） */
.tag { color: var(--gold-ink); }

/* ⚠️ 以下刻意不改，仍用 var(--gold)：
   .hero h1 .hl（金色渐变大字，≥34px 属大字号，3:1 即可）
   .sec-head .kicker::after / .card::before / .divider span（纯装饰线）
   :focus-visible outline（2px 描边，非文本）
   section .btn.ghost:hover（hover 态，有深底衬托） */

/* ---------- B1-3 中文孤字 ----------
   现象：标题换行后上一行满、下行只剩 1–3 字，形成视觉空洞。
   根因：汉字无词边界，浏览器只能在标点处断，末行必然可能剩极少字。
   实测：全站 324 次测量（10 页 × 4 视口 × 81 标题）有 3 处，
        正文末行 ≤2 字的有 9 处。
   做法：balance 让各行长度拉平；pretty 只优化末行不动前文，
        因此左对齐观感完全不变。
   实测后：标题孤字 3 → 0，正文末行 ≤2 字 9 → 0，其余 321 处一行未动。
   兼容性：Chrome 114+ / Safari 17.4+；老浏览器安静忽略（不会坏）。 */
h1, h2, h3,
.card h2,
.btitle,
.verdict,
.pnum b { text-wrap: balance; }

p, .sub, .lead, .cdesc, .bdesc, .psum, .prose p { text-wrap: pretty; }

/* ---------- B1-4 正文行高 ----------
   现值 body 1.9 / .card p 1.82 / .sub 1.85 —— 偏松，
   中文正文 1.7–1.75 最舒服，1.9 会让句子「断开」像表格。
   .hero .lead 保留 1.85（首屏 17.5px 大字需要更松）。 */
body{ line-height: 1.75; }
.card p{ line-height: 1.75; }
.sub{ line-height: 1.75; }
.hero .lead{ line-height: 1.85; }  /* 首屏大字例外，保持原值 */

/* ---------- B1-5 团队页孤卡 ----------
   承诺区原为 .grid（4 列 × 6 项），删掉「不做绝对化表述」后剩 5 项。
   实测过程：
     按 4 列 → 4+1，孤卡横跨整行后变成 3+1+1（末两行各一张，非常松散）；
     按 3 列 → 3+2，第二行右侧固定空 402px。
   最终做法：3 列打底 + 末行两卡各拉伸一半（:has 判断项数，
   只在恰好 5 项时生效），让 5 张卡铺满 3×2 的完整矩形，无空位无孤卡。
   同理，页首 4 张数据卡按 3 列排会得到 3+1（右侧空 600px），
   一并按 2×2 铺满。 */
.promise-grid { grid-template-columns: repeat(3, 1fr); }
.promise-grid:has(> :nth-child(5):last-child) > :nth-child(4),
.promise-grid:has(> :nth-child(5):last-child) > :nth-child(5) {
  grid-column: span 1;
}
@media (min-width: 1021px) {
  /* 末两卡各占 1.5 列宽 = 整行的一半，两张正好铺满 */
  .promise-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .promise-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(4),
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: span 3; }
}
@media (max-width: 1020px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
/* ⚠️ 上面 1436 行那条 `grid-column: span 1` 在 @media 之外，
     会渗进本档把末卡压成单列宽。必须用「同形状选择器 + 写在后面」覆盖它，
     简单的 `> * { grid-column:auto }`（0,2,0）压不住（0,3,0）。勿简化。
     平板 3 列时 5 项 = 3 + 2，第 4/5 张各让半格正好铺满末行。 */
@media (min-width: 701px) and (max-width: 1020px) {
  .promise-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .promise-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(4),
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: span 3; }
}
@media (max-width: 700px)  { .promise-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(4),
  .promise-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: auto; }
}

/* 页首数据卡：4 项 → 2×2 铺满，无孤卡 */
@media (min-width: 701px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- B1-6 末行孤卡通用收口 ----------
   实测全站扫出 4 处孤卡（末行右侧固定空 402–804px），根因都是
   「项数不整除列数」。四种情况各有一种最优解，不能用同一条规则套：

   讲师页 4 门课 / 3 列 → 3+1        → 改 2 列（2+2）
   首页核心理念 3 项 / 2 列 → 2+1     → 改 3 列（单行铺满）
   首页服务 9 项 / 2 列 → 4+1         → 改 3 列（3+3+3，正好）
   团队承诺 5 项 / 2 列 → 2+1+1+1    → 改 3 列 + 末两卡拉伸

   做法：给每种情况单独声明列数，不用「孤卡横跨」——
   孤卡横跨会让末行出现一条超宽卡，比留白更难看。 */
.lectures-grid  { grid-template-columns: repeat(2, 1fr); }   /* 4 门课 → 2+2 */
.idea-grid      { grid-template-columns: repeat(3, 1fr); }   /* 3项 → 单行 */
.svc-grid       { grid-template-columns: repeat(3, 1fr); }   /* 9 项 → 3+3+3 */

@media (max-width: 1020px) {
  .lectures-grid { grid-template-columns: repeat(2, 1fr); }
  .idea-grid, .svc-grid { grid-template-columns: repeat(2, 1fr); }
  /* 平板 2 列时项数不整除，末卡横跨整行填满。
     ⚠️ promise-grid 的本档处理在 1451–1462 行（那里用同形状 :has 选择器
        覆盖 media 外的 span 规则），此处不要重复声明，否则会打架。 */
  .idea-grid > :nth-last-child(1),
  .svc-grid  > :nth-last-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .lectures-grid, .idea-grid, .svc-grid, .promise-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   B1-10 · 电话点击 → 拨号确认弹层（2026-10-17）

   老许要求：「电话号码能不能点击后弹出拨打电话的直拨确认按钮，
   减少去记电话号码的麻烦。如果可以，其他区域也做成这种效果。」

   为什么需要（tel: 本身的三个真实问题）：
     ① 微信/企业微信内置浏览器会拦截 tel:，点了没反应
     ② 部分浏览器直接跳系统拨号盘、不给取消余地，怕拨错的客户不敢点
     ③ 号码在页面里是纯文本时，用户只能手抄

   设计取向：不是弹一个"确认吗"的疑问句，而是把号码和「拨打」
   并排摆出来——看得清、错得起。视觉上跟二维码放大层同源，
   保证两处交互的观感一致（同一个 modal 家族）。
   全站 6 处 tel:（导航栏/页脚/联系页/首页/分享页两处）自动生效，
   不支持 JS 时降级为原生 tel: 跳转（a 标签本身已带 href）。
   =================================================================== */
.dialbox {
  position: fixed; inset: 0; z-index: 70;      /* 高于 qrlayer 的 60 */
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6,26,22,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dialbox.on { display: flex; }

.dialbox .db-card {
  position: relative; width: min(340px, 100%);
  background: #fff; border-radius: 20px;
  padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 34px 80px -28px rgba(0,0,0,.6);
  animation: dbpop .24s var(--ease);
}
@keyframes dbpop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dialbox .db-card { animation: none; }
}

/* 顶部金色细线：与卡片 .card::before 同源，保持家族一致 */
.dialbox .db-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), transparent);
}

.dialbox .db-t {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--gold-ink);   /* B1-2 压深过的那档 */
}
.dialbox .db-num {
  margin: 0 0 8px; font-size: 27px; font-weight: 600;
  color: var(--ink); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;              /* 数字等宽，好核对 */
  word-break: break-all;
}
.dialbox .db-tip {
  margin: 0 0 22px; font-size: 13px; line-height: 1.7;
  color: var(--muted);
}

.dialbox .db-btns { display: flex; flex-direction: column; gap: 10px; }
.dialbox .db-call {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; border-radius: 14px;
  font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--deep-800) 0%, var(--deep-700) 100%);
  box-shadow: 0 12px 26px -14px rgba(8,33,28,.9);
  transition: transform .16s var(--ease), filter .16s var(--ease);
  text-decoration: none;
}
.dialbox .db-call:hover { filter: brightness(1.08); text-decoration: none; }
.dialbox .db-call:active { transform: scale(.985); }

.dialbox .db-cancel {
  min-height: 44px; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  transition: background .16s var(--ease), border-color .16s var(--ease);
  font-family: inherit;
}
.dialbox .db-cancel:hover { background: var(--bg-2); border-color: var(--line); }

/* 窄屏微调 */
@media (max-width: 400px) {
  .dialbox .db-card { padding: 24px 20px 20px; border-radius: 18px; }
  .dialbox .db-num { font-size: 24px; }
}

/* 打印时去掉 */
@media print {
  .dialbox, .qrlayer { display: none !important; }
}

/* ===================================================================
   B2-1 · 正文限宽（2026-10-17）

   实测全站 9 页 54 个 ≥40 字的段落：
     ≤40 字（舒适）  13
     41-50 字20
     51-60 字        9
     >60 字（过长）12← 要治的
     最长 134 字（faq.html 的公司简介段）

   中文正文舒适区是 28–40 字/行，超过 50 字眼睛就要往回走。
   容器 .wrap = 1180−56 = 1124px，15px 正文 → 74 字/行，太宽了。

   ⚠️ 不动 .psection .prose-in：它已有 max-width:780px（约 47 字），
      服务页正文本来就合格，动它反而破坏原有排版。
   ⚠️ 不动卡片内段落（.card p）：卡片本身只有 300px 宽，天然不超。

   只给「宽容器里的正文」加限宽：
     · 首页 FAQ 的 details p
     · 首页各区块的 .sub（在 .sec-head 里，容器 800px 已合格）
     · 通用兜底：section > .wrap > p

   40em 的取法：16px 正文 × 40 = 640px。
   p默认 15–16.5px，40em 会落在 600–660px，约 38–42 字/行。
   =================================================================== */

/* 首页 FAQ 展开后的正文——实测最长134 字，必须限 */
.faq details p {
  max-width: 40em;
}
/* 服务区块副标题：容器 .sec-head 已限 800px（约 50 字），再收一档到舒适区 */
.sec-head .sub { max-width: 38em; }
/* 服务页首屏那句 verdict：实测 65 字 */
.phero .verdict { max-width: 40em; }
/* 通用兜底：任何还挂在满宽容器（.wrap 1124px）下的独立段落。
   ⚠️ 选择器要点：FAQ 页的段落结构是 `section > .wrap > details > p`，
      不是 `section > .wrap > p` —— 之前写的那版一条都没命中。
      实测 FAQ 页 10 个段落全部是 1182px 就是这个原因。
   用「祖先里有 .wrap」来兜，比逐个猜层级稳。 */
main .wrap > p,
main .wrap details > p,
main section > .wrap > p,
.psection > .wrap > p { max-width: 40em; }

/* 窄屏不加限制——本来就窄，限了也没意义，且会引入不必要的换行 */
@media (max-width: 700px) {
  .faq details p,
  .sec-head .sub,
  .phero .verdict,
  main .wrap > p,
  main .wrap details > p,
  main section > .wrap > p,
  .psection > .wrap > p { max-width: none; }
}

/* ===================================================================
   B2-2 · 禁止浏览器合成伪粗体（2026-10-17）

   问题：Microsoft YaHei（微软雅黑）**没有真正的 Semibold 字重**，
   站点用了 33 处font-weight:600，浏览器在 Windows 上会
   「合成粗体」——把笔画机械加粗，中文笔画密集处容易粘连、发糊。
   加上font-synthesis:none 后，浏览器不再伪造字重。

   ⚠️ 为什么【不】同时把标题改成 700（DSH 原方案的第二半）：
     PingFang SC（苹方）**同样没有 700**，最高只到 Semibold 600。
     若把 h1/h2/h3 改成 700，Windows 能拿到真 Bold（好事），
     但 **Mac 上会从"合成 600"变成"合成 700"，标题明显变重**——
     老许自己第一眼就会看到变化。
     只加 font-synthesis:none：Windows 收益保留，**Mac 完全不变**。
     这是老许要的效果，代价为零。

   ⚠️ 副作用（已知、可接受）：Windows 上 600 会回落到 400（雅黑没有 600 档），
     标题会比现在细一档。但「不糊」比「稍细」重要 ——
     粘连的笔画在中文小字号下是实打实的可读性损失。
     ⚠️ 此效果无法在本机验证（Mac 无雅黑），需要老许在 Windows 上看一眼。
   =================================================================== */
body {
  font-synthesis: none;
  -webkit-font-synthesis: none;   /* Safari 前缀 */
}

/* 说明性注释：若老许在 Windows 上确认标题偏细想要补偿，
   可在此处按需把标题改为 700（Windows 得真 Bold，Mac 会变重），
   或者只给 .hero h1 / h2 单独加 font-weight:700。 */