.page-about {
  --about-rail: 172px;
  position: relative;
  padding-bottom: clamp(40px, 7vw, 88px);
  background:
    radial-gradient(900px 440px at 92% -8%, rgba(255, 59, 71, 0.12), transparent 70%),
    radial-gradient(720px 420px at 2% 2%, rgba(77, 141, 255, 0.12), transparent 70%);
  background-repeat: no-repeat;
}

.page-about .about-crumbs {
  padding-top: clamp(14px, 3vw, 26px);
}

.page-about .about-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hl-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--hl-mist);
}

.page-about .about-crumb a {
  color: var(--hl-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-about .about-crumb a:hover,
.page-about .about-crumb a:focus-visible {
  color: var(--hl-white);
  border-bottom-color: var(--hl-red);
}

.page-about .about-crumb__sep {
  color: var(--hl-frame);
}

.page-about .about-crumb__here {
  color: var(--hl-white);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(16px, 3vw, 26px) 0 clamp(34px, 6vw, 70px);
}

.page-about .about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(24px, 3.4vw, 44px);
  }
}

.page-about .about-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(22px, 3.4vw, 46px);
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  background: linear-gradient(155deg, rgba(20, 32, 58, 0.94) 0%, rgba(11, 18, 36, 0.74) 62%, rgba(11, 18, 36, 0.52) 100%);
  overflow: hidden;
}

.page-about .about-hero__copy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hl-red) 0%, var(--hl-red) 47%, var(--hl-blue) 47%, var(--hl-blue) 100%);
}

.page-about .about-hero__ticks {
  position: absolute;
  top: 16px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.page-about .about-hero__ticks i {
  display: block;
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: var(--hl-frame);
}

.page-about .about-hero__ticks i:nth-child(2) {
  height: 13px;
}

.page-about .about-hero__ticks i:nth-child(3) {
  height: 18px;
  background: var(--hl-red);
}

.page-about .about-hero__ticks i:nth-child(4) {
  height: 11px;
}

.page-about .about-hero h1 {
  margin: 0;
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.3vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--hl-white);
  text-wrap: balance;
}

.page-about .about-hero .hl-lede {
  margin: 0;
  font-size: clamp(0.94rem, 1.15vw, 1.02rem);
  line-height: 1.78;
  color: var(--hl-mist);
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--hl-frame);
}

.page-about .about-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-about .about-hero__num {
  font-family: var(--hl-mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.05;
  color: var(--hl-white);
}

.page-about .about-hero__stat:first-child .about-hero__num {
  color: var(--hl-red);
}

.page-about .about-hero__label {
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hl-mist);
}

.page-about .about-hero__media {
  position: relative;
  margin: 0;
  min-height: 240px;
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  overflow: hidden;
  background: linear-gradient(140deg, rgba(77, 141, 255, 0.2), rgba(255, 59, 71, 0.2));
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px));
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--hl-red);
  border-bottom: 2px solid var(--hl-red);
}

/* ---------- 正文骨架 ---------- */
.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.6vw, 44px);
}

@media (min-width: 1000px) {
  .page-about .about-body {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

.page-about .about-index__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--hl-mist);
}

.page-about .about-index__title::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--hl-red);
}

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

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

.page-about .about-index__list a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--hl-frame);
  border-radius: 999px;
  color: var(--hl-mist);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.page-about .about-index__list a span {
  font-family: var(--hl-mono);
  font-size: 10.5px;
  color: var(--hl-mist);
  opacity: 0.6;
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--hl-white);
  border-color: var(--hl-red);
  background: rgba(255, 59, 71, 0.08);
}

@media (min-width: 1000px) {
  .page-about .about-index {
    position: sticky;
    top: 92px;
  }

  .page-about .about-index__list {
    display: block;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--hl-frame);
  }

  .page-about .about-index__list li + li {
    margin-top: 2px;
  }

  .page-about .about-index__list a {
    padding: 7px 10px 7px 14px;
    margin-left: -1px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-size: 13.5px;
  }

  .page-about .about-index__list a:hover,
  .page-about .about-index__list a:focus-visible {
    background: linear-gradient(90deg, rgba(255, 59, 71, 0.14), transparent);
    border-left-color: var(--hl-red);
  }
}

/* ---------- 章节 ---------- */
.page-about .about-sec {
  position: relative;
  padding-top: clamp(30px, 4.4vw, 54px);
  scroll-margin-top: 96px;
}

.page-about .about-sec:first-child {
  padding-top: 0;
}

.page-about .about-sec__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--hl-frame);
}

.page-about .about-sec__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 2px;
  background: var(--hl-red);
}

.page-about .about-sec__no {
  flex: none;
  font-family: var(--hl-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hl-red);
}

.page-about .about-sec__title {
  margin: 0;
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.26rem, 2.2vw, 1.7rem);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--hl-white);
}

.page-about .about-sec p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--hl-mist);
}

.page-about .about-quote {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 4px 0 4px clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--hl-red);
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--hl-white);
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  position: relative;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hl-blue), var(--hl-red));
}

.page-about .about-tl-item {
  position: relative;
  padding: 12px 0 18px;
  border-bottom: 1px dashed rgba(36, 51, 82, 0.9);
}

.page-about .about-tl-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hl-void);
  border: 2px solid var(--hl-blue);
  transform: translateX(-1px);
}

.page-about .about-tl-item:last-child::before {
  border-color: var(--hl-red);
}

.page-about .about-tl-year {
  display: block;
  font-family: var(--hl-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--hl-blue);
}

.page-about .about-tl-item:last-child .about-tl-year {
  color: var(--hl-red);
}

.page-about .about-tl-name {
  margin: 5px 0 0;
  font-family: var(--hl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-tl-item p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
}

.page-about .about-tl-tag {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 10px;
  border: 1px solid rgba(77, 141, 255, 0.36);
  border-radius: 999px;
  background: rgba(77, 141, 255, 0.1);
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--hl-blue);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (min-width: 760px) and (hover: hover) {
  .page-about .about-tl-tag {
    opacity: 0;
    transform: translateY(3px);
  }

  .page-about .about-tl-item:hover .about-tl-tag,
  .page-about .about-tl-item:focus-within .about-tl-tag {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 团队 ---------- */
.page-about .about-team__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 700px) {
  .page-about .about-team__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .about-team__card {
  position: relative;
  padding: 18px 18px 18px;
  border: 1px solid var(--hl-frame);
  border-radius: 18px;
  background: var(--hl-fill);
}

.page-about .about-team__card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--hl-blue);
}

.page-about .about-team__card--red::before {
  background: var(--hl-red);
}

.page-about .about-team__card h3 {
  margin: 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-team__card p {
  margin: 8px 0 0;
  font-size: 13.8px;
  line-height: 1.72;
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: clamp(22px, 3vw, 32px) 0 0;
  border: 1px solid var(--hl-frame);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(77, 141, 255, 0.16), rgba(255, 59, 71, 0.16));
}

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

.page-about .about-figure figcaption {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--hl-frame);
  font-family: var(--hl-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--hl-mist);
}

/* ---------- 流程阶梯 ---------- */
.page-about .about-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 820px) {
  .page-about .about-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
}

.page-about .about-flow__step {
  position: relative;
  padding: 14px 14px 16px;
  border: 1px solid var(--hl-frame);
  border-radius: 14px;
  background: var(--hl-fill);
  transition: border-color 0.24s ease, background 0.24s ease;
}

@media (min-width: 820px) {
  .page-about .about-flow__step {
    padding: 16px 13px 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
}

.page-about .about-flow__step:hover,
.page-about .about-flow__step:focus-within {
  border-color: rgba(255, 59, 71, 0.55);
  background: rgba(255, 59, 71, 0.07);
}

.page-about .about-flow__no {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--hl-blue);
  color: var(--hl-void);
  font-family: var(--hl-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-about .about-flow__step:last-child .about-flow__no {
  background: var(--hl-red);
}

.page-about .about-flow__name {
  margin: 10px 0 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-flow__step p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.66;
}

/* ---------- 合作 ---------- */
.page-about .about-partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

@media (min-width: 760px) {
  .page-about .about-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .about-partner {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border: 1px solid var(--hl-frame);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 32, 58, 0.88), rgba(11, 18, 36, 0.46));
}

.page-about .about-partner__num {
  font-family: var(--hl-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--hl-red);
}

.page-about .about-partner h3 {
  margin: 10px 0 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-partner p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
}

/* ---------- 准则 ---------- */
.page-about .about-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  padding: 14px 16px;
  border-left: 2px solid var(--hl-frame);
  border-radius: 0 14px 14px 0;
  background: rgba(20, 32, 58, 0.42);
  transition: border-color 0.24s ease, background 0.24s ease;
}

.page-about .about-rules li:hover,
.page-about .about-rules li:focus-within {
  border-left-color: var(--hl-red);
  background: rgba(255, 59, 71, 0.06);
}

.page-about .about-rules li > span {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 3px;
  font-family: var(--hl-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--hl-red);
}

.page-about .about-rules h3 {
  grid-column: 2;
  margin: 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-rules p {
  grid-column: 2;
  margin: 0;
  font-size: 13.6px;
  line-height: 1.72;
}

/* ---------- 收尾 ---------- */
.page-about .about-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-top: clamp(32px, 5vw, 52px);
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  background: linear-gradient(120deg, rgba(77, 141, 255, 0.14), rgba(255, 59, 71, 0.12));
}

.page-about .about-next__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hl-white);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl-tag,
  .page-about .about-flow__step,
  .page-about .about-rules li,
  .page-about .about-index__list a {
    transition: none;
  }

  .page-about .about-tl-tag {
    opacity: 1;
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="about-crumbs">
    <div class="hl-container">
      <nav class="about-crumb" aria-label="面包屑">
        <a href="/">导航总览</a>
        <span class="about-crumb__sep" aria-hidden="true">/</span>
        <span class="about-crumb__here" aria-current="page">品牌中心</span>
      </nav>
    </div>
  </div>

  <section class="about-hero" aria-labelledby="about-title">
    <div class="hl-container about-hero__inner">
      <div class="about-hero__copy">
        <span class="about-hero__ticks" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
        <p class="hl-kicker">Brand / 品牌中心</p>
        <h1 id="about-title">把六大赛区的阵容变动，整理成一份随时能查的档案</h1>
        <p class="hl-lede">红蓝电竞从 2019 年的一份赛事入口清单做起，如今覆盖 LPL、LCK、LEC、LCS、PCS、VCS 六大赛区，218 支职业战队的阵容、1,860 份选手档案与转会期动向，都能在这里看到出处和最后更新时间。</p>
        <div class="about-hero__stats">
          <div class="about-hero__stat">
            <span class="about-hero__num">2019</span>
            <span class="about-hero__label">起步年份</span>
          </div>
          <div class="about-hero__stat">
            <span class="about-hero__num">218</span>
            <span class="about-hero__label">收录战队</span>
          </div>
          <div class="about-hero__stat">
            <span class="about-hero__num">1,860</span>
            <span class="about-hero__label">选手档案</span>
          </div>
        </div>
      </div>
      <figure class="about-hero__media">
        <img src="{zhanqunpic:h:1400w:1100}" width="1100" height="1400" alt="红与蓝两束光在深色空间中交汇，形成一条清晰的分界线">
      </figure>
    </div>
  </section>

  <div class="hl-container about-body">
    <aside class="about-index" aria-label="本页章节索引">
      <p class="about-index__title">目录</p>
      <ul class="about-index__list">
        <li><a href="#origin"><span>01</span>红蓝双色</a></li>
        <li><a href="#versions"><span>02</span>版本演进</a></li>
        <li><a href="#team"><span>03</span>维护团队</a></li>
        <li><a href="#flow"><span>04</span>信息流程</a></li>
        <li><a href="#partners"><span>05</span>合作生态</a></li>
        <li><a href="#standards"><span>06</span>内容准则</a></li>
      </ul>
    </aside>

    <div class="about-content">
      <section class="about-sec" id="origin" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">01</span>
          <h2 class="about-sec__title">红与蓝，是同一种对抗的两面</h2>
        </div>
        <p>2019 年，我们最初只做一件事：把散落在不同地方的赛事入口收进一个页面，让观众不用在收藏夹里反复翻找。站名里的红与蓝，取自赛场上永远对位的那两方——红方与蓝方，攻与守，主动与克制。</p>
        <p>这两种颜色后来成了整个站点的秩序。红色只留给最需要被看见的地方：当前的焦点、关键数字、需要你立刻点进去的入口；蓝色承担底色和链接，让其余信息安静地待在原位。你在战队页上第一眼看到的是红色状态点，第二眼才是说明文字，顺序不会乱。</p>
        <blockquote class="about-quote">对抗让比赛好看，清晰让信息好用。</blockquote>
      </section>

      <section class="about-sec" id="versions" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">02</span>
          <h2 class="about-sec__title">从一份入口清单，走到能对位的阵容数据</h2>
        </div>
        <p>四个版本，每一步都在解决观众当时最费劲的那件事。节点上的收录规模，是那一步之后站内能查到的量级。</p>
        <ol class="about-timeline">
          <li class="about-tl-item">
            <span class="about-tl-year">2019</span>
            <h3 class="about-tl-name">V1 · 导航聚合</h3>
            <p>赛事与赛区入口收进一页，找一场比赛不再靠翻收藏夹。</p>
            <span class="about-tl-tag">覆盖 6 大赛区入口</span>
          </li>
          <li class="about-tl-item">
            <span class="about-tl-year">2020</span>
            <h3 class="about-tl-name">V2 · 战队库</h3>
            <p>218 支职业战队完成建档，其中 46 支是青训队伍。搜一个队名，归属赛区和基本资料立刻出来。</p>
            <span class="about-tl-tag">收录 218 支战队</span>
          </li>
          <li class="about-tl-item">
            <span class="about-tl-year">2022</span>
            <h3 class="about-tl-name">V3 · 选手数据与对比</h3>
            <p>1,860 份选手档案上线，位置、所属战队与登场记录可以并排摆在一起看，换了位置的人一眼能认出来。</p>
            <span class="about-tl-tag">1,860 份选手档案</span>
          </li>
          <li class="about-tl-item">
            <span class="about-tl-year">2024</span>
            <h3 class="about-tl-name">V4 · 阵容状态标签与赛程对照</h3>
            <p>名单变动带上状态标记，支持跨赛区搜索、按位置筛选和两支战队并排比对，赛程与名单放在同一屏里读。</p>
            <span class="about-tl-tag">跨赛区搜索 · 按位置筛选</span>
          </li>
          <li class="about-tl-item">
            <span class="about-tl-year">2024 起</span>
            <h3 class="about-tl-name">季后赛名单对照专题</h3>
            <p>按赛事阶段汇总已公布阵容，季后赛开打前两周的名单变化能一页对完。本赛季站内收录 46 项赛事、8.6 万场比赛记录。</p>
            <span class="about-tl-tag">46 项赛事 · 8.6 万场</span>
          </li>
        </ol>
      </section>

      <section class="about-sec" id="team" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">03</span>
          <h2 class="about-sec__title">五十个人，分布在六个赛区</h2>
        </div>
        <p>内容团队由 18 名数据编辑与 32 名赛区观察员组成。编辑在后台负责录入、比对和发布；观察员分布在各赛区，跟官方公告、跟训练赛名单、跟临时替补——哪支队伍换了打野，常常由他们最先带回来。</p>
        <div class="about-team__split">
          <div class="about-team__card">
            <h3>数据编辑 · 18 名</h3>
            <p>把线索变成可读的条目：对照两个以上来源、判断变动性质、打上状态标签、写清最后更新时间，再放出去。</p>
          </div>
          <div class="about-team__card about-team__card--red">
            <h3>赛区观察员 · 32 名</h3>
            <p>分布在六大赛区，跟官宣节奏、跟队伍训练动态，把当地第一手信息带回编辑台，也负责第一时间报出异常。</p>
          </div>
        </div>
        <p>两班人的作息跟着赛程走：赛季期每 2 小时执行一次巡检，每日做 3 次全量校对；转会期条目按日更新，越靠近窗口关闭的那几天，条目密度越高。</p>
        <figure class="about-figure">
          <img loading="lazy" decoding="async" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="六个赛区节点由细线连接成网络的示意图，红蓝双色区分主次赛区">
          <figcaption>赛区观察网络：节点越大，投入的观察员越多</figcaption>
        </figure>
      </section>

      <section class="about-sec" id="flow" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">04</span>
          <h2 class="about-sec__title">一条阵容信息，怎么走到页面上</h2>
        </div>
        <p>从一条线索到页面上的一行字，中间要过五道手。你看到的每个状态色，都是在其中某一步按上去的。</p>
        <figure class="about-figure">
          <img loading="lazy" decoding="async" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色桌面上多屏显示赛事列表与表格，红蓝两色界面光映在键帽上，画面中无可识别人物">
          <figcaption>编辑台日常：赛事列表、阵容表与来源窗口同时开着</figcaption>
        </figure>
        <ol class="about-flow">
          <li class="about-flow__step">
            <span class="about-flow__no">01</span>
            <h3 class="about-flow__name">采集</h3>
            <p>从赛区公告、战队发布与公开赛事信息里捕捉变动线索，先记下时间与出处。</p>
          </li>
          <li class="about-flow__step">
            <span class="about-flow__no">02</span>
            <h3 class="about-flow__name">比对</h3>
            <p>同一条变动至少两个来源互相印证，来源类型一并留档，单一渠道的消息先挂起。</p>
          </li>
          <li class="about-flow__step">
            <span class="about-flow__no">03</span>
            <h3 class="about-flow__name">标状态</h3>
            <p>名单已经落地打青绿，仍在变化中的打琥珀，未经证实的说法不进阵容名单。</p>
          </li>
          <li class="about-flow__step">
            <span class="about-flow__no">04</span>
            <h3 class="about-flow__name">发布</h3>
            <p>条目带最后更新时间上线，战队库与选手档案同步刷新，旧版本自动归档。</p>
          </li>
          <li class="about-flow__step">
            <span class="about-flow__no">05</span>
            <h3 class="about-flow__name">回溯</h3>
            <p>巡检中发现偏差就回填更正，改过的条目留下改动痕迹，方便你对照前后版本。</p>
          </li>
        </ol>
      </section>

      <section class="about-sec" id="partners" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">05</span>
          <h2 class="about-sec__title">和谁一起把事做扎实</h2>
        </div>
        <p>三类合作方各补一块短板，让我们能从不同角度看到同一件事。</p>
        <div class="about-partners">
          <article class="about-partner">
            <span class="about-partner__num">7</span>
            <h3>赛事数据机构</h3>
            <p>赛程、比分与出场记录互通，比对时多一组独立参照，出场次数这类数字不容易挂错人。</p>
          </article>
          <article class="about-partner">
            <span class="about-partner__num">12</span>
            <h3>电竞媒体</h3>
            <p>本地报道与采访线索互通，战队人事变动的第一手消息，常常从这条线上先露头。</p>
          </article>
          <article class="about-partner">
            <span class="about-partner__num">9</span>
            <h3>高校电竞社团</h3>
            <p>年轻观众的关注点反向流回来，帮我们判断哪些赛区、哪些队伍值得投入更多观察人力。</p>
          </article>
        </div>
      </section>

      <section class="about-sec" id="standards" data-reveal>
        <div class="about-sec__head">
          <span class="about-sec__no">06</span>
          <h2 class="about-sec__title">我们对自己的四条要求</h2>
        </div>
        <p>这四条写在这里，你可以拿它去检验每一条阵容、每一份选手档案。</p>
        <ol class="about-rules">
          <li>
            <span>01</span>
            <h3>每条阵容都带最后更新时间</h3>
            <p>打开一个战队页，你能立刻判断看到的是几小时前还是几天前的名单，不用猜。</p>
          </li>
          <li>
            <span>02</span>
            <h3>已确认与变动中分开标记</h3>
            <p>青绿是已经落地的名单，琥珀是还在变化的状态。转会窗口里，这个区别决定你要不要立刻转发给群里的队友。</p>
          </li>
          <li>
            <span>03</span>
            <h3>来源链接留在条目里</h3>
            <p>想自己看一眼原始公告或赛事信息，点开就能到；写稿引用时也不必再四处找截图。</p>
          </li>
          <li>
            <span>04</span>
            <h3>纠错请求在下一个工作日给出结论</h3>
            <p>发现出入，把页面截图与来源链接发到咨询通道，我们会复查条目并告诉你处理结果。</p>
          </li>
        </ol>
        <div class="about-next">
          <p class="about-next__text">想直接上手查数据，从战队库或转会期条目进去更快。</p>
          <div class="about-next__links">
            <a class="hl-btn hl-btn--red" href="/experience/">打开战队库</a>
            <a class="hl-btn hl-btn--ghost" href="/information/">看转会期条目</a>
            <a class="hl-btn hl-btn--ghost" href="/inquiry/">联系合作</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</main>

.page-about {
  --about-rail: 172px;
  position: relative;
  padding-bottom: clamp(40px, 7vw, 88px);
  background:
    radial-gradient(900px 440px at 92% -8%, rgba(255, 59, 71, 0.12), transparent 70%),
    radial-gradient(720px 420px at 2% 2%, rgba(77, 141, 255, 0.12), transparent 70%);
  background-repeat: no-repeat;
}

.page-about .about-crumbs {
  padding-top: clamp(14px, 3vw, 26px);
}

.page-about .about-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hl-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--hl-mist);
}

.page-about .about-crumb a {
  color: var(--hl-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-about .about-crumb a:hover,
.page-about .about-crumb a:focus-visible {
  color: var(--hl-white);
  border-bottom-color: var(--hl-red);
}

.page-about .about-crumb__sep {
  color: var(--hl-frame);
}

.page-about .about-crumb__here {
  color: var(--hl-white);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(16px, 3vw, 26px) 0 clamp(34px, 6vw, 70px);
}

.page-about .about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(24px, 3.4vw, 44px);
  }
}

.page-about .about-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(22px, 3.4vw, 46px);
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  background: linear-gradient(155deg, rgba(20, 32, 58, 0.94) 0%, rgba(11, 18, 36, 0.74) 62%, rgba(11, 18, 36, 0.52) 100%);
  overflow: hidden;
}

.page-about .about-hero__copy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hl-red) 0%, var(--hl-red) 47%, var(--hl-blue) 47%, var(--hl-blue) 100%);
}

.page-about .about-hero__ticks {
  position: absolute;
  top: 16px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.page-about .about-hero__ticks i {
  display: block;
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: var(--hl-frame);
}

.page-about .about-hero__ticks i:nth-child(2) {
  height: 13px;
}

.page-about .about-hero__ticks i:nth-child(3) {
  height: 18px;
  background: var(--hl-red);
}

.page-about .about-hero__ticks i:nth-child(4) {
  height: 11px;
}

.page-about .about-hero h1 {
  margin: 0;
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.3vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--hl-white);
  text-wrap: balance;
}

.page-about .about-hero .hl-lede {
  margin: 0;
  font-size: clamp(0.94rem, 1.15vw, 1.02rem);
  line-height: 1.78;
  color: var(--hl-mist);
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--hl-frame);
}

.page-about .about-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-about .about-hero__num {
  font-family: var(--hl-mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.05;
  color: var(--hl-white);
}

.page-about .about-hero__stat:first-child .about-hero__num {
  color: var(--hl-red);
}

.page-about .about-hero__label {
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hl-mist);
}

.page-about .about-hero__media {
  position: relative;
  margin: 0;
  min-height: 240px;
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  overflow: hidden;
  background: linear-gradient(140deg, rgba(77, 141, 255, 0.2), rgba(255, 59, 71, 0.2));
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px));
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--hl-red);
  border-bottom: 2px solid var(--hl-red);
}

/* ---------- 正文骨架 ---------- */
.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.6vw, 44px);
}

@media (min-width: 1000px) {
  .page-about .about-body {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

.page-about .about-index__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--hl-mist);
}

.page-about .about-index__title::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--hl-red);
}

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

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

.page-about .about-index__list a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--hl-frame);
  border-radius: 999px;
  color: var(--hl-mist);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.page-about .about-index__list a span {
  font-family: var(--hl-mono);
  font-size: 10.5px;
  color: var(--hl-mist);
  opacity: 0.6;
}

.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible {
  color: var(--hl-white);
  border-color: var(--hl-red);
  background: rgba(255, 59, 71, 0.08);
}

@media (min-width: 1000px) {
  .page-about .about-index {
    position: sticky;
    top: 92px;
  }

  .page-about .about-index__list {
    display: block;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--hl-frame);
  }

  .page-about .about-index__list li + li {
    margin-top: 2px;
  }

  .page-about .about-index__list a {
    padding: 7px 10px 7px 14px;
    margin-left: -1px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-size: 13.5px;
  }

  .page-about .about-index__list a:hover,
  .page-about .about-index__list a:focus-visible {
    background: linear-gradient(90deg, rgba(255, 59, 71, 0.14), transparent);
    border-left-color: var(--hl-red);
  }
}

/* ---------- 章节 ---------- */
.page-about .about-sec {
  position: relative;
  padding-top: clamp(30px, 4.4vw, 54px);
  scroll-margin-top: 96px;
}

.page-about .about-sec:first-child {
  padding-top: 0;
}

.page-about .about-sec__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--hl-frame);
}

.page-about .about-sec__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 2px;
  background: var(--hl-red);
}

.page-about .about-sec__no {
  flex: none;
  font-family: var(--hl-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hl-red);
}

.page-about .about-sec__title {
  margin: 0;
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.26rem, 2.2vw, 1.7rem);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--hl-white);
}

.page-about .about-sec p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--hl-mist);
}

.page-about .about-quote {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 4px 0 4px clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--hl-red);
  font-family: var(--hl-display);
  font-weight: 800;
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--hl-white);
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  position: relative;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hl-blue), var(--hl-red));
}

.page-about .about-tl-item {
  position: relative;
  padding: 12px 0 18px;
  border-bottom: 1px dashed rgba(36, 51, 82, 0.9);
}

.page-about .about-tl-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hl-void);
  border: 2px solid var(--hl-blue);
  transform: translateX(-1px);
}

.page-about .about-tl-item:last-child::before {
  border-color: var(--hl-red);
}

.page-about .about-tl-year {
  display: block;
  font-family: var(--hl-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--hl-blue);
}

.page-about .about-tl-item:last-child .about-tl-year {
  color: var(--hl-red);
}

.page-about .about-tl-name {
  margin: 5px 0 0;
  font-family: var(--hl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-tl-item p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
}

.page-about .about-tl-tag {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 10px;
  border: 1px solid rgba(77, 141, 255, 0.36);
  border-radius: 999px;
  background: rgba(77, 141, 255, 0.1);
  font-family: var(--hl-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--hl-blue);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (min-width: 760px) and (hover: hover) {
  .page-about .about-tl-tag {
    opacity: 0;
    transform: translateY(3px);
  }

  .page-about .about-tl-item:hover .about-tl-tag,
  .page-about .about-tl-item:focus-within .about-tl-tag {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 团队 ---------- */
.page-about .about-team__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 700px) {
  .page-about .about-team__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .about-team__card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--hl-frame);
  border-radius: 18px;
  background: var(--hl-fill);
}

.page-about .about-team__card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--hl-blue);
}

.page-about .about-team__card--red::before {
  background: var(--hl-red);
}

.page-about .about-team__card h3 {
  margin: 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-team__card p {
  margin: 8px 0 0;
  font-size: 13.8px;
  line-height: 1.72;
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: clamp(22px, 3vw, 32px) 0 0;
  border: 1px solid var(--hl-frame);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(77, 141, 255, 0.16), rgba(255, 59, 71, 0.16));
}

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

.page-about .about-figure figcaption {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--hl-frame);
  font-family: var(--hl-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--hl-mist);
}

/* ---------- 流程阶梯 ---------- */
.page-about .about-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 820px) {
  .page-about .about-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
}

.page-about .about-flow__step {
  position: relative;
  padding: 14px 14px 16px;
  border: 1px solid var(--hl-frame);
  border-radius: 14px;
  background: var(--hl-fill);
  transition: border-color 0.24s ease, background 0.24s ease;
}

@media (min-width: 820px) {
  .page-about .about-flow__step {
    padding: 16px 13px 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
}

.page-about .about-flow__step:hover,
.page-about .about-flow__step:focus-within {
  border-color: rgba(255, 59, 71, 0.55);
  background: rgba(255, 59, 71, 0.07);
}

.page-about .about-flow__no {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--hl-blue);
  color: var(--hl-void);
  font-family: var(--hl-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-about .about-flow__step:last-child .about-flow__no {
  background: var(--hl-red);
}

.page-about .about-flow__name {
  margin: 10px 0 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-flow__step p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.66;
}

/* ---------- 合作 ---------- */
.page-about .about-partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

@media (min-width: 760px) {
  .page-about .about-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .about-partner {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border: 1px solid var(--hl-frame);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 32, 58, 0.88), rgba(11, 18, 36, 0.46));
}

.page-about .about-partner__num {
  font-family: var(--hl-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--hl-red);
}

.page-about .about-partner h3 {
  margin: 10px 0 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-partner p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
}

/* ---------- 准则 ---------- */
.page-about .about-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  padding: 14px 16px;
  border-left: 2px solid var(--hl-frame);
  border-radius: 0 14px 14px 0;
  background: rgba(20, 32, 58, 0.42);
  transition: border-color 0.24s ease, background 0.24s ease;
}

.page-about .about-rules li:hover,
.page-about .about-rules li:focus-within {
  border-left-color: var(--hl-red);
  background: rgba(255, 59, 71, 0.06);
}

.page-about .about-rules li > span {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 3px;
  font-family: var(--hl-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--hl-red);
}

.page-about .about-rules h3 {
  grid-column: 2;
  margin: 0;
  font-family: var(--hl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-white);
}

.page-about .about-rules p {
  grid-column: 2;
  margin: 0;
  font-size: 13.6px;
  line-height: 1.72;
}

/* ---------- 收尾 ---------- */
.page-about .about-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-top: clamp(32px, 5vw, 52px);
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--hl-frame);
  border-radius: var(--hl-radius);
  background: linear-gradient(120deg, rgba(77, 141, 255, 0.14), rgba(255, 59, 71, 0.12));
}

.page-about .about-next__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hl-white);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl-tag,
  .page-about .about-flow__step,
  .page-about .about-rules li,
  .page-about .about-index__list a {
    transition: none;
  }

  .page-about .about-tl-tag {
    opacity: 1;
    transform: none;
  }
}