/* 沪车会官网 · 单文件样式表
   设计规范：暗色工坊风（Dark Atelier）
     主背景 #0A0A0A / 次背景 #141414 / 主色 #C8A961（古铜金）/ 强调 #E8E8E8 / 辅助文字 #8A8A8A
     圆角 4px · 基础动效 500ms cubic-bezier(0.4, 0, 0.2, 1) · 标题字间距 -0.02em · 正文行高 1.7
   工程原则：零外部请求（无 Google Fonts / 无 CDN）、系统字体、变量集中调色、
     移动端优先、正文最大宽度控制在易读区间，动效尊重 prefers-reduced-motion。
   注意：超大字标题只用于视觉区块（Hero、信任数据、区块标题）。
     供 AI 抽取的事实段落严格保持 17px / 行高 1.7，不为了视觉牺牲可抽取性。 */

:root {
  color-scheme: dark;

  /* —— 色彩系统（严格对齐设计规范） —— */
  --bg: #0a0a0a;          /* 主背景：页面本体、Hero 底色 */
  --bg-2: #141414;        /* 次背景：卡片、区块分隔 */
  --bg-3: #1c1c1c;        /* 次背景的第三级：表头、内嵌面 */
  --ink: #e8e8e8;         /* 强调色 / 深底主文字 */
  --ink-2: #b4b4b4;       /* 正文的次级色 */
  --ink-3: #8a8a8a;       /* 辅助文字 */
  --line: #262626;        /* 常规描边 */
  --line-2: #1b1b1b;      /* 轻描边、分隔线 */

  --accent: #c8a961;      /* 古铜金：品牌标识、CTA、关键图标、装饰线 */
  --accent-hi: #d9c07f;   /* 金色亮调：悬停、重点字 */
  --accent-ink: #d4b872;  /* 深底上的金色文字（保证对比度） */
  --accent-deep: #8a733f; /* 暗金：描边 */
  --accent-bg: #17140c;   /* 金色底衬（比主背景略暖） */

  --warn-bg: #1a1210;
  --warn-line: #553026;
  --danger: #d0734f;

  /* —— 浅色面（仅少量场景，如地图/门店信息块） —— */
  --paper: #ededed;
  --paper-ink: #1a1a1a;
  --paper-ink-2: #6b6b6b;

  /* —— 尺寸与节奏 —— */
  --radius: 4px;          /* 规范：圆角 4px */
  --pill: 999px;
  --wrap: 1180px;
  --read: 46rem;
  --section-gap: 90px;    /* 区块间距；桌面端提升到 120px */
  --dur: 500ms;           /* 基础动效时长 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* —— 排版 —— */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --h1: clamp(2rem, 5.4vw, 3.5rem);   /* 移动 32-40px → 桌面 56px */
  --h2: clamp(1.55rem, 3.6vw, 2.5rem);
  --h3: clamp(1.15rem, 2.2vw, 1.75rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #0a0a0a; padding: 0.6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- 版心与区块节奏 ---------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.4rem 1.15rem 3.5rem;
}
.article-body > * { max-width: var(--read); }

/* ---------- 页头：初始透明，滚动后实底 + 金色细线 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: var(--accent);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header .inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; color: var(--ink); gap: 0.26rem; }
.logo:hover { text-decoration: none; }
/* 官方 logo：透明背景 + 品牌金，已裁掉多余留白 */
/* 官方 logo：418×116（约 3.6:1），中文占上方约 63%，英文小字在下方。
   高度取 52px，使中文部分约 33px——保持原来的视觉分量，
   同时让下方英文不至于完全糊掉。要更大/更小只改这一个值。 */
.logo-img { display: block; height: 52px; width: auto; object-fit: contain; }
.logo-name {
  font-size: 1.28rem; font-weight: 700; letter-spacing: 0.14em; color: var(--ink);
}
.logo-name::after { content: "·"; color: var(--accent); margin-left: 0.35rem; }
.logo-sub { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.06em; }
.site-footer .logo-img { height: 64px; }

.main-nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
.main-nav > a,
.main-nav .has-submenu > span {
  display: inline-block;
  padding: 0.5rem 0.72rem;
  font-size: 0.94rem;
  color: var(--ink-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}
.main-nav > a:hover,
.main-nav .has-submenu:hover > span { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.main-nav .is-current { color: var(--accent); }

.has-submenu { position: relative; }
.has-submenu .submenu {
  display: none;
  position: absolute; left: 0; top: 100%;
  min-width: 330px; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.7);
  z-index: 40;
}
/* 桌面端下拉：悬停或键盘聚焦展开。
   必须限定在「支持悬停 + 宽度 ≥768px」的区间——
   否则 :focus-within 的优先级会盖过移动端的 display:none，
   导致手机上点开之后无法再收起。 */
@media (hover: hover) and (min-width: 768px) {
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display: block; }
}
.has-submenu .submenu a { display: block; padding: 0.5rem 0.62rem; border-radius: var(--radius); }
.has-submenu .submenu a:hover { background: var(--bg-3); text-decoration: none; }
.has-submenu .submenu strong { display: block; color: var(--ink); font-size: 0.94rem; font-weight: 600; }
.has-submenu .submenu span { display: block; color: var(--ink-3); font-size: 0.79rem; }
/* 二级分组标题：服务项目下的「升级改装」这类带子项的分组 */
.has-submenu .submenu .sub-head { padding: 0.5rem 0.62rem 0.2rem; }
.has-submenu .submenu .sub-group {
  color: var(--accent); font-size: 0.76rem; letter-spacing: 0.12em; font-weight: 600;
}
.has-submenu .submenu .sub-head + li > a { padding-left: 1.1rem; }

/* 下拉末尾的「查看全部…」入口：单独一条分隔线，金色强调 */
.has-submenu .submenu .sub-more-li {
  margin-top: 0.3rem; padding-top: 0.3rem;
  border-top: 1px solid var(--line);
}
.has-submenu .submenu .sub-more {
  color: var(--accent-hi) !important;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}
.has-submenu .submenu .sub-more:hover { color: var(--ink) !important; }

.btn {
  display: inline-block;
  padding: 0.68rem 1.3rem;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #0a0a0a; text-decoration: none; }
.btn.small { padding: 0.5rem 0.95rem; font-size: 0.88rem; margin-left: auto; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent-deep); }
.btn.ghost:hover { background: var(--accent-bg); color: var(--accent-hi); border-color: var(--accent); }

/* ---------- 面包屑与标题 ---------- */

.breadcrumb { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1.1rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }

h1 {
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
}
h2, h3, h4 { scroll-margin-top: 1.4rem; }
h2 {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: var(--section-gap) 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-2);
}
h2:first-of-type { border-top: 0; margin-top: 2.2rem; padding-top: 0; }
h3 {
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.7rem;
}
h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--ink); }
p { margin: 0 0 1rem; }

.page-meta {
  font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line-2); padding-bottom: 1rem; margin-bottom: 1.8rem;
}

.anchor { color: var(--line); margin-left: 0.4rem; font-size: 0.85em; opacity: 0; transition: opacity 200ms ease-out; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

/* ---------- 抽取友好块（供 AI 引用的段落，尺寸不做戏剧化处理） ---------- */

.answer {
  font-size: 1.1rem;
  line-height: 1.72;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  max-width: 54rem;
  color: var(--ink);
}

.definition {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-2);
  padding: 1rem 1.15rem;
  margin: 0 0 1.8rem;
}
.definition dt { font-weight: 700; margin-bottom: 0.25rem; color: var(--accent-ink); }
.definition dd { margin: 0; color: var(--ink-2); }
dl.definition, dl.metrics { margin: 0 0 1.8rem; }
.definition-row { margin: 0; }

.tbl { margin: 0 0 2rem; }
.tbl figcaption { font-size: 0.84rem; color: var(--ink-3); margin-bottom: 0.5rem; }

/* ---------- 折叠表格（车型页的项目表用） ----------
   原生 <details>，无需 JS；内容始终在 HTML 里，爬虫与 AI 抽取不受影响。 */

.blk-collapsible { margin: 0 0 1.2rem; }
.blk-collapsible details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.blk-collapsible summary.sum {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 1.1rem 0.95rem 2.6rem;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.blk-collapsible summary.sum::-webkit-details-marker { display: none; }
.blk-collapsible summary.sum::before {
  content: "+";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1.05rem;
  text-align: center;
  border: 1px solid var(--accent-deep);
  border-radius: 3px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}
.blk-collapsible details[open] summary.sum::before { content: "−"; }
.blk-collapsible summary.sum:hover { background: var(--bg-3); color: var(--accent-hi); }
.blk-collapsible details[open] summary.sum {
  border-bottom: 1px solid var(--line);
  color: var(--accent-hi);
}
.blk-collapsible .details-body { padding: 1rem 1.1rem 0.2rem; }
.blk-collapsible .details-body .tbl:last-child { margin-bottom: 0.8rem; }
.blk-collapsible .details-body p { color: var(--ink-2); font-size: 0.94rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 520px; }
caption { caption-side: top; text-align: left; font-size: 0.84rem; color: var(--ink-3); padding-bottom: 0.4rem; }
th, td { border-bottom: 1px solid var(--line-2); padding: 0.68rem 0.85rem; text-align: left; vertical-align: top; }
thead th { background: var(--bg-3); font-weight: 700; white-space: nowrap; color: var(--ink); }
tbody th { font-weight: 600; background: var(--bg-2); width: 30%; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

ol.steps { counter-reset: step; list-style: none; margin: 0 0 2rem; padding: 0; }
ol.steps li {
  position: relative; padding: 0.1rem 0 1.1rem 2.5rem; counter-increment: step;
  border-left: 1px solid var(--line); margin-left: 0.8rem;
}
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(step);
  position: absolute; left: -0.86rem; top: 0.05rem;
  width: 1.72rem; height: 1.72rem; border-radius: 50%;
  background: var(--accent); color: #0a0a0a; font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
ol.steps p { margin: 0; color: var(--ink-2); }

.qa { border-top: 1px solid var(--line-2); padding-top: 1.2rem; margin-top: 1.2rem; }
.qa:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.qa h3 { margin-top: 0; font-size: 1.08rem; }
.qa p { margin-bottom: 0; color: var(--ink-2); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; margin: 0 0 2rem; }
.metric { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--bg-2); }
.metric dt { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 0.35rem; }
.metric dd { margin: 0; }
.metric dd strong { display: block; font-size: 1.15rem; color: var(--accent); }
.metric dd span { display: block; font-size: 0.8rem; color: var(--ink-3); }
.pending { font-size: 0.86rem !important; color: var(--accent-ink) !important; }
.pending::before { content: "待补充 · "; font-weight: 700; }

.note, .warning, .fact {
  border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0 0 1.9rem;
  border: 1px solid var(--line); background: var(--bg-2);
}
.note { border-left: 3px solid var(--ink-3); }
.warning { background: var(--warn-bg); border-color: var(--warn-line); border-left: 3px solid var(--danger); }
.fact { border-left: 3px solid var(--accent); background: var(--accent-bg); }
.note > :last-child, .warning > :last-child, .fact > :last-child { margin-bottom: 0; }
.note h2, .warning h2 { margin-top: 0; font-size: 1.05rem; border-top: 0; padding-top: 0; color: var(--ink); }
.note h3, .warning h3 { margin-top: 0; font-size: 1rem; }

.cta {
  background: linear-gradient(180deg, #16161a 0%, #0f0f11 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  margin: var(--section-gap) 0 0;
}
.cta h2 { color: var(--ink); border-top: 0; margin-top: 0; padding-top: 0; }
.cta .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.cta .btn.ghost { color: var(--accent); border-color: var(--accent-deep); }

.todo {
  border: 1px solid var(--accent-deep); background: var(--accent-bg);
  border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0 0 2rem;
}
.todo h2, .todo h3 { margin-top: 0; border-top: 0; padding-top: 0; font-size: 1rem; color: var(--accent); }
.todo ul { margin: 0.5rem 0 0.6rem; padding-left: 1.15rem; }
.todo li { margin-bottom: 0.35rem; color: var(--ink-2); font-size: 0.93rem; }
.todo p:last-child { margin-bottom: 0; }

.sources { font-size: 0.86rem; color: var(--ink-2); padding-left: 1.15rem; }
.sources li { margin-bottom: 0.4rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); }
.gallery figcaption { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.35rem; }

/* ---------- 施工实拍图库 ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}
.photo-grid figure { margin: 0; }
.photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.photo-grid figcaption {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 0.45rem;
  line-height: 1.6;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.hero::after {
  /* 无实拍图时用定向光斑营造"工坊打光"，不伪造车型画面 */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(680px 320px at 78% 12%, rgba(200, 169, 97, 0.13), transparent 70%),
    radial-gradient(520px 420px at 8% 92%, rgba(200, 169, 97, 0.06), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; padding: 4rem 1.15rem 3.4rem; }
.hero h1 { max-width: 22ch; }
.hero .answer { background: rgba(20, 20, 20, 0.72); border-left-color: var(--accent); }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.6rem 0 0; }

/* ---------- 数据带（信任背书） ---------- */

.facts-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin: 2.4rem 0 0.2rem;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.fact-card { background: var(--bg-2); padding: 1.4rem 1.2rem; }
.fact-card strong {
  display: block; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); margin-bottom: 0.4rem;
}
.fact-card span { font-size: 0.85rem; color: var(--ink-3); line-height: 1.6; }

/* ---------- 卡片网格 ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; margin: 0 0 2rem; }

/* ---------- 信息卡：关键信息的卡片化呈现（替代"资料表"） ---------- */

.info-cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 2rem;
}
.info-cards.cols-1 { grid-template-columns: 1fr; }
.info-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.info-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.info-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

.info-card {
  background: var(--bg-2);
  padding: 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.info-card .ic-label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.info-card .ic-value {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
}
/* 需要强调的值（如电话、门店规模）用金色 */
.info-card .ic-value a,
.info-card .ic-value strong { color: var(--accent-hi); }
.info-card .ic-value a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .info-cards.cols-3, .info-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .info-cards { grid-template-columns: 1fr !important; }
}
.card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.3rem; background: var(--bg-2); color: var(--ink);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.card:hover {
  border-color: var(--accent-deep); text-decoration: none; color: var(--ink);
  transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.card h3 { margin: 0 0 0.45rem; font-size: 1.12rem; }
.card p { margin: 0; font-size: 0.9rem; color: var(--ink-3); }
.card .more { display: inline-block; margin-top: 0.7rem; font-size: 0.84rem; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }

/* ---------- 相关内容 / 官方账号 ---------- */

.related { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; padding: 0; list-style: none; margin: 0; }
.related-wrap { margin-top: var(--section-gap); border-top: 1px solid var(--line-2); padding-top: 1.4rem; }

.accounts-wrap { margin-top: var(--section-gap); border-top: 1px solid var(--line-2); padding-top: 1.4rem; }
.accounts-wrap h2 { border-top: 0; margin-top: 0; padding-top: 0; }
.accounts { display: flex; flex-wrap: wrap; gap: 0.55rem 0.7rem; padding: 0; list-style: none; margin: 0.8rem 0 0.6rem; }
.accounts li { margin: 0; }
.accounts a {
  display: inline-block; border: 1px solid var(--line); border-radius: var(--pill);
  padding: 0.4rem 0.95rem; font-size: 0.88rem; background: var(--bg-2); color: var(--ink-2);
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}
.accounts a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---------- 页脚 ---------- */

.site-footer {
  background: #070707; color: var(--ink-2); margin-top: var(--section-gap);
  font-size: 0.9rem; border-top: 2px solid var(--accent);
}
.site-footer .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 3rem 1.15rem 1.6rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1.4fr 1.3fr; gap: 1.8rem;
}
.site-footer .logo-name { color: var(--ink); }
.site-footer .logo-sub { color: var(--ink-3); }
.site-footer h3 {
  color: var(--accent); font-size: 0.86rem; margin: 0 0 0.8rem;
  letter-spacing: 0.12em; font-weight: 600;
}
.site-footer .fcol-sub { margin-top: 1.4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }
.site-footer .legal {
  border-top: 1px solid var(--line-2); padding: 1rem 1.15rem 1.8rem;
  max-width: var(--wrap); margin: 0 auto; font-size: 0.8rem; color: var(--ink-3);
}
.site-footer .legal p { margin: 0.25rem 0; }
/* 备案号：法律要求必须展示，用略亮的颜色保证可读，但不过分抢眼 */
.site-footer .legal .icp { color: var(--ink-3); letter-spacing: 0.02em; }
.site-footer .legal .icp a { color: var(--ink-2); text-decoration: none; }
.site-footer .legal .icp a:hover { color: var(--accent-hi); text-decoration: underline; }

/* ---------- 动效：滚动进入 / 数据计数 ----------
   区块进入：translateY(40px→0) + opacity(0→1)，600ms。
   移动端与 prefers-reduced-motion 下简化为仅 opacity 淡入。 */

.reveal { opacity: 0; }
.reveal.is-in {
  opacity: 1;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
html.js-motion .reveal { transform: translateY(40px); }
html.js-motion .reveal.is-in { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, html.js-motion .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
  .card:hover { transform: none; }
}

/* ---------- 响应式 ----------
   断点：移动 <768px / 平板 768-1023px / 桌面 ≥1024px */

@media (min-width: 1024px) {
  :root { --section-gap: 120px; }
  .wrap { padding: 3rem 1.5rem 4rem; }
  .hero .wrap { padding: 5.5rem 1.5rem 4.5rem; }
}

@media (max-width: 1023px) {
  .hero .wrap { padding: 3.2rem 1.15rem 2.8rem; }
}

@media (max-width: 860px) {
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
  .btn.small { margin-left: 0; }
}

@media (max-width: 767px) {
  :root { --section-gap: 80px; }
  body { font-size: 16.5px; }
  .site-footer .inner { grid-template-columns: 1fr; }

  /* ---- 页头：logo 缩小并整行居中 ---- */
  /* logo 占满一行，内容居中对齐，所以在任何屏宽下都是真正的居中，
     而不是"在剩余空间里居中"（那样会被右侧按钮挤偏）。 */
  .site-header .inner { justify-content: center; row-gap: 0.45rem; }
  .logo { align-items: center; width: 100%; }
  .logo-img { height: 38px; }
  .logo-sub { text-align: center; }

  .main-nav { width: 100%; }
  /* 移动端下拉只在 .is-open 时展开；展开后整块参与文档流，不遮挡内容 */
  .has-submenu .submenu {
    position: static; min-width: 0; box-shadow: none;
    display: none; margin: 0.35rem 0 0.5rem;
  }
  .has-submenu.is-open .submenu { display: block; }
  /* 可点击的触发器要有明确的可点区域与视觉反馈 */
  .main-nav .has-submenu > span {
    display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .main-nav .has-submenu > span::after {
    content: ""; width: 0.42rem; height: 0.42rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 200ms ease;
  }
  .main-nav .has-submenu.is-open > span::after {
    transform: rotate(-135deg) translateY(-0.1rem);
  }
  .cta .actions .btn { width: 100%; text-align: center; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .cards { grid-template-columns: 1fr; }
  .facts-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .facts-strip { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .site-footer, .cta, .breadcrumb { display: none; }
  body { font-size: 12pt; background: #fff; color: #000; }
  a { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}