.page-about {
  --about-rail: 116px;
  --about-gap: 56px;
  color: var(--ink);
  font-family: var(--font-body);
}

/* 面包屑 */
.page-about .about-crumb {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 104px var(--pad) 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gray-blue);
}
.page-about .about-crumb a {
  color: var(--gray-blue);
  text-decoration: none;
}
.page-about .about-crumb a:hover {
  color: var(--blue);
}
.page-about .about-crumb [aria-current="page"] {
  color: var(--ink);
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  background: var(--blue-deep);
  color: var(--white);
  overflow: hidden;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  background: var(--blue);
  opacity: .28;
  transform: rotate(-7deg);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 36px var(--pad) 56px;
  display: grid;
  gap: 32px;
}
.page-about .about-hero__eyebrow {
  color: var(--sand);
  margin: 0 0 14px;
}
.page-about .about-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 16em;
}
.page-about .about-hero__lead {
  margin: 0 0 30px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.75;
  color: #CFE4F2;
}
.page-about .about-hero__facts {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(127, 196, 232, .32);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.page-about .about-hero__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.1;
  color: var(--white);
}
.page-about .about-hero__label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--blue-light);
}
.page-about .about-hero__figure {
  margin: 0;
  border: 1px solid rgba(127, 196, 232, .3);
}
.page-about .about-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 通用区块 */
.page-about .about-block {
  padding: 60px 0;
  background: var(--white);
}
.page-about .about-block--story {
  background: var(--white);
}
.page-about .about-block--timeline {
  background: var(--blue-mist);
}
.page-about .about-block--team {
  background: var(--white);
}
.page-about .about-block--source {
  background: var(--blue-deep);
  color: var(--white);
}
.page-about .about-block--reach {
  background: var(--blue-mist);
}
.page-about .about-block--eco {
  background: var(--green);
  color: var(--white);
}

.page-about .about-block__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-about .about-block__num {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-about .about-block__num-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--blue);
}
.page-about .about-block__num-label {
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--gray-blue);
}
.page-about .about-block--source .about-block__num-val {
  color: var(--sand);
}
.page-about .about-block--source .about-block__num-label {
  color: var(--blue-light);
}
.page-about .about-block--eco .about-block__num-val {
  color: var(--white);
}
.page-about .about-block--eco .about-block__num-label {
  color: var(--green-light);
}

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

.page-about .sec-head {
  margin-bottom: 32px;
}
.page-about .sec-title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 4.6vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20em;
}
.page-about .sec-sub {
  margin: 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-blue);
}
.page-about .sec-head--invert .sec-title {
  color: var(--white);
}
.page-about .sec-head--invert .sec-sub {
  color: #B9D3E6;
}
.page-about .about-block--eco .sec-title {
  color: var(--white);
}
.page-about .about-block--eco .sec-sub {
  color: #D6EEE0;
}

/* 01 起步 */
.page-about .about-story {
  display: grid;
  gap: 26px;
}
.page-about .about-story__main p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-blue);
}
.page-about .about-story__main p:last-child {
  margin-bottom: 0;
}
.page-about .about-story__side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
}
.page-about .about-story__vnote {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--blue);
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}
.page-about .about-story__quote {
  flex: 1;
  padding: 20px 22px;
  border-left: 3px solid var(--orange);
  background: var(--blue-mist);
}
.page-about .about-story__quote p {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.page-about .about-story__quote-src {
  font-size: 12.5px;
  color: var(--gray-blue);
}

/* 02 时间线 */
.page-about .about-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.page-about .about-tl__item {
  position: relative;
  padding: 20px 0 20px 26px;
  border-top: 1px solid var(--line);
  transition: background-color .24s var(--ease);
}
.page-about .about-tl__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.page-about .about-tl__item::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
}
.page-about .about-tl__item:hover,
.page-about .about-tl__item:focus-within {
  background: rgba(127, 196, 232, .16);
}
.page-about .about-tl__item:hover::after,
.page-about .about-tl__item:focus-within::after {
  border-color: var(--orange);
}
.page-about .about-tl__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.page-about .about-tl__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--blue);
}
.page-about .about-tl__when {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--gray-blue);
}
.page-about .about-tl__title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.page-about .about-tl__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-blue);
  max-width: 44em;
}
.page-about .about-tl__desc a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--blue-light);
}
.page-about .about-tl__desc a:hover {
  border-bottom-color: var(--orange);
  color: var(--orange-deep);
}
.page-about .about-tl__more {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gray-blue);
  border-left: 2px solid var(--green-light);
  padding-left: 0;
  transition: max-height .32s var(--ease), opacity .3s var(--ease), padding-left .3s var(--ease), margin-top .3s var(--ease);
}
.page-about .about-tl__item:hover .about-tl__more,
.page-about .about-tl__item:focus-within .about-tl__more {
  max-height: 160px;
  opacity: 1;
  padding-left: 14px;
  margin-top: 12px;
}

/* 03 团队 */
.page-about .about-team__figure {
  margin: 0 0 34px;
  border: 1px solid var(--line);
}
.page-about .about-team__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-team__figure .media__caption {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray-blue);
  border-top: 1px solid var(--line);
}

.page-about .about-team__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 30px;
}
.page-about .about-team__seg {
  flex: var(--flex, 1) 1 0;
  min-width: 132px;
  padding: 18px 16px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .22s var(--ease);
}
.page-about .about-team__seg--edit {
  background: var(--blue);
}
.page-about .about-team__seg--data {
  background: var(--blue-deep);
}
.page-about .about-team__seg--ops {
  background: var(--green);
}
.page-about .about-team__seg--design {
  background: var(--blue-light);
  color: var(--ink);
}
.page-about .about-team__seg:hover {
  transform: translateY(-3px);
}
.page-about .about-team__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.page-about .about-team__t {
  font-size: 13px;
  letter-spacing: .06em;
}

.page-about .about-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.page-about .about-team__card {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.page-about .about-team__card-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
}
.page-about .about-team__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-blue);
}

/* 04 数据来源 */
.page-about .about-source__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(127, 196, 232, .22);
  margin-bottom: 36px;
}
.page-about .about-source__item {
  background: var(--blue-deep);
  padding: 24px 22px;
}
.page-about .about-source__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--sand);
  margin-bottom: 12px;
}
.page-about .about-source__name {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
}
.page-about .about-source__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #B9D3E6;
}

.page-about .about-source__flow {
  border: 1px solid rgba(127, 196, 232, .28);
  padding: 24px 22px;
}
.page-about .about-source__flow-title {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--sand);
}
.page-about .about-source__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.page-about .about-source__steps li {
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 2px solid var(--blue);
  font-size: 14.5px;
  line-height: 1.7;
  color: #CFE4F2;
}
.page-about .about-source__time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}

/* 05 覆盖 */
.page-about .about-reach__strip {
  margin-bottom: 34px;
  background: var(--white);
}
.page-about .about-reach__strip .data-num {
  color: var(--blue);
}
.page-about .about-reach__strip .data-num--green {
  color: var(--green);
}

.page-about .about-reach__cols {
  display: grid;
  gap: 30px;
}
.page-about .about-reach__map {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 18px;
}
.page-about .about-reach__map svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-about .about-reach__legend {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--gray-blue);
}
.page-about .about-reach__key {
  position: relative;
  padding-left: 16px;
}
.page-about .about-reach__key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.page-about .about-reach__key--core::before {
  background: var(--orange);
}
.page-about .about-reach__key--wide::before {
  background: var(--green);
}
.page-about .about-reach__key--rest::before {
  background: var(--blue-light);
}

.page-about .about-reach__note-title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.page-about .about-reach__note p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-blue);
}
.page-about .about-reach__link {
  display: inline-block;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.page-about .about-reach__link:hover {
  color: var(--orange-deep);
}

/* 06 共建 */
.page-about .about-eco__grid {
  display: grid;
  gap: 30px;
}
.page-about .about-eco__list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.page-about .about-eco__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.page-about .about-eco__item-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--white);
}
.page-about .about-eco__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #D6EEE0;
}
.page-about .about-eco__figure {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .3);
}
.page-about .about-eco__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-eco__figure .media__caption {
  padding: 12px 16px;
  font-size: 13px;
  color: #D6EEE0;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.page-about .about-eco__cta {
  margin-top: 34px;
  padding: 24px 22px;
  background: rgba(10, 46, 77, .28);
  border-left: 3px solid var(--sand);
}
.page-about .about-eco__cta-text {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--white);
  max-width: 42em;
}
.page-about .about-eco__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 移动端小屏修正 */
@media (max-width: 420px) {
  .page-about .about-hero__facts {
    grid-template-columns: 1fr 1fr;
  }
  .page-about .about-team__seg {
    min-width: 100%;
  }
  .page-about .about-story__side {
    flex-direction: column;
  }
  .page-about .about-story__vnote {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
}

/* 平板与桌面 */
@media (min-width: 760px) {
  .page-about .about-block {
    padding: 74px 0;
  }
  .page-about .about-hero__inner {
    padding: 48px var(--pad) 72px;
  }
  .page-about .about-story {
    grid-template-columns: 7fr 3fr;
    gap: 40px;
  }
  .page-about .about-team__grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-about .about-team__card {
    padding: 24px 26px 24px 0;
    border-right: 1px solid var(--line);
  }
  .page-about .about-team__card:nth-child(2n) {
    padding-left: 26px;
    padding-right: 0;
    border-right: 0;
  }
  .page-about .about-source__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-about .about-source__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .page-about .about-reach__cols {
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: start;
  }
  .page-about .about-eco__grid {
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: start;
  }
  .page-about .about-tl__item:nth-child(1) {
    margin-left: 0;
  }
  .page-about .about-tl__item:nth-child(2) {
    margin-left: 3.5%;
  }
  .page-about .about-tl__item:nth-child(3) {
    margin-left: 7%;
  }
  .page-about .about-tl__item:nth-child(4) {
    margin-left: 10.5%;
  }
}

@media (min-width: 980px) {
  .page-about .about-hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 48px;
  }
  .page-about .about-block__inner {
    grid-template-columns: var(--about-rail) 1fr;
    gap: 0 var(--about-gap);
    align-items: start;
  }
  .page-about .about-block__num {
    position: sticky;
    top: 96px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 6px;
  }
  .page-about .about-block__num-val {
    font-size: 44px;
  }
  .page-about .about-story {
    grid-template-columns: 8fr 4fr;
  }
  .page-about .about-reach__cols {
    grid-template-columns: 5fr 7fr;
  }
  .page-about .about-eco__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl__more,
  .page-about .about-team__seg {
    transition: none;
  }
  .page-about .about-tl__more {
    max-height: none;
    opacity: 1;
    padding-left: 14px;
    margin-top: 12px;
  }
}
</style>
<<<END>>>

等等，我把 </style> 也带出来了——这不该出现。让我重新输出，去掉它。同样，最后的 <<<END>>> 也不是协议的一部分。

重新写正确的答案。我需要确保标记顺序正确，并且只输出要求的标记，不能有杂散的内容。
<main id="main-content" class="page-about">

  <nav class="breadcrumb about-crumb" aria-label="面包屑">
    <a href="/">首页</a>
    <span class="breadcrumb__sep" aria-hidden="true">/</span>
    <span aria-current="page">品牌历程</span>
  </nav>

  <section class="about-hero" aria-labelledby="about-hero-title">
    <div class="about-hero__inner">
      <div class="about-hero__text" data-reveal>
        <p class="eyebrow about-hero__eyebrow">品牌历程 · 九个赛季</p>
        <h1 id="about-hero-title">从西宁的一张赛程表，到九个赛季的赛事数据服务</h1>
        <p class="about-hero__lead">起步那年，几个在西宁看球的人把每晚的比赛结果整理成一份表。九个赛季过去，乐游赛场把赛程、比分和联赛排名做成了球迷打开就能用的东西——每天 08:00 更新昨夜全部赛果，比赛进行中的比分随哨声往上走。</p>
        <ul class="about-hero__facts">
          <li>
            <span class="about-hero__num num">2015</span>
            <span class="about-hero__label">起步年份</span>
          </li>
          <li>
            <span class="about-hero__num num">9</span>
            <span class="about-hero__label">个完整赛季</span>
          </li>
          <li>
            <span class="about-hero__num num">34</span>
            <span class="about-hero__label">人团队规模</span>
          </li>
        </ul>
      </div>
      <figure class="about-hero__figure media media--3x2" data-reveal data-reveal-delay="140">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="清晨高原上的训练场与远处连绵山脊，冷蓝与草绿在光线中交织">
      </figure>
    </div>
  </section>

  <section class="about-block about-block--story" id="origin" aria-labelledby="about-origin-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">01</span>
        <span class="about-block__num-label">起步</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head" data-reveal>
          <h2 class="sec-title" id="about-origin-title">一份手抄的赛程表，是怎么变成数据平台的</h2>
          <p class="sec-sub">起步那年，团队干的活很具体：把当天的赛程抄进表格，第二天早上再一条条把结果补上。第一个赛季结束时，这张表被本地球迷转了几千次。事情就是从那里开始变大的。</p>
        </header>

        <div class="about-story" data-reveal data-reveal-delay="100">
          <div class="about-story__main">
            <p>转折出现在第二个赛季。关注的赛事从两三个扩到十几个，手工维护完全跟不上——一场比赛结束到结果更新，中间会拖上几个小时。团队决定自己搭一套数据结构，把赛程、比分和排名拆成能自动流转的模块，让同一份结果同时喂给好几个视图。</p>
            <p>第三个赛季是另一道坎。手机访问量第一次超过桌面，页面上原本排得下的赛程，在窄屏里被挤成一团。团队把版面整个推倒重做，比分固定在顶部，一指滑动就能翻完整轮赛程——很多老球迷就是从那一版开始把站点放进手机书签的。</p>
            <p>再往后，站点从青海走到了更远的地方。今天，来自 31 个省级行政区的球迷在这里查赛果、看排名、追比赛，其中西北地区的用户占比接近三成。地域变了，做事的方式没变：先把数据弄准，再想怎么让人看得舒服。</p>
          </div>
          <aside class="about-story__side">
            <p class="about-story__vnote">高原 · 赛场 · 数据</p>
            <div class="about-story__quote">
              <p>先有一份靠得住的结果，再谈版面好不好看。</p>
              <span class="about-story__quote-src">团队内部的做事顺序</span>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </section>

  <section class="about-block about-block--timeline" id="seasons" aria-labelledby="about-seasons-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">02</span>
        <span class="about-block__num-label">演进</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head" data-reveal>
          <h2 class="sec-title" id="about-seasons-title">四个版本，四个赛季，一条没拐弯的路</h2>
          <p class="sec-sub">九年的演进不是一次规划出来的，而是跟着球迷的习惯一轮轮磨出来的。每一次大版本升级，背后都压着一个赛季的真实反馈。</p>
        </header>

        <ol class="about-tl">
          <li class="about-tl__item" data-reveal>
            <div class="about-tl__head">
              <span class="about-tl__ver num">V1</span>
              <span class="about-tl__when">起步那年</span>
            </div>
            <h3 class="about-tl__title">建站：把散在各处的赛程收进一个入口</h3>
            <p class="about-tl__desc">第一版只有赛程和赛果两块页面，服务器放在西宁。靠的是每天准时出现的那一行结果，第一批用户在本地球迷论坛里把地址传开了。</p>
            <p class="about-tl__more">当时全站只有两条栏目，所有内容人手录入，编辑一天要翻十几个赛事页面。</p>
          </li>
          <li class="about-tl__item" data-reveal data-reveal-delay="80">
            <div class="about-tl__head">
              <span class="about-tl__ver num">V2</span>
              <span class="about-tl__when">第三个赛季</span>
            </div>
            <h3 class="about-tl__title">移动适配：让比分在手机屏幕上先被看见</h3>
            <p class="about-tl__desc">手机流量翻过桌面端之后，团队重做了整套布局。比分条固定在页面顶部，赛程按日期折叠，单手就能翻完当天的全部对阵。</p>
            <p class="about-tl__more">这一版之后，移动端访问占比稳定在七成以上，晚间比赛时段尤其集中。</p>
          </li>
          <li class="about-tl__item" data-reveal data-reveal-delay="160">
            <div class="about-tl__head">
              <span class="about-tl__ver num">V3</span>
              <span class="about-tl__when">第六个赛季</span>
            </div>
            <h3 class="about-tl__title">数据可视化：排名不再只是一串数字</h3>
            <p class="about-tl__desc">积分走势、净胜分对比、近期战绩三个维度一起上线。一支球队半个赛季的状态起伏，扫一眼就能看出来，不用再自己算。</p>
            <p class="about-tl__more">排名页停留时长在这一版之后明显拉长，赛季末冲刺阶段尤其突出。</p>
          </li>
          <li class="about-tl__item" data-reveal data-reveal-delay="240">
            <div class="about-tl__head">
              <span class="about-tl__ver num">V4</span>
              <span class="about-tl__when">当前主版本</span>
            </div>
            <h3 class="about-tl__title">追比分提醒、排名对比视图与赛程日历导出</h3>
            <p class="about-tl__desc">三项新能力一起上线：比赛进行中的比分可以订阅提醒，联赛排名支持两支球队并排对比，赛程支持按联赛、日期、主客场筛选后导出为日历文件。</p>
            <p class="about-tl__more">V4 是站点第三次大改版后的成果，也是目前所有访问方式的统一版本。想直接体验，去<a href="/download/">下载中心</a>就行。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="about-block about-block--team" id="team" aria-labelledby="about-team-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">03</span>
        <span class="about-block__num-label">团队</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head" data-reveal>
          <h2 class="sec-title" id="about-team-title">34 个人，四类角色，围着同一份数据转</h2>
          <p class="sec-sub">赛果准不准、页面顺不顺手、问题有没有人应答，背后是四类分工在不同环节上接力。人数不多，但每一环都有人盯。</p>
        </header>

        <figure class="about-team__figure media media--12x7" data-reveal>
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="办公区里几名编辑与工程师同时查看屏幕上的赛程表和统计数据，侧逆光从窗口斜射进来" loading="lazy" decoding="async">
          <figcaption class="media__caption">内容与数据两条线在同一个空间里作业，赛果复核在比赛结束后立即开始。</figcaption>
        </figure>

        <div class="about-team__bar" role="img" aria-label="团队构成：内容编辑 12 人，数据工程 8 人，客服与运营 8 人，产品与设计 6 人">
          <div class="about-team__seg about-team__seg--edit" style="--flex:12">
            <span class="about-team__n num">12</span>
            <span class="about-team__t">内容编辑</span>
          </div>
          <div class="about-team__seg about-team__seg--data" style="--flex:8">
            <span class="about-team__n num">8</span>
            <span class="about-team__t">数据工程</span>
          </div>
          <div class="about-team__seg about-team__seg--ops" style="--flex:8">
            <span class="about-team__n num">8</span>
            <span class="about-team__t">客服与运营</span>
          </div>
          <div class="about-team__seg about-team__seg--design" style="--flex:6">
            <span class="about-team__n num">6</span>
            <span class="about-team__t">产品与设计</span>
          </div>
        </div>

        <div class="about-team__grid">
          <article class="about-team__card" data-reveal>
            <h3 class="about-team__card-title">内容编辑 · 12 人</h3>
            <p>负责赛程整理、赛果录入、联赛资料维护和赛事观察稿件的撰写。赛事密集的夜晚按赛事分线值守，谁盯哪几场提前排好。</p>
          </article>
          <article class="about-team__card" data-reveal data-reveal-delay="80">
            <h3 class="about-team__card-title">数据工程 · 8 人</h3>
            <p>维护数据接入管道、更新调度和排名计算逻辑。当天的赛果要经过双人交叉复核，才会进入第二天早上发布的那批数据。</p>
          </article>
          <article class="about-team__card" data-reveal data-reveal-delay="120">
            <h3 class="about-team__card-title">产品与设计 · 6 人</h3>
            <p>负责页面结构、信息层级与多端适配。从 360px 的窄屏到宽屏显示器，赛程、比分、排名三种视图都保持同样的清晰度。</p>
          </article>
          <article class="about-team__card" data-reveal data-reveal-delay="160">
            <h3 class="about-team__card-title">客服与运营 · 8 人</h3>
            <p>承接用户咨询、追踪数据异常反馈，并组织每年两场面向球迷的数据主题活动：赛季前瞻与赛季总结。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="about-block about-block--source" id="source" aria-labelledby="about-source-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">04</span>
        <span class="about-block__num-label">数据</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head sec-head--invert" data-reveal>
          <h2 class="sec-title" id="about-source-title">赛果从哪来，又是怎么过夜的</h2>
          <p class="sec-sub">一场比赛结束后，到第二天早上 08:00 出现在你屏幕上，中间要走完一条不太短的流程。这条流程决定了比分能不能被信任。</p>
        </header>

        <div class="about-source__grid">
          <article class="about-source__item" data-reveal>
            <span class="about-source__idx num">A</span>
            <h3 class="about-source__name">公开赛事公告</h3>
            <p>赛事组织方对外发布的赛程调整、延期与结果通告，是排期变动时的第一手依据。</p>
          </article>
          <article class="about-source__item" data-reveal data-reveal-delay="80">
            <span class="about-source__idx num">B</span>
            <h3 class="about-source__name">联赛官方赛程表</h3>
            <p>各联赛与杯赛的正式对阵表，用于校准轮次顺序、主客场关系与比赛时间。</p>
          </article>
          <article class="about-source__item" data-reveal data-reveal-delay="140">
            <span class="about-source__idx num">C</span>
            <h3 class="about-source__name">12 家数据合作伙伴</h3>
            <p>授权数据用于比分、技术统计与排名计算，覆盖足球、篮球、排球、冰雪、田径、乒乓球等项目。</p>
          </article>
        </div>

        <div class="about-source__flow" data-reveal data-reveal-delay="120">
          <p class="about-source__flow-title">每天夜里到清晨，这条线一直在跑</p>
          <ol class="about-source__steps">
            <li><span class="about-source__time num">比赛结束</span>编辑按赛事分线录入结果，同步补充技术统计。</li>
            <li><span class="about-source__time num">当夜</span>数据工程执行双人交叉复核，异常场次回查原始来源。</li>
            <li><span class="about-source__time num">排名重算</span>积分、净胜分与近期战绩三个维度同步刷新。</li>
            <li><span class="about-source__time num">08:00</span>昨夜全部赛果对外发布，赛程与排名随赛事进展继续更新。</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="about-block about-block--reach" id="reach" aria-labelledby="about-reach-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">05</span>
        <span class="about-block__num-label">覆盖</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head" data-reveal>
          <h2 class="sec-title" id="about-reach-title">从足球到冰雪，从青海到 31 个省级行政区</h2>
          <p class="sec-sub">关注的赛事越杂，越需要一套统一的组织方式。9 个大项、26 个联赛与杯赛，用的是同一套赛程、比分与排名结构。</p>
        </header>

        <div class="data-strip about-reach__strip" data-reveal>
          <div class="data-strip__item">
            <span class="data-num num">9</span>
            <span class="data-label">个运动大项</span>
          </div>
          <div class="data-strip__item">
            <span class="data-num num">26</span>
            <span class="data-label">个联赛与杯赛</span>
          </div>
          <div class="data-strip__item">
            <span class="data-num num">31</span>
            <span class="data-label">个省级行政区有访问</span>
          </div>
          <div class="data-strip__item">
            <span class="data-num data-num--green num">48万</span>
            <span class="data-label">累计登记注册用户</span>
          </div>
        </div>

        <div class="about-reach__cols">
          <div class="about-reach__map" data-reveal>
            <svg viewBox="0 0 420 240" role="img" aria-label="用户访问分布的抽象点阵示意，西北区域点位最密集，其余区域均匀分布">
              <defs>
                <pattern id="aboutDotGrid" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="3" cy="3" r="2.1" fill="#D7E2EA"></circle>
                </pattern>
              </defs>
              <rect x="0" y="0" width="420" height="240" fill="url(#aboutDotGrid)"></rect>
              <g fill="#7FC4E8">
                <circle cx="86" cy="128" r="4.2"></circle>
                <circle cx="140" cy="96" r="4.2"></circle>
                <circle cx="196" cy="142" r="4.2"></circle>
                <circle cx="252" cy="90" r="4.2"></circle>
                <circle cx="308" cy="134" r="4.2"></circle>
                <circle cx="352" cy="102" r="4.2"></circle>
                <circle cx="118" cy="176" r="4.2"></circle>
                <circle cx="228" cy="188" r="4.2"></circle>
                <circle cx="330" cy="182" r="4.2"></circle>
              </g>
              <g fill="#E8580C">
                <circle cx="72" cy="102" r="5.6"></circle>
                <circle cx="94" cy="82" r="5.6"></circle>
                <circle cx="112" cy="110" r="5.6"></circle>
                <circle cx="82" cy="136" r="5.6"></circle>
                <circle cx="128" cy="66" r="5.6"></circle>
              </g>
              <g fill="#1F7A4C">
                <circle cx="176" cy="74" r="4.6"></circle>
                <circle cx="206" cy="60" r="4.6"></circle>
                <circle cx="242" cy="118" r="4.6"></circle>
                <circle cx="278" cy="66" r="4.6"></circle>
              </g>
            </svg>
            <p class="about-reach__legend">
              <span class="about-reach__key about-reach__key--core">青海及西北</span>
              <span class="about-reach__key about-reach__key--wide">华东 · 华北</span>
              <span class="about-reach__key about-reach__key--rest">其余区域</span>
            </p>
          </div>

          <div class="about-reach__note" data-reveal data-reveal-delay="100">
            <h3 class="about-reach__note-title">西北用户，是重点也是起点</h3>
            <p>接近三成的用户来自西北地区，比赛时间集中在晚间。针对这个习惯，站点在晚间赛事时段优先保证比分条刷新，并让手机端的赛程翻阅尽量少点几下。</p>
            <p>其他区域的用户结构更分散，跨时区赛事、深夜场次和赛季末密集赛程是常见场景。赛程日历支持按联赛、日期、主客场三种方式筛选，筛完可以直接导出成日历文件，塞进手机自带日历里。</p>
            <a class="link-arrow about-reach__link" href="/help-center/">第一次使用，先看这里怎么上手</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-block about-block--eco" id="eco" aria-labelledby="about-eco-title">
    <div class="about-block__inner">
      <div class="about-block__num">
        <span class="num about-block__num-val">06</span>
        <span class="about-block__num-label">共建</span>
      </div>
      <div class="about-block__body">
        <header class="sec-head" data-reveal>
          <h2 class="sec-title" id="about-eco-title">数据之外，和谁一起把内容做厚</h2>
          <p class="sec-sub">赛事资料、本地观察和球迷活动，很多不是平台单独完成的。6 家区域体育协会与 4 所高校体育院系参与了内容共建，赛事观察专栏在赛事期间保持每日摘要更新，非赛事期每周发布三篇左右解读。</p>
        </header>

        <div class="about-eco__grid">
          <div class="about-eco__list" data-reveal>
            <article class="about-eco__item">
              <h3 class="about-eco__item-title">区域体育协会 · 6 家</h3>
              <p>提供本地赛事排期与赛场信息，让地方联赛也能在站内找到完整的赛程和结果。</p>
            </article>
            <article class="about-eco__item">
              <h3 class="about-eco__item-title">高校体育院系 · 4 所</h3>
              <p>在赛事数据整理、内容选题和数据分析实践上互相支持，学生的赛事观察稿件也有机会出现在专栏里。</p>
            </article>
            <article class="about-eco__item">
              <h3 class="about-eco__item-title">品牌与内容伙伴</h3>
              <p>围绕赛程页、排名页和赛事专题展开联合内容呈现，触达长期关注具体联赛的球迷人群。</p>
            </article>
            <article class="about-eco__item">
              <h3 class="about-eco__item-title">球迷活动 · 每年两场</h3>
              <p>赛季前瞻与赛季总结，围绕数据看赛季走势，也是平台收集使用反馈的主要场合。</p>
            </article>
          </div>

          <figure class="about-eco__figure media media--1x1" data-reveal data-reveal-delay="120">
            <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="高校体育馆内正在进行体育活动，场边学生与工作人员围在一起交流记录，馆内光线明亮" loading="lazy" decoding="async">
            <figcaption class="media__caption">高校共建现场：学生在场边记录比赛数据，用于后续的专栏稿件。</figcaption>
          </figure>
        </div>

        <div class="about-eco__cta" data-reveal>
          <p class="about-eco__cta-text">如果你是赛事机构、区域协会、高校院系或想触达球迷的品牌方，合作方式和对接资料都在商务合作页里写清楚了。</p>
          <div class="about-eco__cta-row">
            <a class="btn btn--accent" href="/cooperation/">看商务合作方式</a>
            <a class="btn btn--line" href="/updates/">读最新赛事观察</a>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-rail: 116px;
  --about-gap: 56px;
  color: var(--ink);
  font-family: var(--font-body);
}

.page-about .about-crumb {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 104px var(--pad) 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gray-blue);
}
.page-about .about-crumb a {
  color: var(--gray-blue);
  text-decoration: none;
}
.page-about .about-crumb a:hover {
  color: var(--blue);
}
.page-about .about-crumb [aria-current="page"] {
  color: var(--ink);
}

.page-about .about-hero {
  position: relative;
  background: var(--blue-deep);
  color: var(--white);
  overflow: hidden;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  background: var(--blue);
  opacity: .28;
  transform: rotate(-7deg);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 36px var(--pad) 56px;
  display: grid;
  gap: 32px;
}
.page-about .about-hero__eyebrow {
  color: var(--sand);
  margin: 0 0 14px;
}
.page-about .about-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 16em;
}
.page-about .about-hero__lead {
  margin: 0 0 30px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.75;
  color: #CFE4F2;
}
.page-about .about-hero__facts {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(127, 196, 232, .32);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.page-about .about-hero__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.1;
  color: var(--white);
}
.page-about .about-hero__label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--blue-light);
}
.page-about .about-hero__figure {
  margin: 0;
  border: 1px solid rgba(127, 196, 232, .3);
}
.page-about .about-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-block {
  padding: 60px 0;
  background: var(--white);
}
.page-about .about-block--story {
  background: var(--white);
}
.page-about .about-block--timeline {
  background: var(--blue-mist);
}
.page-about .about-block--team {
  background: var(--white);
}
.page-about .about-block--source {
  background: var(--blue-deep);
  color: var(--white);
}
.page-about .about-block--reach {
  background: var(--blue-mist);
}
.page-about .about-block--eco {
  background: var(--green);
  color: var(--white);
}

.page-about .about-block__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-about .about-block__num {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-about .about-block__num-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--blue);
}
.page-about .about-block__num-label {
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--gray-blue);
}
.page-about .about-block--source .about-block__num-val {
  color: var(--sand);
}
.page-about .about-block--source .about-block__num-label {
  color: var(--blue-light);
}
.page-about .about-block--eco .about-block__num-val {
  color: var(--white);
}
.page-about .about-block--eco .about-block__num-label {
  color: var(--green-light);
}

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

.page-about .sec-head {
  margin-bottom: 32px;
}
.page-about .sec-title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 4.6vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20em;
}
.page-about .sec-sub {
  margin: 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-blue);
}
.page-about .sec-head--invert .sec-title {
  color: var(--white);
}
.page-about .sec-head--invert .sec-sub {
  color: #B9D3E6;
}
.page-about .about-block--eco .sec-title {
  color: var(--white);
}
.page-about .about-block--eco .sec-sub {
  color: #D6EEE0;
}

.page-about .about-story {
  display: grid;
  gap: 26px;
}
.page-about .about-story__main p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-blue);
}
.page-about .about-story__main p:last-child {
  margin-bottom: 0;
}
.page-about .about-story__side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
}
.page-about .about-story__vnote {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--blue);
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}
.page-about .about-story__quote {
  flex: 1;
  padding: 20px 22px;
  border-left: 3px solid var(--orange);
  background: var(--blue-mist);
}
.page-about .about-story__quote p {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.page-about .about-story__quote-src {
  font-size: 12.5px;
  color: var(--gray-blue);
}

.page-about .about-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.page-about .about-tl__item {
  position: relative;
  padding: 20px 0 20px 26px;
  border-top: 1px solid var(--line);
  transition: background-color .24s var(--ease);
}
.page-about .about-tl__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.page-about .about-tl__item::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
}
.page-about .about-tl__item:hover,
.page-about .about-tl__item:focus-within {
  background: rgba(127, 196, 232, .16);
}
.page-about .about-tl__item:hover::after,
.page-about .about-tl__item:focus-within::after {
  border-color: var(--orange);
}
.page-about .about-tl__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.page-about .about-tl__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--blue);
}
.page-about .about-tl__when {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--gray-blue);
}
.page-about .about-tl__title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.page-about .about-tl__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-blue);
  max-width: 44em;
}
.page-about .about-tl__desc a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--blue-light);
}
.page-about .about-tl__desc a:hover {
  border-bottom-color: var(--orange);
  color: var(--orange-deep);
}
.page-about .about-tl__more {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gray-blue);
  border-left: 2px solid var(--green-light);
  padding-left: 0;
  transition: max-height .32s var(--ease), opacity .3s var(--ease), padding-left .3s var(--ease), margin-top .3s var(--ease);
}
.page-about .about-tl__item:hover .about-tl__more,
.page-about .about-tl__item:focus-within .about-tl__more {
  max-height: 160px;
  opacity: 1;
  padding-left: 14px;
  margin-top: 12px;
}

.page-about .about-team__figure {
  margin: 0 0 34px;
  border: 1px solid var(--line);
}
.page-about .about-team__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-team__figure .media__caption {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray-blue);
  border-top: 1px solid var(--line);
}

.page-about .about-team__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 30px;
}
.page-about .about-team__seg {
  flex: var(--flex, 1) 1 0;
  min-width: 132px;
  padding: 18px 16px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .22s var(--ease);
}
.page-about .about-team__seg--edit {
  background: var(--blue);
}
.page-about .about-team__seg--data {
  background: var(--blue-deep);
}
.page-about .about-team__seg--ops {
  background: var(--green);
}
.page-about .about-team__seg--design {
  background: var(--blue-light);
  color: var(--ink);
}
.page-about .about-team__seg:hover {
  transform: translateY(-3px);
}
.page-about .about-team__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.page-about .about-team__t {
  font-size: 13px;
  letter-spacing: .06em;
}

.page-about .about-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.page-about .about-team__card {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.page-about .about-team__card-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
}
.page-about .about-team__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-blue);
}

.page-about .about-source__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(127, 196, 232, .22);
  margin-bottom: 36px;
}
.page-about .about-source__item {
  background: var(--blue-deep);
  padding: 24px 22px;
}
.page-about .about-source__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--sand);
  margin-bottom: 12px;
}
.page-about .about-source__name {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
}
.page-about .about-source__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #B9D3E6;
}

.page-about .about-source__flow {
  border: 1px solid rgba(127, 196, 232, .28);
  padding: 24px 22px;
}
.page-about .about-source__flow-title {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--sand);
}
.page-about .about-source__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.page-about .about-source__steps li {
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 2px solid var(--blue);
  font-size: 14.5px;
  line-height: 1.7;
  color: #CFE4F2;
}
.page-about .about-source__time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}

.page-about .about-reach__strip {
  margin-bottom: 34px;
  background: var(--white);
}
.page-about .about-reach__strip .data-num {
  color: var(--blue);
}
.page-about .about-reach__strip .data-num--green {
  color: var(--green);
}

.page-about .about-reach__cols {
  display: grid;
  gap: 30px;
}
.page-about .about-reach__map {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 18px;
}
.page-about .about-reach__map svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-about .about-reach__legend {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--gray-blue);
}
.page-about .about-reach__key {
  position: relative;
  padding-left: 16px;
}
.page-about .about-reach__key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.page-about .about-reach__key--core::before {
  background: var(--orange);
}
.page-about .about-reach__key--wide::before {
  background: var(--green);
}
.page-about .about-reach__key--rest::before {
  background: var(--blue-light);
}

.page-about .about-reach__note-title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.page-about .about-reach__note p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-blue);
}
.page-about .about-reach__link {
  display: inline-block;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.page-about .about-reach__link:hover {
  color: var(--orange-deep);
}

.page-about .about-eco__grid {
  display: grid;
  gap: 30px;
}
.page-about .about-eco__list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.page-about .about-eco__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.page-about .about-eco__item-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--white);
}
.page-about .about-eco__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #D6EEE0;
}
.page-about .about-eco__figure {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .3);
}
.page-about .about-eco__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-eco__figure .media__caption {
  padding: 12px 16px;
  font-size: 13px;
  color: #D6EEE0;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.page-about .about-eco__cta {
  margin-top: 34px;
  padding: 24px 22px;
  background: rgba(10, 46, 77, .28);
  border-left: 3px solid var(--sand);
}
.page-about .about-eco__cta-text {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--white);
  max-width: 42em;
}
.page-about .about-eco__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 420px) {
  .page-about .about-hero__facts {
    grid-template-columns: 1fr 1fr;
  }
  .page-about .about-team__seg {
    min-width: 100%;
  }
  .page-about .about-story__side {
    flex-direction: column;
  }
  .page-about .about-story__vnote {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
}

@media (min-width: 760px) {
  .page-about .about-block {
    padding: 74px 0;
  }
  .page-about .about-hero__inner {
    padding: 48px var(--pad) 72px;
  }
  .page-about .about-story {
    grid-template-columns: 7fr 3fr;
    gap: 40px;
  }
  .page-about .about-team__grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-about .about-team__card {
    padding: 24px 26px 24px 0;
    border-right: 1px solid var(--line);
  }
  .page-about .about-team__card:nth-child(2n) {
    padding-left: 26px;
    padding-right: 0;
    border-right: 0;
  }
  .page-about .about-source__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-about .about-source__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .page-about .about-reach__cols {
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: start;
  }
  .page-about .about-eco__grid {
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: start;
  }
  .page-about .about-tl__item:nth-child(1) {
    margin-left: 0;
  }
  .page-about .about-tl__item:nth-child(2) {
    margin-left: 3.5%;
  }
  .page-about .about-tl__item:nth-child(3) {
    margin-left: 7%;
  }
  .page-about .about-tl__item:nth-child(4) {
    margin-left: 10.5%;
  }
}

@media (min-width: 980px) {
  .page-about .about-hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 48px;
  }
  .page-about .about-block__inner {
    grid-template-columns: var(--about-rail) 1fr;
    gap: 0 var(--about-gap);
    align-items: start;
  }
  .page-about .about-block__num {
    position: sticky;
    top: 96px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 6px;
  }
  .page-about .about-block__num-val {
    font-size: 44px;
  }
  .page-about .about-story {
    grid-template-columns: 8fr 4fr;
  }
  .page-about .about-reach__cols {
    grid-template-columns: 5fr 7fr;
  }
  .page-about .about-eco__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl__more,
  .page-about .about-team__seg {
    transition: none;
  }
  .page-about .about-tl__more {
    max-height: none;
    opacity: 1;
    padding-left: 14px;
    margin-top: 12px;
  }
}