.page-about {
  --about-rail: 208px;
  display: block;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  width: var(--shell);
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: -8% -25% 25% 38%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 66% at 68% 28%, rgba(34, 230, 224, .16), transparent 72%),
    radial-gradient(42% 52% at 96% 82%, rgba(255, 75, 43, .13), transparent 72%);
}

.page-about .about-hero__crumbs {
  margin-bottom: 1.4rem;
}

.page-about .about-hero__sep {
  margin-inline: .5rem;
  color: var(--muted);
}

.page-about .about-hero__title {
  margin: .85rem 0 0;
  color: var(--paper);
  max-width: 18ch;
}

.page-about .about-hero__meta {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  display: grid;
  gap: 1.5rem;
}

.page-about .about-ticks {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  gap: .7rem;
  border-top: 1px solid var(--line);
}

.page-about .about-ticks li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}

.page-about h1 .num,
.page-about h2 .num,
.page-about h3 .num {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: .92em;
  letter-spacing: -.02em;
}

.page-about .about-ticks .num {
  flex: 0 0 auto;
  min-width: 2.6ch;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cyan);
}

/* ---------- 主体两栏 ---------- */
.page-about .about-body {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.page-about .about-rail {
  align-self: start;
  border-left: 2px solid var(--line-strong);
  padding-left: 1.05rem;
}

.page-about .about-rail__k {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}

.page-about .about-rail__list a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .38rem .4rem .38rem 0;
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.page-about .about-rail__list a:hover,
.page-about .about-rail__list a:focus-visible {
  color: var(--cyan);
  transform: translateX(3px);
}

.page-about .about-rail__list .num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--cyan);
  opacity: .85;
}

.page-about .about-rail__fact {
  margin-top: 1.2rem;
  padding: .9rem .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--teal), var(--ink-2));
}

.page-about .about-rail__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cyan);
}

.page-about .about-rail__fact p {
  margin: .5rem 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-flow {
  min-width: 0;
}

/* ---------- 章节 ---------- */
.page-about .about-sec {
  padding-block: clamp(2rem, 5vw, 3.2rem);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}

.page-about .about-sec__title {
  margin: .7rem 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-about .about-sec__lede {
  margin: 1rem 0 0;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text);
}

.page-about .about-p {
  margin: 1rem 0 0;
  max-width: 68ch;
  font-size: .98rem;
  line-height: 1.82;
  color: var(--text);
}

/* ---------- 三张承诺卡 ---------- */
.page-about .about-cards {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

.page-about .about-card {
  position: relative;
  padding: 1.35rem 1.25rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.page-about .about-card::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--ember));
}

.page-about .about-card__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--muted);
}

.page-about .about-card__t {
  margin: .6rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--cyan-soft);
}

.page-about .about-card__d {
  margin: 0;
  font-size: .93rem;
  line-height: 1.78;
  color: var(--text);
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 1.75rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow-card);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
}

.page-about .about-figure--wide img {
  aspect-ratio: 3 / 2;
}

.page-about .about-figure__cap {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .6rem .95rem;
  border-top: 1px solid var(--line);
  background: rgba(20, 27, 61, .72);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.page-about .about-figure__cap .num {
  color: var(--cyan);
}

/* ---------- 步骤 ---------- */
.page-about .about-steps {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.page-about .about-steps__i {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .95rem;
  padding-bottom: 1.55rem;
}

.page-about .about-steps__i::before {
  content: "";
  position: absolute;
  left: 1.08rem;
  top: 2.3rem;
  bottom: .2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}

.page-about .about-steps__i:last-child {
  padding-bottom: 0;
}

.page-about .about-steps__i:last-child::before {
  display: none;
}

.page-about .about-steps__n {
  display: grid;
  place-items: center;
  width: 2.16rem;
  height: 2.16rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--teal);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1;
}

.page-about .about-steps__b {
  min-width: 0;
  padding-top: .28rem;
}

.page-about .about-steps__t {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--paper);
}

.page-about .about-steps__d {
  margin: 0;
  max-width: 62ch;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--text);
}

/* ---------- 团队左右对照 ---------- */
.page-about .about-split {
  margin-top: 1.6rem;
  display: grid;
  gap: 1.5rem;
}

.page-about .about-split .about-figure {
  margin-top: 0;
}

.page-about .about-split__text .about-p:first-child {
  margin-top: 0;
}

/* ---------- 时间轴 ---------- */
.page-about .about-stages {
  list-style: none;
  margin: 1.85rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}

.page-about .about-stage {
  position: relative;
  padding: 1.35rem 1.25rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.page-about .about-stage::before {
  content: attr(data-stage);
  position: absolute;
  right: .8rem;
  top: .1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(159, 247, 242, .1);
  pointer-events: none;
}

.page-about .about-stage--a {
  background: linear-gradient(140deg, var(--teal) 0%, var(--ink-2) 68%);
}

.page-about .about-stage--b {
  background: linear-gradient(140deg, var(--wine) 0%, var(--ink-2) 68%);
}

.page-about .about-stage--c {
  background: linear-gradient(140deg, #0b2440 0%, var(--ink-2) 68%);
}

.page-about .about-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
}

.page-about .about-stage__n {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-about .about-stage__tag {
  padding: .22rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--cyan-soft);
}

.page-about .about-stage__pain,
.page-about .about-stage__fix {
  position: relative;
  margin: .85rem 0 0;
  max-width: 62ch;
  font-size: .94rem;
  line-height: 1.78;
}

.page-about .about-stage__pain {
  color: var(--muted);
}

.page-about .about-stage__fix {
  color: var(--text);
}

/* ---------- 合作标签 ---------- */
.page-about .about-seals {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.page-about .about-seal {
  padding: .5rem .85rem;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: rgba(6, 50, 58, .55);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--cyan-soft);
}

/* ---------- 数据格 ---------- */
.page-about .about-figs {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.page-about .about-fig {
  padding: 1.1rem .95rem 1.2rem;
  background: var(--ink-2);
}

.page-about .about-fig__n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cyan);
}

.page-about .about-fig__n i {
  font-style: normal;
  font-size: .58em;
  margin-left: .1em;
  color: var(--cyan-soft);
}

.page-about .about-fig__l {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 230, 224, .18), transparent 58%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--teal) 100%);
}

.page-about .about-cta__t {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-about .about-cta__d {
  margin: 1rem 0 0;
  max-width: 66ch;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--text);
}

.page-about .about-cta__acts {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-about .about-figs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero__meta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: end;
  }

  .page-about .about-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-about .about-cards > :nth-child(2) {
    transform: translateY(16px);
  }

  .page-about .about-cards > :nth-child(3) {
    transform: translateY(32px);
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: start;
  }

  .page-about .about-figs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .page-about .about-body {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: 3rem;
  }

  .page-about .about-rail {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-about .about-sec:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-rail__list a,
  .page-about .about-cards > * {
    transition: none;
    transform: none;
  }
}
</style>
<<<END>>>
等一下——我把 `</style>` 也带进来了，不行。PAGE_CSS 块里不该出现 `<style>` 标签。

我重新输出，把 `</style>` 去掉。

另外 `.page-about .about-fig__n i`——用 `<i>` 当修饰符有点不合适，但也能接受。算了，我保留它。

收尾干净一点。`</main>` 之后，就这些。我重新输出一遍。

其实再确认一下：PAGE_CSS 里不应该有 `<style>`。对。去掉。

再核对一下所有类名都已经定义过了：about-hero、about-hero__crumbs、about-hero__sep、about-hero__title、about-hero__meta、about-ticks、about-body、about-rail、about-rail__k、about-rail__list、about-rail__fact、about-rail__n、about-flow、about-sec、about-sec__title、about-sec__lede、about-p、about-cards、about-card、about-card__idx、about-card__t、about-card__d、about-figure、about-figure--wide、about-figure__cap、about-steps、about-steps__i、about-steps__n、about-steps__b、about-steps__t、about-steps__d、about-split、about-split__text、about-stages、about-stage、about-stage--a/b/c、about-stage__head、about-stage__n、about-stage__tag、about-stage__pain、about-stage__fix、about-seals、about-seal、about-figs、about-fig、about-fig__n、about-fig__l、about-cta、about-cta__t、about-cta__d、about-cta__acts。全都在。

好，最后输出。
<main id="main-content" class="page-about">

  <section class="about-hero">
    <nav class="crumbs about-hero__crumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span class="about-hero__sep" aria-hidden="true">/</span>
      <span aria-current="page">价值主张</span>
    </nav>

    <p class="eyebrow">价值主张 · 为什么可以把赛程交给我们</p>

    <h1 class="display about-hero__title">我们替你盯住<br>开赛前的 <span class="num">72</span> 小时</h1>

    <div class="about-hero__meta">
      <p class="lede">打开 LEYU体育，你要的其实很简单：今晚有没有球、几点开、在哪一场。我们把这件事做成了固定流程——国内外联赛的赛程提前整理归位，开赛前 72 小时完成首轮校对，临场改期 10 分钟内同步到页面和你导出的文件里。</p>

      <ul class="about-ticks">
        <li><span class="num">42</span><span>个足球与篮球联赛收进同一入口</span></li>
        <li><span class="num">2</span><span>次点击，从首页落到一场具体对阵</span></li>
        <li><span class="num">3</span><span>种格式，查完随手带走离线看</span></li>
      </ul>
    </div>
  </section>

  <div class="about-body">

    <aside class="about-rail" aria-label="章节索引">
      <p class="about-rail__k">章节索引</p>
      <ol class="about-rail__list">
        <li><a href="#promise"><span class="num">01</span><span>快在哪里</span></a></li>
        <li><a href="#pipeline"><span class="num">02</span><span>赛程怎么来</span></a></li>
        <li><a href="#team"><span class="num">03</span><span>开球时谁在</span></a></li>
        <li><a href="#stages"><span class="num">04</span><span>三个阶段</span></a></li>
        <li><a href="#partners"><span class="num">05</span><span>一起排赛程的人</span></a></li>
        <li><a href="#reach"><span class="num">06</span><span>服务到哪</span></a></li>
      </ol>

      <div class="about-rail__fact">
        <span class="about-rail__n num">26</span>
        <p>人团队，分早晚两班，守住比赛最密集的时段。</p>
      </div>
    </aside>

    <div class="about-flow">

      <section class="about-sec" id="promise">
        <p class="eyebrow">01 / 快在哪里</p>
        <h2 class="about-sec__title">快，得是三件事同时成立</h2>
        <p class="about-sec__lede">赛程服务听着简单，难的是三件事一件都不能塌：你开赛前查得到、点两下就找到、查完还能带出门。缺哪一件，赶时间的那个晚上都会很难受。</p>

        <div class="about-cards" data-reveal>
          <article class="about-card">
            <span class="about-card__idx">A / 提前</span>
            <h3 class="about-card__t">开赛前就摆在台面上</h3>
            <p class="about-card__d">常规赛、杯赛、季后赛按同一套节奏推进：开赛前 72 小时完成首轮校对，对阵与时间先落地，你才好安排那个周末要不要推掉别的约。</p>
          </article>

          <article class="about-card">
            <span class="about-card__idx">B / 好找</span>
            <h3 class="about-card__t">两条路都通到那一场</h3>
            <p class="about-card__d">联赛按赛事日历、积分走势、对阵详情三层排布。从联赛入口到某一场具体比赛，切换赛季最多两次点击，不用一层层往回退。</p>
          </article>

          <article class="about-card">
            <span class="about-card__idx">C / 带走</span>
            <h3 class="about-card__t">离线也能翻出来</h3>
            <p class="about-card__d">CSV 管表格整理，ICS 直接进手机日历，图片长图方便丢进群。手机、平板、桌面端都能导出，信号差的地方照样看得到开球时间。</p>
          </article>
        </div>
      </section>

      <section class="about-sec" id="pipeline">
        <p class="eyebrow">02 / 赛程怎么来</p>
        <h2 class="about-sec__title">一场比赛的开球时间，要走完这四步</h2>
        <p class="about-sec__lede">准确性不是碰运气碰出来的。从一份联赛日程到你屏幕上的一行对阵，中间有四道固定动作，每一步都有人签字、有时限。</p>

        <figure class="about-figure about-figure--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间数据屏上排列整齐的对阵列表与跳动的时间数字" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap"><span class="num">数据流</span> 从联赛日程到前端页面</figcaption>
        </figure>

        <ol class="about-steps">
          <li class="about-steps__i">
            <span class="about-steps__n num">01</span>
            <div class="about-steps__b">
              <h3 class="about-steps__t">数据入库</h3>
              <p class="about-steps__d">拿到联赛日程后归进统一的对阵结构，赛季、轮次、主客队、开球时间一次对齐，不留自由填写的空格。</p>
            </div>
          </li>
          <li class="about-steps__i">
            <span class="about-steps__n num">02</span>
            <div class="about-steps__b">
              <h3 class="about-steps__t">首轮校对</h3>
              <p class="about-steps__d">开赛前 72 小时完成首轮校对。数据校对与赛程运营组按早晚两班各过一遍，轮次相邻、主客颠倒这类问题在这一步拦下。</p>
            </div>
          </li>
          <li class="about-steps__i">
            <span class="about-steps__n num">03</span>
            <div class="about-steps__b">
              <h3 class="about-steps__t">临场变更</h3>
              <p class="about-steps__d">赛前改期、场地调整、延期通知进来后，10 分钟内同步到前端。页面上的时间变了，你导出过的文件重新拉一次也是新的。</p>
            </div>
          </li>
          <li class="about-steps__i">
            <span class="about-steps__n num">04</span>
            <div class="about-steps__b">
              <h3 class="about-steps__t">到你手上</h3>
              <p class="about-steps__d">网页版查到的、订阅提醒收到的、导出文件里写着的，是同一个开球时间。你不用在两个地方比对哪个更可信。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="about-sec" id="team">
        <p class="eyebrow">03 / 开球时谁在</p>
        <h2 class="about-sec__title">比赛开始的时候，我们有人在</h2>

        <div class="about-split">
          <figure class="about-figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="深夜控制台前工作人员的剪影与屏幕投射的青色光斑" loading="lazy" decoding="async">
            <figcaption class="about-figure__cap"><span class="num">班次</span> 晚班覆盖到最后一轮开球</figcaption>
          </figure>

          <div class="about-split__text">
            <p class="about-p">团队 26 人，其中 12 人专职做数据校对与赛程运营。这 12 个人分早晚两班，覆盖比赛最密集的时段——周末和节假日的晚上是排班重点，那正是联赛扎堆开球、问题最容易冒头的时候。</p>
            <p class="about-p">你在网页版提交的每一条查赛程反馈，都会进到当班人的队列里。对阵错误、时间偏差、数据缺失这三类问题，平均 1 个工作日内回复。</p>
            <p class="about-p">提交的时候不用写得像报告：截个图，说清楚哪一场、哪个时间和实际对不上，就够了。</p>
          </div>
        </div>
      </section>

      <section class="about-sec" id="stages">
        <p class="eyebrow">04 / 三个阶段</p>
        <h2 class="about-sec__title">从聚到一起，到随手带走</h2>
        <p class="about-sec__lede">每个阶段都是被一个具体麻烦推着往前走的。回头看，路径很直：先让你找得到，再让时间靠得住，最后让赛程跟着你走。</p>

        <ol class="about-stages">
          <li class="about-stage about-stage--a" data-stage="01" data-reveal>
            <div class="about-stage__head">
              <span class="about-stage__n num">第一阶段</span>
              <span class="about-stage__tag">赛程聚合</span>
            </div>
            <p class="about-stage__pain">那时的麻烦：各个联赛的日程散在不同地方，想确认一场对阵得来回翻好几个页面，翻到一半还忘了自己要看的是哪天。</p>
            <p class="about-stage__fix">解法：把 42 个足球与篮球联赛收进同一个入口，按赛事日历排出先后顺序，先解决“找得到”这件最基本的事。</p>
          </li>

          <li class="about-stage about-stage--b" data-stage="02" data-reveal>
            <div class="about-stage__head">
              <span class="about-stage__n num">第二阶段</span>
              <span class="about-stage__tag">数据校对</span>
            </div>
            <p class="about-stage__pain">那时的麻烦：时间对不上、临时改期没人通知，往往等到开球前半小时才发现要看的比赛换了日子。</p>
            <p class="about-stage__fix">解法：固定两条线——开赛前 72 小时的首轮校对，和临场变更 10 分钟内的同步。数据准确开始变成一件有班次、有时限的事。</p>
          </li>

          <li class="about-stage about-stage--c" data-stage="03" data-reveal>
            <div class="about-stage__head">
              <span class="about-stage__n num">第三阶段</span>
              <span class="about-stage__tag">多端导出</span>
            </div>
            <p class="about-stage__pain">那时的麻烦：出门在外没网，或者群里十几个人等着要一份完整赛程，一个一个念显然不现实。</p>
            <p class="about-stage__fix">解法：补齐 CSV、ICS 和图片长图三种导出。移动端与桌面端跑同一套数据，导出的东西离线也能打开、也能转发。</p>
          </li>
        </ol>
      </section>

      <section class="about-sec" id="partners">
        <p class="eyebrow">05 / 一起排赛程的人</p>
        <h2 class="about-sec__title">15 家省级体育媒体、7 家业余联赛组委会，和我们一起排赛程</h2>
        <p class="about-sec__lede">赛程跑得准，不全靠我们一家。媒体和联赛组委会握着第一手信息，我们把它们接进同一套流程里。</p>

        <figure class="about-figure about-figure--wide">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="冷色底图上多个球场坐标点与连线构成的跨地区协作网络示意" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap"><span class="num">协作网</span> 省级媒体与业余联赛组委会节点分布示意</figcaption>
        </figure>

        <p class="about-p">和省级体育媒体，我们做的是内容与数据协作：赛程同步、赛前信息梳理、赛季阶段性解读，一起把一轮比赛的来龙去脉讲清楚。</p>
        <p class="about-p">和业余联赛组委会，协作要更靠前一步——赛程录入、临时调整确认、比赛日当天的变更通知。周末业余联赛的领队最怕改期没通知到人，这条链路我们和组委会一起盯。</p>
        <p class="about-p">省级业余联赛合作走过三个赛季，获得过数据服务类称号。合作内容一直是赛程同步与数据校对这类具体环节。</p>

        <ul class="about-seals">
          <li class="about-seal">省级体育媒体 · 内容与数据协作</li>
          <li class="about-seal">业余联赛组委会 · 赛程同步</li>
          <li class="about-seal">省级业余联赛 · 数据服务类称号</li>
        </ul>
      </section>

      <section class="about-sec" id="reach">
        <p class="eyebrow">06 / 服务到哪</p>
        <h2 class="about-sec__title">服务山东，辐射全国</h2>
        <p class="about-sec__lede">站点的备案主体在山东，用户却遍布各地。下面这些数字，是每天真实发生的使用量。</p>

        <ul class="about-figs" data-reveal>
          <li class="about-fig">
            <span class="about-fig__n">68<i>万</i></span>
            <span class="about-fig__l">累计注册用户</span>
          </li>
          <li class="about-fig">
            <span class="about-fig__n">9.4<i>万</i></span>
            <span class="about-fig__l">会员用户</span>
          </li>
          <li class="about-fig">
            <span class="about-fig__n">73<i>%</i></span>
            <span class="about-fig__l">移动端访问占比</span>
          </li>
          <li class="about-fig">
            <span class="about-fig__n">31<i>%</i></span>
            <span class="about-fig__l">赛程导出转化率</span>
          </li>
          <li class="about-fig">
            <span class="about-fig__n">2:40</span>
            <span class="about-fig__l">单次查赛程平均停留</span>
          </li>
        </ul>

        <p class="about-p">会员权益含赛程提醒、导出额度提升与专属反馈通道三项，年费 128 元。接下来的力气主要花在两处：移动端导出的速度，以及弱网环境下筛选条件的响应——很多人在球场边、地铁里查赛程，这两件事比多几个功能更实在。</p>
      </section>

      <section class="about-cta" aria-labelledby="about-cta-t">
        <h2 class="about-cta__t" id="about-cta-t">下一步，从一场你真正关心的比赛开始</h2>
        <p class="about-cta__d">想看赛程怎么筛、怎么导出、会员中心里都有什么，去赛事服务与工具；遇到时间对不上或者文件打不开，答疑中心里有处理办法；媒体和联赛的协作，直接走合作洽谈。赛场专栏每轮赛后都有新内容，也可以先去读两篇。</p>
        <div class="about-cta__acts">
          <a class="btn btn--ember" href="/offerings/">查看导出功能</a>
          <a class="btn btn--ghost" href="/answers/">打开答疑中心</a>
          <a class="btn btn--ghost" href="/column/">读赛场专栏</a>
          <a class="btn btn--ghost" href="/cooperation/">谈合作</a>
        </div>
      </section>

    </div>
  </div>
</main>

.page-about {
  --about-rail: 208px;
  display: block;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  width: var(--shell);
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: -8% -25% 25% 38%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 66% at 68% 28%, rgba(34, 230, 224, .16), transparent 72%),
    radial-gradient(42% 52% at 96% 82%, rgba(255, 75, 43, .13), transparent 72%);
}

.page-about .about-hero__crumbs {
  margin-bottom: 1.4rem;
}

.page-about .about-hero__sep {
  margin-inline: .5rem;
  color: var(--muted);
}

.page-about .about-hero__title {
  margin: .85rem 0 0;
  color: var(--paper);
  max-width: 18ch;
}

.page-about .about-hero__meta {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  display: grid;
  gap: 1.5rem;
}

.page-about .about-ticks {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  gap: .7rem;
  border-top: 1px solid var(--line);
}

.page-about .about-ticks li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}

.page-about h1 .num,
.page-about h2 .num,
.page-about h3 .num {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: .92em;
  letter-spacing: -.02em;
}

.page-about .about-ticks .num {
  flex: 0 0 auto;
  min-width: 2.6ch;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cyan);
}

/* ---------- 主体两栏 ---------- */
.page-about .about-body {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.page-about .about-rail {
  align-self: start;
  border-left: 2px solid var(--line-strong);
  padding-left: 1.05rem;
}

.page-about .about-rail__k {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}

.page-about .about-rail__list a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .38rem .4rem .38rem 0;
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.page-about .about-rail__list a:hover,
.page-about .about-rail__list a:focus-visible {
  color: var(--cyan);
  transform: translateX(3px);
}

.page-about .about-rail__list .num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--cyan);
  opacity: .85;
}

.page-about .about-rail__fact {
  margin-top: 1.2rem;
  padding: .9rem .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--teal), var(--ink-2));
}

.page-about .about-rail__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cyan);
}

.page-about .about-rail__fact p {
  margin: .5rem 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-flow {
  min-width: 0;
}

/* ---------- 章节 ---------- */
.page-about .about-sec {
  padding-block: clamp(2rem, 5vw, 3.2rem);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}

.page-about .about-sec__title {
  margin: .7rem 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-about .about-sec__lede {
  margin: 1rem 0 0;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text);
}

.page-about .about-p {
  margin: 1rem 0 0;
  max-width: 68ch;
  font-size: .98rem;
  line-height: 1.82;
  color: var(--text);
}

/* ---------- 三张承诺卡 ---------- */
.page-about .about-cards {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

.page-about .about-card {
  position: relative;
  padding: 1.35rem 1.25rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.page-about .about-card::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--ember));
}

.page-about .about-card__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--muted);
}

.page-about .about-card__t {
  margin: .6rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--cyan-soft);
}

.page-about .about-card__d {
  margin: 0;
  font-size: .93rem;
  line-height: 1.78;
  color: var(--text);
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 1.75rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow-card);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
}

.page-about .about-figure--wide img {
  aspect-ratio: 3 / 2;
}

.page-about .about-figure__cap {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .6rem .95rem;
  border-top: 1px solid var(--line);
  background: rgba(20, 27, 61, .72);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.page-about .about-figure__cap .num {
  color: var(--cyan);
}

/* ---------- 步骤 ---------- */
.page-about .about-steps {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.page-about .about-steps__i {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .95rem;
  padding-bottom: 1.55rem;
}

.page-about .about-steps__i::before {
  content: "";
  position: absolute;
  left: 1.08rem;
  top: 2.3rem;
  bottom: .2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}

.page-about .about-steps__i:last-child {
  padding-bottom: 0;
}

.page-about .about-steps__i:last-child::before {
  display: none;
}

.page-about .about-steps__n {
  display: grid;
  place-items: center;
  width: 2.16rem;
  height: 2.16rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--teal);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1;
}

.page-about .about-steps__b {
  min-width: 0;
  padding-top: .28rem;
}

.page-about .about-steps__t {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--paper);
}

.page-about .about-steps__d {
  margin: 0;
  max-width: 62ch;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--text);
}

/* ---------- 团队左右对照 ---------- */
.page-about .about-split {
  margin-top: 1.6rem;
  display: grid;
  gap: 1.5rem;
}

.page-about .about-split .about-figure {
  margin-top: 0;
}

.page-about .about-split__text .about-p:first-child {
  margin-top: 0;
}

/* ---------- 时间轴 ---------- */
.page-about .about-stages {
  list-style: none;
  margin: 1.85rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}

.page-about .about-stage {
  position: relative;
  padding: 1.35rem 1.25rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.page-about .about-stage::before {
  content: attr(data-stage);
  position: absolute;
  right: .8rem;
  top: .1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(159, 247, 242, .1);
  pointer-events: none;
}

.page-about .about-stage--a {
  background: linear-gradient(140deg, var(--teal) 0%, var(--ink-2) 68%);
}

.page-about .about-stage--b {
  background: linear-gradient(140deg, var(--wine) 0%, var(--ink-2) 68%);
}

.page-about .about-stage--c {
  background: linear-gradient(140deg, #0b2440 0%, var(--ink-2) 68%);
}

.page-about .about-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
}

.page-about .about-stage__n {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-about .about-stage__tag {
  padding: .22rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--cyan-soft);
}

.page-about .about-stage__pain,
.page-about .about-stage__fix {
  position: relative;
  margin: .85rem 0 0;
  max-width: 62ch;
  font-size: .94rem;
  line-height: 1.78;
}

.page-about .about-stage__pain {
  color: var(--muted);
}

.page-about .about-stage__fix {
  color: var(--text);
}

/* ---------- 合作标签 ---------- */
.page-about .about-seals {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.page-about .about-seal {
  padding: .5rem .85rem;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: rgba(6, 50, 58, .55);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--cyan-soft);
}

/* ---------- 数据格 ---------- */
.page-about .about-figs {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.page-about .about-fig {
  padding: 1.1rem .95rem 1.2rem;
  background: var(--ink-2);
}

.page-about .about-fig__n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cyan);
}

.page-about .about-fig__n i {
  font-style: normal;
  font-size: .58em;
  margin-left: .1em;
  color: var(--cyan-soft);
}

.page-about .about-fig__l {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 230, 224, .18), transparent 58%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--teal) 100%);
}

.page-about .about-cta__t {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-about .about-cta__d {
  margin: 1rem 0 0;
  max-width: 66ch;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--text);
}

.page-about .about-cta__acts {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-about .about-figs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero__meta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: end;
  }

  .page-about .about-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-about .about-cards > :nth-child(2) {
    transform: translateY(16px);
  }

  .page-about .about-cards > :nth-child(3) {
    transform: translateY(32px);
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: start;
  }

  .page-about .about-figs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .page-about .about-body {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: 3rem;
  }

  .page-about .about-rail {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-about .about-sec:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-rail__list a,
  .page-about .about-cards > * {
    transition: none;
    transform: none;
  }
}