.page-about {
  --about-col: 96px;
  --about-gap: 40px;
  background: var(--black-track);
  color: var(--ink);
  font-family: var(--font-display);
}

.page-about img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: 20px 0 36px;
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(to right, rgba(42, 58, 82, 0.26) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 58, 82, 0.26) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  overflow: hidden;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 16% 0%, rgba(200, 255, 61, 0.1), transparent 62%),
    radial-gradient(60% 80% at 90% 22%, rgba(47, 230, 255, 0.1), transparent 60%);
}

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

.page-about .about-hero__layout {
  display: grid;
  gap: 28px;
  margin-top: 22px;
}

.page-about .about-hero__copy h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.12;
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-about .about-hero__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.page-about .about-hero__stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-hero__stats li {
  background: var(--black-track);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-hero__stats .num {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lime);
}

.page-about .about-hero__stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-about .about-hero__figure {
  border: 1px solid var(--line);
  background: var(--slate);
}

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

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  position: sticky;
  top: 56px;
  z-index: 5;
  background: var(--panel-navy);
  border-bottom: 1px solid var(--line);
}

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

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

.page-about .about-index__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.page-about .about-index__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--volt);
}

/* ---------- 章节通用 ---------- */
.page-about .about-chapter {
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 128px;
}

.page-about .about-chapter--wide {
  padding: 56px 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.7) 100%);
}

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

.page-about .about-chapter__head {
  display: grid;
  gap: 10px;
}

.page-about .about-chapter__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-about .about-chapter__no::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--lime);
}

.page-about .about-chapter h2 {
  margin: 0;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.22;
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-about .about-chapter__body > p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
}

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

/* ---------- 三条原则 ---------- */
.page-about .principles {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .principles li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .principles__k {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.page-about .principles__v {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 团队点阵 ---------- */
.page-about .team-dots {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  max-width: 620px;
}

.page-about .team-dots__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--slate);
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-about .team-dots__row:hover,
.page-about .team-dots__row:focus-within {
  border-color: rgba(200, 255, 61, 0.6);
  background: #16233a;
}

.page-about .team-dots__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.page-about .team-dots__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-about .team-dots__marks span {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--grid-line);
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.page-about .team-dots__row--edit .team-dots__marks span {
  background: rgba(200, 255, 61, 0.45);
}

.page-about .team-dots__row--check .team-dots__marks span {
  background: rgba(47, 230, 255, 0.5);
}

.page-about .team-dots__row--product .team-dots__marks span {
  background: rgba(233, 241, 255, 0.4);
}

.page-about .team-dots__row--service .team-dots__marks span {
  background: rgba(91, 229, 140, 0.45);
}

.page-about .team-dots__row:hover .team-dots__marks span {
  background: var(--lime);
  box-shadow: 0 0 8px rgba(200, 255, 61, 0.45);
}

.page-about .team-dots__count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  transition: color 0.24s var(--ease);
}

.page-about .team-dots__row:hover .team-dots__count {
  color: var(--lime);
}

/* ---------- 每日流程 ---------- */
.page-about .routine-grid {
  display: grid;
  gap: 24px;
}

.page-about .routine-figure {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  background: var(--panel-navy);
}

.page-about .routine-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 版本时间轴 ---------- */
.page-about .version-track {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .version-node {
  position: relative;
  padding-left: 28px;
  display: grid;
  gap: 4px;
}

.page-about .version-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 61, 0.14);
  transition: box-shadow 0.24s var(--ease);
}

.page-about .version-node::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  bottom: -18px;
  width: 1px;
  background: var(--line);
}

.page-about .version-node:last-child::after {
  display: none;
}

.page-about .version-node:hover::before {
  box-shadow: 0 0 0 6px rgba(200, 255, 61, 0.16);
}

.page-about .version-node__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--volt);
}

.page-about .version-node__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.page-about .version-node__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 10px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-about .version-node:hover .version-node__desc {
  color: var(--ink);
  border-left-color: var(--lime);
}

.page-about .versions-figure {
  aspect-ratio: 8 / 3;
  margin: 30px 0 0;
  border: 1px solid var(--line);
  background: var(--panel-navy);
}

.page-about .versions-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 覆盖数据条 ---------- */
.page-about .reach-strip {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .reach-strip li {
  background: var(--panel-navy);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-about .reach-strip__num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--volt);
}

.page-about .reach-strip__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- 合作与认可 ---------- */
.page-about .about-quote {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--lime);
  background: var(--slate);
}

.page-about .about-quote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ---------- 下一步 ---------- */
.page-about .about-next {
  padding: 48px 0 56px;
  background: var(--panel-navy);
}

.page-about .about-next h2 {
  margin: 0 0 22px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-about .next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.page-about .next-links a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px;
  border: 1px solid var(--line);
  background: var(--black-track);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease), color 0.24s var(--ease);
}

.page-about .next-links a span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
  transition: color 0.24s var(--ease);
}

.page-about .next-links a:hover,
.page-about .next-links a:focus-visible {
  border-color: var(--lime);
  background: rgba(200, 255, 61, 0.07);
  color: var(--lime);
}

.page-about .next-links a:hover span,
.page-about .next-links a:focus-visible span {
  color: var(--ink);
}

/* ---------- 响应式 ---------- */
@media (min-width: 680px) {
  .page-about .about-hero {
    padding: 26px 0 44px;
  }

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

  .page-about .principles li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }

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

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

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

  .page-about .about-hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: end;
    gap: 44px;
  }

  .page-about .about-chapter,
  .page-about .about-chapter--wide {
    padding: 72px 0;
  }

  .page-about .about-chapter__inner {
    grid-template-columns: var(--about-col) minmax(0, 1fr);
    column-gap: var(--about-gap);
    row-gap: 28px;
  }

  .page-about .about-chapter__head {
    grid-column: 1 / -1;
    grid-template-columns: var(--about-col) minmax(0, 1fr);
    column-gap: var(--about-gap);
    align-items: end;
  }

  .page-about .about-chapter__no {
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.08em;
    align-self: start;
    padding-top: 2px;
  }

  .page-about .about-chapter__no::before {
    display: none;
  }

  .page-about .about-chapter__body {
    grid-column: 2;
  }

  .page-about .routine-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .version-track {
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 34px;
  }

  .page-about .version-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 1px;
    background: var(--line);
  }

  .page-about .version-node {
    padding: 36px 20px 0 0;
  }

  .page-about .version-node::before {
    top: 9px;
    left: 0;
  }

  .page-about .version-node::after {
    display: none;
  }

  .page-about .version-node__desc {
    padding-left: 0;
    border-left: 0;
  }

  .page-about .version-node:hover .version-node__desc {
    border-left: 0;
  }

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

  .page-about .about-next {
    padding: 64px 0 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


<main id="main-content" class="page-about">
  <section class="about-hero">
    <div class="wrap">
      <nav class="crumbs" aria-label="面包屑导航">
        <ul>
          <li><a href="/">首页</a></li>
          <li aria-current="page">我们是谁</li>
        </ul>
      </nav>

      <div class="about-hero__layout">
        <div class="about-hero__copy">
          <p class="eyebrow">品牌自述</p>
          <h1>做赛程的人，先把自己当成看赛的人</h1>
          <p class="about-hero__lead">
            LOVE赛场从 2019 年上线运营，累计注册用户超过 92 万。每天做的事很具体：把 28 个运动项目的轮次排布理清楚，让你打开一个页面就知道今天该看哪一场、几点开始、怎么把关注的场次留在自己的日历里。
          </p>
          <ul class="about-hero__stats">
            <li>
              <span class="num">2019</span>
              <span class="about-hero__stat-label">上线运营至今</span>
            </li>
            <li>
              <span class="num">92万+</span>
              <span class="about-hero__stat-label">累计注册用户</span>
            </li>
            <li>
              <span class="num">28</span>
              <span class="about-hero__stat-label">覆盖运动项目</span>
            </li>
            <li>
              <span class="num">14</span>
              <span class="about-hero__stat-label">内容团队成员</span>
            </li>
          </ul>
        </div>

        <figure class="about-hero__figure media media--16x9">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深色空间里多条发光轨道线汇聚向同一个节点，节点处环绕荧光绿刻度环，整体呈抽象几何构成">
        </figure>
      </div>
    </div>
  </section>

  <nav class="about-index" aria-label="页面章节">
    <div class="wrap">
      <ol class="about-index__list">
        <li><a href="#why"><span class="about-index__no">01</span>起点</a></li>
        <li><a href="#team"><span class="about-index__no">02</span>团队</a></li>
        <li><a href="#routine"><span class="about-index__no">03</span>日常</a></li>
        <li><a href="#versions"><span class="about-index__no">04</span>版本</a></li>
        <li><a href="#reach"><span class="about-index__no">05</span>覆盖</a></li>
        <li><a href="#partners"><span class="about-index__no">06</span>合作</a></li>
      </ol>
    </div>
  </nav>

  <section class="about-chapter" id="why" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">01</span>
        <h2>先把当天要看什么弄清楚</h2>
      </div>
      <div class="about-chapter__body">
        <p>
          球迷最常碰上的处境是：晚上八点想找一场球，翻了几个应用才对上频道；昨天收藏过的场次，今天再打开已经找不到入口。赛程本身不复杂，复杂的是时间、场地和入口散在太多地方。
        </p>
        <p>
          LOVE赛场从 2019 年就围绕这一件事做。首页按日期分区，当天值得看的轮次固定放在首屏，点开是一条条排布清楚的时刻。你不用先记住规则，也不必在几个页面之间来回跳。
        </p>

        <ul class="principles">
          <li>
            <span class="principles__k">一轮一条</span>
            <span class="principles__v">时间、项目、阶段写在同一行，扫一眼就能对上，不用自己拼接信息。</span>
          </li>
          <li>
            <span class="principles__k">当天的先来</span>
            <span class="principles__v">首屏优先呈现当日轮次，过了今天自动让位，明早打开又是新的一天。</span>
          </li>
          <li>
            <span class="principles__k">你存下的留得住</span>
            <span class="principles__v">关注的轮次放进分组，换台设备重新登录，分组还在原来的位置。</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--wide" id="team" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">02</span>
        <h2>14 个人守着这张赛程表</h2>
      </div>
      <div class="about-chapter__body">
        <p>
          内容团队一共 14 人。编辑 4 人负责轮次收录和每周一篇的项目专题长文，数据校对 6 人分批照看 120 个赛程数据源，产品与体验 2 人盯着手机端和网页端的路径，客服 2 人处理账号、收藏同步和导出问题。
        </p>
        <p>
          四组人坐在一起，谁发现条目对不上，就在同一张表上改完再往下走。每个月我们发布一次版本说明，把改了什么写在明面上，你回访时能对得上。
        </p>

        <div class="team-dots">
          <div class="team-dots__row team-dots__row--edit">
            <span class="team-dots__label">编辑</span>
            <span class="team-dots__marks" aria-hidden="true">
              <span></span><span></span><span></span><span></span>
            </span>
            <span class="team-dots__count num">4</span>
          </div>
          <div class="team-dots__row team-dots__row--check">
            <span class="team-dots__label">数据校对</span>
            <span class="team-dots__marks" aria-hidden="true">
              <span></span><span></span><span></span><span></span><span></span><span></span>
            </span>
            <span class="team-dots__count num">6</span>
          </div>
          <div class="team-dots__row team-dots__row--product">
            <span class="team-dots__label">产品与体验</span>
            <span class="team-dots__marks" aria-hidden="true">
              <span></span><span></span>
            </span>
            <span class="team-dots__count num">2</span>
          </div>
          <div class="team-dots__row team-dots__row--service">
            <span class="team-dots__label">客服</span>
            <span class="team-dots__marks" aria-hidden="true">
              <span></span><span></span>
            </span>
            <span class="team-dots__count num">2</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="routine" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">03</span>
        <h2>一天三遍，把错漏拦在发布之前</h2>
      </div>
      <div class="about-chapter__body">
        <div class="routine-grid">
          <div class="routine-copy">
            <p>
              120 个数据源每天下来 1200 条以上轮次，赛季高峰日能到 3000 条。越密集的时候，错一个小时、错一个场地，都可能让人白等一晚上。
            </p>
            <p>
              6 名数据校对分三个时段值班：赛前一天傍晚把次日的排布铺完；比赛日上午复看开赛时间和场地；晚间场结束后回收延期与变更。每次改动落回对应条目，都要重新读一遍，确认在列表里显示正常。
            </p>
            <p>
              看到时间或场地不对，写清项目、日期和轮次名发到客服邮箱，工作日内 24 小时回复。确认之后先改条目，再由编辑补一句说明，让看过旧时间的你一眼知道变化在哪。
            </p>
          </div>
          <figure class="routine-figure media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三块并排的抽象屏幕，每块屏幕上是被逐行扫描的轮次条目色块，中间以箭头串联成一条循环回路" loading="lazy" decoding="async">
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--wide" id="versions" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">04</span>
        <h2>四个大版本，把看赛的路径越缩越短</h2>
      </div>
      <div class="about-chapter__body">
        <p>
          从一张按日期铺开的赛程表，到现在打开首页就能看到最新更新，每一次迭代都在减少你为了看一场球所做的动作。
        </p>

        <ol class="version-track">
          <li class="version-node">
            <span class="version-node__ver num">V1.0</span>
            <span class="version-node__name">赛程看板</span>
            <span class="version-node__desc">首页按日期铺开当日轮次，重点场次固定在首屏。</span>
          </li>
          <li class="version-node">
            <span class="version-node__ver num">V2.0</span>
            <span class="version-node__name">收藏分组</span>
            <span class="version-node__desc">每个账号最多 20 个分组，单组放得下 200 条轮次。</span>
          </li>
          <li class="version-node">
            <span class="version-node__ver num">V3.0</span>
            <span class="version-node__name">数据导出</span>
            <span class="version-node__desc">CSV、JSON、ICS 三种格式，登录后直接取走。</span>
          </li>
          <li class="version-node">
            <span class="version-node__ver num">V3.6</span>
            <span class="version-node__name">手机端两步路径</span>
            <span class="version-node__desc">从桌面图标点开，直达今日轮次面板。</span>
          </li>
          <li class="version-node">
            <span class="version-node__ver num">V4.0</span>
            <span class="version-node__name">首屏动态跑马灯</span>
            <span class="version-node__desc">最新内容更新在首屏同步滚动，一眼看到。</span>
          </li>
        </ol>

        <figure class="versions-figure media">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="横向延伸的跑道式时间带，五个节点以荧光绿小圆点标记，节点之间排布等距刻度线" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="reach" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">05</span>
        <h2>从济南出发，服务 31 个省级行政区</h2>
      </div>
      <div class="about-chapter__body">
        <p>
          平台接入 120 个赛程数据源，覆盖 28 个运动项目，服务范围到 31 个省级行政区。山东地区访问量约占总访问量的 21%——这里是我们最早服务的一片，也是回访最密的一片。
        </p>
        <p>
          对山东用户，晚高峰时段预留了额外带宽；客服在省内工作时段优先响应，其余时段邮件按到达顺序处理。团队常驻济南，遇到赛程反复调整的本地赛事，沟通基本当天能闭合。
        </p>

        <ul class="reach-strip">
          <li>
            <span class="reach-strip__num">31</span>
            <span class="reach-strip__label">省级行政区</span>
          </li>
          <li>
            <span class="reach-strip__num">21%</span>
            <span class="reach-strip__label">山东地区访问占比</span>
          </li>
          <li>
            <span class="reach-strip__num">120</span>
            <span class="reach-strip__label">接入赛程数据源</span>
          </li>
          <li>
            <span class="reach-strip__num">40+</span>
            <span class="reach-strip__label">合作赛事组织方</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--wide" id="partners" data-reveal>
    <div class="wrap about-chapter__inner">
      <div class="about-chapter__head">
        <span class="about-chapter__no">06</span>
        <h2>和业余联赛、校园赛事一起排赛程</h2>
      </div>
      <div class="about-chapter__body">
        <p>
          我们与 40 余家业余联赛、校园赛事组织方保持赛程内容合作。组织方把轮次表交过来，我们整理成统一的时间格式上架：参赛队伍在手机上看得到，家属和同学也能把场次加进自己的日历。
        </p>
        <p>
          平台提供赛程日历订阅，关注的轮次可以直接写进系统日历。对组织方来说，改期之后只需要更新一次，下游看到的都是新的时刻。
        </p>
        <blockquote class="about-quote">
          <p>赛程数据整理方法入选省级体育产业数字化典型案例名单。</p>
        </blockquote>
      </div>
    </div>
  </section>

  <section class="about-next">
    <div class="wrap">
      <h2>接下来去哪里</h2>
      <ul class="next-links">
        <li>
          <a href="/solutions/">方案中心<span>看功能怎么用</span></a>
        </li>
        <li>
          <a href="/news/">赛场动态<span>读版本说明与专题</span></a>
        </li>
        <li>
          <a href="/help/">帮助中心<span>导出与同步问题</span></a>
        </li>
        <li>
          <a href="/contact-us/">联络通道<span>写信给客服</span></a>
        </li>
      </ul>
    </div>
  </section>
</main>

.page-about {
  --about-col: 96px;
  --about-gap: 40px;
  background: var(--black-track);
  color: var(--ink);
  font-family: var(--font-display);
}

.page-about img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: 20px 0 36px;
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(to right, rgba(42, 58, 82, 0.26) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 58, 82, 0.26) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  overflow: hidden;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 16% 0%, rgba(200, 255, 61, 0.1), transparent 62%),
    radial-gradient(60% 80% at 90% 22%, rgba(47, 230, 255, 0.1), transparent 60%);
}

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

.page-about .about-hero__layout {
  display: grid;
  gap: 28px;
  margin-top: 22px;
}

.page-about .about-hero__copy h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.12;
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-about .about-hero__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.page-about .about-hero__stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-hero__stats li {
  background: var(--black-track);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-hero__stats .num {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lime);
}

.page-about .about-hero__stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-about .about-hero__figure {
  border: 1px solid var(--line);
  background: var(--slate);
}

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

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  position: sticky;
  top: 56px;
  z-index: 5;
  background: var(--panel-navy);
  border-bottom: 1px solid var(--line);
}

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

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

.page-about .about-index__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.page-about .about-index__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--volt);
}

/* ---------- 章节通用 ---------- */
.page-about .about-chapter {
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 128px;
}

.page-about .about-chapter--wide {
  padding: 56px 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.7) 100%);
}

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

.page-about .about-chapter__head {
  display: grid;
  gap: 10px;
}

.page-about .about-chapter__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-about .about-chapter__no::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--lime);
}

.page-about .about-chapter h2 {
  margin: 0;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.22;
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-about .about-chapter__body > p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
}

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

/* ---------- 三条原则 ---------- */
.page-about .principles {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .principles li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .principles__k {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.page-about .principles__v {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 团队点阵 ---------- */
.page-about .team-dots {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  max-width: 620px;
}

.page-about .team-dots__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--slate);
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-about .team-dots__row:hover,
.page-about .team-dots__row:focus-within {
  border-color: rgba(200, 255, 61, 0.6);
  background: #16233a;
}

.page-about .team-dots__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.page-about .team-dots__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-about .team-dots__marks span {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--grid-line);
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.page-about .team-dots__row--edit .team-dots__marks span {
  background: rgba(200, 255, 61, 0.45);
}

.page-about .team-dots__row--check .team-dots__marks span {
  background: rgba(47, 230, 255, 0.5);
}

.page-about .team-dots__row--product .team-dots__marks span {
  background: rgba(233, 241, 255, 0.4);
}

.page-about .team-dots__row--service .team-dots__marks span {
  background: rgba(91, 229, 140, 0.45);
}

.page-about .team-dots__row:hover .team-dots__marks span {
  background: var(--lime);
  box-shadow: 0 0 8px rgba(200, 255, 61, 0.45);
}

.page-about .team-dots__count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  transition: color 0.24s var(--ease);
}

.page-about .team-dots__row:hover .team-dots__count {
  color: var(--lime);
}

/* ---------- 每日流程 ---------- */
.page-about .routine-grid {
  display: grid;
  gap: 24px;
}

.page-about .routine-figure {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  background: var(--panel-navy);
}

.page-about .routine-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 版本时间轴 ---------- */
.page-about .version-track {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .version-node {
  position: relative;
  padding-left: 28px;
  display: grid;
  gap: 4px;
}

.page-about .version-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 61, 0.14);
  transition: box-shadow 0.24s var(--ease);
}

.page-about .version-node::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  bottom: -18px;
  width: 1px;
  background: var(--line);
}

.page-about .version-node:last-child::after {
  display: none;
}

.page-about .version-node:hover::before {
  box-shadow: 0 0 0 6px rgba(200, 255, 61, 0.16);
}

.page-about .version-node__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--volt);
}

.page-about .version-node__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.page-about .version-node__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 10px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-about .version-node:hover .version-node__desc {
  color: var(--ink);
  border-left-color: var(--lime);
}

.page-about .versions-figure {
  aspect-ratio: 8 / 3;
  margin: 30px 0 0;
  border: 1px solid var(--line);
  background: var(--panel-navy);
}

.page-about .versions-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 覆盖数据条 ---------- */
.page-about .reach-strip {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .reach-strip li {
  background: var(--panel-navy);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-about .reach-strip__num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--volt);
}

.page-about .reach-strip__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- 合作与认可 ---------- */
.page-about .about-quote {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--lime);
  background: var(--slate);
}

.page-about .about-quote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ---------- 下一步 ---------- */
.page-about .about-next {
  padding: 48px 0 56px;
  background: var(--panel-navy);
}

.page-about .about-next h2 {
  margin: 0 0 22px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-about .next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.page-about .next-links a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px;
  border: 1px solid var(--line);
  background: var(--black-track);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease), color 0.24s var(--ease);
}

.page-about .next-links a span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
  transition: color 0.24s var(--ease);
}

.page-about .next-links a:hover,
.page-about .next-links a:focus-visible {
  border-color: var(--lime);
  background: rgba(200, 255, 61, 0.07);
  color: var(--lime);
}

.page-about .next-links a:hover span,
.page-about .next-links a:focus-visible span {
  color: var(--ink);
}

/* ---------- 响应式 ---------- */
@media (min-width: 680px) {
  .page-about .about-hero {
    padding: 26px 0 44px;
  }

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

  .page-about .principles li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }

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

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

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

  .page-about .about-hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: end;
    gap: 44px;
  }

  .page-about .about-chapter,
  .page-about .about-chapter--wide {
    padding: 72px 0;
  }

  .page-about .about-chapter__inner {
    grid-template-columns: var(--about-col) minmax(0, 1fr);
    column-gap: var(--about-gap);
    row-gap: 28px;
  }

  .page-about .about-chapter__head {
    grid-column: 1 / -1;
    grid-template-columns: var(--about-col) minmax(0, 1fr);
    column-gap: var(--about-gap);
    align-items: end;
  }

  .page-about .about-chapter__no {
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.08em;
    align-self: start;
    padding-top: 2px;
  }

  .page-about .about-chapter__no::before {
    display: none;
  }

  .page-about .about-chapter__body {
    grid-column: 2;
  }

  .page-about .routine-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .version-track {
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 34px;
  }

  .page-about .version-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 1px;
    background: var(--line);
  }

  .page-about .version-node {
    padding: 36px 20px 0 0;
  }

  .page-about .version-node::before {
    top: 9px;
    left: 0;
  }

  .page-about .version-node::after {
    display: none;
  }

  .page-about .version-node__desc {
    padding-left: 0;
    border-left: 0;
  }

  .page-about .version-node:hover .version-node__desc {
    border-left: 0;
  }

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

  .page-about .about-next {
    padding: 64px 0 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}