/* ============================================================
   components.css —— 通用组件：按钮 / 卡片 / 徽章 / 区块头 / 网格 / 占位图
   ============================================================ */

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* 移动端按压反馈：轻压下沉（触屏无 hover，取代被移除的默认高亮） */
.btn:active {
  transform: translateY(1px) scale(0.98);
}
/* 按钮的 display 会覆盖 UA 的 [hidden] 规则，补一条让其可被隐藏（加载更多用完即隐） */
.btn[hidden] {
  display: none;
}
.btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text-1);
  background: transparent;
}
.btn-ghost::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 0.9em;
  margin-left: 0.35rem;
  transition: transform var(--t-fast) var(--ease);
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-ghost:hover::after {
  transform: translateX(3px);
}
.btn-sm {
  padding: 0.45rem 1rem;
  font-size: var(--fs-xs);
}
.btn .btn-arrow {
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* ---------------- 区块 ---------------- */
.section {
  padding: var(--sp-12) 0;
}
/* 新闻详情页：单模块普通滚动页，顶部不再沿用整屏大留白，避免面包屑与标题之间出现"双分割线夹空白" */
.article-section {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-12);
}
.section-head {
  max-width: 680px;
  margin-bottom: var(--sp-8);
}
/* ---------------- 眉标（去方框，纯文字 mono 标签） ----------------
   约束：全站仅保留 2-3 处（Hero / 新闻 / 联系我们），其余用编号索引替代 */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.section-title {
  font-size: var(--fs-h2);
  margin-top: var(--sp-3);
}
.section-desc {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}

/* ---------------- 卡片 ---------------- */
.card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: border-color var(--t-fast) var(--ease);
}
.card-hover:hover {
  border-color: var(--primary);
}
.card-title {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.card-desc {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-deep-soft);
  color: var(--primary);
  margin-bottom: var(--sp-4);
}

/* ---------------- 徽章 / 标签（细边框 + 2px 圆角，无左缘强调条） ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.badge-blue {
  color: var(--primary);
  border-color: rgba(46, 124, 246, 0.4);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* ---------------- 网格 ---------------- */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 移动端多图：图片 PPT 横滑（仅窄屏激活为 flex 滑动，见 ≤560px 断点；宽屏维持 grid 多列） */

/* ---------------- 细分隔线 ---------------- */
.divider-glow {
  height: 1px;
  border: none;
  background: var(--hairline);
}

/* ---------------- 数据指标 ---------------- */
.metric {
  text-align: center;
}
.metric::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 auto var(--sp-3);
  background: var(--primary);
  border-radius: 0;
}
.metric-num {
  font-family: var(--font-mono);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.metric-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}

/* ---------------- 流程步骤 ---------------- */
.flow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.flow-step {
  flex: 1;
  min-width: 148px;
  text-align: center;
}
.flow-num {
  width: 38px;
  height: 38px;
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-1);
  background: var(--brand-deep-soft);
  border: none;
}
.flow-step h4 {
  font-size: var(--fs-body);
  font-weight: 600;
}
.flow-step p {
  color: var(--text-3);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}
.flow-arrow {
  flex-shrink: 0;
  color: var(--primary);
}

/* ---------------- 图片占位 / 媒体 ---------------- */
.img-ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-base-2);
  border-radius: 0;
}
.img-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 无静态默认图（2026-08-19）：后台字段图片不在 HTML 预置 src，改由 JS 按后台数据填充。
   填充前 img 无 src，浏览器会显示 alt 文本/破图占位 → 先不可见（保留占位尺寸），
   JS setAttribute('src') 后 :not([src]) 失配自动恢复，后台留空则始终不显示 */
.img-ph img:not([src]) {
  visibility: hidden;
}

/* 无图即隐藏（2026-08-19）：图片字段留空 / 文件缺失时，Img.mount 隐藏图片并级联隐藏 .img-ph/figure 容器。
   组件级无图降级（headline 正文全宽 / 单列布局）由下方规则承接 */
.ph-hide {
  display: none !important;
}
/* 首页头条：无封面时正文全宽（两列网格 → 单列） */
.feature.no-media {
  grid-template-columns: 1fr;
}
/* 新闻详情 CTA：无二维码时文字全宽 */
.wechat-cta.no-qr {
  grid-template-columns: 1fr;
}
/* 联系我们：无二维码时联系信息单列全宽 */
.grid-2.no-qr {
  grid-template-columns: 1fr;
}

/* 企业文化照片墙（首页 / 关于我们）：固定 3:2 列比例，图片裁切填充。
   后台上传的照片像素比例未必一致（如 960×640 与 900×640 混用），
   不锁定比例时各列高度按图片固有比例撑开、底部不齐；锁定后三列永远等高一屏。
   img 自身显式 aspect-ratio（而非依赖父容器百分比高度），避免容器高度由内容回退解析时失效 */
.grid.img-slide .img-ph img {
  aspect-ratio: 3 / 2;
  height: auto;
}

/* 图片色温滤镜（照片类）：降低饱和并向冷蓝微调，与深蓝主题统一
   用法：容器同时加 .img-ph--tone（徽章 / Logo 等图形素材不加） */
.img-ph--tone img {
  filter: saturate(0.92) brightness(0.98);
}
.img-ph--tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(46, 84, 155, 0.24), rgba(46, 124, 246, 0.1));
  mix-blend-mode: soft-light;
}

/* ---------------- 表单 ---------------- */
.input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-1);
  transition: border-color var(--t-fast) var(--ease);
}
.input::placeholder {
  color: var(--text-3);
}
.input:focus {
  border-color: var(--primary);
  outline: none;
}

/* ---------------- 动画工具类 ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 进场序列 stagger：容器 reveal 触发后，直接子元素依次错位浮现。
   用 animation（backwards 填充）而非 transition，入场结束后不残留 delay，不干扰子项自身的 hover 过渡；
   :where() 压低特异性，使子项自身的 opacity 规则（如 .section-index 的 0.85）在动画结束后照常生效；
   间隔 ≤60ms/步、单步 0.15s，符合 ≤150ms 动效约束；reduced-motion 下全局 animation-duration 归零，直接落终值 */
.reveal > * {
  opacity: 0;
  transform: translateY(8px);
}
.reveal:where(.is-in) > * {
  opacity: 1;
  transform: none;
  animation: reveal-stagger var(--t-base) var(--ease) backwards;
}
.reveal:where(.is-in) > *:nth-child(2) { animation-delay: 60ms; }
.reveal:where(.is-in) > *:nth-child(3) { animation-delay: 120ms; }
.reveal:where(.is-in) > *:nth-child(4) { animation-delay: 180ms; }
.reveal:where(.is-in) > *:nth-child(5) { animation-delay: 240ms; }
.reveal:where(.is-in) > *:nth-child(n+6) { animation-delay: 300ms; }
@keyframes reveal-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* hover 光斑跟随：卡片内鼠标位置一颗微弱星点光晕（--mx/--my 由 JS 写入，0.09 透明度克制不抢内容） */
.adv-item,
.matrix-cell,
.strip-item,
.eco-card {
  overflow: hidden;
}
.adv-item::after,
.matrix-cell::after,
.strip-item::after,
.eco-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(122, 170, 255, 0.09), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  pointer-events: none;
}
.adv-item:hover::after,
.matrix-cell:hover::after,
.strip-item:hover::after,
.eco-card:hover::after {
  opacity: 1;
}

/* ============================================================
   编辑式排版（去卡片化）—— 参考 trae.cn / deepseek.com
   原则：少"框"多"线"，用大号幽灵编号 + 细分隔线 + 留白构成层级，
   替代「一个方格一张卡」的堆叠感。
   ============================================================ */

/* 区块头承载大号幽灵编号（水印式章节索引） */
.section-head {
  position: relative;
}
.section-index {
  position: absolute;
  top: -0.55rem;
  right: 0;
  z-index: -1;
  font-family: var(--font-mono);
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(159, 178, 212, 0.15);
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

/* 编号行列表：编号 + 标题 + 描述，细分隔线分隔，无外框（DeepSeek 式索引） */
.num-list {
  border-top: 1px solid var(--hairline);
}
.num-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast) var(--ease);
}
.num-item--plain {
  grid-template-columns: 3.5rem minmax(0, 1fr);
}
.num-item:hover {
  background: rgba(159, 178, 212, 0.04);
}
.num-item .num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.num-item h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.num-item p {
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  max-width: 560px;
}
.num-item .arrow {
  color: var(--text-3);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.num-item:hover .arrow {
  color: var(--primary);
  transform: translateX(3px);
}

/* 核心优势网格：4 列 × 2 行（技术/资质/研发/专业/案例/省心/放心/价格 8 项），
   几何点 + 标题 + 一句描述（压缩模块高度，增强吸附感）；≤768px 降 2 列 */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.adv-item {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast) var(--ease);
}
.adv-item:hover {
  background: rgba(159, 178, 212, 0.04);
}
.adv-dot {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  width: 7px;
  height: 7px;
  background: var(--primary);
  transform: rotate(45deg);
  pointer-events: none;
}
.adv-item:hover .adv-dot {
  background: #fff;
}
.adv-item h3 {
  font-size: var(--fs-h3);
}
.adv-item p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 26em;
}

/* 子页面页头：H1 略大于章节标题 */
.page-head .section-title {
  font-size: var(--fs-h1);
}
/* 页头紧凑：收紧页头与首个内容区块的间距（默认 10rem 偏远） */
.page-head--tight {
  padding-bottom: var(--sp-8);
}

/* 新闻列表项（news.html 子页面） */
.news-body {
  min-width: 0;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.news-meta time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.load-more-wrap {
  margin-top: var(--sp-6);
  text-align: center;
}

/* ---------------- 新闻详情页（正文在公众号，本站仅引言 ≤200 字） ---------------- */
/* 面包屑：顶部常驻返回入口（首页 / 新闻资讯 / 标题） */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0 var(--sp-5);
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--hairline);
}
.crumb a {
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}
.crumb a:hover {
  color: var(--primary);
}
.crumb-sep {
  color: var(--text-3);
}
.crumb [aria-current="page"] {
  color: var(--text-2);
}
.article-head {
  padding-top: var(--sp-5);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.article-meta time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.article-title {
  font-size: var(--fs-h1);
  margin-top: var(--sp-3);
  max-width: 720px;
}
.article-intro {
  margin-top: var(--sp-4);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-1);
  max-width: 660px;
}
/* 编辑杂志风首字下沉（Swiss-Editorial 标志性排版元素） */
.article-intro::first-letter {
  font-family: var(--font-display);
  font-size: 2.4em;
  line-height: 1;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--primary);
}
/* 公众号引导区：二维码 + 说明 + 可选"前往阅读"按钮（毛玻璃：背景渐变透出磨砂质感） */
.wechat-cta {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
/* 不支持 backdrop-filter 时回退实色面板 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wechat-cta { background: var(--bg-panel); }
}
.wechat-cta .qr {
  width: 120px;
  height: 120px;
}
.wechat-cta h3 {
  font-size: var(--fs-h3);
}
.wechat-cta p {
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  max-width: 460px;
}
.wechat-cta .btn {
  margin-top: var(--sp-3);
}
/* 更多资讯 */
.more-news {
  margin-top: var(--sp-8);
}
/* 文章不存在（无效 id） */
.article-missing {
  padding: var(--sp-8) 0;
}
.article-missing h1 {
  font-size: var(--fs-h1);
}
.article-missing p {
  margin-top: var(--sp-2);
  color: var(--text-2);
}
.article-missing .btn {
  margin-top: var(--sp-4);
}

/* ---------------- 资源中心（工具清单 · 搜索 + 标签过滤） ---------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* Swiss 下划线式搜索框：无底、细下边框，聚焦时变强调色 */
.search-input {
  width: 100%;
  max-width: 340px;
  padding: var(--sp-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.15s ease;
}
.search-input:focus {
  border-bottom-color: var(--primary);
}
.search-input::placeholder {
  color: var(--text-3);
}
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.tag-btn {
  padding: 0.2rem 0.7rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tag-btn:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.tag-btn.active {
  color: var(--bg-deep);
  background: var(--primary);
  border-color: var(--primary);
}
/* 工具卡片网格 */
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
/* 增量加载按钮：毛玻璃胶囊 + hover 星光，与工具卡同语言（卡片多时控制同时渲染的毛玻璃数量） */
.loadmore {
  display: block;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  color: #CFE0F5;
  cursor: pointer;
  border: 1px solid rgba(175, 193, 224, 0.3);
  border-radius: var(--radius-full);
  background: rgba(28, 39, 64, 0.4);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .loadmore {
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
  }
}
.loadmore:hover {
  color: #BBD7FF;
  border-color: rgba(140, 180, 255, 0.6);
  box-shadow: 0 0 16px rgba(120, 170, 255, 0.25);
}
.loadmore[hidden] {
  display: none;
}
/* 页码分页器：列表条目总数超过阈值时由脚本自动启用（替代"加载更多"），与 .loadmore 同语言。
   不换行：宽度按内容自适应（max-content），未溢出时居中；超宽时单行横向滚动，任何窗口尺寸都不换行错位 */
.pager {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  width: max-content;
  max-width: 100%;
  margin: var(--sp-4) auto 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pager::-webkit-scrollbar {
  display: none;
}
.pager .pager-btn,
.pager .pager-num {
  min-width: 2.4em;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #CFE0F5;
  cursor: pointer;
  border: 1px solid rgba(175, 193, 224, 0.3);
  border-radius: var(--radius-full);
  background: rgba(28, 39, 64, 0.4);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pager .pager-btn:hover:not(:disabled),
.pager .pager-num:hover:not(.active) {
  color: #BBD7FF;
  border-color: rgba(140, 180, 255, 0.6);
  box-shadow: 0 0 16px rgba(120, 170, 255, 0.25);
}
.pager .pager-num.active {
  color: #0A0F1E;
  background: linear-gradient(135deg, #9DB8FF, #7A9BFF);
  border-color: transparent;
  cursor: default;
  box-shadow: 0 0 14px rgba(122, 155, 255, 0.35);
}
.pager .pager-btn:disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none;
}
.pager .pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 2.4em;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(207, 224, 245, 0.5);
}
.pager .pager-ellipsis svg {
  flex: none;
}
/* 窄屏：收紧分页器间距与按钮尺寸，常规页数（7~9 个元素）可直接放下；极宽内容由 overflow 单行滚动兜底 */
@media (max-width: 480px) {
  .pager {
    gap: var(--sp-1);
  }
  .pager .pager-btn,
  .pager .pager-num,
  .pager .pager-ellipsis {
    min-width: 1.9em;
    padding: var(--sp-1);
  }
}
/* 工具卡（vs-item 同款：半透明深底 + 细边框 + hover 转亮；观感不依赖 backdrop-filter，
   背景星星层静止不动时依然有层次；blur(6px) 仅作可用环境下的轻润色） */
.res-card {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
  background: rgba(15, 24, 46, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.res-card:hover {
  border-color: rgba(122, 170, 255, 0.45);
  background: rgba(15, 24, 46, 0.72);
}
/* 无外链的资源卡（未填 url 的纯信息卡片）：去掉可点击 hover 提亮，光标恢复默认 */
.res-card--plain,
.res-card--plain:hover {
  border-color: var(--hairline);
  background: rgba(15, 24, 46, 0.55);
  cursor: default;
}
.res-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ext-arrow {
  font-size: var(--fs-md);
  color: var(--text-3);
  transition: color 0.15s ease, transform 0.15s ease;
}
.res-card:hover .ext-arrow {
  color: var(--primary);
  transform: translate(2px, -2px);
}
.res-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
  color: #EAF2FF;
  text-shadow: 0 0 10px rgba(122, 170, 255, 0.35); /* vs-item 同款：标题微光晕，星空下如星星点亮 */
}
.res-card h3 .chip {
  vertical-align: 0.2em;
}
.res-card > p {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.res-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* 去「框套框」：卡片内分类与标签只留一重卡片外框，
   内部 tag/chip 去边框，层次靠字体与颜色区分（仅作用于工具卡内，不影响新闻页 .tag） */
.res-card .tag {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--primary);
  background: transparent;
}
.res-card .chip {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
  background: transparent;
}
.res-card .chip::before {
  content: "#";
  margin-right: 0.25em;
  color: var(--text-3);
  opacity: 0.65;
}
/* h3 内备注（如「v2.x 稳定版」）不是标签，不加 # 前缀 */
.res-card h3 .chip::before {
  content: none;
}
.res-card h3 .chip {
  margin-left: 0.35em;
}
/* 通用 chip（工具卡外的独立标签场景保留小框样式） */
.chip {
  padding: 0.1rem 0.5rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.res-empty {
  margin-top: var(--sp-6);
  color: var(--text-3);
  text-align: center;
}
/* 外链确认弹窗：遮罩压暗星空 + 深底毛玻璃卡片（锐角，与 res-card 同语言） */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 1);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(6, 10, 20, 0.62);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.modal-overlay[hidden] {
  display: none;
}
.modal-dialog {
  position: relative; /* 供右上角四角星关闭按钮定位 */
  width: 100%;
  max-width: 420px;
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-dialog {
    background: rgba(20, 29, 48, 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}
.modal-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.modal-title {
  margin-top: var(--sp-1);
  font-size: var(--fs-h3);
}
.modal-desc {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
/* 目标网址：字段式排布——URL 眉标（蓝）+ 等宽亮字地址左对齐（Swiss/编辑风），hairline 上边框界定信息区 */
.modal-url {
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-1);
  text-align: left;
  word-break: break-all;
  border-top: 1px solid var(--hairline);
}
.modal-url::before {
  content: "URL";
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--primary);
}
/* 入场：遮罩淡入 + 对话框轻升（≤0.4s 入场上限；reduced-motion 由全局规则压停） */
.modal-overlay:not([hidden]) {
  animation: modal-fade var(--t-fast) var(--ease);
}
.modal-dialog {
  animation: modal-rise 0.25s var(--ease);
}
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* 四角星图标：品牌星空元素（✦ 形状，与 bg-stars 近层星同构），用于弹层关闭按钮 */
.icon-star4 {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
/* 弹层右上角四角星关闭按钮（替代「取消」文字按钮；配合点击遮罩 / Esc 关闭） */
.modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.modal-close:hover {
  color: var(--primary);
  border-color: var(--border-strong);
}
.modal-close .icon-star4 {
  width: 12px;
  height: 12px;
  transition: transform var(--t-fast) var(--ease);
}
.modal-close:hover .icon-star4 {
  transform: rotate(90deg) scale(1.15);
}
body.modal-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .res-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .res-grid {
    grid-template-columns: 1fr;
  }
  .search-input {
    max-width: none;
  }
}

/* ---------------- 合作伙伴页 ---------------- */
/* 生态伙伴四卡：纯文字编辑风网格（编号 + 大号字标 + 描述，hairline 交叉线切分） */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.eco-card {
  position: relative;
  padding: var(--sp-6);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.eco-card:hover {
  background: rgba(159, 178, 212, 0.04);
}
.eco-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
}
.eco-card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}
@media (max-width: 620px) {
  .eco-grid {
    grid-template-columns: 1fr;
  }
}
/* 合作案例时间线：hairline 左线 + 强调色节点 + 编辑风编号 */
.timeline {
  border-left: 1px solid var(--hairline);
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-6);
}
.tl-item {
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-5));
  top: 0.42em;
  width: 7px;
  height: 7px;
  background: var(--primary);
}
.tl-no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0.12em;
}
.tl-item h3 {
  margin-top: var(--sp-1);
  font-size: var(--fs-h3);
}
.tl-item p {
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 600px;
}
/* 部分客户卡（PARTNERS.clients 数据驱动） */
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.client-card {
  padding: var(--sp-4);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.client-card .img-ph {
  height: 120px;
}
/* Logo 不裁切：按原尺寸居中显示，上限 80% 防溢出（cover 会在宽容器下横向裁切） */
.client-card .img-ph img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.client-card p {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}
@media (max-width: 620px) {
  .client-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- 关于我们页 ---------------- */
.about-lead {
  font-size: 1.15rem;
  line-height: 2;
  color: var(--text-1);
  max-width: 680px;
}

/* 愿景使命·星途宣言：全宽首屏沉浸星空（无边框无底色——星空全部由画布绘制，随滚动整体渐隐，
   与全局固定星空无缝过渡）；内容居中，Vision/Mission 等权两栏（不分先后、无编号） */
.vision-space {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* 底部边缘虚化：星野在区块底缘渐隐，与下方全局星空融在一起（滚动时配合 JS 整体透明度渐隐） */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  transition: opacity 0.12s linear;
}
.vs-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--sp-8)) var(--sp-6) var(--sp-12);
  max-width: 1000px;
}
.vs-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(46, 124, 246, 0.6);
}
.vs-title {
  margin-top: var(--sp-4);
  max-width: 16em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.4;
}
/* 标题两行节奏：首行全亮主句，次行弱化副句，宣言更有层次 */
.vs-title__l1,
.vs-title__l2 {
  display: block;
  color: #EAF2FF;
  text-shadow: 0 0 18px rgba(122, 170, 255, 0.55); /* 星体发光文字，与历程区呼应 */
}
.vs-title__l2 {
  color: rgba(210, 226, 250, 0.82);
  text-shadow: 0 0 14px rgba(122, 170, 255, 0.32);
}
.vs-sub {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vs-grid {
  margin-top: var(--sp-8);
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.vs-item {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--hairline);
  background: rgba(15, 24, 46, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.vs-item:hover {
  border-color: rgba(122, 170, 255, 0.45);
  background: rgba(15, 24, 46, 0.72);
}
.vs-item h3 {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: #EAF2FF;
  text-shadow: 0 0 10px rgba(122, 170, 255, 0.35);
}
.vs-item__en {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vs-item p {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* 发展历程星空时间线：无边框无底色硬边——深空底色画入画布，画布上下 + 左右双轴 mask
   交集淡出，四个方向的星野都与页面全局星空虚化过渡 */
.milestone-space {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.ms-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* 上下（20%）+ 左右（14%）双轴渐隐取交集：四方向星野柔和融入全局星空 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.ms-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ms-node {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: auto;
}
.ms-node__yr {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #EAF2FF;
  text-shadow: 0 0 16px rgba(122, 170, 255, 0.5); /* 星体发光文字 */
  transition: color var(--t-fast) var(--ease);
}
.ms-node__title {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(10, 15, 30, 0.9);
}
.ms-node:hover,
.ms-node:focus-within {
  z-index: 20; /* 节点 transform 会创建独立 stacking context，必须提升节点自身层级，浮卡才能盖过相邻节点文字 */
}
.ms-node:hover .ms-node__yr {
  color: var(--primary);
}
/* 描述浮卡：hover / tap 显示 desc（desc 为数据预留字段），按节点位置自动选择上下/贴边方向 */
.ms-node::after {
  content: attr(data-desc);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 6;
  min-width: 230px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--bg-panel); /* 实底面板色：完全盖住相邻节点文字，小窗口下不交织 */
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(5, 10, 25, 0.45);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
  white-space: normal;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.ms-node--up::after {
  top: auto;
  bottom: calc(100% + 10px);
}
.ms-node--l::after {
  left: 0;
  transform: none;
}
.ms-node--r::after {
  left: auto;
  right: 0;
  transform: none;
}
.ms-node:hover::after,
.ms-node:focus-within::after {
  opacity: 1;
}
.ms-node:not([data-desc])::after {
  display: none; /* 无 desc 的节点不渲染空浮卡 */
}
.culture-note {
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
  max-width: 760px;
}
@media (max-width: 720px) {
  .vs-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .milestone-space {
    min-height: 300px;
  }
  .ms-node__yr {
    font-size: 1.15rem;
  }
  .ms-node__title {
    max-width: 84px; /* 窄屏节点横向间距小：限宽 + 允许换行，标题不溢出到相邻节点 */
    white-space: normal;
    line-height: 1.35;
  }
}

/* 矩阵网格：仅用分隔线切分单元格，无外框底色（能力矩阵 / 数据指标） */
.matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.matrix-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.matrix-cell {
  position: relative;
  padding: var(--sp-6);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.matrix-cell:hover {
  background: rgba(159, 178, 212, 0.04);
}
/* 边缘刻度标尺：右上角一排迷你正多边形刻度（同形×3，错峰慢速自转），与 hairline 网格融为一体；
   默认浅描边，hover 整组转亮变色并加速自转 */
.geo-scale {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  gap: 10px;
}
.geo-tick {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  opacity: 0.35;
  animation: geo-tick-spin 18s linear infinite;
  animation-delay: 0s;
  transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.geo-tick:nth-child(2) {
  animation-delay: -6s;
}
.geo-tick:nth-child(3) {
  animation-delay: -12s;
}
.matrix-cell:hover .geo-tick {
  color: var(--primary);
  opacity: 1;
  animation-duration: 6s;
}
@keyframes geo-tick-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 条带：无框徽章 / Logo 行，分隔线切分（认证生态 / 合作伙伴） */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.strip-item:hover {
  background: rgba(159, 178, 212, 0.04);
}
.strip-item .img-ph {
  width: 100%;
  max-width: 176px;
  border: none;
  background: transparent;
  border-radius: 0;
}
.strip-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--text-2);
  letter-spacing: 0.04em;
}

/* 资质荣誉·整合海报位：单张证书海报大图（后台「关于我们」certPoster 维护，美工出图；点击放大查看）。
   卡片为半透明毛玻璃，图片 contain 留白处透出模糊星空；不支持 backdrop-filter 回退近似实底 */
.cert-poster {
  cursor: zoom-in;
  background: rgba(20, 29, 48, 0.55);
  border: 1px solid var(--hairline);
  padding: var(--sp-3);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cert-poster {
    background: rgba(20, 29, 48, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}
.cert-poster:hover,
.cert-poster:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(140, 180, 255, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  outline: none;
}
.cert-poster .img-ph {
  border: none;
  background: transparent;
}
.cert-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: transparent; /* 不再纯白：海报留白处透出毛玻璃与星空，避免白色大块扎眼 */
}
/* 证书大图弹层：遮罩 + 白底大图 + 右上角关闭（复用 body.modal-open 锁滚动） */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 2);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(5, 9, 18, 0.86);
}
.lightbox[hidden] {
  display: none;
}
.lightbox:not([hidden]) {
  animation: modal-fade var(--t-fast) var(--ease);
}
.lightbox-figure {
  margin: 0;
  max-width: min(1000px, 92vw);
  animation: modal-rise 0.25s var(--ease);
}
.lightbox-figure img {
  display: block;
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08); /* 竖版证书留白处淡白，与深色遮罩融合而非纯白 */
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.lightbox-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text-1);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lightbox-close .icon-star4 {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast) var(--ease);
}
.lightbox-close:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.lightbox-close:hover .icon-star4 {
  transform: rotate(90deg) scale(1.15);
}

/* 头条特写：首页首篇新闻大图 + 正文，无卡片框 */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--hairline);
}
.feature .img-ph {
  border: none;
  border-radius: 0;
}
.feature-body h3 {
  font-size: var(--fs-h2);
  margin-top: var(--sp-3);
}
.feature-body p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}
.feature-body .btn {
  margin-top: var(--sp-4);
}

/* 无框流程：去掉外框容器，编号荧光条串联 + 分隔线切分步骤 */
.flow-editorial {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.flow-editorial .flow-step {
  flex: none;
  min-width: 0;
  text-align: left;
  padding: var(--sp-6);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  /* 入场：容器 reveal 触发后各步依次浮现（交错 ≤60ms/步，单步动效 0.15s 符合 ≤150ms 约束） */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-fast);
}
.flow-editorial.is-in .flow-step {
  opacity: 1;
  transform: none;
}
.flow-editorial .flow-step:nth-child(2) { transition-delay: 0.06s; }
.flow-editorial .flow-step:nth-child(3) { transition-delay: 0.12s; }
.flow-editorial .flow-step:nth-child(4) { transition-delay: 0.18s; }
.flow-editorial .flow-step:nth-child(5) { transition-delay: 0.24s; }
.flow-editorial .flow-step:hover {
  background: rgba(159, 178, 212, 0.04);
}
/* 荧光笔串联：编号块淡蓝荧光底铺满格宽，伪元素向左延伸盖住相邻格缝隙（首格除外），
   五个编号横向连成一条荧光描线；等宽字体 + 固定行高保证水平高度一致 */
.flow-editorial .flow-num {
  position: relative;
  width: auto;
  margin: 0 0 var(--sp-3) calc(var(--sp-6) * -1);
  padding: 0.35em var(--sp-6);
  display: block;
  text-align: left;
  border: none;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  background: rgba(46, 124, 246, 0.12);
  color: var(--primary-hover);
}
.flow-editorial .flow-num::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: calc(var(--sp-6) + 1px);
  background: inherit;
}
.flow-editorial .flow-step:first-child .flow-num::before {
  display: none;
}

/* 联系我们：去卡片化，左右分栏（无横向分割线） */
.contact-split {
  padding-top: var(--sp-8);
}
.contact-split .contact-qr {
  text-align: center;
  padding-left: var(--sp-8);
  border-left: 1px solid var(--hairline);
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .matrix-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature {
    grid-template-columns: 1fr;
  }
  .flow-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 荧光条断行：窄屏换行后无相邻右格，取消跨格衔接，编号各自独立成块 */
  .flow-editorial .flow-num::before {
    display: none;
  }
  .adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .grid-3,
  .grid-4,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  /* 多图图墙 → 图片 PPT 横滑：单张 82% 宽，右缘露出下一张提示可滑。
     不设内部 scroll-snap（原 x mandatory）：首页 html 已有纵向整屏吸附 y mandatory，
     内外同屏嵌套吸附在移动端会互相争夺触摸/滚动仲裁，导致整页卡顿、吸附区点击失效；
     改为纯 overflow 横滑 + touch-action: pan-x（横向手势由本容器接管，纵向翻页零延迟） */
  .img-slide {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--sp-5) * -1); /* 出血到容器边缘，更像翻页画册 */
    padding: 0 var(--sp-5);
  }
  .img-slide::-webkit-scrollbar {
    display: none;
  }
  .img-slide > * {
    flex: 0 0 82%;
  }
  .matrix,
  .matrix-4,
  .strip,
  .flow-editorial,
  .adv-grid {
    grid-template-columns: 1fr;
  }
  .num-item,
  .num-item--plain {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .num-item .arrow {
    display: none;
  }
  .section-index {
    display: none;
  }
  .geo-scale {
    top: 10px;
    right: 12px;
    gap: 8px;
  }
  .geo-tick {
    width: 12px;
    height: 12px;
  }
  .contact-split .contact-qr {
    border-left: none;
    padding-left: 0;
    padding-top: var(--sp-6);
  }
  .flow-arrow {
    display: none;
  }
  .wechat-cta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ============================================================
   草稿预览差异高亮（仅 /test 预览中带 data-preview-diff 的组件生效）
   后台草稿与线上存在差异的行渲染时带此标记；正式站数据无该标记 → 本段样式不生效。
   ============================================================ */
[data-preview-diff] {
  position: relative;
  outline: 2px solid #c9a24b;
  outline-offset: 3px;
}
[data-preview-diff] .preview-diff {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 6;
  background: #c9a24b;
  color: #241b06;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ============================================================
   下线占位页（SITE.nav 行 show=false 的页面被历史记录 / 直达 URL 访问时展示）
   深色背景居中卡片：信息图标 + 标题 + 说明 + 返回首页按钮
   ============================================================ */
.page-offline {
  /* header + 占位 = 恰好一屏：占位区占满可视区，footer 需下滑才能看到 */
  min-height: calc(100vh - var(--header-h, 68px));
  min-height: calc(100svh - var(--header-h, 68px));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-4);
}
/* 四角星点缀：白色半透明，轻微缩放脉动；opacity/位置/大小由内联样式控制 */
.page-offline .po-star {
  position: absolute;
  color: #fff;
  pointer-events: none;
  animation: poTwinkle 3.8s ease-in-out infinite;
}
@keyframes poTwinkle {
  0%, 100% { transform: scale(.9) rotate(-6deg); }
  50% { transform: scale(1.12) rotate(6deg); }
}
.page-offline .po-icon {
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-2);
  color: rgba(255, 255, 255, .92);
}
.page-offline .po-title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-h2);
  color: var(--text-1);
  margin: 0;
}
.page-offline .po-desc {
  position: relative;
  z-index: 1;
  color: var(--text-3);
  max-width: 34rem;
  margin: 0;
}
.page-offline .btn {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-4);
}