/* =============================================================================
   诚立会计南京分公司 · 站点主题样式
   颜色与字体令牌集中在 :root，改两处即可全站换肤
   ========================================================================== */

/* 1. 设计令牌 ---------------------------------------------------------------- */
:root {
  /* 主色板取自集团总部站 www.chengli.bj.cn —— 深蓝 + 金色 + 青绿 三色体系。
     深蓝：结构色（页头 / 深色区块 / 标题）；金色：荣誉感点缀；青绿：行动色（主按钮 / 链接 / 小标签）。 */
  --navy: #1a3a6b;
  --navy-700: #16325b;
  --navy-800: #122a4d;
  --navy-900: #0f2444;

  --gold: #c9a86a;
  --gold-400: #e0c48b;          /* 与总部站 --gold-light 一致 */
  --gold-600: #b8935a;          /* 与总部站 --gold-600 一致 */
  --gold-700: #a8831a;
  --gold-ink: #86662a;          /* 浅底上的金色文字，保证 ≥4.5:1 */

  --accent: #18a47c;            /* 品牌青绿（描边 / 图形 / 深底文字） */
  --accent-dark: #0e7d5e;       /* 浅底上的青绿文字：对白 5.1:1，对 --bg-soft 4.8:1 */
  --accent-400: #5fe0b0;        /* 深底上的亮青绿（勾选 / 图标） */
  --accent-soft: #ecf8f2;
  --accent-ink: #14513e;
  /* 主按钮渐变。总部站原值为 #18a47c→#0e7d5e，白字对比度仅 3.2:1 不达 AA；
     这里把最亮端下压到 #15835f（白字 4.7:1），色相不变，观感仍是同一支青绿。 */
  --accent-grad: linear-gradient(135deg, #15835f 0%, #0e7d5e 58%, #0b5c45 100%);
  --edge-grad: linear-gradient(90deg, var(--navy), var(--accent));

  --bg: #ffffff;
  --bg-soft: #f6fafd;           /* 与总部站 --bg 一致 */
  --bg-hover: #eef6fb;          /* 与总部站导航 hover 底色一致 */
  --ink: #1b2a38;               /* 与总部站 --text 一致 */
  --ink-soft: #5d7080;
  --ink-dim: #6b7d8d;
  --line: #e6eef4;              /* 与总部站 --border 一致 */
  --line-strong: #cfe2ef;
  --text-light: #ffffff;
  --text-light-soft: rgba(255, 255, 255, .78);
  --text-light-dim: rgba(255, 255, 255, .62);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 6px -1px rgba(16, 31, 51, .06);
  --shadow: 0 2px 4px -1px rgba(16, 31, 51, .07), 0 20px 40px -24px rgba(18, 40, 68, .42);
  --shadow-lg: 0 4px 8px -2px rgba(16, 31, 51, .08), 0 32px 60px -28px rgba(18, 40, 68, .5);

  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
  --font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sec-pad: clamp(64px, 7.2vw, 100px);
  --wrap: 1240px;
  --header-h: 76px;
}

/* 2. 基础 ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--navy);
  margin: 0;
  line-height: 1.34;
  letter-spacing: -.01em;
  font-weight: 700;
}

h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; }
h2 { font-size: clamp(23px, 2.5vw, 34px); font-weight: 900; }
h3 { font-size: 18.5px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

p, li { text-wrap: balance; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.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;
}
.tnum { font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }

/* 3. 顶栏 ------------------------------------------------------------------- */
.topbar { background: var(--navy-900); color: var(--text-light-dim); font-size: 13px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar-txt { letter-spacing: .02em; }
.topbar-tel { color: var(--text-light-soft); }
.topbar-tel a { color: var(--gold-400); font-weight: 700; font-variant-numeric: tabular-nums; }
.topbar-tel a:hover { color: #fff; }

/* 4. 页头与导航 ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: 0 8px 24px -18px rgba(18, 40, 68, .5); }

.header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo-mark {
  width: 44px; height: 44px; flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(15, 36, 68, .18));
}
.logo-text { display: flex; flex-direction: column; gap: 5px; }
.logo-text strong {
  font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  color: var(--navy); letter-spacing: 2px; line-height: 1;
}
.logo-text small {
  font-size: 9.5px; font-weight: 700; color: var(--gold-ink);
  letter-spacing: 1.9px; line-height: 1;
}
.logo.is-light .logo-text strong { color: #fff; }
.logo.is-light .logo-text small { color: var(--gold-400); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-nav ul { display: flex; align-items: center; gap: 2px; }
.site-nav ul a {
  display: block; padding: 9px 11px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background .2s, color .2s;
}
.site-nav ul a:hover { background: var(--bg-hover); color: var(--navy); }
.site-nav ul a.is-active { color: var(--navy); font-weight: 700; background: var(--bg-hover); }
.nav-tel { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* 5. 按钮 ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { min-height: 50px; padding: 14px 28px; font-size: 16px; }
.btn-gold { background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%); color: var(--navy-900); box-shadow: 0 12px 26px -14px rgba(184, 147, 90, .95); }
.btn-gold:hover { color: var(--navy-900); box-shadow: 0 16px 32px -14px rgba(184, 147, 90, 1); }
/* 行动按钮：与总部站 .btn-primary / 页头 CTA 同色系（青绿渐变 + 白字） */
.btn-accent { background: var(--accent-grad); color: #fff; box-shadow: 0 12px 26px -14px rgba(14, 125, 94, .95); }
.btn-accent:hover { color: #fff; box-shadow: 0 16px 32px -14px rgba(14, 125, 94, 1); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #fff; color: var(--navy); }
.btn-block { width: 100%; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 700; color: var(--accent-dark);
}
.link-more:hover { color: var(--navy); }

/* 6. 区块外壳 --------------------------------------------------------------- */
.section { padding: var(--sec-pad) 0; }
.section-soft {
  padding: var(--sec-pad) 0;
  /* 大片浅色区读起来容易「平」，在斜对角补两团极淡的品牌色光晕
     （右上青绿、左下金），不改整体明度，只制造一点空气感与方向感。 */
  background:
    radial-gradient(760px 400px at 100% 0%, rgba(24, 164, 124, .07), transparent 68%),
    radial-gradient(700px 380px at 0% 100%, rgba(201, 168, 106, .10), transparent 68%),
    var(--bg-soft);
  border-top: 1px solid var(--line);
}
/* 深色区块：最底层压一张南京城市照片（约一成透出，只留隐隐的城市轮廓），
   上面两层品牌色光斑 + 一层半透明深蓝把整体拉回品牌底色。
   遮罩取 .90/.94 是权衡过的：再淡就看不出照片，再浓白字对比度会掉。 */
.section-navy {
  padding: var(--sec-pad) 0;
  background:
    radial-gradient(120% 108% at 50% -10%, rgba(24, 164, 124, .34), transparent 62%),
    radial-gradient(90% 100% at 100% 100%, rgba(201, 168, 106, .16), transparent 56%),
    linear-gradient(160deg, rgba(26, 58, 107, .90) 0%, rgba(15, 36, 68, .94) 100%),
    url("../img/nanjing-business.jpg") center 42% / cover no-repeat;
  color: var(--text-light-soft);
}
.section-tight { padding: clamp(48px, 5vw, 68px) 0; }

.section-head { max-width: 760px; }
.section-head-center { max-width: 780px; margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px;
}
.section-title { margin-top: 0; }
/* 分隔短线：金 → 青绿渐变，同总部站 .title-bar */
.gold-rule { width: 52px; height: 3px; margin: 16px 0 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 0, var(--gold) 22px, var(--accent) 22px, rgba(24, 164, 124, .25) 46px, transparent 100%); }
.gold-rule-center { margin-inline: auto; }
.section-sub { margin-top: 16px; font-size: 15.6px; line-height: 1.76; color: var(--ink-soft); }

.section-navy .section-title, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .eyebrow { color: var(--gold-400); }
.section-navy .section-sub { color: var(--text-light-soft); }

.grid { display: grid; gap: 22px; grid-auto-rows: 1fr; }
/* 卡片网格统一跨行等高：两行以上的网格里，各行高度原本由本行最长的一张决定，
   行与行之间会参差不齐（说明文字一行 vs 两行就差出整行）。统一到 1fr 后
   整个网格的卡片同高，右侧列边线才会是一条直线。 */
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 7. 卡片 ------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.card h3 { font-size: 18px; }
.card p { margin-top: 10px; font-size: 14.6px; line-height: 1.74; color: var(--ink-soft); }
.card-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.icon-box {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(24, 164, 124, .16), rgba(24, 164, 124, .05));
  color: var(--accent-dark); margin-bottom: 16px;
}
.icon-box svg { width: 22px; height: 22px; }

/* 业务入口大卡（首页 4 张） */
.entry-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 24px; overflow: hidden;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.entry-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
}
.entry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.entry-card h3 { font-size: 19px; }
.entry-card > p { margin-top: 12px; font-size: 14.6px; line-height: 1.76; color: var(--ink-soft); flex: 1; }
.entry-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--gold-ink);
}
.entry-card .card-foot { margin-top: 20px; padding-top: 16px; }

/* 服务承诺 / 小价值点 */
.promise { display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; }
.promise .tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(24, 164, 124, .13); color: var(--accent-dark); display: grid; place-items: center; }
.promise .tick svg { width: 14px; height: 14px; }
.promise strong { display: block; font-size: 15.5px; color: var(--navy); font-family: var(--font-sans); }
.promise span { display: block; margin-top: 4px; font-size: 13.6px; color: var(--ink-soft); line-height: 1.68; }

/* 数据条 */
.stat-strip { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-900) 58%, #114f63 100%); color: #fff; }
.stat-strip .grid { gap: 0; }
.stat-item { padding: 26px 18px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .14); }
.stat-item:first-child { border-left: 0; }
.stat-num { font-family: var(--font-serif); font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: var(--gold-400); line-height: 1.1; }
.stat-label { margin-top: 8px; font-size: 13.6px; color: var(--text-light-soft); }
.stat-note { margin-top: 14px; font-size: 12.4px; color: var(--text-light-dim); text-align: center; }
.stat-unit { font-family: var(--font-sans); font-size: .5em; font-weight: 400; color: var(--text-light-soft); }

/* 8. 首页 Hero -------------------------------------------------------------- */
/* 首屏底色：总部站实测为「深蓝 → 墨青绿」的收敛渐变（#05324e → #0d6663），
   再叠一层右上青绿光晕与左下金光，与总部站 .hero-overlay 同构。 */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #06304e 0%, #083f5e 40%, #0b5a68 72%, #0d6a63 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(24, 164, 124, .30), transparent 56%),
    radial-gradient(110% 90% at 6% 100%, rgba(201, 168, 106, .22), transparent 54%);
}
.hero-inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.12fr .88fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; padding: clamp(56px, 7vw, 92px) 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(201, 168, 106, .14); border: 1px solid rgba(201, 168, 106, .36);
  font-size: 13px; font-weight: 600; color: var(--gold-400);
}
.hero h1 { color: #fff; font-size: clamp(29px, 3.9vw, 48px); line-height: 1.28; }
.hero h1 .hl { color: var(--gold-400); }
.hero-sub { margin-top: 20px; font-size: 16.4px; line-height: 1.8; color: var(--text-light-soft); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* 首屏配图（南京城市商务图）。三层结构做纵深：
   底 = 错位金线外框；中 = 照片 + 品牌双色叠加；上 = 浮层小标签与说明卡。 */
.hero-figure { position: relative; margin: 0; }
/* 错位外框：向下、向左各偏移出一截，形成「两层胶片叠放」的层次错觉。
   左偏移量 18px 小于栏间距（≥28px），不会与左侧文案打架。 */
.hero-figure::before {
  content: ""; position: absolute; z-index: 0;
  inset: 26px 26px -18px -18px;
  border: 1px solid rgba(201, 168, 106, .42); border-radius: 22px;
  background: linear-gradient(150deg, rgba(201, 168, 106, .12), transparent 62%);
}
.hero-figure-media {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 20px; aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .10);
}
/* picture 是 inline 元素，不显式声明会高度塌缩：
   img 的 height:100% 会去参照一个由 img 自己撑开的父级，形成循环。 */
.hero-figure-media picture { display: block; width: 100%; height: 100%; }
.hero-figure-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
}
/* 双色叠加①：深蓝→墨青绿 multiply。压暗并统一到品牌色，
   但乘算会保留比底色亮的像素，窗灯暖光不会被抹平。 */
.hero-figure-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(158deg, #062f4e 0%, #0a5c58 100%);
  mix-blend-mode: multiply; opacity: .34;
}
/* 双色叠加②：右上青绿光斑（与首屏底色呼应）+ 底部压暗幕（说明卡压在幕上更清晰） */
.hero-figure-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(62% 50% at 88% 4%, rgba(24, 164, 124, .30), transparent 70%),
    linear-gradient(0deg, rgba(3, 26, 44, .62) 0%, rgba(3, 26, 44, .18) 26%, transparent 46%);
}
.hero-figure-chip {
  position: absolute; z-index: 4; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(4, 24, 40, .5); border: 1px solid rgba(201, 168, 106, .46);
  color: var(--gold-400); font-size: 12.4px; font-weight: 700; letter-spacing: .08em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-figure-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(24, 164, 124, .22);
}
/* 说明卡：用负外边距压住照片下沿，浮在前景层 */
.hero-figure-cap {
  position: relative; z-index: 5; margin: -58px 22px 0;
  padding: 20px 22px; border-radius: 16px;
  background: rgba(255, 255, 255, .97); border-left: 3px solid var(--gold);
  box-shadow: 0 26px 46px -26px rgba(2, 16, 30, .8);
}
.hero-figure-cap .cap-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-dark);
}
.hero-figure-cap strong {
  display: block; margin-top: 8px; font-family: var(--font-sans);
  font-size: 16.4px; font-weight: 800; line-height: 1.5; color: var(--navy);
}
/* 说明卡里的第三行只剩一个「通。」会显得很突兀。这一段被外层全局规则
   （p, li → text-wrap: balance）漏掉了，单独补 pretty：只负责把末行的
   孤字拉回上一行，不会像 balance 那样压缩每一行的宽度——窄卡片里
   balance 反而会让三行宽度都被迫收窄。 */
.hero-figure-cap .cap-note {
  display: block; margin-top: 8px; font-size: 13.4px; line-height: 1.7;
  color: var(--ink-soft); text-wrap: pretty;
}

/* 9. 内页 Banner ------------------------------------------------------------ */
/* 与总部站 .page-hero 一致：纯深蓝底 + 右上金斑 + 左下青绿斑，不加整体青绿渐变。
   本站内页不放首屏配图，横幅的层次全部由底色、材质与文字排版给：
   ① 两层品牌色光斑（右上金、左下青绿）—— 让深蓝底有冷暖起伏、不死板；
   ② 右侧一片渐显的点阵 —— 补上配图撤走后空出来的那半边（详见下方 ::before）；
   ③ 标题下一道金色短线 —— 把「眉标 / 标题 / 导语」的三级落差钉住，
      否则一排文字悬在深蓝上，读起来没有重心；
   ④ 底边一道左实右虚的金色收口线 —— 与下一区块利落分开。 */
.page-banner {
  position: relative; overflow: hidden;
  background:
    radial-gradient(300px 300px at calc(100% + 40px) -40px, rgba(201, 168, 106, .20), transparent 70%),
    radial-gradient(260px 260px at -60px calc(100% + 60px), rgba(24, 164, 124, .22), transparent 70%),
    linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 100%);
  padding: clamp(46px, 5.8vw, 76px) 0 clamp(42px, 5.2vw, 66px);
}
/* 点阵纹理：配图撤掉后横幅右侧原本是一大片纯深蓝，第一眼像「图片没加载出来」。
   填一片 15px 间距的点阵，并用 mask 从左往右渐显——左侧文字区完全不受干扰，
   右侧得到一层若隐若现的材质，横幅才像是「设计成这样」而不是「图挂了」。 */
.page-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px);
  background-size: 15px 15px; background-position: 9px 11px;
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, rgba(0, 0, 0, .42) 64%, rgba(0, 0, 0, 1) 100%);
          mask-image: linear-gradient(100deg, transparent 42%, rgba(0, 0, 0, .42) 64%, rgba(0, 0, 0, 1) 100%);
}
/* 底边收口金线：左实右虚，与数据底座顶部那条是同一套语言。 */
.page-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(201, 168, 106, .52) 0, rgba(201, 168, 106, .26) 34%, rgba(201, 168, 106, .06) 68%, transparent 100%);
}
/* 斜纹与收口线用绝对定位铺满，内容必须抬到它们之上。 */
.page-banner .wrap { position: relative; z-index: 1; }
/* text-wrap: balance 让长标题折行时两行宽度接近，避免末行只剩一两个字的孤行。
   不支持该属性的浏览器回退为普通折行，不影响可读性。
   word-break: keep-all 关掉「任意汉字之间都能断行」的默认行为，让中文优先在空格与
   标点处折行——否则「一站式工商注册服务」会被折成「……一 / 站式工商注册服务」。
   overflow-wrap: break-word 是兜底：万一标题长到没有任何可断点，仍允许强制断行，不会溢出。 */
.page-banner h1 { color: #fff; text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; }
/* 标题下的金色短线：横幅里唯一的实体图形元素，把标题从大片深蓝里「钉」住。
   46px 与 .gold-rule 的短边同宽，右端渐隐，收口干净。 */
.page-banner h1::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: 18px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-400) 56%, rgba(201, 168, 106, 0) 100%);
}
/* 横幅内容块：单栏纯文字。内页不再放首屏配图，文字块过窄会让横幅右侧空一大片，
   因此导语限宽放到 820px，与面包屑、标题、金色短线对齐成一整块。 */
.banner-inner { display: block; }
.page-banner .banner-sub {
  margin-top: 18px; max-width: 820px; font-size: 15.6px; line-height: 1.82; color: var(--text-light-soft);
}
/* 横幅内的按钮行（register / accounting / equity / tax / services 五页有）。
   按钮的上边距交给 .mt-md 工具类，这里不设——工具类权重低于组件选择器，
   一旦在这里写死 margin-top，.mt-md 就会被静默失效（本项目约定工具类优先）。 */
.breadcrumb { margin-bottom: 16px; font-size: 13px; color: var(--text-light-dim); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--text-light-dim); }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .3); }

/* 10. 服务流程 -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px 22px;
}
.step-num {
  font-family: var(--font-serif); font-size: 15px; font-weight: 900; color: #fff;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--accent)); margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; font-family: var(--font-sans); }
.step p { margin-top: 8px; font-size: 13.8px; color: var(--ink-soft); line-height: 1.7; }
.step-time {
  display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12.4px; font-weight: 700;
}
/* 5 张卡的步进网格：3 列排下来必然在第二行缺一格（右下角留空）。
   改用 6 列轨道，每张卡跨 2 列；第 4、5 张分别落在 2/4 与 4/6，
   合起来正好从 1/6 铺到 5/6 —— 第二行两张水平居中，收口才齐。 */
.steps-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps-5 > * { grid-column: span 2; }
.steps-5 > :nth-child(4) { grid-column: 2 / 4; }
.steps-5 > :nth-child(5) { grid-column: 4 / 6; }

/* 11. 清单 / 要点列表 ------------------------------------------------------- */
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.72; color: var(--ink); }
.check-list li svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 5px; color: var(--accent); }
.check-list-soft li { color: var(--ink-soft); font-size: 14.6px; }
.section-navy .check-list li { color: var(--text-light-soft); }
.section-navy .check-list li svg { color: var(--accent-400); }

/* 卡片式勾选清单：把「一条一行」的点状清单改成一块块浅底卡片。
   用在「左清单 + 右卡片组」的两栏区（工商注册页的材料清单 / 服务优势）——
   一侧是轻点列、一侧是重卡片时，两栏的视觉重量差得很远，栏底也会差出半个屏。
   换成同一套卡片语言后两侧读起来是对偶的，底部也基本齐平。
   与 .check-list 选择器同权重，靠「后定义」生效，必须排在其后。 */
.check-cards li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; font-size: 14.8px; line-height: 1.7; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.check-cards li svg {
  /* content-box + 15px 内容 + 5.5px 内衬 = 26px 圆形图标，
     与右栏 .promise 的 .tick（26px 圆形浅底）同尺寸，
     两栏的卡片语言才对得上。全局是 border-box，这里必须显式改回来。 */
  box-sizing: content-box; width: 15px; height: 15px;
  padding: 5.5px; margin-top: 0; border-radius: 50%;
  background: rgba(24, 164, 124, .13); color: var(--accent-dark);
}

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 52px); }
.split-3 { grid-template-columns: 1.15fr .85fr; }
/* 「左文案块 + 右卡片组」的两栏区：两侧内容高度天然不等，顶部对齐时
   左栏（文字少）下方会空出一大片。这类区块改用垂直居中，上下留白均分，
   视觉重心回到中轴。左右两栏都带同层小标题（如关于我们页的
   「发展历程时间线 / 服务理念」）时不要用 —— 居中会把两个标题错开。 */
.split-center { align-items: center; }
/* 正文收尾注：左侧一条金→青绿细线，与 .gold-rule 同色系，用于段落末尾的补充说明 */
.prose-note {
  position: relative; margin-top: 20px; padding-left: 16px;
  font-size: 14.4px; line-height: 1.75; color: var(--ink-dim);
}
.prose-note::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
}
/* 铺满整个版心的收尾说明：1192px 一行能排到 76 个汉字，远超中文舒适阅读区间
   （通常 30-45 字/行），读起来眼睛容易串行。限宽到 900px（约 57 字/行），
   多出来的右侧留白交还给版面，收尾注也不再「横贯全宽」显得突兀。
   只命中区块下的直接子元素，栏内（.split / .panel / 卡片）的注不受影响。 */
.section > .wrap > .prose-note,
.section-soft > .wrap > .prose-note,
.section-tight > .wrap > .prose-note,
.section > .wrap > .price-note,
.section-soft > .wrap > .price-note,
.section-tight > .wrap > .price-note { max-width: 900px; }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.panel-soft { background: var(--bg-soft); border-color: var(--line-strong); }
.panel-title { font-size: 17px; font-family: var(--font-sans); font-weight: 700; color: var(--navy); }
.panel-title + p { margin-top: 10px; }

/* 12. 价格表 ---------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px;
  display: flex; flex-direction: column;
}
.price-card .tag { font-size: 13.4px; font-weight: 700; color: var(--ink-soft); }
.price-num { margin-top: 12px; font-family: var(--font-serif); font-size: 34px; font-weight: 900; color: var(--accent-dark); line-height: 1.1; }
.price-num small { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.price-card .check-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-note { margin-top: 24px; font-size: 13.4px; color: var(--ink-dim); line-height: 1.7; }

/* 13. 时间线 ---------------------------------------------------------------- */
.timeline { display: grid; gap: 0; border-left: 2px solid var(--line-strong); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 26px 28px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--gold);
}
.timeline strong { display: block; font-family: var(--font-serif); font-size: 16.5px; color: var(--navy); }
.timeline span { display: block; margin-top: 6px; font-size: 14.4px; color: var(--ink-soft); line-height: 1.7; }

/* 14. 业务板块网格 ---------------------------------------------------------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sector {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px;
}
.sector-num {
  font-family: var(--font-serif); font-size: 13px; font-weight: 900; color: var(--gold-ink); letter-spacing: .08em;
}
.sector h3 { margin-top: 8px; font-size: 17px; font-family: var(--font-sans); }
.sector p { margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.72; }

.sector-dark {
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .16);
}
.sector-dark h3 { color: #fff; }
.sector-dark p { color: var(--text-light-soft); }
.sector-dark .sector-num { color: var(--gold-400); }

/* 14b. 集团协同服务页（services.html）专用组件 --------------------------------
   该页原先四处都是同一套「左栏短文案 + 右栏长清单」的 split 结构：三段的左右
   高度差分别达到 ~380 / 0 / ~180px，左栏大片留白；且全页五段清一色纯文字列表，
   没有任何视觉容器，纵向也没有底色节奏。这里按段落改成形态各异的卡片组 ——
   服务卡网格（3×2）→ 双大卡 → 编号长条卡（2×3）→ 深色玻璃卡（2×2），
   底色按「白 → 浅灰 → 白 → 深蓝」交替，读起来才有层次。
   注：本节的类名全部独立，刻意不复用 .sector / .sector-num / .promise ——
   那几个类被首页、关于我们、股权架构三页共用，改动会波及它们。 */

/* 服务卡网格（审计服务的 6 项业务）：3 列 × 2 行。
   grid-auto-rows: 1fr 让两行卡片等高 —— 否则标题／说明行数不同的两行会差十几像素。 */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
/* 顶部渐变细线，hover 时点亮 */
.svc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--accent) 52%, rgba(24, 164, 124, 0) 100%);
  opacity: 0; transition: opacity .28s;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.svc-card:hover::before { opacity: 1; }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-top .icon-box { margin-bottom: 0; }
.svc-no {
  font-family: var(--font-serif); font-size: 14px; font-weight: 900;
  letter-spacing: .1em; color: var(--gold-ink);
}
.svc-card h3 { margin-top: 18px; font-family: var(--font-sans); font-size: 17.5px; }
.svc-card > p { flex: 1; margin-top: 10px; font-size: 14px; line-height: 1.72; color: var(--ink-soft); }
.svc-tag {
  align-self: flex-start; margin-top: 16px; padding: 4px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12.2px; font-weight: 700;
}

/* 双大卡（资产评估 / 知识产权）：等高并列，两栏条目数相同以便序号对齐 */
.duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.duo-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 2.6vw, 34px); box-shadow: var(--shadow-sm);
}
.duo-head { display: flex; align-items: center; gap: 16px; }
.duo-head .icon-box { flex-shrink: 0; margin-bottom: 0; }
.duo-head .eyebrow { margin-bottom: 3px; }
.duo-card .section-title { font-size: clamp(21px, 2.1vw, 25px); }
.duo-card .section-sub { margin-top: 16px; }
.num-list {
  display: grid; gap: 0; flex: 1; align-content: start;
  margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line);
}
.num-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
  font-size: 14.8px; line-height: 1.7; color: var(--ink);
}
.num-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.num-list .nl-no {
  flex-shrink: 0; font-family: var(--font-serif); font-size: 13px; font-weight: 900;
  letter-spacing: .08em; color: var(--gold-ink);
}

/* 资质办理：2 列长条卡，左侧大号金色编号 */
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lic-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 20px; align-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px;
  transition: transform .26s, box-shadow .26s, border-color .26s;
}
.lic-item::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .3s;
}
.lic-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.lic-item:hover::after { transform: scaleY(1); }
.lic-no {
  font-family: var(--font-serif); font-size: 32px; font-weight: 900; line-height: 1;
  color: var(--gold-ink);
}
.lic-item h3 { margin: 0; font-family: var(--font-sans); font-size: 16.6px; }
.lic-item p { margin-top: 8px; font-size: 14px; line-height: 1.72; color: var(--ink-soft); }

/* 协同服务价值（深色区）：2×2 玻璃卡，替掉原先「左文案 + 右清单」的空心布局 */
.syn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.syn-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 26px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .26s, border-color .26s, background .26s;
}
.syn-card:hover {
  transform: translateY(-4px); border-color: rgba(224, 196, 139, .5);
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
}
.syn-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(224, 196, 139, .14); color: var(--gold-400);
}
.syn-ico svg { width: 21px; height: 21px; }
.syn-card h3 { margin: 0; color: #fff; font-family: var(--font-sans); font-size: 16.6px; }
.syn-card p { margin-top: 8px; font-size: 14.2px; line-height: 1.72; color: var(--text-light-soft); }

/* 区块头 + 右侧要点栏：宽屏下 section-head 只占 760px，右半边会整片空着，
   显得区块头像个「半成品」。右侧补一条竖线要点，既补上信息密度也稳住重心。 */
.head-flex {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.head-flex .section-head { max-width: none; }
.head-aside { padding-left: clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.head-aside-title {
  font-size: 12.4px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.head-aside ul { display: grid; gap: 10px; margin-top: 16px; }
.head-aside li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.2px; line-height: 1.66; color: var(--ink-soft);
}
.head-aside li::before {
  content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); transform: translateY(-2px);
}

/* 14c. 关于我们页 · 集团简介正文 --------------------------------------------- */
/* 撤掉配图后正文独占整行。单栏通栏排一行会到 60+ 汉字，视线换行很容易串行；
   改为两栏报刊式排版，中间一条竖向细线分隔：
   栏宽约 600px ≈ 36 汉字/行，正好落在中文的舒适阅读区间。
   段落统一 break-inside: avoid —— 宁可两栏高度略有参差，也不要把一段拆到两栏，
   中文段落跨栏断开读起来非常别扭。 */
.about-prose {
  margin-top: clamp(26px, 3.2vw, 42px);
  columns: 2; column-gap: clamp(32px, 4.4vw, 72px);
  /* 分栏线用 --line-strong：--line 在白底上几乎看不见，两栏会糊成一片。 */
  column-rule: 1px solid var(--line-strong);
}
.about-prose > p { break-inside: avoid; margin: 0 0 18px; }
.about-prose > p:last-child { margin-bottom: 0; }
/* 首段放大加深、次段常规，形成「导语 — 正文」的落差 */
.about-lead { font-size: 16.6px; line-height: 1.95; color: var(--ink); }
.about-text { font-size: 15.4px; line-height: 1.9; color: var(--ink-soft); }
/* 收尾注在分栏里与上一段贴太近会分不清归属，单独拉开 */
.about-prose .prose-note { margin-top: 24px; }

/* 15. FAQ 手风琴 ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-h { margin: 0; }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.6;
}
.faq-q:hover { color: var(--accent-dark); }
.faq-ico { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; position: relative; }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-ico::before { width: 13px; height: 2px; }
.faq-ico::after { width: 2px; height: 13px; transition: transform .25s, opacity .25s; }
.faq-q[aria-expanded="true"] .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-a-inner { padding: 0 0 22px; font-size: 15px; line-height: 1.78; color: var(--ink-soft); max-width: 860px; }
.section-navy .faq { border-top-color: rgba(255, 255, 255, .18); }
.section-navy .faq-item { border-bottom-color: rgba(255, 255, 255, .18); }
.section-navy .faq-q { color: #fff; }
.section-navy .faq-a-inner { color: var(--text-light-soft); }

/* 16. 联系信息 --------------------------------------------------------------- */
/* 热线入口：细长横向条，替代原先那块竖向深色面板。
   号码仍走金色大字（深底上 6.4:1），右边给一个直达按钮。 */
.contact-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 22px clamp(22px, 2.6vw, 34px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--navy) 0%, #124a63 58%, #0f6a55 100%);
  box-shadow: 0 24px 46px -32px rgba(6, 32, 54, .95);
}
.contact-bar .info-label { color: var(--text-light-dim); }
.contact-bar .contact-big { margin-top: 2px; }
.contact-bar .contact-big a { color: var(--gold-400); }
.contact-bar .contact-big a:hover { color: #fff; }
.contact-bar-note {
  margin-top: 8px; max-width: 52ch;
  font-size: 13.4px; line-height: 1.72; color: var(--text-light-dim);
}

.contact-big {
  font-family: var(--font-serif); font-size: clamp(26px, 3.2vw, 34px); font-weight: 900;
  font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--gold-400);
}

.info-list { display: grid; gap: 16px; }
.info-list li { display: flex; gap: 13px; align-items: flex-start; }
.info-list .ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(26, 58, 107, .07); color: var(--navy);
}
.info-list .ic svg { width: 18px; height: 18px; }
.info-label { font-size: 13px; color: var(--ink-dim); }
.info-value { margin-top: 3px; font-size: 15.2px; color: var(--navy); font-weight: 600; line-height: 1.68; }
.info-value a { color: var(--navy); }
.info-value a:hover { color: var(--gold-600); }

/* 17. CTA 条 ---------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #124a63 58%, #0f6a55 100%);
  border-radius: var(--radius-lg); padding: clamp(28px, 3.6vw, 44px);
  display: grid; grid-template-columns: 1.3fr auto; gap: 26px; align-items: center;
}
.cta-band h2 { color: #fff; font-size: clamp(21px, 2.3vw, 28px); }
.cta-band p { margin-top: 12px; font-size: 15px; color: var(--text-light-soft); line-height: 1.76; max-width: 620px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 相关服务链接带：放在 FAQ 之后，补上下文内链。
   刻意不做成独立区块 —— 同一 section 内收尾，不额外增加竖向节奏。
   配色遵循「浅底用青绿」：section 白底，故用 --accent。 */
.rel-links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  margin-top: clamp(26px, 3.2vw, 40px); padding-top: 22px;
  border-top: 1px solid var(--line); font-size: 14.6px;
}
.rel-links .rel-label {
  font-size: 12.6px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); flex: none;
}
/* 用 --accent-dark 而不是 --accent：前者对白底 5.1:1 达 AA，
   后者（品牌青绿 #18a47c）只有约 3.2:1，14.6px 正文不达标。 */
.rel-links a { color: var(--accent-dark); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.rel-links a:hover { color: var(--accent-ink); border-bottom-color: currentColor; }

/* 18. 页脚 ------------------------------------------------------------------ */
.site-footer { background: var(--navy-900); color: var(--text-light-dim); font-size: 14px; }
.footer-inner {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 34px;
  padding: clamp(42px, 5vw, 66px) 0 40px;
}
.footer-brand p { margin-top: 18px; font-size: 13.6px; line-height: 1.8; color: var(--text-light-dim); max-width: 400px; }
.footer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-tags li {
  padding: 4px 11px; border-radius: 999px; font-size: 12.4px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-light-soft);
}
.footer-col h2 {
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: .04em; margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--text-light-dim); font-size: 13.6px; }
.footer-col a:hover { color: var(--gold-400); }
.footer-cinfo li { display: flex; align-items: flex-start; gap: 11px; min-height: 1.8em; font-size: 13.6px; color: var(--text-light-dim); }
.footer-cinfo .fc-ico { flex-shrink: 0; color: var(--gold-600); position: relative; top: -1px; margin-top: 4px; }
.footer-cinfo a { color: var(--text-light-soft); }
.footer-cinfo a:hover { color: var(--accent-400); }
.footer-qr { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.footer-qr img { border-radius: 8px; background: #fff; padding: 4px; }
.footer-qr span { font-size: 12.4px; color: var(--text-light-dim); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: 12.8px; }
.footer-bottom a { color: var(--text-light-dim); }
.footer-bottom a:hover { color: var(--gold-400); }
/* 备案号 / 网站地图 / 更新日期：分隔点用前置于各段，整段不拆行。
   否则窄屏换行时「·」会被甩到下一行行首，或把「网站地图」断成两行。 */
.footer-meta > * { white-space: nowrap; }
.footer-meta .fm-sep::before {
  content: "·"; margin: 0 7px; color: rgba(255, 255, 255, .28);
}

/* 19. 悬浮工具条 ------------------------------------------------------------ */
.floatdock { position: fixed; right: 20px; bottom: 30px; z-index: 70; display: grid; gap: 12px; }
.float-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--navy); color: #fff; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 26px -14px rgba(15, 36, 68, .8);
  transition: background .22s, transform .22s;
}
.float-btn:hover { background: var(--gold); color: var(--navy-900); transform: translateY(-3px); }
/* 企业微信按钮用青绿，与总部站右下角悬浮按钮一致 */
.float-qr .float-btn { background: var(--accent-grad); }
.float-top { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, transform .22s, background .22s; }
.float-top.is-on { opacity: 1; visibility: visible; }

.float-qr { position: relative; }
.qr-pop {
  position: absolute; right: calc(100% + 10px); bottom: 0;
  padding: 9px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .22s, visibility .22s, transform .22s;
}
/* 显式尺寸 + 取消 max-width：全局 img{max-width:100%} 与绝对定位父级宽度互相依赖会导致宽度塌缩为 0 */
.qr-pop img { display: block; width: 150px; height: 150px; max-width: none; border-radius: 6px; }
.float-qr:hover .qr-pop, .qr-pop.is-open { opacity: 1; visibility: visible; transform: none; }

/* 移动端纯二维码弹层（点击显示，再次点击 / 滑动关闭） */
.qr-modal-touch { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-modal-touch .qr-modal-mask { position: absolute; inset: 0; background: rgba(15, 36, 68, .62); backdrop-filter: blur(5px); }
.qr-modal-touch .qr-modal-box { position: relative; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: qrTouchIn .22s ease; }
.qr-modal-touch .qr-modal-box img { display: block; width: 170px; height: 170px; border-radius: 10px; }
@keyframes qrTouchIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* 20. 入场动效 + 降级兜底 --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-anim { opacity: 1 !important; transform: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 21. 响应式 ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --header-h: 68px; }
  .site-nav { gap: 8px; }
  .site-nav ul a { padding: 9px 9px; font-size: 14.4px; }
  .nav-tel { padding: 9px 14px; font-size: 14px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { max-width: 620px; margin-inline: auto; }
}

/* ============ 移动端顶部菜单：右侧抽屉（桌面端隐藏抽屉专用元素） ============ */
/* 交互与 www.cheng-li.com 移动端一致：右侧滑入抽屉 + 遮罩 + 关闭按钮 +
   整行左对齐导航项 + 底部电话/企微。抽屉头/底/遮罩由 main.js 运行时注入，
   因此不改动任何一页 HTML 结构。 */
.nav-mask, .drawer-head, .drawer-foot { display: none; }

/* 8 项一级导航（含「集团协同服务」）+ 页头电话单行排布实测需要 1096px，
   1025–1096px 区间会横向溢出 71px（改动前就有），因此抽屉折叠阈值定在 1119px，
   1120px 起才用横向导航（留 24px 缓冲）。导航之外的布局仍按原来的 1024 断点走。 */
@media (max-width: 1119px) {
  /* --- 抽屉本体：覆盖原来的「页头下方整条下拉面板」写法 --- */
  .site-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 80;
    /* align-items 必须显式改回 stretch：桌面版 .site-nav 是 align-items:center，
       不改的话抽屉里的 ul / 底部按钮会在交叉轴上按内容宽度居中缩进
       （原站移动端「导航项居中缩进」就是这个问题）。 */
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: min(84vw, 330px); height: 100dvh; max-height: none;
    margin: 0; padding: 0 0 16px;
    background: #fff; border: 0; border-radius: 0;
    box-shadow: -16px 0 44px rgba(9, 32, 52, .2);
    opacity: 1; visibility: hidden; transform: translateX(103%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateX(0); }
  .site-nav ul { display: grid; width: 100%; gap: 2px; padding: 0 10px; }
  .site-nav ul a { padding: 14px 12px; font-size: 15.6px; border-radius: 10px; }
  .nav-toggle { display: inline-flex; }

  /* --- 遮罩 --- */
  .nav-mask {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(9, 24, 42, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-mask.show { opacity: 1; visibility: visible; }

  /* --- 抽屉头部：品牌 + 关闭 --- */
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 16px 13px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 2; background: #fff;
  }
  .drawer-head .dh-brand { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; min-width: 0; }
  .drawer-head .dh-brand strong {
    font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: var(--navy); letter-spacing: 1.6px; white-space: nowrap;
  }
  .drawer-head .dh-brand small {
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
    color: var(--gold-600); white-space: nowrap;
  }
  .drawer-close {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    padding: 0; border: 1px solid var(--line-strong); border-radius: 9px;
    background: #fff; color: var(--navy); cursor: pointer;
  }
  .drawer-close svg { width: 18px; height: 18px; }
  .drawer-close:active { background: var(--bg-hover); }

  /* --- 抽屉底部：电话 + 企微 --- */
  .drawer-foot {
    display: grid; gap: 10px; margin-top: auto; padding: 16px;
    border-top: 1px solid var(--line); background: #fff;
  }
  .drawer-foot .dbtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; margin: 0; padding: 12px 14px; border-radius: 12px;
    font-family: var(--font-sans); font-size: 15.5px; font-weight: 700; line-height: 1.2;
    text-align: center; cursor: pointer; border: 1px solid transparent;
    transition: transform .18s, box-shadow .2s, background .2s;
  }
  .drawer-foot .dbtn svg { width: 17px; height: 17px; flex: none; }
  /* 站内原有的电话按钮挪到底部后，去掉胶囊圆角，统一成 12px 矩形 */
  .drawer-foot .nav-tel {
    width: 100%; margin: 0; border-radius: 12px; justify-content: center;
    font-size: 15.5px;
  }
  .drawer-foot .dbtn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-600)); color: #fff;
    box-shadow: 0 8px 20px rgba(201, 168, 106, .34);
  }
  .drawer-foot .dbtn-gold:active { color: #fff; transform: scale(.985); }
  .drawer-foot .dbtn-ghost {
    background: #fff; border-color: var(--line-strong); color: var(--navy);
  }
  .drawer-foot .dbtn-ghost:active { background: var(--bg-hover); transform: scale(.985); }

  /* --- 打开时锁定背景滚动 --- */
  body.nav-open { overflow: hidden; }
}

@media (max-width: 1024px) {
  .topbar-txt { display: none; }
  .topbar-inner { justify-content: center; }

  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .sector-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 列降 2 列后 .g3 变成 3 行：此时跨行等高会把前两行也撑到第三行的高度，
     实测多出约 27px 空白（一整行文字）。这里退回「行内等高、行间自适应」。 */
  .g3 { grid-auto-rows: auto; }
  /* 5 张卡在 2 列时同理：换 4 列轨道，第 5 张占中间一半居中（见基础节注释） */
  .steps-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-5 > * { grid-column: span 2; }
  .steps-5 > :nth-child(4) { grid-column: auto; }
  .steps-5 > :nth-child(5) { grid-column: 2 / 4; }
  .split, .split-3 { grid-template-columns: 1fr; gap: 30px; }
  /* 协同服务页：服务卡降为 2 列；双大卡改上下排列（再窄一点长条卡才需要拆） */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-grid { grid-template-columns: 1fr; }
  .head-flex { grid-template-columns: 1fr; gap: 26px; }
  .head-aside { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .cta-band { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
}

/* 关于我们页的两栏正文：960 以下每栏不足 26 汉字/行，读起来偏挤，改回单栏通栏。
   单栏时整行 976px 约 48 汉字，仍在可接受区间。 */
@media (max-width: 960px) {
  .about-prose { columns: 1; }
}

@media (max-width: 768px) {
  body { font-size: 15.4px; }
  .g2, .g3, .g4, .sector-grid, .steps, .steps-5, .price-grid { grid-template-columns: 1fr; }
  /* 单列堆叠时取消跨行等高：卡片各自按内容收缩，避免短卡片被撑出大片空白。
     （1024 断点下 .g2/.g3/.g4 仍是多列，那里保留 1fr 的等高才整齐。） */
  .g2, .g3, .g4, .svc-grid, .lic-grid, .syn-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .steps-5 > *, .steps-5 > :nth-child(4), .steps-5 > :nth-child(5) { grid-column: auto; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .stat-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 16px; }
  .stat-item:first-child { border-top: 0; }
  .floatdock { right: 14px; bottom: 18px; gap: 10px; }
  .float-btn { width: 44px; height: 44px; }
  .qr-pop { right: 0; bottom: calc(100% + 10px); }
  .hero-cta { gap: 11px; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* 窄屏收小首屏配图的浮层与错位框，避免负外边距顶到栏边 */
  .hero-figure::before { inset: 18px 18px -12px -12px; border-radius: 18px; }
  .hero-figure-cap { margin: -44px 14px 0; padding: 17px 18px; }
  .hero-figure-cap strong { font-size: 15.6px; }
  .about-lead { font-size: 16px; }
  .contact-bar { grid-template-columns: 1fr; gap: 16px; }
  .contact-bar .btn { width: 100%; }
  .card, .panel, .price-card, .sector { padding: 22px 20px; }
  .svc-card, .duo-card, .syn-card { padding: 22px 20px; }
  .lic-item { padding: 18px 20px; gap: 16px; }
  .lic-no { font-size: 27px; }
  .timeline li { padding-left: 22px; }
}

/* 抽屉极窄屏微调：长导航项（南京工商注册/集团协同服务）不换行、头部英文副标让位关闭按钮 */
@media (max-width: 360px) {
  .site-nav { width: min(88vw, 330px); }
  .site-nav ul a { font-size: 15px; padding: 13px 10px; }
  .drawer-foot .dbtn { font-size: 15px; }
}
@media (max-width: 339px) {
  .drawer-head .dh-brand small { display: none; }
}

@media (max-width: 480px) {
  .wrap { padding-inline: 18px; }
  .logo-text small { display: none; }
  .logo-text { gap: 0; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; }
}

/* 22. 工具类（必须放在文件末尾）-------------------------------------------------
   这些单类工具会被用在任意组件上（如 .price-note.mt-md）。
   组件规则与工具类权重同为 (0,1,0)，靠「后出现者胜」决定结果，
   因此工具类一律放在文件最后；若把它们混在组件中间，
   会被后面出现的组件规则静默覆盖（写了 margin-top 却不生效）。 */
.mt-sm { margin-top: 18px; }
.mt-md { margin-top: 30px; }
.mt-lg { margin-top: 44px; }
.flush { margin-top: 0 !important; }
.gap-sm { gap: 14px; }
.gap-xs { gap: 10px; }

/* 23. 打印 --------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .floatdock, .cta-band, .footer-bottom { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq-a { max-height: none !important; }
}

/* 24. FAQ 无 JS 兜底 ----------------------------------------------------- */
/* 折叠依赖 main.js 给 .faq-a 设 max-height；脚本未执行时（爬虫、禁用 JS）
   答案会被压成 0 高度而不可见。head 里有内联脚本打上 html.js 标记，
   无标记时直接展开，保证问答内容始终可读、可被引用。 */
html:not(.js) .faq-a { max-height: none; }