.page-home {
  display: block;
  color: var(--c-body);
  --home-radius: 14px;
  --home-line: rgba(233, 238, 250, 0.10);
  --home-cyan-soft: rgba(56, 225, 210, 0.45);
}

/* ============ 首屏 ============ */
.page-home .home-hero {
  position: relative;
  padding: 30px 0 44px;
  isolation: isolate;
  overflow: hidden;
}

.page-home .home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  z-index: -1;
  pointer-events: none;
}

.page-home .home-hero-grid {
  display: grid;
  gap: 34px;
}

.page-home .home-hero-main .update-line {
  margin: 0 0 22px;
}

.page-home .home-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--c-silver);
}

.page-home .home-lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-body);
}

/* 入口总览列表 */
.page-home .entry-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}

.page-home .entry-item {
  border-bottom: 1px solid var(--home-line);
}

.page-home .entry-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 12px;
  padding: 15px 6px;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: background-color 0.2s var(--ease);
}

.page-home .entry-link:hover,
.page-home .entry-link:focus-visible {
  background-color: var(--c-glass);
}

.page-home .entry-link:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: -2px;
}

.page-home .entry-no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-cyan);
}

.page-home .entry-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .entry-desc {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .entry-go {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-dust);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-home .entry-link:hover .entry-go,
.page-home .entry-link:focus-visible .entry-go {
  color: var(--c-cyan);
  transform: translateX(3px);
}

/* 右侧快捷面板 */
.page-home .home-side {
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: var(--c-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
}

.page-home .home-side-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--home-line);
}

.page-home .home-side-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-side-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .home-side-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .home-side-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.page-home .home-side-actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.page-home .home-side-status {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 11px;
}

.page-home .panel-status-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.page-home .panel-status-row .status-dot {
  width: 6px;
  height: 6px;
}

.page-home .panel-status-key {
  color: var(--c-dust);
}

.page-home .panel-status-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-silver);
  white-space: nowrap;
}

/* ============ 类别索引 ============ */
.page-home .home-index {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-index-head {
  display: grid;
  gap: 26px;
}

.page-home .home-index-figure {
  margin: 0;
}

.page-home .home-index-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
}

.page-home .home-index-grid {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.page-home .home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: var(--c-panel);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-home .home-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-cyan);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.page-home .home-card:hover,
.page-home .home-card:focus-within {
  border-color: var(--home-cyan-soft);
}

.page-home .home-card:hover::before,
.page-home .home-card:focus-within::before {
  opacity: 1;
}

.page-home .home-card-no {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--home-cyan-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-home .home-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .home-card-title a {
  color: inherit;
  text-decoration: none;
}

.page-home .home-card-title a:hover,
.page-home .home-card-title a:focus-visible {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-home .home-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-body);
}

.page-home .home-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.page-home .home-card .expand-group {
  margin-top: 4px;
  border-top: 1px solid var(--home-line);
  padding-top: 10px;
}

.page-home .home-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .home-sub li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .home-sub li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-cyan);
  opacity: 0.7;
}

/* ============ 服务与合作 ============ */
.page-home .home-services {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-svc-grid {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.page-home .home-svc {
  padding: 22px 20px;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
  background: linear-gradient(150deg, rgba(76, 141, 255, 0.10), rgba(6, 10, 26, 0) 62%);
}

.page-home .home-svc h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-svc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

.page-home .home-stats {
  display: grid;
  gap: 1px;
  margin-top: 32px;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-line);
}

.page-home .home-stat {
  background: var(--c-void);
  padding: 20px 6px;
}

.page-home .home-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-gold);
}

.page-home .home-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-dust);
}

/* ============ 变更时间轴 ============ */
.page-home .home-timeline {
  position: relative;
  padding-block: 52px;
  overflow: hidden;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-tl-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.page-home .home-tl-inner {
  position: relative;
  z-index: 1;
}

.page-home .home-timeline .filter-bar {
  margin-top: 26px;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .home-filter-status {
  align-self: center;
  font-size: 12px;
  color: var(--c-dust);
  letter-spacing: 0.06em;
}

.page-home .home-changes {
  list-style: none;
  margin: 28px 0 0 4px;
  padding: 0;
  border-left: 1px solid var(--home-line);
}

.page-home .home-changes .timeline-item {
  position: relative;
  padding: 0 0 26px 26px;
}

.page-home .home-changes .timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(243, 196, 106, 0.14);
}

.page-home .home-changes .timeline-item:last-child {
  padding-bottom: 0;
}

.page-home .home-changes .timeline-date {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
}

.page-home .home-changes h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-changes p {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

/* ============ 运营节奏 ============ */
.page-home .home-upkeep {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-upkeep-inner {
  border-left: 2px solid var(--c-cyan);
  padding-left: 20px;
}

.page-home .home-upkeep .prose p {
  max-width: 66ch;
}

.page-home .home-data {
  margin-top: 30px;
  border-top: 1px solid var(--home-line);
}

.page-home .home-data .data-row {
  border-bottom: 1px solid var(--home-line);
}

.page-home .home-data .data-key {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
}

.page-home .home-data .data-value {
  font-size: 14px;
  color: var(--c-body);
}

/* ============ 从这里继续 ============ */
.page-home .home-next {
  padding-block: 52px 64px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-next-grid {
  margin-top: 30px;
}

.page-home .home-next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
  background: var(--c-indigo);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-home .home-next-card:hover,
.page-home .home-next-card:focus-visible {
  border-color: var(--home-cyan-soft);
  background: var(--c-panel);
}

.page-home .home-next-card:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

.page-home .home-next-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-blue);
}

.page-home .home-next-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-next-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-body);
}

.page-home .home-next-go {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-cyan);
}

/* ============ 响应式 ============ */
@media (min-width: 640px) {
  .page-home .home-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-stat {
    padding: 22px 18px;
  }
}

@media (min-width: 900px) {
  .page-home .home-hero {
    padding: 40px 0 56px;
  }

  .page-home .home-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(288px, 1fr);
    gap: 44px;
    align-items: start;
  }

  .page-home .home-hero h1 {
    font-size: 46px;
  }

  .page-home .home-index {
    padding-block: 64px;
  }

  .page-home .home-index-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 44px;
  }

  .page-home .home-services,
  .page-home .home-timeline,
  .page-home .home-upkeep,
  .page-home .home-next {
    padding-block: 64px;
  }

  .page-home .home-next {
    padding-bottom: 76px;
  }

  .page-home .home-upkeep-inner {
    padding-left: 34px;
  }

  .page-home .home-data .data-row {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 1120px) {
  .page-home .home-hero h1 {
    font-size: 56px;
  }

  .page-home .home-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-card,
  .page-home .home-card::before,
  .page-home .entry-link,
  .page-home .entry-go,
  .page-home .home-next-card {
    transition: none;
  }

  .page-home .entry-link:hover .entry-go {
    transform: none;
  }
}
<<<END>>>

等等——我得检查一下有没有写错字。在 `.home-next-card` 的第一条里，我写了“卡在某一�步”——这个乱码得修掉。

而且我还用了 `.home-hero-main .update-line` 和 `.home-hero-main .eyebrow`，这些是共享类，但我在里面给它们加了外边距——这样作用域限定了是可以的。

还有一个问题：我用了 `.home-hero-main .update-line { margin: 0 0 22px; }`——但是 `.update-line` 在 site_css 里可能已经有外间距了。被覆盖也没关系。

再确认下 `.status-dot`——它是共享类，我在 `.page-home .panel-status-row .status-dot` 里直接给了尺寸，优先级是够的。

好，现在输出修好后的完整版本。把“卡在某一�步”改成“卡在某一步”。
<main id="main-content" class="page-home">

  <section class="home-hero" aria-labelledby="hero-title">
    <img class="home-hero-bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深空靛蓝底色上交错的轨道线与坐标网格，几个亮点标出索引位置">
    <div class="home-hero-grid">

      <div class="home-hero-main">
        <p class="update-line"><span class="update-stamp">第 1 季度</span>新银河内容目录专区2026 已更新至 3 月</p>
        <p class="eyebrow">新银河 · 首页</p>
        <h1 id="hero-title">入口在第一屏，改动也写清楚</h1>
        <p class="lede home-lede">第一次来的人，顺着左边那一列编号往下点就行；隔一阵回来的，先看右边固定放着的帮助文档和注册通道，再翻这一季改了什么。新银河把类别、文档与更新记录收进同一个入口，也为品牌与机构把同样一套入口搭起来。</p>

        <ol class="entry-list">
          <li class="entry-item">
            <a class="entry-link" href="/services/">
              <span class="entry-no">01</span>
              <span class="entry-text">
                <span class="entry-name">类别索引</span>
                <span class="entry-desc">26 个大类、340 余条细目按编号排开，粗看一遍大约十分钟，之后直接按号找。</span>
              </span>
              <span class="entry-go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="entry-item">
            <a class="entry-link" href="/knowledge/">
              <span class="entry-no">02</span>
              <span class="entry-text">
                <span class="entry-name">帮助文档</span>
                <span class="entry-desc">注册、检索、栏目订阅、纠错提交都拆成可照做的步骤，操作卡住随时回来看。</span>
              </span>
              <span class="entry-go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="entry-item">
            <a class="entry-link" href="/services/">
              <span class="entry-no">03</span>
              <span class="entry-text">
                <span class="entry-name">注册通道</span>
                <span class="entry-desc">入口和流程说明放在一起，第一次填资料不用在两个页面之间来回跳。</span>
              </span>
              <span class="entry-go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="entry-item">
            <a class="entry-link" href="/notes/">
              <span class="entry-no">04</span>
              <span class="entry-text">
                <span class="entry-name">变更记录</span>
                <span class="entry-desc">栏目调整、目录增补、页面迁移逐条列出，回访时比一比就知道动了哪里。</span>
              </span>
              <span class="entry-go" aria-hidden="true">→</span>
            </a>
          </li>
        </ol>
      </div>

      <aside class="home-side" aria-label="快捷入口与当前状态">
        <div class="home-side-media">
          <img src="{zhanqunpic:h:640w:640}" width="640" height="640" alt="暗色屏幕上的一片青色光晕，边缘带细网格纹理">
        </div>
        <h2 class="home-side-title">固定在这里的两件事</h2>
        <p class="home-side-note">帮助文档与注册通道不随页面往下走，进站就能点到。</p>
        <div class="home-side-actions">
          <a class="btn btn--primary" href="/knowledge/">打开帮助文档</a>
          <a class="btn btn--ghost" href="/services/">进入注册通道</a>
        </div>
        <ul class="home-side-status">
          <li class="panel-status-row"><span class="status-dot" aria-hidden="true"></span><span class="panel-status-key">帮助文档</span><span class="panel-status-value">260 篇指引</span></li>
          <li class="panel-status-row"><span class="status-dot" aria-hidden="true"></span><span class="panel-status-key">变更说明</span><span class="panel-status-value">按季度汇总</span></li>
          <li class="panel-status-row"><span class="status-dot" aria-hidden="true"></span><span class="panel-status-key">服务范围</span><span class="panel-status-value">31 个省级行政区</span></li>
        </ul>
      </aside>

    </div>
  </section>

  <section class="section home-index" id="categories" aria-labelledby="index-title">
    <div class="home-index-head">
      <div>
        <p class="eyebrow">类别索引 · 26 个大类</p>
        <h2 class="section-title" id="index-title">想找的东西，基本都排在这一列里</h2>
        <p class="lede measure">每一类都标了适合谁看、多长时间有回音，先看标签再往下点，比逐页翻快得多。索引每屏铺 8 到 12 条，浏览时不会一口气堆满整屏。</p>
      </div>
      <figure class="home-index-figure">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="编号刻度与星轨交叉的抽象索引图形，画面中没有人物与文字">
      </figure>
    </div>

    <div class="home-index-grid">

      <article class="home-card" data-reveal>
        <p class="home-card-no">01</p>
        <h3 class="home-card-title"><a href="/services/">目录专区</a></h3>
        <p class="home-card-desc">全年新增与调整的条目都归在这里，第一次来也能顺着编号往下点。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">首次访问</span><span class="tag tag--gold">打开即用</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-01" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-01" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>按月份排列的年度新增条目</li>
                <li>按类别编号直取的细目清单</li>
                <li>目录调整前后的对照说明</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">02</p>
        <h3 class="home-card-title"><a href="/notes/">品牌资讯</a></h3>
        <p class="home-card-desc">宽屏优先的长文栏目，正文单行保持 60 到 72 字，一次读完一篇不吃力。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">宽屏长文</span><span class="tag tag--gold">每季度更新</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-02" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-02" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>季度专题长文与栏目观察</li>
                <li>品牌栏目改版前后的说明</li>
                <li>长文阅读的排版约定</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">03</p>
        <h3 class="home-card-title"><a href="/knowledge/">帮助文档</a></h3>
        <p class="home-card-desc">正在操作、需要照做的时候翻这里，步骤写得不绕。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">操作中查阅</span><span class="tag tag--blue">260 篇指引</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-03" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-03" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>注册与首次访问</li>
                <li>类别索引的检索方法</li>
                <li>栏目订阅与纠错提交</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">04</p>
        <h3 class="home-card-title"><a href="/notes/">变更说明</a></h3>
        <p class="home-card-desc">回访时先看这一页，上一回之后动了什么一目了然。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">回访核对</span><span class="tag tag--gold">每季度汇总</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-04" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-04" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>栏目调整记录</li>
                <li>目录增补记录</li>
                <li>页面迁移记录</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">05</p>
        <h3 class="home-card-title"><a href="/knowledge/">账号与注册</a></h3>
        <p class="home-card-desc">第一次注册、需要先确认流程的人，从这里进去最省事。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">首次注册</span><span class="tag tag--blue">步骤指引</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-05" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-05" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>注册通道入口位置</li>
                <li>资料填写与常见填写错误</li>
                <li>注册后如何订阅类目</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">06</p>
        <h3 class="home-card-title"><a href="/services/">栏目订阅</a></h3>
        <p class="home-card-desc">盯着某几个类目的人，勾好之后按季度收到更新提示，不用每次自己翻。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">长期跟进</span><span class="tag tag--gold">按季度推送</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-06" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-06" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>可订阅的类目范围</li>
                <li>更新提示的推送节奏</li>
                <li>调整或取消订阅类目</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">07</p>
        <h3 class="home-card-title"><a href="/feedback/">纠错反馈</a></h3>
        <p class="home-card-desc">发现条目对不上、链接指错地方，说一句就行，核对完会回复你。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">报错纠错</span><span class="tag tag--gold">平均 1.5 个工作日</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-07" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-07" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>提交时说明位置与看到的实际情况</li>
                <li>核对结果按提交顺序逐一回复</li>
                <li>同类问题合并处理后计入变更记录</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">08</p>
        <h3 class="home-card-title"><a href="/services/">服务与合作</a></h3>
        <p class="home-card-desc">品牌方与机构运营团队看这一条，从搭目录到长期维护都能接。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">品牌与机构</span><span class="tag tag--blue">服务团队对接</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-08" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-08" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>类别索引搭建</li>
                <li>资讯栏目运营</li>
                <li>帮助中心托管与更新记录维护</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

      <article class="home-card" data-reveal>
        <p class="home-card-no">09</p>
        <h3 class="home-card-title"><a href="/introduction/">平台介绍</a></h3>
        <p class="home-card-desc">团队怎么分工、版本怎么走过来，合作前先花几分钟看这一页。</p>
        <div class="home-card-meta"><span class="tag tag--cyan">了解我们</span><span class="tag tag--blue">已迭代 5 个版本</span></div>
        <div class="expand-group">
          <button type="button" class="expand-trigger" data-expand-trigger aria-controls="cat-09" aria-expanded="false">
            <span>展开子条目</span><span class="expand-icon" aria-hidden="true"></span>
          </button>
          <div class="expand-panel" id="cat-09" data-expand-panel>
            <div class="expand-body">
              <ul class="home-sub">
                <li>目录运营、内容编辑、技术支持与客户服务四个小组</li>
                <li>从上线到当前的版本演进</li>
                <li>服务范围与响应节奏</li>
              </ul>
            </div>
          </div>
        </div>
      </article>

    </div>
  </section>

  <section class="section section--tight home-services" aria-labelledby="svc-title">
    <p class="eyebrow">服务与合作</p>
    <h2 class="section-title" id="svc-title">这样的入口，也可以长在你的品牌上</h2>
    <p class="lede measure">很多品牌的内容散在十几个页面里，用户找不到，运营也理不清。我们把类别、栏目、帮助文档和更新记录重新排一遍，交出去的时候是一条走得通的路。</p>

    <div class="home-svc-grid">
      <article class="home-svc" data-reveal>
        <h3>类别索引搭建</h3>
        <p>先把内容拆成两到三层类目，编号、命名、排序一次定下来，之后新增条目只要往对应位置放。</p>
      </article>
      <article class="home-svc" data-reveal>
        <h3>资讯栏目运营</h3>
        <p>以宽屏长文为主，选题、排版、发布按季度推进，栏目风格从第一期起就稳得住。</p>
      </article>
      <article class="home-svc" data-reveal>
        <h3>帮助中心托管</h3>
        <p>把反复被问到的问题整理成步骤指引，用户自己查得到，客服压力跟着降下来。</p>
      </article>
      <article class="home-svc" data-reveal>
        <h3>更新记录维护</h3>
        <p>栏目调整、目录增补、页面迁移按时记下来，老用户回访时能自己看明白改了什么。</p>
      </article>
    </div>

    <div class="home-stats">
      <div class="home-stat">
        <span class="home-stat-num">31</span>
        <span class="home-stat-label">个省级行政区在服务范围内</span>
      </div>
      <div class="home-stat">
        <span class="home-stat-num">180+</span>
        <span class="home-stat-label">家品牌与机构由我们搭建并维护目录</span>
      </div>
      <div class="home-stat">
        <span class="home-stat-num">340+</span>
        <span class="home-stat-label">条细目收在当前类别索引里</span>
      </div>
      <div class="home-stat">
        <span class="home-stat-num">42</span>
        <span class="home-stat-label">人分在目录运营、内容编辑、技术支持与客服</span>
      </div>
    </div>
  </section>

  <section class="section home-timeline" aria-labelledby="tl-title">
    <img class="home-tl-bg" src="{zhanqunpic:h:640w:1200}" width="1200" height="640" loading="lazy" decoding="async" alt="一条水平轨道线上分布若干暖金色节点，代表不同季度的变更记录">
    <div class="home-tl-inner">
      <p class="eyebrow">最近变更</p>
      <h2 class="section-title" id="tl-title">这一季动过的地方，都记在这儿</h2>
      <p class="lede measure">回访的人不用重新翻一遍全站，挑一个类型看就行。同类改动攒到季度末一并列出，条目之间不会互相打断。</p>

      <div class="filter-bar" data-filter-group data-filter-target="#change-list">
        <button type="button" class="filter-chip" data-filter="all">全部<span class="filter-count" data-filter-count></span></button>
        <button type="button" class="filter-chip" data-filter="栏目调整">栏目调整</button>
        <button type="button" class="filter-chip" data-filter="目录增补">目录增补</button>
        <button type="button" class="filter-chip" data-filter="页面迁移">页面迁移</button>
        <span class="home-filter-status mono" data-filter-status></span>
      </div>

      <ol class="timeline home-changes" id="change-list">
        <li class="timeline-item" data-filter-item data-tags="目录增补">
          <p class="timeline-date">第 1 季度 · 3 月</p>
          <h3>目录专区补入本年度全部新增条目</h3>
          <p>本年度新增与调整的内容一次性归位，当前累计 26 个大类、340 余条细目，按月份可以逐条回看。</p>
          <span class="tag tag--gold">目录增补</span>
        </li>
        <li class="timeline-item" data-filter-item data-tags="栏目调整">
          <p class="timeline-date">第 1 季度 · 2 月</p>
          <h3>品牌资讯栏目调整正文行宽</h3>
          <p>正文单行收在 60 到 72 字之间，宽屏下读长篇，眼睛不容易在行尾丢掉位置。</p>
          <span class="tag tag--blue">栏目调整</span>
        </li>
        <li class="timeline-item" data-filter-item data-tags="页面迁移">
          <p class="timeline-date">第 1 季度 · 2 月</p>
          <h3>12 篇注册相关指引归入账号与注册</h3>
          <p>原先散在帮助文档各处的注册流程，统一挪到账号与注册类目下，找的时候少点一次。</p>
          <span class="tag tag--cyan">页面迁移</span>
        </li>
        <li class="timeline-item" data-filter-item data-tags="目录增补">
          <p class="timeline-date">第 1 季度 · 1 月</p>
          <h3>类别索引新增 4 条细目</h3>
          <p>覆盖栏目订阅与纠错反馈两类需求，这两条以前混在服务与合作里，现在单列出来更好找。</p>
          <span class="tag tag--gold">目录增补</span>
        </li>
        <li class="timeline-item" data-filter-item data-tags="栏目调整">
          <p class="timeline-date">第 1 季度 · 1 月</p>
          <h3>变更说明改为按季度汇总</h3>
          <p>零散改动不再逐条推出，攒到一个季度统一整理，每屏可以展开 6 条记录。</p>
          <span class="tag tag--blue">栏目调整</span>
        </li>
        <li class="timeline-item" data-filter-item data-tags="页面迁移">
          <p class="timeline-date">上年 · 第 4 季度</p>
          <h3>部分入口由三层压到两层</h3>
          <p>从首页到目标页面的点击次数减少，首次访问的人少绕一圈。</p>
          <span class="tag tag--cyan">页面迁移</span>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--tight home-upkeep" aria-labelledby="keep-title">
    <div class="home-upkeep-inner">
      <p class="eyebrow">运营节奏</p>
      <h2 class="section-title" id="keep-title">目录能一直用下去，靠的是按时打理</h2>
      <div class="prose">
        <p>内容目录最怕的不是一开始没搭好，而是搭完之后没人管。条目越加越多、类目慢慢错位、旧链接悄悄失效，用户第一次还能忍，第二次就绕开走了。</p>
        <p>所以我们把维护拆成固定的几件事：改动按季度汇总一次，陈列密度控制在每屏 8 到 12 条，每个栏目页顶部单独留一行更新时间，用户报上来的错平均 1.5 个工作日回复。这几件事重复做下来，目录才不会越用越乱。</p>
        <p>对品牌方来说，这意味着交出去的不是一份一次性交付物，而是有人接着往下管的入口。你那边专心做内容和业务，编号、命名、迁移和记录由我们盯着。</p>
      </div>

      <ul class="data-list home-data">
        <li class="data-row"><span class="data-key">汇总周期</span><span class="data-value">每季度一次，覆盖当季全部改动</span></li>
        <li class="data-row"><span class="data-key">陈列密度</span><span class="data-value">每屏 8 到 12 条，方便逐条比对</span></li>
        <li class="data-row"><span class="data-key">更新时间</span><span class="data-value">每个栏目页顶部单独成行</span></li>
        <li class="data-row"><span class="data-key">纠错回复</span><span class="data-value">平均 1.5 个工作日</span></li>
      </ul>
    </div>
  </section>

  <section class="section home-next" aria-labelledby="next-title">
    <p class="eyebrow">从这里继续</p>
    <h2 class="section-title" id="next-title">三种情况，各走各的路</h2>
    <div class="grid grid--3 home-next-grid">
      <a class="home-next-card" href="/knowledge/">
        <span class="home-next-no mono">A</span>
        <h3>手上正操作，卡在某一步</h3>
        <p>注册、检索、订阅、报错，按步骤写的答案都在知识中心，照着做就行。</p>
        <span class="home-next-go" aria-hidden="true">去知识中心 →</span>
      </a>
      <a class="home-next-card" href="/services/">
        <span class="home-next-no mono">B</span>
        <h3>要给自己品牌搭一套</h3>
        <p>从类别索引到资讯栏目、帮助中心与更新记录，服务中心写清了交付内容和推进方式。</p>
        <span class="home-next-go" aria-hidden="true">去服务中心 →</span>
      </a>
      <a class="home-next-card" href="/feedback/">
        <span class="home-next-no mono">C</span>
        <h3>有话想说、有事要问</h3>
        <p>入口指路、目录纠错、变更查询都可以直接找我们，工作日 9:00-18:00 内回复。</p>
        <span class="home-next-go" aria-hidden="true">去反馈通道 →</span>
      </a>
    </div>
  </section>

</main>

.page-home {
  display: block;
  color: var(--c-body);
  --home-radius: 14px;
  --home-line: rgba(233, 238, 250, 0.10);
  --home-cyan-soft: rgba(56, 225, 210, 0.45);
}

/* ============ 首屏 ============ */
.page-home .home-hero {
  position: relative;
  padding: 30px 0 44px;
  isolation: isolate;
  overflow: hidden;
}

.page-home .home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  z-index: -1;
  pointer-events: none;
}

.page-home .home-hero-grid {
  display: grid;
  gap: 34px;
}

.page-home .home-hero-main .update-line {
  margin: 0 0 22px;
}

.page-home .home-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--c-silver);
}

.page-home .home-lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-body);
}

/* 入口总览 */
.page-home .entry-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}

.page-home .entry-item {
  border-bottom: 1px solid var(--home-line);
}

.page-home .entry-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 12px;
  padding: 15px 6px;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: background-color 0.2s var(--ease);
}

.page-home .entry-link:hover,
.page-home .entry-link:focus-visible {
  background-color: var(--c-glass);
}

.page-home .entry-link:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: -2px;
}

.page-home .entry-no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-cyan);
}

.page-home .entry-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .entry-desc {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .entry-go {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-dust);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-home .entry-link:hover .entry-go,
.page-home .entry-link:focus-visible .entry-go {
  color: var(--c-cyan);
  transform: translateX(3px);
}

/* 右侧快捷面板 */
.page-home .home-side {
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: var(--c-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
}

.page-home .home-side-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--home-line);
}

.page-home .home-side-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-side-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .home-side-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .home-side-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.page-home .home-side-actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.page-home .home-side-status {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 11px;
}

.page-home .panel-status-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.page-home .panel-status-row .status-dot {
  width: 6px;
  height: 6px;
}

.page-home .panel-status-key {
  color: var(--c-dust);
}

.page-home .panel-status-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-silver);
  white-space: nowrap;
}

/* ============ 类别索引 ============ */
.page-home .home-index {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-index-head {
  display: grid;
  gap: 26px;
}

.page-home .home-index-figure {
  margin: 0;
}

.page-home .home-index-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
}

.page-home .home-index-grid {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.page-home .home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: var(--c-panel);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-home .home-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-cyan);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.page-home .home-card:hover,
.page-home .home-card:focus-within {
  border-color: var(--home-cyan-soft);
}

.page-home .home-card:hover::before,
.page-home .home-card:focus-within::before {
  opacity: 1;
}

.page-home .home-card-no {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--home-cyan-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-home .home-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-silver);
}

.page-home .home-card-title a {
  color: inherit;
  text-decoration: none;
}

.page-home .home-card-title a:hover,
.page-home .home-card-title a:focus-visible {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-home .home-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-body);
}

.page-home .home-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.page-home .home-card .expand-group {
  margin-top: 4px;
  border-top: 1px solid var(--home-line);
  padding-top: 10px;
}

.page-home .home-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .home-sub li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-dust);
}

.page-home .home-sub li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-cyan);
  opacity: 0.7;
}

/* ============ 服务与合作 ============ */
.page-home .home-services {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-svc-grid {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.page-home .home-svc {
  padding: 22px 20px;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
  background: linear-gradient(150deg, rgba(76, 141, 255, 0.10), rgba(6, 10, 26, 0) 62%);
}

.page-home .home-svc h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-svc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

.page-home .home-stats {
  display: grid;
  gap: 1px;
  margin-top: 32px;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-line);
}

.page-home .home-stat {
  background: var(--c-void);
  padding: 20px 6px;
}

.page-home .home-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-gold);
}

.page-home .home-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-dust);
}

/* ============ 变更时间轴 ============ */
.page-home .home-timeline {
  position: relative;
  padding-block: 52px;
  overflow: hidden;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-tl-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.page-home .home-tl-inner {
  position: relative;
  z-index: 1;
}

.page-home .home-timeline .filter-bar {
  margin-top: 26px;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .home-filter-status {
  align-self: center;
  font-size: 12px;
  color: var(--c-dust);
  letter-spacing: 0.06em;
}

.page-home .home-changes {
  list-style: none;
  margin: 28px 0 0 4px;
  padding: 0;
  border-left: 1px solid var(--home-line);
}

.page-home .home-changes .timeline-item {
  position: relative;
  padding: 0 0 26px 26px;
}

.page-home .home-changes .timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(243, 196, 106, 0.14);
}

.page-home .home-changes .timeline-item:last-child {
  padding-bottom: 0;
}

.page-home .home-changes .timeline-date {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
}

.page-home .home-changes h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-changes p {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

/* ============ 运营节奏 ============ */
.page-home .home-upkeep {
  padding-block: 52px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-upkeep-inner {
  border-left: 2px solid var(--c-cyan);
  padding-left: 20px;
}

.page-home .home-upkeep .prose p {
  max-width: 66ch;
}

.page-home .home-data {
  margin-top: 30px;
  border-top: 1px solid var(--home-line);
}

.page-home .home-data .data-row {
  border-bottom: 1px solid var(--home-line);
}

.page-home .home-data .data-key {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
}

.page-home .home-data .data-value {
  font-size: 14px;
  color: var(--c-body);
}

/* ============ 从这里继续 ============ */
.page-home .home-next {
  padding-block: 52px 64px;
  border-top: 1px solid var(--c-line-soft);
}

.page-home .home-next-grid {
  margin-top: 30px;
}

.page-home .home-next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-line);
  background: var(--c-indigo);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-home .home-next-card:hover,
.page-home .home-next-card:focus-visible {
  border-color: var(--home-cyan-soft);
  background: var(--c-panel);
}

.page-home .home-next-card:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

.page-home .home-next-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-blue);
}

.page-home .home-next-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-silver);
}

.page-home .home-next-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-body);
}

.page-home .home-next-go {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-cyan);
}

/* ============ 响应式 ============ */
@media (min-width: 640px) {
  .page-home .home-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-stat {
    padding: 22px 18px;
  }
}

@media (min-width: 900px) {
  .page-home .home-hero {
    padding: 40px 0 56px;
  }

  .page-home .home-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(288px, 1fr);
    gap: 44px;
    align-items: start;
  }

  .page-home .home-hero h1 {
    font-size: 46px;
  }

  .page-home .home-index {
    padding-block: 64px;
  }

  .page-home .home-index-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 44px;
  }

  .page-home .home-services,
  .page-home .home-timeline,
  .page-home .home-upkeep,
  .page-home .home-next {
    padding-block: 64px;
  }

  .page-home .home-next {
    padding-bottom: 76px;
  }

  .page-home .home-upkeep-inner {
    padding-left: 34px;
  }

  .page-home .home-data .data-row {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 1120px) {
  .page-home .home-hero h1 {
    font-size: 56px;
  }

  .page-home .home-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-card,
  .page-home .home-card::before,
  .page-home .entry-link,
  .page-home .entry-go,
  .page-home .home-next-card {
    transition: none;
  }

  .page-home .entry-link:hover .entry-go {
    transform: none;
  }
}