.page-about {
  --about-line: rgba(212, 175, 55, .26);
  --about-hair: rgba(0, 229, 255, .2);
  --about-text: rgba(234, 242, 255, .82);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(0, 229, 255, .09), transparent 62%),
    radial-gradient(900px 540px at -8% 34%, rgba(59, 42, 107, .3), transparent 66%);
  color: var(--mist);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- 面包屑 ---------- */
.page-about .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: clamp(18px, 3vw, 30px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

.page-about .breadcrumbs a {
  color: var(--slate);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-about .breadcrumbs a:hover,
.page-about .breadcrumbs a:focus-visible {
  color: var(--cyan);
}

.page-about .breadcrumbs__sep {
  color: rgba(212, 175, 55, .7);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--about-line);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(124, 141, 166, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 141, 166, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .6;
}

.page-about .about-hero > * {
  position: relative;
  z-index: 1;
}

.page-about .about-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(33px, 7vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--mist);
  margin: 14px 0 18px;
  max-width: 17ch;
}

.page-about .about-hero h1 em {
  font-style: normal;
  color: var(--cyan);
}

.page-about .about-hero__lead {
  max-width: 54ch;
  margin: 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.75;
  color: var(--about-text);
}

.page-about .about-hero__lead strong {
  color: var(--gold);
  font-weight: 600;
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px dashed rgba(124, 141, 166, .32);
}

.page-about .about-stat {
  padding-left: 12px;
  border-left: 2px solid var(--about-line);
}

.page-about .about-stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-about .about-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

/* ---------- 主体骨架 ---------- */
.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  margin-top: clamp(30px, 5vw, 56px);
}

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  border-top: 2px solid var(--gold);
  padding-top: 14px;
}

.page-about .about-index__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-about .about-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.page-about .about-index__list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 6px 8px 0;
  font-size: 13px;
  color: rgba(234, 242, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 141, 166, .16);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--cyan);
  padding-left: 4px;
}

.page-about .about-index__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
}

/* ---------- 章节 ---------- */
.page-about .about-chapter {
  padding-bottom: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(212, 175, 55, .16);
  scroll-margin-top: 104px;
}

.page-about .about-chapter:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-about .about-chapter__kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-chapter h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.3vw, 36px);
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--mist);
  margin: 0 0 16px;
  max-width: 24ch;
}

.page-about .about-chapter p {
  margin: 0 0 14px;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--about-text);
}

.page-about .about-chapter p:last-child {
  margin-bottom: 0;
}

.page-about .about-chapter a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, .4);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-about .about-chapter a:hover,
.page-about .about-chapter a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 图片 ---------- */
.page-about .figure {
  margin: 22px 0;
}

.page-about .figure__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--about-line);
  border-radius: 2px;
}

.page-about .figure__cap {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--slate);
}

/* ---------- 地州列表 ---------- */
.page-about .about-prefs {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(212, 175, 55, .2);
  border: 1px solid rgba(212, 175, 55, .2);
}

.page-about .about-prefs li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  background: var(--ink-800);
  transition: background .22s var(--ease);
}

.page-about .about-prefs li:hover {
  background: #10294b;
}

.page-about .about-prefs__name {
  font-size: 14px;
  color: var(--mist);
}

.page-about .about-prefs__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cyan);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.page-about .about-prefs li:hover .about-prefs__hint,
.page-about .about-prefs li:focus-within .about-prefs__hint {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .page-about .about-prefs__hint {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 服务承诺 ---------- */
.page-about .about-pledge {
  display: grid;
  gap: 1px;
  margin: 22px 0;
  background: rgba(212, 175, 55, .22);
  border: 1px solid rgba(212, 175, 55, .22);
}

.page-about .about-pledge__item {
  padding: 20px 18px;
  background: linear-gradient(155deg, rgba(59, 42, 107, .6), rgba(11, 30, 58, .94));
}

.page-about .about-pledge__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-about .about-pledge__item p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(234, 242, 255, .78);
}

/* ---------- 里程碑 ---------- */
.page-about .about-miles {
  position: relative;
  margin-top: 26px;
  padding-left: 26px;
}

.page-about .about-miles::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .85), rgba(212, 175, 55, .55), rgba(212, 175, 55, 0));
}

.page-about .about-mile {
  position: relative;
  border-bottom: 1px solid rgba(124, 141, 166, .18);
}

.page-about .about-mile:last-child {
  border-bottom: 0;
}

.page-about .about-mile::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(11, 30, 58, .92);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.page-about .about-mile[open]::before {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .about-mile__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}

.page-about .about-mile__head::-webkit-details-marker {
  display: none;
}

.page-about .about-mile__head:hover .about-mile__title {
  color: var(--cyan);
}

.page-about .about-mile__head::after {
  content: "+";
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--gold);
}

.page-about .about-mile[open] .about-mile__head::after {
  content: "–";
  color: var(--cyan);
}

.page-about .about-mile__year {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .02em;
}

.page-about .about-mile__title {
  font-size: 15px;
  color: var(--mist);
  transition: color .2s var(--ease);
}

.page-about .about-mile__body {
  padding: 0 0 16px;
  max-width: 58ch;
}

.page-about .about-mile__body p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.76;
  color: var(--about-text);
}

/* ---------- 结尾 ---------- */
.page-about .about-cta {
  position: relative;
  margin-top: clamp(34px, 6vw, 64px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--about-line);
  background:
    linear-gradient(128deg, rgba(0, 229, 255, .1), rgba(255, 107, 26, .07) 62%, transparent 88%),
    var(--ink-900);
  overflow: hidden;
}

.page-about .about-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -80px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(212, 175, 55, .28);
  transform: rotate(24deg);
  pointer-events: none;
}

.page-about .about-cta .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-cta h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--mist);
  max-width: 20ch;
}

.page-about .about-cta p {
  margin: 0 0 22px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--about-text);
}

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

/* ---------- 入场 ---------- */
.has-js .page-about .about-chapter[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

.has-js .page-about .about-chapter[data-reveal="in"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .page-about .about-chapter[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-about .about-body {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
  }

  .page-about .about-index {
    position: sticky;
    top: 96px;
  }

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

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

  .page-about .about-chapter h2 {
    max-width: 26ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-prefs__hint,
  .page-about .about-index__list a,
  .page-about .about-mile__head {
    transition: none;
  }
}


<main id="main-content" class="page-about">

  <div class="shell">
    <nav class="breadcrumbs" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="breadcrumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌档案</span>
    </nav>

    <header class="about-hero">
      <p class="eyebrow">BRAND FILE · 品牌档案</p>
      <h1>五年，把记分牌<em>读成</em>一场球</h1>
      <p class="about-hero__lead">2021 年我们只想让球迷少开几个页面就能看到比分。今天，38 万球友在开赛前十分钟打开浩瀚体育站，确认阵容、比对控球与射门，散场后再约一场夜球。</p>

      <div class="about-hero__stats">
        <div class="about-stat">
          <span class="about-stat__value">38 万</span>
          <span class="about-stat__label">累计注册用户</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__value">6.8 万</span>
          <span class="about-stat__label">新疆本地球友</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__value">26 人</span>
          <span class="about-stat__label">数据团队成员</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__value">18 城</span>
          <span class="about-stat__label">驻场观察员覆盖</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__value">210 家</span>
          <span class="about-stat__label">合作约球场馆</span>
        </div>
      </div>
    </header>
  </div>

  <div class="shell">
    <div class="about-body">

      <aside class="about-index" aria-label="章节索引">
        <p class="about-index__title">章节索引</p>
        <ol class="about-index__list">
          <li><a href="#chapter-origin"><span class="about-index__num">01</span>起点</a></li>
          <li><a href="#chapter-team"><span class="about-index__num">02</span>数据团队</a></li>
          <li><a href="#chapter-local"><span class="about-index__num">03</span>本地网络</a></li>
          <li><a href="#chapter-partners"><span class="about-index__num">04</span>合作生态</a></li>
          <li><a href="#chapter-pledge"><span class="about-index__num">05</span>服务承诺</a></li>
          <li><a href="#chapter-timeline"><span class="about-index__num">06</span>发展历程</a></li>
        </ol>
      </aside>

      <div class="about-flow">

        <section class="about-chapter" id="chapter-origin" data-reveal>
          <p class="about-chapter__kicker">Chapter 01 · 起点</p>
          <h2>先把“下一场什么时候踢”这件事解决掉</h2>
          <p>2021 年上线的赛程中心，起点并不高。当时球迷看一场球，轮次安排在一处、比分在另一处，来回切换是常态。我们把轮次和比分并到同一屏，先把迷路这件事解决掉。</p>
          <p>到了 2023 年，数据对照面板来了。控球率、射门、射正同屏比对，攻守两端谁占上风，不必再靠解说语气去猜。很多老用户就是从这一步开始，把赛前十分钟固定给了我们。</p>
          <p>2024 年的 CN 测试版，做的是减法。重点场次筛选、常用球队关注一起上线，只看几支队伍的人，打开就是自己想看的比赛，不必在长列表里翻。</p>
          <p>2025 年品牌认证完成升级。数据来源标注、更新节奏和版本说明重新捋了一遍，赛前十分钟不再是一句口号，而是每天到点就要交出的结果。</p>
        </section>

        <section class="about-chapter" id="chapter-team" data-reveal>
          <p class="about-chapter__kicker">Chapter 02 · 数据团队</p>
          <h2>26 个人，18 座城市，盯住每周 320 场</h2>
          <p>数据团队 26 名成员，驻场观察员分布在 18 个城市。规模不算夸张，但每周 320 场赛程里那 90 场重点比赛，阵容与统计都有人从头跟到尾。</p>

          <figure class="figure figure--wide">
            <img class="figure__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间数据运营空间里多块屏幕显示控球率与射门统计图，工作人员以背影出现" loading="lazy" decoding="async">
            <figcaption class="figure__cap">赛前十分钟，运营席上的几块屏幕同时刷新阵容与实时统计。</figcaption>
          </figure>

          <p>控球率这项统计，我们和人工复核之间的偏差收在 2.1 个百分点以内。现场有人记，后台有人核，一遍对不上就再来一遍——你看到的那个百分比，是好几个人同时盯着同一块草皮的结果。</p>
          <p>重点场次的节奏更紧。阵容一公布，射门与射正跟着进面板，比分和轮次安排同步推到首页。夜场灯亮之前，该看的都在屏幕上了。</p>
        </section>

        <section class="about-chapter" id="chapter-local" data-reveal>
          <p class="about-chapter__kicker">Chapter 03 · 本地网络</p>
          <h2>从乌鲁木齐出发，把球场接到 14 个地州</h2>
          <p>内容与数据运营在乌鲁木齐展开，服务范围覆盖全疆 14 个地州。6.8 万新疆球友在这里找比赛、约球、回看赛后统计，冬天也照踢不误。</p>

          <ul class="about-prefs">
            <li><span class="about-prefs__name">乌鲁木齐</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">昌吉</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">喀什</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">伊犁</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">克拉玛依</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">阿克苏</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">和田</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">塔城</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">阿勒泰</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">吐鲁番</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">哈密</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">博尔塔拉</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">巴音郭楞</span><span class="about-prefs__hint">约球已开通</span></li>
            <li><span class="about-prefs__name">克孜勒苏</span><span class="about-prefs__hint">约球已开通</span></li>
          </ul>

          <figure class="figure figure--wide">
            <img class="figure__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="黄昏城市天际线与球场泛光灯叠合，沙金色细线轻覆其上" loading="lazy" decoding="async">
            <figcaption class="figure__cap">天黑前后的两个小时，是新疆各地球场最热闹的时候。</figcaption>
          </figure>

          <p>210 家合作场馆分布在乌鲁木齐、昌吉、喀什、伊犁等地。发起比赛、招募队友、预约场地、赛后回看统计，一条线走完，不用在几个群里反复喊人。球队组织者心里最清楚，约球难的从来不是凑人，是把人、场地和时间点对上。</p>
        </section>

        <section class="about-chapter" id="chapter-partners" data-reveal>
          <p class="about-chapter__kicker">Chapter 04 · 合作生态</p>
          <h2>46 家伙伴，把内容与约球拧在一起</h2>
          <p>平台与 46 家本地青训机构、球迷协会一起做内容和约球。青训教练要赛程与轮次安排，球迷协会要场地和对手，两边都能在同一个地方找到自己那一半。</p>

          <figure class="figure figure--wide">
            <img class="figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间业余球赛开场前球友在场边集合的剪影，泛光灯照亮草皮" loading="lazy" decoding="async">
            <figcaption class="figure__cap">开赛前的场边集合，是每个周末固定上演的一幕。</figcaption>
          </figure>

          <p>平台覆盖足球、篮球、排球等 12 个球类项目，重点运营 6 大联赛。资讯栏目每天更新 15–30 条赛事动态，赛前阵容、轮次变化、数据观察都在其中，赶上密集赛程，一天的量能顶平时两天。</p>
          <p>每年 4 期《西北球迷观赛趋势报告》，把重点场次的关注度和观赛习惯沉淀下来。哪座城市的球友更爱看夜场，哪些对阵值得提前占位，翻开就有参考。想看最近的赛程与动态，可以直接去<a href="/information/">资讯与赛程</a>。</p>
        </section>

        <section class="about-chapter" id="chapter-pledge" data-reveal>
          <p class="about-chapter__kicker">Chapter 05 · 服务承诺</p>
          <h2>答案就压在那十分钟里</h2>
          <p>数据说到底是在回答球迷的一个问题：这场球，到底谁在压着谁打。我们把答案压进赛前十分钟这个窗口，剩下的判断交给你。</p>

          <div class="about-pledge">
            <div class="about-pledge__item">
              <span class="about-pledge__num">开赛前 10 分钟</span>
              <p>阵容、控球率与射门统计一起到位，重点场次另配阵容与统计对照，打开就能对比。</p>
            </div>
            <div class="about-pledge__item">
              <span class="about-pledge__num">2.1 个百分点</span>
              <p>控球率统计与人工复核之间的偏差控制范围，现场记录与后台复核两条线并行。</p>
            </div>
            <div class="about-pledge__item">
              <span class="about-pledge__num">90 场 / 周</span>
              <p>每周重点场次的规模，按开赛时间、对阵看点与本地关注度排进重点标签。</p>
            </div>
            <div class="about-pledge__item">
              <span class="about-pledge__num">38 MB</span>
              <p>CN 测试版安装包大小，Android 与 iOS 测试通道同步开放，比分推送与球队关注都在里面。</p>
            </div>
          </div>

          <p>碰上数据对不上、赛程找不到、安装卡住的情况，工作日 10:00–19:00（北京时间）走<a href="/inquiry/">咨询通道</a>找客服，附上截图和场次编号，回应会快很多。想先看看能查哪些数据，从<a href="/solutions/">产品与功能</a>进；只想确认今晚看哪场，直接翻赛程。</p>
        </section>

        <section class="about-chapter" id="chapter-timeline" data-reveal>
          <p class="about-chapter__kicker">Chapter 06 · 发展历程</p>
          <h2>四张展签，串起这五年</h2>

          <div class="about-miles">
            <details class="about-mile">
              <summary class="about-mile__head">
                <span class="about-mile__year">2021</span>
                <span class="about-mile__title">赛程中心上线</span>
              </summary>
              <div class="about-mile__body">
                <p>轮次安排与比分追踪收进同一处。球迷第一次不必在几个页面间来回跳，就知道下一轮什么时候开打、上一场谁赢了。</p>
              </div>
            </details>

            <details class="about-mile">
              <summary class="about-mile__head">
                <span class="about-mile__year">2023</span>
                <span class="about-mile__title">数据对照面板推出</span>
              </summary>
              <div class="about-mile__body">
                <p>控球率、射门与射正支持同屏查看。赛前十分钟打开一次，攻守两端的走向就大致看明白了。</p>
              </div>
            </details>

            <details class="about-mile">
              <summary class="about-mile__head">
                <span class="about-mile__year">2024</span>
                <span class="about-mile__title">CN 测试版发布</span>
              </summary>
              <div class="about-mile__body">
                <p>重点场次筛选与常用球队关注一起上线，比分推送和轮次安排跟着进手机。只看重点场次的球迷，从此少翻好几页。</p>
              </div>
            </details>

            <details class="about-mile">
              <summary class="about-mile__head">
                <span class="about-mile__year">2025</span>
                <span class="about-mile__title">品牌认证升级</span>
              </summary>
              <div class="about-mile__body">
                <p>数据来源标注与更新时效重新整理，赛前十分钟的节奏固定下来，重点场次在首页就能一眼定位。</p>
              </div>
            </details>
          </div>
        </section>

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

  <div class="shell">
    <section class="about-cta">
      <p class="eyebrow">NEXT · 下一步</p>
      <h2>下一场开踢之前，先来坐坐</h2>
      <p>想看看能查哪些数据、能不能对上你常关注的那几支球队，从产品与功能进去转一圈；有约球合作、场馆入驻或数据反馈，直接走咨询通道，把话聊透。</p>
      <div class="about-cta__actions">
        <a class="btn btn--primary" href="/solutions/">看看产品与功能</a>
        <a class="btn btn--ghost" href="/inquiry/">联系我们</a>
        <a class="btn btn--quiet" href="/information/">今晚的赛程</a>
      </div>
    </section>
  </div>

</main>

.page-about {
  --about-line: rgba(212, 175, 55, .26);
  --about-hair: rgba(0, 229, 255, .2);
  --about-text: rgba(234, 242, 255, .82);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(0, 229, 255, .09), transparent 62%),
    radial-gradient(900px 540px at -8% 34%, rgba(59, 42, 107, .3), transparent 66%);
  color: var(--mist);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- 面包屑 ---------- */
.page-about .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: clamp(18px, 3vw, 30px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

.page-about .breadcrumbs a {
  color: var(--slate);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-about .breadcrumbs a:hover,
.page-about .breadcrumbs a:focus-visible {
  color: var(--cyan);
}

.page-about .breadcrumbs__sep {
  color: rgba(212, 175, 55, .7);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--about-line);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(124, 141, 166, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 141, 166, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .6;
}

.page-about .about-hero > * {
  position: relative;
  z-index: 1;
}

.page-about .about-hero .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-hero h1 {
  margin: 14px 0 18px;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--mist);
}

.page-about .about-hero h1 em {
  font-style: normal;
  color: var(--cyan);
}

.page-about .about-hero__lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.75;
  color: var(--about-text);
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px dashed rgba(124, 141, 166, .32);
}

.page-about .about-stat {
  padding-left: 12px;
  border-left: 2px solid var(--about-line);
}

.page-about .about-stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-about .about-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

/* ---------- 主体骨架 ---------- */
.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  margin-top: clamp(30px, 5vw, 56px);
}

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  padding-top: 14px;
  border-top: 2px solid var(--gold);
}

.page-about .about-index__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-about .about-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.page-about .about-index__list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 6px 8px 0;
  font-size: 13px;
  color: rgba(234, 242, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 141, 166, .16);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--cyan);
  padding-left: 4px;
}

.page-about .about-index__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
}

/* ---------- 章节 ---------- */
.page-about .about-chapter {
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(212, 175, 55, .16);
  scroll-margin-top: 104px;
}

.page-about .about-chapter:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-chapter__kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-chapter h2 {
  margin: 0 0 16px;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.3vw, 36px);
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--mist);
}

.page-about .about-chapter p {
  margin: 0 0 14px;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--about-text);
}

.page-about .about-chapter p:last-child {
  margin-bottom: 0;
}

.page-about .about-chapter a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, .4);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-about .about-chapter a:hover,
.page-about .about-chapter a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 图片 ---------- */
.page-about .figure {
  margin: 22px 0;
}

.page-about .figure__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--about-line);
  border-radius: 2px;
}

.page-about .figure__cap {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--slate);
}

/* ---------- 地州列表 ---------- */
.page-about .about-prefs {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(212, 175, 55, .2);
  border: 1px solid rgba(212, 175, 55, .2);
}

.page-about .about-prefs li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  background: var(--ink-800);
  transition: background .22s var(--ease);
}

.page-about .about-prefs li:hover {
  background: #10294b;
}

.page-about .about-prefs__name {
  font-size: 14px;
  color: var(--mist);
}

.page-about .about-prefs__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cyan);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.page-about .about-prefs li:hover .about-prefs__hint,
.page-about .about-prefs li:focus-within .about-prefs__hint {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .page-about .about-prefs__hint {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 服务承诺 ---------- */
.page-about .about-pledge {
  display: grid;
  gap: 1px;
  margin: 22px 0;
  background: rgba(212, 175, 55, .22);
  border: 1px solid rgba(212, 175, 55, .22);
}

.page-about .about-pledge__item {
  padding: 20px 18px;
  background: linear-gradient(155deg, rgba(59, 42, 107, .6), rgba(11, 30, 58, .94));
}

.page-about .about-pledge__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-about .about-pledge__item p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(234, 242, 255, .78);
}

/* ---------- 里程碑 ---------- */
.page-about .about-miles {
  position: relative;
  margin-top: 26px;
  padding-left: 26px;
}

.page-about .about-miles::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .85), rgba(212, 175, 55, .55), rgba(212, 175, 55, 0));
}

.page-about .about-mile {
  position: relative;
  border-bottom: 1px solid rgba(124, 141, 166, .18);
}

.page-about .about-mile:last-child {
  border-bottom: 0;
}

.page-about .about-mile::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(11, 30, 58, .92);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.page-about .about-mile[open]::before {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .about-mile__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
}

.page-about .about-mile__head::-webkit-details-marker {
  display: none;
}

.page-about .about-mile__head::after {
  content: "+";
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--gold);
}

.page-about .about-mile[open] .about-mile__head::after {
  content: "–";
  color: var(--cyan);
}

.page-about .about-mile__year {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold);
}

.page-about .about-mile__title {
  font-size: 15px;
  color: var(--mist);
  transition: color .2s var(--ease);
}

.page-about .about-mile__head:hover .about-mile__title {
  color: var(--cyan);
}

.page-about .about-mile__body {
  max-width: 58ch;
  padding: 0 0 16px;
}

.page-about .about-mile__body p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.76;
  color: var(--about-text);
}

/* ---------- 结尾 ---------- */
.page-about .about-cta {
  position: relative;
  margin-top: clamp(34px, 6vw, 64px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--about-line);
  background:
    linear-gradient(128deg, rgba(0, 229, 255, .1), rgba(255, 107, 26, .07) 62%, transparent 88%),
    var(--ink-900);
  overflow: hidden;
}

.page-about .about-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -80px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(212, 175, 55, .28);
  transform: rotate(24deg);
  pointer-events: none;
}

.page-about .about-cta .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-cta h2 {
  margin: 0 0 14px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--mist);
}

.page-about .about-cta p {
  margin: 0 0 22px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--about-text);
}

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

/* ---------- 入场 ---------- */
.has-js .page-about .about-chapter[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

.has-js .page-about .about-chapter[data-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-about .about-body {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
  }

  .page-about .about-index {
    position: sticky;
    top: 96px;
  }

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

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

  .page-about .about-chapter h2 {
    max-width: 26ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .page-about .about-chapter[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-about .about-prefs__hint,
  .page-about .about-index__list a,
  .page-about .about-mile__title {
    transition: none;
  }
}