/* ============ 品牌总览 · page-about ============ */
.page-about {
  --about-ink-soft: #4A5F63;
  --about-line: rgba(46, 74, 82, .14);
  --about-soft: rgba(46, 74, 82, .05);
  background: var(--yue);
  color: var(--mo);
  overflow-x: clip;
}

.page-about h1,
.page-about h2,
.page-about h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--dai);
  margin: 0;
}

.page-about p { margin: 0; }

.page-about .about-h2 {
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: .005em;
}

.page-about .about-h2--light { color: var(--yue); }

.page-about .about-section__note {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--about-ink-soft);
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .about-section { padding: clamp(52px, 8vw, 96px) 0; }

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(110% 80% at 92% 4%, rgba(217, 199, 214, .55) 0%, rgba(217, 199, 214, 0) 58%),
    radial-gradient(80% 60% at 4% 100%, rgba(227, 236, 234, .8) 0%, rgba(227, 236, 234, 0) 62%);
}

.page-about .about-hero__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-hero__title {
  margin-top: 16px;
  font-size: clamp(2.2rem, 8vw, 4.3rem);
  line-height: 1.14;
  letter-spacing: .004em;
}

.page-about .about-hero__accent {
  color: var(--zhu);
  position: relative;
}

.page-about .about-hero__text {
  margin-top: 22px;
  max-width: 48ch;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--about-line);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-fact__v {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--dai);
  line-height: 1;
}

.page-about .about-fact__k {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--qing);
}

.page-about .about-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-hero__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}

.page-about .about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 品牌起点 ---------- */
.page-about .about-origin { background: var(--yue); }

.page-about .about-origin__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-origin__body p {
  margin-top: 20px;
  line-height: 1.95;
  color: #2C3A3D;
}

.page-about .about-origin__body h2 { margin-top: 14px; }

.page-about .about-marginal {
  border-left: 2px solid var(--ou);
  padding: 4px 0 4px 22px;
  align-self: start;
}

.page-about .about-marginal p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.95;
  color: var(--dai);
}

.page-about .about-marginal span {
  display: block;
  margin-top: 14px;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--qing);
}

/* ---------- 发展历程 ---------- */
.page-about .about-timeline {
  background: var(--xuan);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 1px 0 rgba(201, 169, 106, .35);
}

.page-about .about-timeline__intro {
  display: grid;
  gap: 28px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.page-about .about-timeline__figure {
  border-radius: var(--radius);
  width: min(100%, 340px);
  justify-self: start;
}

.page-about .about-timeline__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .about-timeline__rail { margin-bottom: 34px; }

.page-about .about-rail__label {
  font-size: .74rem;
  letter-spacing: .22em;
  color: var(--qing);
  margin-bottom: 12px;
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .about-rail__list::-webkit-scrollbar { display: none; }

.page-about .about-rail__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--about-line);
  color: var(--dai);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}

.page-about .about-rail__list a .mono {
  font-size: .74rem;
  color: var(--qing);
}

.page-about .about-rail__list a:hover {
  border-color: var(--zhu);
  background: rgba(193, 58, 46, .06);
  transform: translateY(-2px);
}

.page-about .about-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-about .about-timeline__list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 26px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ou) 0%, var(--dai) 42%, var(--zhu) 82%, var(--jin) 100%);
}

.page-about .about-era {
  position: relative;
  padding: 0 0 40px 40px;
}

.page-about .about-era:last-child { padding-bottom: 8px; }

.page-about .about-era__node {
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--xuan);
  border: 2px solid var(--qing);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.page-about .about-era:hover .about-era__node {
  background: var(--zhu);
  border-color: var(--zhu);
  transform: scale(1.3);
}

.page-about .about-era__year {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--qing);
}

.page-about .about-era__title {
  margin-top: 6px;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.4;
}

.page-about .about-era__text {
  margin-top: 10px;
  max-width: 62ch;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 团队 ---------- */
.page-about .about-team { background: var(--yue); }

.page-about .about-team__top {
  display: grid;
  gap: 30px;
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 52px);
}

.page-about .about-team__figure {
  border-radius: var(--radius);
  width: min(100%, 420px);
  justify-self: start;
}

.page-about .about-team__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .about-team__grid {
  display: grid;
  gap: 20px;
}

.page-about .about-role {
  padding: 30px 26px 32px;
  border-radius: var(--radius);
  background: var(--xuan);
  border: 1px solid var(--about-line);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}

.page-about .about-role:hover {
  border-color: rgba(193, 58, 46, .45);
  background: #fff;
  transform: translateY(-2px);
}

.page-about .about-role__num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--dan), var(--yue));
  border: 1px solid rgba(46, 74, 82, .16);
  color: var(--dai);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  padding-top: 26px;
  box-sizing: border-box;
}

.page-about .about-role__num span { font-size: .9rem; margin-left: 2px; }

.page-about .about-role__name {
  margin-top: 20px;
  font-size: 1.25rem;
}

.page-about .about-role__desc {
  margin-top: 12px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 服务覆盖 ---------- */
.page-about .about-reach {
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(217, 199, 214, .28) 0%, rgba(217, 199, 214, 0) 60%),
    linear-gradient(160deg, #35575F 0%, var(--dai) 55%, #233B42 100%);
  color: var(--yue);
  border-top: 1px solid rgba(201, 169, 106, .5);
  border-bottom: 1px solid rgba(201, 169, 106, .5);
}

.page-about .about-reach .eyebrow { color: var(--jin); }

.page-about .about-reach__grid {
  display: grid;
  gap: 44px;
}

.page-about .about-reach__lead p {
  margin-top: 20px;
  max-width: 52ch;
  line-height: 1.95;
  color: rgba(245, 247, 246, .82);
}

.page-about .about-reach__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(245, 247, 246, .14);
  border: 1px solid rgba(245, 247, 246, .14);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-about .about-metric {
  background: rgba(26, 31, 30, .18);
  padding: 24px 20px 26px;
}

.page-about .about-metric--wide { grid-column: 1 / -1; }

.page-about .about-metric__v {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 600;
  color: var(--yue);
  line-height: 1;
}

.page-about .about-metric__v span { font-size: .95rem; margin-left: 2px; color: var(--jin); }

.page-about .about-metric__k {
  margin-top: 10px;
  font-size: .82rem;
  letter-spacing: .05em;
  color: rgba(245, 247, 246, .62);
}

/* ---------- 合作生态 ---------- */
.page-about .about-eco { background: var(--yue); }

.page-about .about-eco__grid {
  display: grid;
  gap: 32px;
}

.page-about .about-eco__accordion {
  border-top: 1px solid var(--about-line);
}

/* ---------- 做事的方式 ---------- */
.page-about .about-values {
  background: linear-gradient(180deg, var(--yue) 0%, var(--dan) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.page-about .about-values__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .about-value {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid rgba(46, 74, 82, .18);
}

.page-about .about-value:last-child { border-bottom: 1px solid rgba(46, 74, 82, .18); }

.page-about .about-value__no {
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--zhu);
}

.page-about .about-value__name { font-size: 1.15rem; }

.page-about .about-value__text {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  background: var(--yue);
  padding-bottom: clamp(64px, 9vw, 112px);
}

.page-about .about-cta__inner {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 5vw, 52px);
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--xuan);
}

.page-about .about-cta__text p {
  margin-top: 18px;
  max-width: 56ch;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

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

  .page-about .about-metric--wide { grid-column: span 4; }

  .page-about .about-value {
    grid-template-columns: 60px minmax(0, 200px) minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: 60px;
  }

  .page-about .about-hero__media { margin-top: 8px; }

  .page-about .about-origin__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 72px;
  }

  .page-about .about-timeline__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 64px;
  }

  .page-about .about-timeline__figure { justify-self: end; }

  .page-about .about-timeline__grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-timeline__rail {
    position: sticky;
    top: calc(var(--top-h) + 32px);
    margin-bottom: 0;
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__list a {
    border: 0;
    border-left: 2px solid var(--about-line);
    border-radius: 0;
    padding: 10px 14px;
    white-space: normal;
    background: transparent;
  }

  .page-about .about-rail__list a:hover {
    border-left-color: var(--zhu);
    background: rgba(193, 58, 46, .05);
    transform: none;
  }

  .page-about .about-team__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 64px;
  }

  .page-about .about-team__figure { justify-self: end; }

  .page-about .about-reach__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: start;
  }

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

  .page-about .about-metric--wide { grid-column: span 2; }

  .page-about .about-eco__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-values__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}
</style>
<<<END>>>

Wait — I must not output a `<style>` tag. Let me correct: only `` then raw CSS. Let me redo the tail correctly. The HTML above is fine; the CSS block must not be wrapped in `<style>` and there must be no `<<<END>>>`.

Correcting from `` onward — I'll re-emit the whole answer properly.

Actually I need to emit the full response again with correct markers. Let me produce the final clean version.

Let me reconsider a couple of details:
- `.page-about .about-hero__facts` uses `grid-template-columns` with auto-fit — fine.
- The `about-rail__label` — fine.
- `box-sizing` on role num — I set padding-top 26px with height 76px and box-sizing border-box; text-align center via justify-content center on inline-flex + width. Should be ok.

Let me finalize.
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="wrap about-hero__grid">
      <div class="about-hero__lead">
        <nav class="breadcrumb" aria-label="当前位置">
          <a href="/">首页</a>
          <span class="breadcrumb__sep" aria-hidden="true">/</span>
          <span aria-current="page">品牌总览</span>
        </nav>

        <p class="eyebrow">品牌总览</p>
        <h1 class="about-hero__title">把水乡的细致，<br>做进每一轮<span class="about-hero__accent">赛事数据</span></h1>
        <p class="about-hero__text">
          从 2016 年到现在，江南赛场做的始终是同一件事：球队阵容怎么变、谁在伤停名单上、积分榜这一轮怎么走。这些资料您打开就能查到，不必再凑十几个来源去找一个答案。
        </p>

        <ul class="about-hero__facts">
          <li><span class="about-fact__v mono">28</span><span class="about-fact__k">省级行政区已覆盖</span></li>
          <li><span class="about-fact__v mono">60+</span><span class="about-fact__k">合作赛事机构与媒体</span></li>
          <li><span class="about-fact__v mono">18</span><span class="about-fact__k">联赛与杯赛体系</span></li>
        </ul>

        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/business/">查看订阅档位</a>
          <a class="btn btn--ghost" href="/inquiry/">说说您的需求</a>
        </div>
      </div>

      <figure class="about-hero__media media-frame">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800"
             alt="江南园林窗棂纹样与赛道线条交叠的抽象画面">
      </figure>
    </div>
  </section>

  <section class="about-section about-origin" id="story">
    <div class="wrap">
      <div class="about-origin__grid">
        <div class="about-origin__body">
          <p class="eyebrow">品牌起点</p>
          <h2 class="about-h2">先从一份手抄的轮次清单说起</h2>
          <p>
            2016 年，江南赛场开始运营。第一批内容很朴素：每轮比赛结束后，把出场名单、伤停情况和积分变化整理成一份能翻查的清单。那时候团队人不多，一条一条对着赛程核，一轮一轮往下排。
          </p>
          <p>
            名字里的“江南”不是装饰。水乡做事讲究慢一点、细一点，一张纸上的位置不能随便挪；而赛场偏偏要求快、准、整齐。这两种气质看着别扭，做久了却是一回事——都要在有限的时间里，把每一处细节放到它该在的位置上。
          </p>
          <p>
            所以江南赛场后来长成了现在的样子：一边是赛事资讯和数据索引，一边是客户端与资料下载。您看到的赛程概览、阵容图、伤停详情和历史归档，都是从那批手抄清单里长出来的。
          </p>
        </div>

        <aside class="about-marginal" aria-label="补充说明">
          <p>“一场比赛的资料有没有用，取决于它能不能被下一个做判断的人直接拿去用。”</p>
          <span>数据编辑组 · 内部培训记录</span>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-section about-timeline" id="timeline">
    <div class="wrap">
      <div class="about-timeline__intro">
        <div>
          <p class="eyebrow">发展历程</p>
          <h2 class="about-h2">从 2016 年到今天</h2>
          <p class="about-section__note">
            六次关键调整，没有一次是推翻重来，都是在原有资料上往前接一段。左侧年表可以跳转到对应节点。
          </p>
        </div>
        <figure class="about-timeline__figure media-frame media-frame--tall">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000"
               alt="卷轴展开的水墨年表，节点以朱砂红圆点标出的抽象插画"
               loading="lazy" decoding="async">
        </figure>
      </div>

      <div class="about-timeline__grid">
        <aside class="about-timeline__rail" aria-label="年表索引">
          <p class="about-rail__label">年表索引</p>
          <ol class="about-rail__list">
            <li><a href="#era-2016"><span class="mono">2016</span>起步</a></li>
            <li><a href="#era-2018"><span class="mono">2018</span>往回追</a></li>
            <li><a href="#era-2020"><span class="mono">2020</span>安卓端</a></li>
            <li><a href="#era-2022"><span class="mono">2022</span>资料下载区</a></li>
            <li><a href="#era-2024"><span class="mono">2024</span>年度通行证</a></li>
            <li><a href="#era-2025"><span class="mono">2025</span>周三固定</a></li>
          </ol>
        </aside>

        <div class="about-timeline__body">
          <ol class="about-timeline__list">
            <li class="about-era" id="era-2016">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2016</p>
              <h3 class="about-era__title">一份轮次清单，就是全部家当</h3>
              <p class="about-era__text">平台正式运营。每轮结束后整理出场名单与比分，靠人工逐条核对，先把“查得到”这件事做扎实。</p>
            </li>
            <li class="about-era" id="era-2018">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2018</p>
              <h3 class="about-era__title">把时间轴往回追两年</h3>
              <p class="about-era__text">历史数据整理完成，最早可回溯到 2018 赛季。检索方式也从单一按轮次，扩展到轮次与球队两个方向同时筛。</p>
            </li>
            <li class="about-era" id="era-2020">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2020</p>
              <h3 class="about-era__title">安卓客户端上线</h3>
              <p class="about-era__text">资料从浏览器搬到手机上。订阅用户可以在同一账号下登录使用，赛前查名单不再需要先开电脑。</p>
            </li>
            <li class="about-era" id="era-2022">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2022</p>
              <h3 class="about-era__title">资料下载区向大陆用户开放</h3>
              <p class="about-era__text">提供近三个赛季的适配清单，含赛程表、阵容图与数据包，适配安卓端、Windows 桌面端及网页版三处使用。</p>
            </li>
            <li class="about-era" id="era-2024">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2024</p>
              <h3 class="about-era__title">年度通行证推出</h3>
              <p class="about-era__text">面向长期跟赛的用户，一次开通覆盖全部联赛数据包，并配套优先客服通道，适合整个赛季都在做分析的团队。</p>
            </li>
            <li class="about-era" id="era-2025">
              <span class="about-era__node" aria-hidden="true"></span>
              <p class="about-era__year mono">2025</p>
              <h3 class="about-era__title">更新节奏固定下来</h3>
              <p class="about-era__text">索引周期调整为每周三更新，球队资料与伤停信息按联赛轮次归档。您不用天天刷，固定日子来取就行。</p>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-team" id="team">
    <div class="wrap">
      <div class="about-team__top">
        <div class="about-team__intro">
          <p class="eyebrow">团队构成</p>
          <h2 class="about-h2">一支七十多人的队伍，跟着轮次表走</h2>
          <p class="about-section__note">
            三支队伍分工明确，实行轮次值班与周三更新机制。联赛不停，排班表就不空着。
          </p>
        </div>
        <figure class="about-team__figure media-frame media-frame--panel">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600"
               alt="俯视视角的圆形工作台，桌面摆放数据图表与笔砚的抽象画面"
               loading="lazy" decoding="async">
        </figure>
      </div>

      <div class="about-team__grid">
        <article class="about-role">
          <p class="about-role__num mono">40<span>+</span></p>
          <h3 class="about-role__name">数据编辑</h3>
          <p class="about-role__desc">
            负责每轮的名单核对、伤停确认与积分演算，也负责把历史轮次归档到可以检索的位置。核对完成才发布，是这一组最硬的规矩。
          </p>
        </article>
        <article class="about-role">
          <p class="about-role__num mono">25</p>
          <h3 class="about-role__name">技术研发</h3>
          <p class="about-role__desc">
            维护索引系统、安卓端与 Windows 桌面端的客户端，同时负责对外的数据接口。周三的更新任务由这一组守着跑完。
          </p>
        </article>
        <article class="about-role">
          <p class="about-role__num mono">12</p>
          <h3 class="about-role__name">客户服务</h3>
          <p class="about-role__desc">
            通过邮件、电话与站内工单处理订阅、下载与使用问题，工作日平均响应时间控制在 4 小时以内。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="about-section about-reach" id="reach">
    <div class="wrap">
      <div class="about-reach__grid">
        <div class="about-reach__lead">
          <p class="eyebrow">服务覆盖</p>
          <h2 class="about-h2 about-h2--light">从甘肃的运营中心出发，服务 28 个省级行政区</h2>
          <p>
            江南赛场的运营中心设在甘肃兰州，服务范围覆盖 28 个省级行政区。注册用户超过 120 万，其中既有自己看球的爱好者，也有每天要出稿的体育媒体人和做模型的机构分析师。
          </p>
          <p>
            对个人用户，免费公开的赛程概览与积分榜摘要一直可以看；对机构用户，我们提供数据接口与内容分发服务，按需对接。
          </p>
        </div>

        <ul class="about-reach__metrics">
          <li class="about-metric">
            <p class="about-metric__v mono">120<span>万+</span></p>
            <p class="about-metric__k">注册用户</p>
          </li>
          <li class="about-metric">
            <p class="about-metric__v mono">28</p>
            <p class="about-metric__k">省级行政区</p>
          </li>
          <li class="about-metric">
            <p class="about-metric__v mono">60<span>+</span></p>
            <p class="about-metric__k">合作机构</p>
          </li>
          <li class="about-metric">
            <p class="about-metric__v mono">18</p>
            <p class="about-metric__k">联赛与杯赛体系</p>
          </li>
          <li class="about-metric about-metric--wide">
            <p class="about-metric__v mono">2018</p>
            <p class="about-metric__k">历史数据最早可回溯赛季</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-section about-eco" id="partners">
    <div class="wrap">
      <div class="about-eco__grid">
        <div class="about-eco__head">
          <p class="eyebrow">合作生态</p>
          <h2 class="about-h2">谁在和江南赛场一起做事</h2>
          <p class="about-section__note">
            六十余家赛事机构、体育媒体和数据服务商已经接入。下面几类合作方式，展开可以看到具体怎么对接。
          </p>
        </div>

        <div class="accordion about-eco__accordion" data-accordion>
          <div class="accordion__item" data-accordion-item>
            <button class="accordion__trigger" type="button" data-accordion-trigger>
              赛事机构与赛事运营方
              <span class="accordion__sign" aria-hidden="true"></span>
            </button>
            <div class="accordion__panel" data-accordion-panel>
              <div>
                <p>为赛事方提供轮次资料整理与归档服务，把赛程、阵容与伤停信息按轮次沉淀下来，方便后续做赛季回顾、对外发布和内部复盘。</p>
              </div>
            </div>
          </div>
          <div class="accordion__item" data-accordion-item>
            <button class="accordion__trigger" type="button" data-accordion-trigger>
              体育媒体与内容团队
              <span class="accordion__sign" aria-hidden="true"></span>
            </button>
            <div class="accordion__panel" data-accordion-panel>
              <div>
                <p>编辑部最怕赛前拿到的名单是旧的。我们按轮次归档的阵容图与伤停名单，可以直接作为稿件素材，赛季内还可以调取近三个赛季的资料做横向对照。</p>
              </div>
            </div>
          </div>
          <div class="accordion__item" data-accordion-item>
            <button class="accordion__trigger" type="button" data-accordion-trigger>
              数据服务商与技术伙伴
              <span class="accordion__sign" aria-hidden="true"></span>
            </button>
            <div class="accordion__panel" data-accordion-panel>
              <div>
                <p>提供数据接口与内容分发服务，接口按轮次和球队两个维度组织，适合接入到已有的分析工具或展示系统中。具体对接方式可来信沟通。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-values" id="values">
    <div class="wrap">
      <div class="about-values__grid">
        <div class="about-values__head">
          <p class="eyebrow">做事的方式</p>
          <h2 class="about-h2">四条一直没变过的规矩</h2>
        </div>

        <ol class="about-values__list">
          <li class="about-value">
            <p class="about-value__no mono">01</p>
            <h3 class="about-value__name">落笔要稳</h3>
            <p class="about-value__text">核对完再发。抢时效发一份半截名单，对看球的人没有半点好处。</p>
          </li>
          <li class="about-value">
            <p class="about-value__no mono">02</p>
            <h3 class="about-value__name">数字要对得上</h3>
            <p class="about-value__text">同一场比赛，赛程表、阵容图和数据包里的出场人次必须一致。对不上就重来。</p>
          </li>
          <li class="about-value">
            <p class="about-value__no mono">03</p>
            <h3 class="about-value__name">更新不能断</h3>
            <p class="about-value__text">休赛期照常整理归档。开赛那天您打开，前一个赛季的底稿已经在那儿了。</p>
          </li>
          <li class="about-value">
            <p class="about-value__no mono">04</p>
            <h3 class="about-value__name">公开的部分一直公开</h3>
            <p class="about-value__text">赛程概览与积分榜摘要对所有访客开放，不需要注册，也不会哪天突然收起来。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="about-section about-cta">
    <div class="wrap about-cta__inner">
      <div class="about-cta__text">
        <p class="eyebrow">下一步</p>
        <h2 class="about-h2">先看看资料，还是先聊聊合作？</h2>
        <p>
          订阅档位与权益对比在业务中心，索引更新记录、赛季专题和客户端版本迭代在赛场动态。有具体问题，工作日 9:00 到 18:00 之间来信或来电都可以。
        </p>
      </div>
      <div class="about-cta__links">
        <a class="btn btn--primary" href="/business/">查看订阅档位</a>
        <a class="btn btn--ghost" href="/news/">浏览更新记录</a>
        <a class="btn btn--ghost" href="/inquiry/">进入咨询通道</a>
      </div>
    </div>
  </section>

</main>

/* ============ 品牌总览 · page-about ============ */
.page-about {
  --about-ink-soft: #4A5F63;
  --about-line: rgba(46, 74, 82, .14);
  --about-soft: rgba(46, 74, 82, .05);
  background: var(--yue);
  color: var(--mo);
  overflow-x: clip;
}

.page-about h1,
.page-about h2,
.page-about h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--dai);
  margin: 0;
}

.page-about p { margin: 0; }

.page-about .about-h2 {
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: .005em;
}

.page-about .about-h2--light { color: var(--yue); }

.page-about .about-section__note {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--about-ink-soft);
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .about-section { padding: clamp(52px, 8vw, 96px) 0; }

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(110% 80% at 92% 4%, rgba(217, 199, 214, .55) 0%, rgba(217, 199, 214, 0) 58%),
    radial-gradient(80% 60% at 4% 100%, rgba(227, 236, 234, .8) 0%, rgba(227, 236, 234, 0) 62%);
}

.page-about .about-hero__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-hero__title {
  margin-top: 16px;
  font-size: clamp(2.2rem, 8vw, 4.3rem);
  line-height: 1.14;
  letter-spacing: .004em;
}

.page-about .about-hero__accent { color: var(--zhu); }

.page-about .about-hero__text {
  margin-top: 22px;
  max-width: 48ch;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--about-line);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-fact__v {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--dai);
  line-height: 1;
}

.page-about .about-fact__k {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--qing);
}

.page-about .about-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-hero__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}

.page-about .about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 品牌起点 ---------- */
.page-about .about-origin { background: var(--yue); }

.page-about .about-origin__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-origin__body h2 { margin-top: 14px; }

.page-about .about-origin__body p {
  margin-top: 20px;
  line-height: 1.95;
  color: #2C3A3D;
}

.page-about .about-marginal {
  border-left: 2px solid var(--ou);
  padding: 4px 0 4px 22px;
  align-self: start;
}

.page-about .about-marginal p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.95;
  color: var(--dai);
}

.page-about .about-marginal span {
  display: block;
  margin-top: 14px;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--qing);
}

/* ---------- 发展历程 ---------- */
.page-about .about-timeline {
  background: var(--xuan);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 1px 0 rgba(201, 169, 106, .35);
}

.page-about .about-timeline__intro {
  display: grid;
  gap: 28px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.page-about .about-timeline__figure {
  border-radius: var(--radius);
  width: min(100%, 340px);
  justify-self: start;
}

.page-about .about-timeline__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .about-timeline__rail { margin-bottom: 34px; }

.page-about .about-rail__label {
  font-size: .74rem;
  letter-spacing: .22em;
  color: var(--qing);
  margin-bottom: 12px;
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .about-rail__list::-webkit-scrollbar { display: none; }

.page-about .about-rail__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--about-line);
  color: var(--dai);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}

.page-about .about-rail__list a .mono {
  font-size: .74rem;
  color: var(--qing);
}

.page-about .about-rail__list a:hover {
  border-color: var(--zhu);
  background: rgba(193, 58, 46, .06);
  transform: translateY(-2px);
}

.page-about .about-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-about .about-timeline__list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 26px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ou) 0%, var(--dai) 42%, var(--zhu) 82%, var(--jin) 100%);
}

.page-about .about-era {
  position: relative;
  padding: 0 0 40px 40px;
}

.page-about .about-era:last-child { padding-bottom: 8px; }

.page-about .about-era__node {
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--xuan);
  border: 2px solid var(--qing);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.page-about .about-era:hover .about-era__node {
  background: var(--zhu);
  border-color: var(--zhu);
  transform: scale(1.3);
}

.page-about .about-era__year {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--qing);
}

.page-about .about-era__title {
  margin-top: 6px;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.4;
}

.page-about .about-era__text {
  margin-top: 10px;
  max-width: 62ch;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 团队 ---------- */
.page-about .about-team { background: var(--yue); }

.page-about .about-team__top {
  display: grid;
  gap: 30px;
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 52px);
}

.page-about .about-team__figure {
  border-radius: var(--radius);
  width: min(100%, 420px);
  justify-self: start;
}

.page-about .about-team__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .about-team__grid {
  display: grid;
  gap: 20px;
}

.page-about .about-role {
  padding: 30px 26px 32px;
  border-radius: var(--radius);
  background: var(--xuan);
  border: 1px solid var(--about-line);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}

.page-about .about-role:hover {
  border-color: rgba(193, 58, 46, .45);
  background: #ffffff;
  transform: translateY(-2px);
}

.page-about .about-role__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--dan), var(--yue));
  border: 1px solid rgba(46, 74, 82, .16);
  color: var(--dai);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

.page-about .about-role__num span {
  font-size: .9rem;
  margin-left: 2px;
}

.page-about .about-role__name {
  margin-top: 20px;
  font-size: 1.25rem;
}

.page-about .about-role__desc {
  margin-top: 12px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 服务覆盖 ---------- */
.page-about .about-reach {
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(217, 199, 214, .28) 0%, rgba(217, 199, 214, 0) 60%),
    linear-gradient(160deg, #35575F 0%, var(--dai) 55%, #233B42 100%);
  color: var(--yue);
  border-top: 1px solid rgba(201, 169, 106, .5);
  border-bottom: 1px solid rgba(201, 169, 106, .5);
}

.page-about .about-reach .eyebrow { color: var(--jin); }

.page-about .about-reach__grid {
  display: grid;
  gap: 44px;
}

.page-about .about-reach__lead p {
  margin-top: 20px;
  max-width: 52ch;
  line-height: 1.95;
  color: rgba(245, 247, 246, .82);
}

.page-about .about-reach__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(245, 247, 246, .14);
  border: 1px solid rgba(245, 247, 246, .14);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-about .about-metric {
  background: rgba(26, 31, 30, .18);
  padding: 24px 20px 26px;
}

.page-about .about-metric--wide { grid-column: 1 / -1; }

.page-about .about-metric__v {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 600;
  color: var(--yue);
  line-height: 1;
}

.page-about .about-metric__v span {
  font-size: .95rem;
  margin-left: 2px;
  color: var(--jin);
}

.page-about .about-metric__k {
  margin-top: 10px;
  font-size: .82rem;
  letter-spacing: .05em;
  color: rgba(245, 247, 246, .62);
}

/* ---------- 合作生态 ---------- */
.page-about .about-eco { background: var(--yue); }

.page-about .about-eco__grid {
  display: grid;
  gap: 32px;
}

.page-about .about-eco__accordion { border-top: 1px solid var(--about-line); }

/* ---------- 做事的方式 ---------- */
.page-about .about-values {
  background: linear-gradient(180deg, var(--yue) 0%, var(--dan) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.page-about .about-values__grid {
  display: grid;
  gap: 36px;
}

.page-about .about-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .about-value {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid rgba(46, 74, 82, .18);
}

.page-about .about-value:last-child { border-bottom: 1px solid rgba(46, 74, 82, .18); }

.page-about .about-value__no {
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--zhu);
}

.page-about .about-value__name { font-size: 1.15rem; }

.page-about .about-value__text {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  background: var(--yue);
  padding-bottom: clamp(64px, 9vw, 112px);
}

.page-about .about-cta__inner {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 5vw, 52px);
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--xuan);
}

.page-about .about-cta__text p {
  margin-top: 18px;
  max-width: 56ch;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

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

  .page-about .about-metric--wide { grid-column: span 4; }

  .page-about .about-value {
    grid-template-columns: 60px minmax(0, 200px) minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: 60px;
  }

  .page-about .about-hero__media { margin-top: 8px; }

  .page-about .about-origin__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 72px;
  }

  .page-about .about-timeline__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 64px;
  }

  .page-about .about-timeline__figure { justify-self: end; }

  .page-about .about-timeline__grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-timeline__rail {
    position: sticky;
    top: calc(var(--top-h) + 32px);
    margin-bottom: 0;
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__list a {
    border: 0;
    border-left: 2px solid var(--about-line);
    border-radius: 0;
    padding: 10px 14px;
    white-space: normal;
    background: transparent;
  }

  .page-about .about-rail__list a:hover {
    border-left-color: var(--zhu);
    background: rgba(193, 58, 46, .05);
    transform: none;
  }

  .page-about .about-team__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 64px;
  }

  .page-about .about-team__figure { justify-self: end; }

  .page-about .about-reach__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: start;
  }

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

  .page-about .about-metric--wide { grid-column: span 2; }

  .page-about .about-eco__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-values__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 72px;
    align-items: start;
  }

  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}