.page-about {
  --about-rule: var(--line-soft);
  --about-glow: rgba(56, 225, 230, 0.12);
  --about-orange-soft: rgba(255, 122, 26, 0.14);
}

.page-about .about-crumbs-wrap {
  padding-block: 18px 8px;
}

.page-about .about-crumbs {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mist);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-about .about-crumbs a {
  color: var(--cyan);
  text-decoration: none;
}

.page-about .about-crumbs a:hover,
.page-about .about-crumbs a:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  padding-block: 32px 8px;
}

.page-about .about-hero__grid {
  display: grid;
  gap: 32px;
  align-items: end;
}

.page-about .about-hero__lead h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 84px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 14px 0 0;
}

.page-about .about-hero__accent {
  color: var(--cyan);
  display: inline-block;
  position: relative;
}

.page-about .about-hero__lead .lede {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--about-rule);
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-about .about-fact__num {
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .about-fact__num small {
  font-size: 15px;
  margin-left: 2px;
}

.page-about .about-fact__label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-about .about-hero__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-about .about-hero__media .media__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--white);
  background: rgba(8, 16, 29, 0.78);
  border-top: 1px solid var(--line-cyan);
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
  }

  .page-about .about-hero__media {
    margin-bottom: 6px;
  }
}

/* ---------- 章节索引 ---------- */

.page-about .about-index {
  margin-top: 40px;
  border-top: 1px solid var(--about-rule);
  border-bottom: 1px solid var(--about-rule);
  background: rgba(15, 27, 45, 0.7);
}

.page-about .about-index__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .about-index__label {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-about .about-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index__list a {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--about-rule);
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

@media (min-width: 1024px) {
  .page-about .about-index {
    position: sticky;
    top: 0;
    z-index: 6;
    backdrop-filter: blur(10px);
  }
}

/* ---------- 通用章节头 ---------- */

.page-about .about-head {
  margin-bottom: 36px;
}

.page-about .about-head h2,
.page-about .about-studio__copy h2,
.page-about .about-partners__main h2,
.page-about .about-service__copy h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.18;
  color: var(--white);
  margin: 12px 0 0;
}

/* ---------- 时间轴 ---------- */

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

.page-about .about-timeline__note {
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.85;
}

.page-about .about-timeline__mini {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--about-rule);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

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

.page-about .about-tl::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan), rgba(56, 225, 230, 0.06));
}

.page-about .about-tl__item {
  position: relative;
  margin-bottom: 14px;
}

.page-about .about-tl__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 19px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 4px var(--about-glow);
}

.page-about .about-tl__node {
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
  border-radius: 2px;
}

.page-about .about-tl__node[open] {
  border-color: var(--line-cyan);
}

.page-about .about-tl__node summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-about .about-tl__year {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.page-about .about-tl__node[open] .about-tl__year {
  color: var(--cyan);
}

.page-about .about-tl__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  color: var(--white);
  flex: 1 1 12ch;
}

.page-about .about-tl__chev::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--mist);
}

.page-about .about-tl__node[open] .about-tl__chev::before {
  content: "−";
  color: var(--cyan);
}

.page-about .about-tl__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--about-rule);
  margin-top: 0;
}

.page-about .about-tl__body p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--body-text);
  max-width: 62ch;
}

@media (min-width: 900px) {
  .page-about .about-timeline__grid {
    grid-template-columns: 3fr 9fr;
    gap: 56px;
  }

  .page-about .about-timeline__note {
    padding-top: 6px;
  }
}

/* ---------- 内容生产台 ---------- */

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

.page-about .about-studio__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-studio__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-about .about-studio__media .media__caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  border-top: 1px solid var(--about-rule);
}

.page-about .about-studio__copy > p {
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.85;
  margin: 20px 0 0;
  max-width: 62ch;
}

.page-about .about-roles {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .about-role {
  border-top: 2px solid var(--cyan);
  padding: 14px 0 0;
}

.page-about .about-role:nth-child(2) {
  border-top-color: var(--orange);
}

.page-about .about-role:nth-child(3) {
  border-top-color: var(--green);
}

.page-about .about-role__num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.page-about .about-role__name {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-about .about-role:nth-child(2) .about-role__name {
  color: var(--orange);
}

.page-about .about-role:nth-child(3) .about-role__name {
  color: var(--green);
}

.page-about .about-role__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--body-text);
}

.page-about .about-studio__tail {
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid var(--about-rule);
  font-size: 14px !important;
  color: var(--mist) !important;
}

@media (min-width: 940px) {
  .page-about .about-studio__grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
  }

  .page-about .about-roles {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

/* ---------- 覆盖与项目 ---------- */

.page-about .about-coverage__grid {
  display: grid;
  gap: 28px;
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--about-rule);
  border: 1px solid var(--about-rule);
}

.page-about .about-figure {
  background: var(--ink-2);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-figure__num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .about-figure__num small {
  font-size: 14px;
  margin-left: 2px;
}

.page-about .about-figure__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-about .about-coverage__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-coverage__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

.page-about .about-coverage__media .media__caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  border-top: 1px solid var(--about-rule);
}

.page-about .about-sports {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .about-sports .chip {
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 2px;
}

.page-about .about-sports__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 70ch;
}

@media (min-width: 900px) {
  .page-about .about-coverage__grid {
    grid-template-columns: 5fr 7fr;
    gap: 44px;
    align-items: start;
  }

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

/* ---------- 合作与荣誉 ---------- */

.page-about .about-partners__grid {
  display: grid;
  gap: 40px;
}

.page-about .about-partners__main .lede {
  margin-top: 20px;
  max-width: 64ch;
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.85;
}

.page-about .about-partners__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .about-partners__list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 4px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--about-rule);
}

.page-about .about-partners__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 2px;
}

.page-about .about-partners__name {
  grid-area: name;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.page-about .about-partners__desc {
  grid-area: desc;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--body-text);
}

.page-about .about-honors {
  padding: 24px 22px;
  background: var(--ink-2);
  border: 1px solid var(--about-rule);
  border-top: 2px solid var(--yellow);
}

.page-about .about-honors .tag-label {
  margin-bottom: 18px;
  color: var(--yellow);
}

.page-about .about-honor {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .about-honor:last-of-type {
  border-bottom: 0;
}

.page-about .about-honor__year {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.page-about .about-honor__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--white);
}

.page-about .about-honors__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--about-rule);
  font-size: 13px;
  line-height: 1.75;
  color: var(--mist);
}

@media (min-width: 940px) {
  .page-about .about-partners__grid {
    grid-template-columns: 8fr 4fr;
    gap: 56px;
    align-items: start;
  }

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

/* ---------- 服务承诺 ---------- */

.page-about .about-service__card {
  padding: 28px 22px;
  display: grid;
  gap: 26px;
  border-radius: 3px;
  border: 1px solid var(--line-cyan);
  background:
    radial-gradient(circle at 92% 0%, var(--about-orange-soft), transparent 58%),
    radial-gradient(circle at 0% 100%, var(--about-glow), transparent 55%),
    var(--glass);
}

.page-about .about-service__copy p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--body-text);
  max-width: 64ch;
}

.page-about .about-service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

.page-about .about-service__actions .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 2px;
}

@media (min-width: 900px) {
  .page-about .about-service__card {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
    padding: 44px 40px;
  }

  .page-about .about-service__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 章节锚点偏移 ---------- */

.page-about #timeline,
.page-about #studio,
.page-about #coverage,
.page-about #partners,
.page-about #service {
  scroll-margin-top: 90px;
}

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


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

  <div class="shell about-crumbs-wrap">
    <nav class="crumbs about-crumbs" aria-label="页面路径">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">品牌总览</span>
    </nav>
  </div>

  <section class="section about-hero">
    <div class="shell about-hero__grid">
      <div class="about-hero__lead">
        <p class="eyebrow">2019 — 2025 赛季 · 第七个运营年度</p>
        <h1>把深夜球场<br><span class="about-hero__accent">调到刚好能读懂的一档</span></h1>
        <p class="lede">U体育赛场自 2019 年起为中国球迷整理赛季内容。你在开赛前查到的每一条赛程，背后都有人提前把时间、城市、场馆和赛事级别对齐，让换设备、换城市、赶夜场的人都能在同一处找回进度。</p>
        <div class="about-hero__facts">
          <div class="about-fact">
            <span class="about-fact__num mono">48</span>
            <span class="about-fact__label">重点运营城市</span>
          </div>
          <div class="about-fact">
            <span class="about-fact__num mono">4200</span>
            <span class="about-fact__label">赛季赛程条目</span>
          </div>
          <div class="about-fact">
            <span class="about-fact__num mono">99.95<small>%</small></span>
            <span class="about-fact__label">2025 首屏可用性</span>
          </div>
        </div>
      </div>
      <figure class="media about-hero__media">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深夜看台剪影与亮起的球场灯光，冷光边缘与档案照片般的颗粒质感">
        <figcaption class="media__caption">亮灯之后 · 夜场档案</figcaption>
      </figure>
    </div>
  </section>

  <nav class="about-index" aria-label="页面章节">
    <div class="shell about-index__inner">
      <span class="about-index__label mono">章节</span>
      <ul class="about-index__list">
        <li><a href="#timeline">运营时间轴</a></li>
        <li><a href="#studio">内容生产台</a></li>
        <li><a href="#coverage">覆盖与项目</a></li>
        <li><a href="#partners">合作与荣誉</a></li>
        <li><a href="#service">服务与联络</a></li>
      </ul>
    </div>
  </nav>

  <section class="section about-timeline" id="timeline">
    <div class="shell">
      <header class="section-head about-head">
        <p class="eyebrow">运营时间轴</p>
        <h2>七个赛季，一条不断被校准的时间线</h2>
      </header>

      <div class="about-timeline__grid">
        <aside class="note-col about-timeline__note">
          <p>赛季不是一年一换的封面，而是一条持续滚动的赛程长带。版本每推进一步，看台上的观众就少一次翻找。</p>
          <p class="about-timeline__mini mono">当季页面 · 每 4–6 周一次可见版本更新</p>
        </aside>

        <ol class="about-tl">
          <li class="about-tl__item">
            <details class="about-tl__node" open>
              <summary>
                <span class="about-tl__year mono">2019</span>
                <span class="about-tl__title">平台上线，第一批赛事栏目开门</span>
                <span class="about-tl__chev" aria-hidden="true"></span>
              </summary>
              <div class="about-tl__body">
                <p>从足球与篮球两条主线起步，先把赛程表的结构定下来：项目、日期、城市、场馆、赛事级别，一个都不省。</p>
              </div>
            </details>
          </li>
          <li class="about-tl__item">
            <details class="about-tl__node">
              <summary>
                <span class="about-tl__year mono">2021</span>
                <span class="about-tl__title">会员中心成形，赛程开始跟人走</span>
                <span class="about-tl__chev" aria-hidden="true"></span>
              </summary>
              <div class="about-tl__body">
                <p>关注项目与收藏赛程被收进会员中心，跨赛季查看排布成为常态，追赛不再依赖单次浏览。</p>
              </div>
            </details>
          </li>
          <li class="about-tl__item">
            <details class="about-tl__node">
              <summary>
                <span class="about-tl__year mono">2023</span>
                <span class="about-tl__title">手机、平板与桌面端连成一条线</span>
                <span class="about-tl__chev" aria-hidden="true"></span>
              </summary>
              <div class="about-tl__body">
                <p>关注项目与筛选条件在苹果版、安卓版和桌面 Web 之间同步；你在地铁上筛好的条件，回家打开电脑还在。</p>
              </div>
            </details>
          </li>
          <li class="about-tl__item">
            <details class="about-tl__node">
              <summary>
                <span class="about-tl__year mono">2024</span>
                <span class="about-tl__title">内容访问达到 1.8 亿次</span>
                <span class="about-tl__chev" aria-hidden="true"></span>
              </summary>
              <div class="about-tl__body">
                <p>全站内容访问量升至 1.8 亿次，会员中心月均查询 96 万次。同年获得体育内容服务创新案例荣誉。</p>
              </div>
            </details>
          </li>
          <li class="about-tl__item">
            <details class="about-tl__node">
              <summary>
                <span class="about-tl__year mono">2025</span>
                <span class="about-tl__title">第 3 版栏目上线，进入第七个运营年度</span>
                <span class="about-tl__chev" aria-hidden="true"></span>
              </summary>
              <div class="about-tl__body">
                <p>日期与项目双轴筛选、赛程表一键导出、会员中心更新时间看板同时到位；这一季计划完成 6 次功能迭代。</p>
              </div>
            </details>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section about-studio" id="studio">
    <div class="shell about-studio__grid">
      <figure class="media about-studio__media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暗色编辑台上的多块屏幕，显示赛程表与版本标签，冷光映亮桌面" loading="lazy" decoding="async">
        <figcaption class="media__caption">夜场编辑台 · 版本校对进行中</figcaption>
      </figure>

      <div class="about-studio__copy">
        <p class="eyebrow">内容生产台</p>
        <h2>四十二个人，让一条赛程在开赛前站稳</h2>
        <p>团队规模 42 人：赛事编辑 18 人、产品与技术 16 人、会员服务 8 人。编辑负责选题与赛程编排，产品与技术把编排做成好读好筛的页面，会员服务则在赛后接住每一个具体问题。</p>

        <ul class="about-roles">
          <li class="about-role">
            <span class="about-role__num mono">18</span>
            <span class="about-role__name">赛事编辑</span>
            <p class="about-role__desc">按 6 大内容分类组稿，焦点赛事在开赛前 48 小时完成关键字段更新，常规赛程每日两次校准。</p>
          </li>
          <li class="about-role">
            <span class="about-role__num mono">16</span>
            <span class="about-role__name">产品与技术</span>
            <p class="about-role__desc">负责筛选、导出与跨设备同步，让 4G 网络下赛事栏目首屏平均 1.2 秒打开。</p>
          </li>
          <li class="about-role">
            <span class="about-role__num mono">8</span>
            <span class="about-role__name">会员服务</span>
            <p class="about-role__desc">工作日 9:00–18:00 在线，处理会员中心查询、账号同步与导出文件相关的问题。</p>
          </li>
        </ul>

        <p class="about-studio__tail">夜场编辑台每赛季还会发布 36 期转播观察与赛程解读，把一整个赛季的节奏讲成能读下去的长文。</p>
      </div>
    </div>
  </section>

  <section class="section about-coverage" id="coverage">
    <div class="shell">
      <header class="section-head about-head">
        <p class="eyebrow">覆盖与项目版图</p>
        <h2>从一座城的主场，到十八个项目的赛季</h2>
      </header>

      <div class="about-coverage__grid">
        <div class="about-figures">
          <div class="about-figure">
            <span class="about-figure__num mono">31</span>
            <span class="about-figure__label">省级行政区内容覆盖</span>
          </div>
          <div class="about-figure">
            <span class="about-figure__num mono">48</span>
            <span class="about-figure__label">重点运营城市</span>
          </div>
          <div class="about-figure">
            <span class="about-figure__num mono">18</span>
            <span class="about-figure__label">覆盖运动项目</span>
          </div>
          <div class="about-figure">
            <span class="about-figure__num mono">260</span>
            <span class="about-figure__label">累计赛事专题</span>
          </div>
          <div class="about-figure">
            <span class="about-figure__num mono">86<small>万</small></span>
            <span class="about-figure__label">注册会员</span>
          </div>
          <div class="about-figure">
            <span class="about-figure__num mono">23<small>万</small></span>
            <span class="about-figure__label">活跃会员</span>
          </div>
        </div>

        <figure class="media about-coverage__media">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="深墨蓝背景上抽象的城市光点与赛事线路连成网络，重点城市用电光青标记" loading="lazy" decoding="async">
          <figcaption class="media__caption">城市光点与赛事线路 · 版图示意</figcaption>
        </figure>
      </div>

      <ul class="about-sports" aria-label="覆盖的运动项目">
        <li class="chip chip--live">足球</li>
        <li class="chip chip--live">篮球</li>
        <li class="chip chip--live">网球</li>
        <li class="chip chip--live">赛车</li>
        <li class="chip chip--live">田径</li>
        <li class="chip chip--live">羽毛球</li>
        <li class="chip chip--live">乒乓球</li>
        <li class="chip chip--live">排球</li>
        <li class="chip">游泳</li>
        <li class="chip">体操</li>
        <li class="chip">击剑</li>
        <li class="chip">射箭</li>
        <li class="chip">拳击</li>
        <li class="chip">举重</li>
        <li class="chip">自行车</li>
        <li class="chip">滑板</li>
        <li class="chip">攀岩</li>
        <li class="chip">冰雪项目</li>
      </ul>
      <p class="about-sports__note">焦点赛程、项目专题、场馆与城市、设备与入口、会员服务、版本动态，六个方向支撑起整个栏目结构。</p>
    </div>
  </section>

  <section class="section about-partners" id="partners">
    <div class="shell about-partners__grid">
      <div class="about-partners__main">
        <p class="eyebrow">合作与荣誉</p>
        <h2>内容不只来自编辑部</h2>
        <p class="lede">平台与 12 家赛事内容机构、8 家场馆媒体和 5 家运动社群保持内容合作。场馆媒体提供现场口径的赛程变动，内容机构补充项目深度，运动社群则把看台上的真实反馈带回编辑台。</p>

        <ul class="about-partners__list">
          <li>
            <span class="about-partners__num mono">12</span>
            <span class="about-partners__name">赛事内容机构</span>
            <p class="about-partners__desc">补充项目专题与赛季长线解读，支撑 260 个赛事专题的持续更新。</p>
          </li>
          <li>
            <span class="about-partners__num mono">8</span>
            <span class="about-partners__name">场馆媒体</span>
            <p class="about-partners__desc">把临时调整的场次、入场时间与场馆信息同步到赛程表。</p>
          </li>
          <li>
            <span class="about-partners__num mono">5</span>
            <span class="about-partners__name">运动社群</span>
            <p class="about-partners__desc">反馈筛选习惯与观赛场景，直接进入下一轮产品迭代清单。</p>
          </li>
        </ul>
      </div>

      <aside class="about-honors">
        <p class="tag-label">行业认可</p>
        <div class="about-honor">
          <span class="about-honor__year mono">2024</span>
          <p class="about-honor__text">体育内容服务创新案例荣誉</p>
        </div>
        <div class="about-honor">
          <span class="about-honor__year mono">2025</span>
          <p class="about-honor__text">入选城市体育消费服务推荐名录</p>
        </div>
        <p class="about-honors__note">平台每年接受第三方可用性审计与内容安全巡检，赛季期间照常运行。</p>
      </aside>
    </div>
  </section>

  <section class="section about-service" id="service">
    <div class="shell">
      <div class="panel panel--glass about-service__card">
        <div class="about-service__copy">
          <p class="eyebrow">服务承诺与联络</p>
          <h2>赛程变了，你能第一时间知道</h2>
          <p>会员中心会同步显示赛程排布与更新时间：焦点赛事在赛前 48 小时完成更新，常规赛程每日两次校准。当季页面平均每 4–6 周发布一次可见版本，苹果版赛事栏目与当季页面走同一个节奏。</p>
          <p>想先看看能筛出什么，可以从赛事产品线进入；遇到账号同步或导出文件的具体问题，支持中心里已经写好了对应步骤。</p>
        </div>
        <div class="about-service__actions">
          <a class="btn btn--signal" href="/products/">查看赛事产品线</a>
          <a class="btn btn--ghost" href="/support/">进支持中心</a>
          <a class="btn btn--ghost" href="/news/">看版本动态</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-rule: var(--line-soft);
  --about-glow: rgba(56, 225, 230, 0.12);
  --about-orange-soft: rgba(255, 122, 26, 0.14);
}

.page-about .about-crumbs-wrap {
  padding-block: 18px 8px;
}

.page-about .about-crumbs {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mist);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-about .about-crumbs a {
  color: var(--cyan);
  text-decoration: none;
}

.page-about .about-crumbs a:hover,
.page-about .about-crumbs a:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  padding-block: 32px 8px;
}

.page-about .about-hero__grid {
  display: grid;
  gap: 32px;
  align-items: end;
}

.page-about .about-hero__lead h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 84px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 14px 0 0;
}

.page-about .about-hero__accent {
  color: var(--cyan);
  display: inline-block;
}

.page-about .about-hero__lead .lede {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--about-rule);
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-about .about-fact__num {
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .about-fact__num small {
  font-size: 15px;
  margin-left: 2px;
}

.page-about .about-fact__label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-about .about-hero__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-about .about-hero__media .media__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--white);
  background: rgba(8, 16, 29, 0.78);
  border-top: 1px solid var(--line-cyan);
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
  }

  .page-about .about-hero__media {
    margin-bottom: 6px;
  }
}

/* ---------- 章节索引 ---------- */

.page-about .about-index {
  margin-top: 40px;
  border-top: 1px solid var(--about-rule);
  border-bottom: 1px solid var(--about-rule);
  background: rgba(15, 27, 45, 0.7);
}

.page-about .about-index__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .about-index__label {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-about .about-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index__list a {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--about-rule);
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

@media (min-width: 1024px) {
  .page-about .about-index {
    position: sticky;
    top: 0;
    z-index: 6;
    backdrop-filter: blur(10px);
  }
}

/* ---------- 通用章节头 ---------- */

.page-about .about-head {
  margin-bottom: 36px;
}

.page-about .about-head h2,
.page-about .about-studio__copy h2,
.page-about .about-partners__main h2,
.page-about .about-service__copy h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.18;
  color: var(--white);
  margin: 12px 0 0;
}

/* ---------- 时间轴 ---------- */

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

.page-about .about-timeline__note {
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.85;
}

.page-about .about-timeline__mini {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--about-rule);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

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

.page-about .about-tl::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan), rgba(56, 225, 230, 0.06));
}

.page-about .about-tl__item {
  position: relative;
  margin-bottom: 14px;
}

.page-about .about-tl__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 19px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 4px var(--about-glow);
}

.page-about .about-tl__node {
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
  border-radius: 2px;
}

.page-about .about-tl__node[open] {
  border-color: var(--line-cyan);
}

.page-about .about-tl__node summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-about .about-tl__year {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.page-about .about-tl__node[open] .about-tl__year {
  color: var(--cyan);
}

.page-about .about-tl__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  color: var(--white);
  flex: 1 1 12ch;
}

.page-about .about-tl__chev::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--mist);
}

.page-about .about-tl__node[open] .about-tl__chev::before {
  content: "−";
  color: var(--cyan);
}

.page-about .about-tl__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--about-rule);
}

.page-about .about-tl__body p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--body-text);
  max-width: 62ch;
}

@media (min-width: 900px) {
  .page-about .about-timeline__grid {
    grid-template-columns: 3fr 9fr;
    gap: 56px;
  }

  .page-about .about-timeline__note {
    padding-top: 6px;
  }
}

/* ---------- 内容生产台 ---------- */

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

.page-about .about-studio__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-studio__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-about .about-studio__media .media__caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  border-top: 1px solid var(--about-rule);
}

.page-about .about-studio__copy > p {
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.85;
  margin: 20px 0 0;
  max-width: 62ch;
}

.page-about .about-roles {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .about-role {
  border-top: 2px solid var(--cyan);
  padding: 14px 0 0;
}

.page-about .about-role:nth-child(2) {
  border-top-color: var(--orange);
}

.page-about .about-role:nth-child(3) {
  border-top-color: var(--green);
}

.page-about .about-role__num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.page-about .about-role__name {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-about .about-role:nth-child(2) .about-role__name {
  color: var(--orange);
}

.page-about .about-role:nth-child(3) .about-role__name {
  color: var(--green);
}

.page-about .about-role__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--body-text);
}

.page-about .about-studio__tail {
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid var(--about-rule);
  font-size: 14px !important;
  color: var(--mist) !important;
}

@media (min-width: 940px) {
  .page-about .about-studio__grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
  }

  .page-about .about-roles {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

/* ---------- 覆盖与项目 ---------- */

.page-about .about-coverage__grid {
  display: grid;
  gap: 28px;
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--about-rule);
  border: 1px solid var(--about-rule);
}

.page-about .about-figure {
  background: var(--ink-2);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .about-figure__num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .about-figure__num small {
  font-size: 14px;
  margin-left: 2px;
}

.page-about .about-figure__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-about .about-coverage__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--about-rule);
  background: var(--ink-2);
}

.page-about .about-coverage__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

.page-about .about-coverage__media .media__caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  border-top: 1px solid var(--about-rule);
}

.page-about .about-sports {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .about-sports .chip {
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 2px;
}

.page-about .about-sports__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 70ch;
}

@media (min-width: 900px) {
  .page-about .about-coverage__grid {
    grid-template-columns: 5fr 7fr;
    gap: 44px;
    align-items: start;
  }
}

/* ---------- 合作与荣誉 ---------- */

.page-about .about-partners__grid {
  display: grid;
  gap: 40px;
}

.page-about .about-partners__main .lede {
  margin-top: 20px;
  max-width: 64ch;
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.85;
}

.page-about .about-partners__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .about-partners__list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 4px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--about-rule);
}

.page-about .about-partners__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 2px;
}

.page-about .about-partners__name {
  grid-area: name;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.page-about .about-partners__desc {
  grid-area: desc;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--body-text);
}

.page-about .about-honors {
  padding: 24px 22px;
  background: var(--ink-2);
  border: 1px solid var(--about-rule);
  border-top: 2px solid var(--yellow);
}

.page-about .about-honors .tag-label {
  margin-bottom: 18px;
  color: var(--yellow);
}

.page-about .about-honor {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .about-honor:last-of-type {
  border-bottom: 0;
}

.page-about .about-honor__year {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.page-about .about-honor__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--white);
}

.page-about .about-honors__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--about-rule);
  font-size: 13px;
  line-height: 1.75;
  color: var(--mist);
}

@media (min-width: 940px) {
  .page-about .about-partners__grid {
    grid-template-columns: 8fr 4fr;
    gap: 56px;
    align-items: start;
  }

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

/* ---------- 服务承诺 ---------- */

.page-about .about-service__card {
  padding: 28px 22px;
  display: grid;
  gap: 26px;
  border-radius: 3px;
  border: 1px solid var(--line-cyan);
  background:
    radial-gradient(circle at 92% 0%, var(--about-orange-soft), transparent 58%),
    radial-gradient(circle at 0% 100%, var(--about-glow), transparent 55%),
    var(--glass);
}

.page-about .about-service__copy p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--body-text);
  max-width: 64ch;
}

.page-about .about-service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

.page-about .about-service__actions .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 2px;
}

@media (min-width: 900px) {
  .page-about .about-service__card {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
    padding: 44px 40px;
  }

  .page-about .about-service__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 章节锚点偏移 ---------- */

.page-about #timeline,
.page-about #studio,
.page-about #coverage,
.page-about #partners,
.page-about #service {
  scroll-margin-top: 90px;
}

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