/* ============================================================================
   pages.css — 首屏与各页面专有构成
   ========================================================================== */

/* ==========================================================================
   A. 首屏
   构成意图：不用「居中标题 + 两按钮 + 三卡片」的默认解法。
   左七右五非对称 —— 左侧是宣言，右侧是一张悬浮的实时拓扑卡；
   底部一条地平线网格由远及近流动，制造「深空 / 复古未来」的纵深。
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid; align-content: center;
  padding-top: calc(var(--h-nav) + clamp(3rem, 9vh, 6rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__fx { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
.hero__fx canvas { width: 100%; height: 100%; }

/* 地平线网格：由远及近流动，是首屏的「动态视频感」来源 */
.hero__horizon {
  position: absolute; left: -30%; right: -30%; bottom: -8%;
  height: 54%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--c-line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(360px) rotateX(67deg);
  transform-origin: 50% 100%;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 74%);
          mask-image: linear-gradient(to top, #000 6%, transparent 74%);
  animation: horizonFlow 6s linear infinite;
}
:root[data-theme="light"] .hero__horizon { opacity: 0.3; }
@keyframes horizonFlow { to { background-position: 0 64px; } }

/* 顶部一道扫描光带 */
.hero__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(to right, transparent, var(--a), transparent);
  opacity: 0.6;
  animation: scan 7.5s var(--ease-in-out) infinite;
}
@keyframes scan {
  0%, 100% { transform: translateY(0);     opacity: 0; }
  12%      { opacity: 0.7; }
  88%      { opacity: 0.5; }
  100%     { transform: translateY(72dvh); opacity: 0; }
}

.hero__inner {
  position: relative; z-index: 2;
  width: min(100% - clamp(2rem, 6vw, 5rem), var(--w-page));
  margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 1040px) {
  .hero__inner { grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.86fr); align-items: center; }
}

/* 断行由 <br class="br-lg"> 人工控制，关掉自动平衡，避免浏览器再分配一次
   把「连接，/做成」这类语义单元拆开 */
.hero__title { max-width: 16ch; text-wrap: wrap; }
/* 标题最后一段用渐变裁切，作为视觉重音 */
.hero__title .hl {
  /* 🔴 中间档混的是 --a-tint，**不能写死 #ffffff** ——
     写死只对深色主题成立，切到明底时中间档会比 --a 还淡（实测 1.74:1），
     而这是首屏主标题，等于整页最显眼的字看不清。 */
  background: linear-gradient(100deg,
    var(--a) 0%,
    color-mix(in srgb, var(--a) 62%, var(--a-tint)) 48%,
    var(--a) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
  margin-top: var(--s-6);
  max-width: 46ch;
  font-size: var(--fs-md); color: var(--t-mid);
}
.hero__lead b { color: var(--t-hi); }

.hero__cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* 首屏指标条 */
.hero__stats {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 700px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 入场编排：3 组，间隔 90ms —— 一次编排好的入场胜过零散微交互 */
.hero-seq { opacity: 0; transform: translateY(20px); animation: heroIn 900ms var(--ease-out) forwards; }
.hero-seq:nth-child(1) { animation-delay: 60ms; }
.hero-seq:nth-child(2) { animation-delay: 150ms; }
.hero-seq:nth-child(3) { animation-delay: 240ms; }
.hero-seq:nth-child(4) { animation-delay: 330ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-seq { opacity: 1; transform: none; animation: none; } }

/* --- 右侧悬浮拓扑卡 --- */
.topo-card {
  position: relative;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topo-card__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-low);
}
.topo-card__live { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--a); }
.topo-card__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 0 var(--a-glow);
  animation: pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--a-glow); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.topo-card > svg { width: 100%; height: auto; }

/* 拓扑连线：虚线流动 + 逐条点亮 */
.topo-link {
  stroke-dasharray: 6 8;
  animation: topoDash 1.6s linear infinite;
}
@keyframes topoDash { to { stroke-dashoffset: -28; } }
.topo-node { animation: topoBlink 3.4s var(--ease-in-out) infinite; }
.topo-node:nth-of-type(2) { animation-delay: 0.5s; }
.topo-node:nth-of-type(3) { animation-delay: 1.0s; }
.topo-node:nth-of-type(4) { animation-delay: 1.5s; }
.topo-node:nth-of-type(5) { animation-delay: 2.0s; }
@keyframes topoBlink { 0%, 100% { opacity: 0.55; } 45% { opacity: 1; } }

.topo-card__foot {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topo-card__foot dt {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-low);
}
.topo-card__foot dd {
  margin: 0; font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600; color: var(--t-hi);
}

/* 滚动提示 */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); translate: -50% 0;
  z-index: 2; display: grid; justify-items: center; gap: var(--s-2);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--t-low);
}
.hero__scroll i {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--a), transparent);
  animation: scrollHint 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollHint { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__horizon, .hero__scan, .hero__scroll i, .topo-link, .topo-node { animation: none; }
}

/* ==========================================================================
   B. 内页头
   ========================================================================== */
.pagehero {
  position: relative;
  padding-top: calc(var(--h-nav) + clamp(3.5rem, 9vw, 6.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.pagehero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(90% 100% at 12% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(90% 100% at 12% 0%, #000 0%, transparent 72%);
  opacity: 0.7;
}
.pagehero__inner { position: relative; z-index: 2; }
.pagehero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 22ch; }
.pagehero__lead { margin-top: var(--s-5); max-width: 60ch; font-size: var(--fs-md); color: var(--t-mid); }
.pagehero__meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.breadcrumb {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-low);
}
.breadcrumb a:hover { color: var(--a); }
.breadcrumb .sep { opacity: 0.5; }

/* ==========================================================================
   C. 业务详解区块（business.html）
   构成：左侧粘性锚点导航 + 右侧内容 —— 桌面端形成纵向对话感
   ========================================================================== */
.biz-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
/* 🔴 grid / flex 子项默认是 `min-width: auto` —— 也就是**不会**收缩到内容宽度以下。
   下面 .biz-toc__list 是横向可滑的胶囊列表（overflow-x:auto），
   少了这一行它会被内容顶到 797px 宽，把整个文档撑出横向滚动条
   （实测 375 视口下文档宽跑到 813px）。加了才轮得到 overflow-x 生效。 */
.biz-layout > * { min-width: 0; }
@media (min-width: 1100px) {
  .biz-layout { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
  .biz-toc { position: sticky; top: calc(var(--h-nav) + 2.5rem); }
}

/* --- 锚点导航：桌面端纵向，移动端横向可滑 --- */
.biz-toc__title {
  margin-bottom: var(--s-4);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--t-low);
}
.biz-toc__list { display: flex; gap: var(--s-2); overflow-x: auto; min-width: 0; padding-bottom: var(--s-3); }
.biz-toc__list::-webkit-scrollbar { height: 4px; }
@media (min-width: 1100px) {
  .biz-toc__list { flex-direction: column; gap: 0; overflow: visible; padding-bottom: 0; }
}
.biz-toc__list a {
  display: flex; align-items: center; gap: var(--s-3);
  flex: 0 0 auto; min-height: 44px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--t-low); white-space: nowrap;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast);
}
/* 桌面端把胶囊改成左侧竖线，更像目录 */
@media (min-width: 1100px) {
  .biz-toc__list a {
    border-left: 1px solid var(--c-line);
    border-radius: 0; padding-left: var(--s-4); white-space: normal;
  }
  .biz-toc__list a[aria-current] { color: var(--a); border-left-color: var(--a); background: var(--a-soft); }
}
@media (max-width: 1099.98px) {
  .biz-toc__list a { border: 1px solid var(--c-line); border-radius: var(--r-pill); }
  .biz-toc__list a[aria-current] { color: var(--a); border-color: var(--a); background: var(--a-soft); }
}
.biz-toc__list a:hover { color: var(--t-hi); }
.biz-toc__num { font-family: var(--f-mono); font-size: 11px; font-weight: 600; opacity: 0.75; }

.biz-block {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--h-nav) + var(--s-5));
}
.biz-block:first-child { border-top: 0; padding-top: 0; }
.biz-block__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) {
  /* 内容栏刻意给到 70%：示意图按 700 宽的 viewBox 等比缩放，
     栏宽不足会把图内文字压到 9px 以下，读不清就等于没画。 */
  .biz-block__grid { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
  .biz-block__aside { position: sticky; top: calc(var(--h-nav) + 3rem); align-self: start; }
}
.biz-block__idx {
  font-family: var(--f-mono); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 600;
  line-height: 0.86; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-3);
  display: block; margin-bottom: var(--s-5);
}
.biz-block__title { font-size: clamp(1.55rem, 2.8vw, 2.2rem); }
.biz-block__en {
  display: block; margin-top: var(--s-3);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--a);
}
.biz-block__icon { width: 54px; height: 54px; color: var(--a); margin-bottom: var(--s-5); }
.biz-block__desc { margin-top: var(--s-5); max-width: 40ch; color: var(--t-mid); }

/* 能力清单：两列，带节点圆点 */
.cap-list { display: grid; gap: var(--s-4) var(--s-6); }
@media (min-width: 620px) { .cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap-list li {
  position: relative; padding-left: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-base); color: var(--t-mid);
}
.cap-list li strong { display: block; color: var(--t-hi); font-size: var(--fs-md); margin-bottom: 3px; }
.cap-list li::before {
  content: ""; position: absolute; left: 3px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--a); background: var(--a-soft);
}

/* 交付物 / 适用场景 双栏小卡 */
.mini-cols { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .mini-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-col {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mini-col h4 {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-base); font-family: var(--f-mono); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--a);
}
.mini-col ul { display: grid; gap: var(--s-3); }
.mini-col li { position: relative; padding-left: var(--s-5); font-size: var(--fs-sm); color: var(--t-mid); }
.mini-col li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 8px; height: 8px;
  border-left: 1px solid var(--a); border-bottom: 1px solid var(--a);
  transform: rotate(-45deg);
}

/* 架构示意 SVG 容器 */
.diagram {
  padding: var(--s-5);
  background:
    radial-gradient(30rem 18rem at 50% 0%, var(--a-soft), transparent 70%),
    var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
/* 只让「示意图本体」被撑满。写成后代选择器 .diagram svg 会连按钮里
   16px 的小箭头一起选中（与 .btn svg 同权重、且本文件在后面），
   结果是按钮里出现一个 200px 的巨型箭头。必须限定为直接子元素。 */
.diagram > svg { width: 100%; height: auto; }

/* 技术示意图低于某个宽度就没法读了。窄屏不做「缩到看不清」，
   改成横向滑动 + 明确提示 —— 比压缩到 5px 的文字诚实。 */
@media (max-width: 860px) {
  .diagram { overflow-x: auto; }
  .diagram > svg { min-width: 660px; }
  .diagram::before {
    content: "\2190  左右滑动查看完整示意图  \2192";
    display: block; margin-bottom: var(--s-3);
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em;
    color: var(--t-low);
  }
}
.diagram__cap {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--t-low);
}

/* ==========================================================================
   D. 案例页
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }

.case-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.case-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.case-card[hidden] { display: none; }
.case-card__fig {
  position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, var(--c-surface-3), var(--c-void));
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.case-card__fig > svg { width: 100%; height: 100%; }
.case-card__fig::after {         /* 悬浮时的青色扫过 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, var(--a-soft) 50%, transparent 62%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease-out);
}
.case-card:hover .case-card__fig::after { transform: translateX(100%); }
.case-card__badge {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  padding: 4px var(--s-3);
  background: color-mix(in srgb, var(--c-void) 78%, transparent);
  border: 1px solid var(--c-line-2); border-radius: var(--r-xs);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--a);
  backdrop-filter: blur(6px);
}
.case-card__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); flex: 1; }
.case-card__title { font-size: var(--fs-lg); }
.case-card__desc { font-size: var(--fs-sm); color: var(--t-mid); }
.case-card__metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.case-card__metrics div { display: grid; gap: 2px; }
.case-card__metrics dt {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-low);
}
.case-card__metrics dd {
  margin: 0; font-family: var(--f-display); font-size: var(--fs-md);
  font-weight: 700; color: var(--t-hi);
}
.case-card__metrics dd .u { font-size: 0.72em; color: var(--a); }
.case-card__more { display: flex; align-items: center; gap: var(--s-2); color: var(--a); font-size: var(--fs-sm); font-weight: 600; }
.case-card:hover .case-card__more { gap: var(--s-3); }

/* 案例详情弹层 */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--c-void) 74%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  width: min(100%, 880px); max-height: 86dvh; overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  transform: translateY(16px) scale(0.985);
  transition: transform var(--dur-slow) var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  border-bottom: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}
.modal__body { padding: var(--s-6); display: grid; gap: var(--s-6); }
.modal__body h4 { font-size: var(--fs-md); font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a); }
.modal__body p { max-width: var(--w-text); }
.modal__body ul { display: grid; gap: var(--s-3); }
.modal__body li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-base); color: var(--t-mid);
}
.modal__body li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 8px; height: 8px;
  border-left: 1px solid var(--a); border-bottom: 1px solid var(--a);
  transform: rotate(-45deg);
}
/* 弹层里的空态提示 */
.case-empty {
  padding: var(--s-8) var(--s-5); text-align: center;
  border: 1px dashed var(--c-line-2); border-radius: var(--r-md);
  color: var(--t-low);
}

/* ==========================================================================
   E. 关于我们
   ========================================================================== */
.timeline { position: relative; display: grid; gap: var(--s-6); padding-left: var(--s-6); }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, var(--a), var(--c-line) 22%, var(--c-line) 78%, transparent);
}
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-6) + 0px); top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--a); box-shadow: 0 0 0 4px var(--a-soft);
}
.tl-item__year {
  font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.08em; color: var(--a);
}
.tl-item__title { margin-top: var(--s-2); font-size: var(--fs-md); }
.tl-item__desc { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--t-low); max-width: 56ch; }

.cert-wall { display: grid; gap: var(--s-4); }
@media (min-width: 560px)  { .cert-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cert-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cert {
  display: grid; gap: var(--s-3); place-items: center; text-align: center;
  padding: var(--s-6) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.cert:hover { border-color: var(--c-line-3); transform: translateY(-3px); }
.cert > svg { width: 34px; height: 34px; color: var(--a); }
.cert__name { font-size: var(--fs-sm); color: var(--t-hi); font-weight: 600; }
.cert__id { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t-low); }

/* 服务承诺：数字编号的大卡 */
.pledge { display: flex; gap: var(--s-5); padding: var(--s-6); }
.pledge__n {
  font-family: var(--f-mono); font-size: var(--fs-lg); font-weight: 600;
  color: var(--a); flex: 0 0 auto;
}
.pledge__t { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.pledge__d { font-size: var(--fs-sm); color: var(--t-low); }

/* ==========================================================================
   F. 联系我们
   ========================================================================== */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.info-list { display: grid; gap: var(--s-5); }
.info-item { display: flex; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid var(--c-line); }
.info-item__icon { width: 40px; height: 40px; flex: 0 0 auto; color: var(--a); }
/* 无尺寸的 svg 会退化成 300×150 的默认尺寸，必须显式约束 */
.info-item__icon svg { width: 100%; height: 100%; }
.info-item__k {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--t-low);
}
.info-item__v { margin-top: 4px; font-size: var(--fs-md); color: var(--t-hi); }
.info-item__v a { color: var(--t-hi); }
.info-item__v a:hover { color: var(--a); }
.info-item__sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--t-low); }

/* 地图占位：用网格 + 罗盘构成，不引入第三方地图 iframe */
.map-ph {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--c-surface);
  overflow: hidden;
}
.map-ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(12rem 12rem at 34% 46%, var(--a-soft), transparent 68%);
}
.map-ph__pin {
  position: absolute; left: 34%; top: 46%; z-index: 2;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--a); box-shadow: 0 0 0 6px var(--a-soft);
  animation: pulse 2.6s var(--ease-out) infinite;
}
.map-ph__label {
  position: absolute; left: 34%; top: calc(46% + 20px); z-index: 2;
  max-width: min(58%, 300px);
  padding: 5px var(--s-3);
  background: color-mix(in srgb, var(--c-void) 80%, transparent);
  border: 1px solid var(--c-line-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--t-hi);
  backdrop-filter: blur(6px);
}
.map-ph__note {
  position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 2;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--t-low);
}

/* ==========================================================================
   G. 404
   ========================================================================== */
.err {
  min-height: 100dvh;
  display: grid; place-content: center; justify-items: center; text-align: center;
  gap: var(--s-5); padding: var(--s-6);
}
.err__code {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(4.5rem, 18vw, 12rem); line-height: 0.9;
  color: transparent;
  background: linear-gradient(100deg, var(--a) 0%, var(--t-hi) 50%, var(--a) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.err p { max-width: 44ch; color: var(--t-mid); }

/* --- 404 页 ---
   加了 header/footer 地标之后，.err 不能再独占 100dvh，否则页脚会被顶出视口。
   用 body 上的 .page-404 做作用域：两节选择器的权重 (0,2,0) 压过 .err 的 (0,1,0)，
   只靠书写顺序是不保险的。 */
.page-404 { display: flex; flex-direction: column; min-height: 100dvh; }
.page-404 .err { flex: 1; min-height: 0; }
.err__top { padding: var(--s-5) var(--s-6); }
.err__top .brand__mark { width: 30px; height: 30px; }
.err__title { font-size: var(--fs-2xl); }
.err__nav {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  justify-content: center; margin-top: var(--s-5);
}
.err__foot { padding: 0 var(--s-6) var(--s-7); text-align: center; font-size: var(--fs-sm); }