.page-about {
  --about-line: rgba(14, 64, 88, 0.16);
  --about-tint: #EDF3F6;
  --about-sand: #EFEAE4;
  --about-ink-soft: #47585F;
  background: var(--snow);
  color: var(--text);
  overflow-x: clip;
}

.page-about p {
  margin: 0 0 1em;
}

.page-about h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--lake-800);
  margin: 0;
}

.page-about .about-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lake-600);
  margin: 0 0 14px;
}

.page-about .about-sub {
  font-size: clamp(0.95rem, 1.9vw, 1.05rem);
  line-height: 1.85;
  color: var(--about-ink-soft);
  margin: 14px 0 0;
  max-width: 46em;
}

.page-about [data-reveal] {
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
}

.page-about [data-reveal].is-pending {
  opacity: 0;
  transform: translateY(12px);
}

.page-about [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(18px, 3.5vw, 36px) 0 clamp(44px, 7vw, 88px);
  background: linear-gradient(180deg, #ffffff 0%, var(--snow) 100%);
}

.page-about .about-hero .breadcrumb {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-about .about-hero__copy {
  max-width: 36em;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--lake-800);
  margin: 0 0 clamp(16px, 2.4vw, 26px);
}

.page-about .about-lede {
  font-size: clamp(1rem, 1.9vw, 1.125rem);
  line-height: 1.9;
  color: var(--about-ink-soft);
  margin: 0 0 clamp(22px, 3vw, 34px);
}

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

.page-about .about-hero__figure {
  position: relative;
  margin: 0;
}

.page-about .about-hero__figure::before {
  content: "";
  position: absolute;
  inset: 12px -8px -12px 8px;
  background: var(--lake-100);
  border-radius: var(--radius-m);
  z-index: 0;
}

.page-about .about-hero__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
  }

  .page-about .about-hero__figure::before {
    inset: 20px -16px -20px 20px;
  }
}

/* ---------- 缘起 ---------- */
.page-about .about-origin {
  padding: clamp(44px, 7vw, 88px) 0;
  background: var(--about-tint);
}

.page-about .about-origin__grid {
  display: grid;
  gap: clamp(20px, 3.5vw, 44px);
}

.page-about .about-origin__body p {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-facts dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.page-about .about-facts dd {
  margin: 0;
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  font-weight: 600;
  color: var(--lake-800);
  line-height: 1.2;
}

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

/* ---------- 阶段演进 ---------- */
.page-about .about-phases {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--about-sand);
}

.page-about .about-phases__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .phase-list {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
}

.page-about .phase {
  background: rgba(255, 255, 255, 0.74);
  border-left: 3px solid var(--lake-600);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: clamp(18px, 3vw, 26px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .phase:hover,
.page-about .phase:focus-within {
  background: #ffffff;
  border-left-color: var(--sun-500);
  transform: translateX(4px);
}

.page-about .phase__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
}

.page-about .phase__num {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--lake-600);
  transition: color var(--dur) var(--ease);
}

.page-about .phase:hover .phase__num {
  color: var(--sun-500);
}

.page-about .phase__year {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--sun-500);
}

.page-about .phase h3 {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  font-weight: 500;
  color: var(--lake-800);
  margin: 0 0 8px;
  line-height: 1.4;
}

.page-about .phase p:last-child {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--about-ink-soft);
}

.page-about .about-phases__rail {
  display: none;
}

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

  .page-about .about-phases__rail {
    display: block;
  }
}

.page-about .rail-card {
  position: sticky;
  top: 32px;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--lake-800);
  padding: clamp(20px, 2.6vw, 30px);
}

.page-about .rail-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.page-about .rail-card__title {
  position: relative;
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lake-100);
}

.page-about .rail-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-about .rail-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 234, 242, 0.24);
  border-radius: var(--radius-s);
  color: var(--snow);
  font-size: 15px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .rail-link:hover,
.page-about .rail-link:focus-visible {
  background: var(--sun-500);
  border-color: var(--sun-500);
  color: #ffffff;
}

.page-about .rail-link > span:first-child {
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.86;
}

.page-about .rail-link__year {
  font-size: 12px;
  opacity: 0.82;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--snow);
}

.page-about .team-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-about .team-total {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--lake-600);
  border-radius: var(--radius-m);
  color: #ffffff;
}

.page-about .team-total__num {
  margin: 0;
  font-size: clamp(3rem, 8vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

.page-about .team-total__label {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--lake-100);
}

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

.page-about .team-roles li {
  border-top: 2px solid var(--sun-200);
  padding-top: 14px;
}

.page-about .team-roles li > span {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sun-500);
  margin-bottom: 6px;
}

.page-about .team-roles h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--lake-800);
  margin: 0 0 8px;
}

.page-about .team-roles p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--about-ink-soft);
}

.page-about .team-flow {
  list-style: none;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .team-flow li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--about-tint);
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  color: var(--lake-800);
}

.page-about .team-flow li > span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-s);
  background: var(--lake-600);
  color: #ffffff;
  font-size: 12px;
}

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

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

@media (min-width: 900px) {
  .page-about .team-grid {
    grid-template-columns: 3fr 9fr;
    align-items: stretch;
  }
}

/* ---------- 覆盖与回访 ---------- */
.page-about .about-reach {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--lake-800);
  color: var(--snow);
}

.page-about .about-reach::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(214, 234, 242, 0.09) 0 1px, transparent 1px 36px);
  pointer-events: none;
}

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

.page-about .about-reach h2 {
  color: #ffffff;
}

.page-about .about-reach .about-kicker {
  color: var(--sun-200);
}

.page-about .about-reach .about-sub {
  color: var(--lake-100);
}

.page-about .reach-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  margin-top: clamp(26px, 4vw, 44px);
}

.page-about .reach-stat {
  border-top: 1px solid rgba(214, 234, 242, 0.3);
  padding-top: 14px;
}

.page-about .reach-stat__num {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sun-500);
}

.page-about .reach-stat p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lake-100);
}

.page-about .reach-note {
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(18px, 3vw, 26px);
  background: rgba(214, 234, 242, 0.1);
  border-left: 3px solid var(--sun-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.page-about .reach-note p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--snow);
}

@media (min-width: 840px) {
  .page-about .reach-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 合作 ---------- */
.page-about .about-partners {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--snow);
}

.page-about .about-partners__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}

.page-about .about-partners__copy h2 {
  margin-bottom: 18px;
}

.page-about .about-partners__copy p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

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

.page-about .partner-tags li {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--lake-800);
  background: var(--lake-100);
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .partner-tags li:hover {
  background: var(--sun-200);
  color: var(--lake-800);
}

.page-about .about-partners__figure {
  margin: 0;
}

.page-about .about-partners__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  background: var(--about-tint);
}

.page-about .about-partners__figure .media__caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

@media (min-width: 900px) {
  .page-about .about-partners__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0 clamp(48px, 7vw, 88px);
  background: var(--lake-100);
}

.page-about .about-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(28px, 5vw, 62px);
  background: var(--snow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

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

.page-about .about-cta__text {
  max-width: 44em;
  margin: 18px 0 clamp(24px, 3.5vw, 34px);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--lake-800);
}

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

@media (prefers-reduced-motion: reduce) {
  .page-about .phase,
  .page-about .phase__num,
  .page-about .rail-link,
  .page-about .partner-tags li,
  .page-about [data-reveal] {
    transition: none;
  }

  .page-about .phase:hover,
  .page-about .phase:focus-within {
    transform: none;
  }

  .page-about [data-reveal].is-pending {
    opacity: 1;
    transform: none;
  }
}


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

  <section class="about-hero">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <span class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></span>
        <span class="breadcrumb__item" aria-current="page">品牌自述</span>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__copy">
          <p class="about-kicker mono">品牌自述 / SINCE 2019</p>
          <h1>从一张栏目清单，到您顺手的站点地图</h1>
          <p class="about-lede">荣一娱乐中文站接待的多是带着具体事情来的人：取一份资料、确认一次更新、回到上次看过的活动页。六年里我们把力气花在同一件事上——让您少翻几屏，直接落到自己要的那一条。</p>
          <div class="about-hero__actions">
            <a class="btn btn--primary" href="/products/">看有哪些资源</a>
            <a class="btn btn--ghost" href="/consult/">联系我们</a>
          </div>
        </div>
        <figure class="about-hero__figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="青海湖面等高线与站点网格叠加的抽象图形，湖蓝与砂岩灰交叠">
        </figure>
      </div>
    </div>
  </section>

  <section class="about-origin">
    <div class="wrap about-origin__grid">
      <header class="about-origin__head">
        <p class="about-kicker mono">01 / 缘起</p>
        <h2>从一张站点地图开始</h2>
      </header>
      <div class="about-origin__body">
        <p>2019 年，我们做的第一件事是把散在各处的栏目收拢到一张图上：谁在哪个位置、从哪进、进去之后能拿到什么。这张图后来成了整个站点的骨架，也成了访客在页面顶部最先看到的入口编号。</p>
        <p>六年下来，图的边界一直在扩——从栏目扩到资源下载，从活动周期扩到每一次更新留下记录。出发点倒没怎么变：一个人带着具体的事来，应该顺着路标走到答案面前，而不是在首页来回试探。</p>
        <dl class="about-facts">
          <div>
            <dt>项目起步</dt>
            <dd class="mono">2019</dd>
          </div>
          <div>
            <dt>索引节点</dt>
            <dd class="mono">260+</dd>
          </div>
          <div>
            <dt>单条资源平均到达</dt>
            <dd class="mono">≤3 次点击</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="about-phases">
    <div class="wrap">
      <header class="about-phases__head">
        <p class="about-kicker mono">02 / 演进</p>
        <h2>四个阶段，把索引做成一项服务</h2>
        <p class="about-phases__sub">每一次改版都对应一类访客的抱怨：找不到、回不去、说不清是哪一版变了。</p>
      </header>

      <div class="about-phases__grid">
        <ol class="phase-list">
          <li class="phase" id="phase-01">
            <p class="phase__meta mono"><span class="phase__num">01</span><span class="phase__year">2019</span></p>
            <h3>栏目整理：先把门牌号挂上</h3>
            <p>那一年我们把站内栏目统一编了号，页面顶部开始显示访客当前站在哪一格。此前最常收到的求助是“东西到底放在哪儿”，编号挂上之后，这类问题明显少了。</p>
          </li>
          <li class="phase" id="phase-02">
            <p class="phase__meta mono"><span class="phase__num">02</span><span class="phase__year">2021</span></p>
            <h3>索引 2.0：从“能点”推到“好点”</h3>
            <p>索引节点扩到 260 多个，常用页面压进两次操作之内。资源下载与活动周期各留一条主线，访客进门不用先做选择题。</p>
          </li>
          <li class="phase" id="phase-03">
            <p class="phase__meta mono"><span class="phase__num">03</span><span class="phase__year">2023</span></p>
            <h3>记录明细中心：每次变动都留档</h3>
            <p>1,200 余条历史记录按版本、栏目与更新时间三个维度归档。合作方想知道某次调整落在哪一版，翻记录比挨个问人要快得多。</p>
          </li>
          <li class="phase" id="phase-04">
            <p class="phase__meta mono"><span class="phase__num">04</span><span class="phase__year">2025</span></p>
            <h3>浏览器内容目录：让目录自己展开</h3>
            <p>目录支持直接在浏览器里翻开，键盘导航与锚点跳转一并可用。习惯键盘的人不必再为找一个入口去摸鼠标。</p>
          </li>
        </ol>

        <aside class="about-phases__rail" aria-label="阶段索引">
          <div class="rail-card">
            <img class="rail-card__bg" src="{zhanqunpic:h:1200w:800}" width="800" height="1200" alt="山脊折线转化为四段垂直时间轴的抽象底纹" loading="lazy" decoding="async">
            <p class="rail-card__title mono">阶段索引</p>
            <ol class="rail-list">
              <li><a class="rail-link" href="#phase-01"><span class="mono">01</span><span>栏目整理</span><span class="rail-link__year mono">2019</span></a></li>
              <li><a class="rail-link" href="#phase-02"><span class="mono">02</span><span>索引 2.0</span><span class="rail-link__year mono">2021</span></a></li>
              <li><a class="rail-link" href="#phase-03"><span class="mono">03</span><span>记录明细中心</span><span class="rail-link__year mono">2023</span></a></li>
              <li><a class="rail-link" href="#phase-04"><span class="mono">04</span><span>浏览器内容目录</span><span class="rail-link__year mono">2025</span></a></li>
            </ol>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-team">
    <div class="wrap">
      <header class="about-team__head">
        <p class="about-kicker mono">03 / 团队</p>
        <h2>28 个人，分三段接力</h2>
        <p class="about-sub">一条内容从想法到能被访客点开，中间要过三双手：写清楚、放对位置、稳稳发出去。</p>
      </header>

      <div class="team-grid">
        <div class="team-total" data-reveal>
          <p class="team-total__num mono">28</p>
          <p class="team-total__label">内容与索引团队在岗人数</p>
        </div>
        <ul class="team-roles">
          <li>
            <span class="mono">14</span>
            <h3>内容编辑</h3>
            <p>负责栏目选题、资料整理与文字成稿，也是我们与内容机构对接的窗口。</p>
          </li>
          <li>
            <span class="mono">6</span>
            <h3>索引维护</h3>
            <p>把新内容挂到合适的位置、编好号，让入口顺着读下来不掉链子。</p>
          </li>
          <li>
            <span class="mono">8</span>
            <h3>技术支持</h3>
            <p>管发布、页面性能与浏览器兼容，每次上线后的更新时间也在这里登记。</p>
          </li>
        </ul>
      </div>

      <ol class="team-flow">
        <li><span class="mono">A</span>栏目编辑：撰写、整理、校订</li>
        <li><span class="mono">B</span>索引维护：定编号与入口层级</li>
        <li><span class="mono">C</span>技术支持：发布并登记更新时间</li>
      </ol>
    </div>
  </section>

  <section class="about-reach">
    <div class="wrap">
      <header class="about-reach__head">
        <p class="about-kicker mono">04 / 覆盖</p>
        <h2>31 个省级行政区，12.8 万位回头客</h2>
        <p class="about-sub">访客分布比我们最初预想的要散。31 个省级行政区都有人来过，西北地区占到大约 18%，这和站点从青海长起来有关，也说明高原之外的需求一样具体。</p>
      </header>

      <div class="reach-stats">
        <div class="reach-stat" data-reveal>
          <p class="reach-stat__num mono">31</p>
          <p>个省级行政区有访客到访</p>
        </div>
        <div class="reach-stat" data-reveal>
          <p class="reach-stat__num mono">18%</p>
          <p>西北地区访问占比</p>
        </div>
        <div class="reach-stat" data-reveal>
          <p class="reach-stat__num mono">12.8 万</p>
          <p>累计回访用户</p>
        </div>
        <div class="reach-stat" data-reveal>
          <p class="reach-stat__num mono">40%</p>
          <p>回访路径省下的点击步骤</p>
        </div>
      </div>

      <div class="reach-note">
        <p>老用户多半从收藏夹或搜索结果直接回来。站内索引会把他放在活动周期页的当前节点上，不必从首页重走一遍。我们内部把这条回头路称作「中文站约老用户回访」，相比常规查找，它能省下大约 40% 的点击步骤——这也是我们持续打磨索引的直接理由。</p>
      </div>
    </div>
  </section>

  <section class="about-partners">
    <div class="wrap about-partners__grid">
      <div class="about-partners__copy">
        <p class="about-kicker mono">05 / 协作</p>
        <h2>42 家伙伴，一起把内容做厚</h2>
        <p>资源共建、栏目共创与索引标准，是我们和 42 家内容机构、技术服务方一起推进的三件事。有人供稿，有人一起定栏目结构，也有人帮我们把索引规则磨得更通用。</p>
        <p>18 个专题合集则是把零散条目按使用场景串起来的尝试：新手指引、版本观察、回访路径都收在其中。2024 年，站点入选区域数字内容服务优秀案例库。</p>
        <ul class="partner-tags">
          <li>资源共建</li>
          <li>栏目共创</li>
          <li>索引标准</li>
          <li>专题合集</li>
        </ul>
      </div>
      <figure class="about-partners__figure">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="线性索引节点连接成网络，节点用湖蓝与橙色区分层级" loading="lazy" decoding="async">
        <figcaption class="media__caption">合作方在资源、栏目与索引三条方向上与我们交汇。</figcaption>
      </figure>
    </div>
  </section>

  <section class="about-cta">
    <div class="wrap">
      <p class="about-kicker mono">06 / 下一步</p>
      <h2>把复杂留给系统，把清楚留给您</h2>
      <p class="about-cta__text">下次您需要一份资料，或者想确认某个版本是什么时候上线的，希望第一反应还是回到这里。资源入口在内容资源中心，进展与观察在站点动态，其余的事情，直接找我们聊。</p>
      <div class="about-cta__actions">
        <a class="btn btn--primary" href="/products/">进入内容资源中心</a>
        <a class="btn btn--ghost" href="/blog/">看站点动态</a>
        <a class="btn btn--ghost" href="/consult/">咨询服务</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-line: rgba(14, 64, 88, 0.16);
  --about-tint: #EDF3F6;
  --about-sand: #EFEAE4;
  --about-ink-soft: #47585F;
  background: var(--snow);
  color: var(--text);
  overflow-x: clip;
}

.page-about p {
  margin: 0 0 1em;
}

.page-about h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--lake-800);
  margin: 0;
}

.page-about .about-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lake-600);
  margin: 0 0 14px;
}

.page-about .about-sub {
  font-size: clamp(0.95rem, 1.9vw, 1.05rem);
  line-height: 1.85;
  color: var(--about-ink-soft);
  margin: 14px 0 0;
  max-width: 46em;
}

.page-about [data-reveal] {
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
}

.page-about [data-reveal].is-pending {
  opacity: 0;
  transform: translateY(12px);
}

.page-about [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: clamp(18px, 3.5vw, 36px) 0 clamp(44px, 7vw, 88px);
  background: linear-gradient(180deg, #ffffff 0%, var(--snow) 100%);
}

.page-about .about-hero .breadcrumb {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-about .about-hero__copy {
  max-width: 36em;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--lake-800);
  margin: 0 0 clamp(16px, 2.4vw, 26px);
}

.page-about .about-lede {
  font-size: clamp(1rem, 1.9vw, 1.125rem);
  line-height: 1.9;
  color: var(--about-ink-soft);
  margin: 0 0 clamp(22px, 3vw, 34px);
}

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

.page-about .about-hero__figure {
  position: relative;
  margin: 0;
}

.page-about .about-hero__figure::before {
  content: "";
  position: absolute;
  inset: 12px -8px -12px 8px;
  background: var(--lake-100);
  border-radius: var(--radius-m);
  z-index: 0;
}

.page-about .about-hero__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
  }

  .page-about .about-hero__figure::before {
    inset: 20px -16px -20px 20px;
  }
}

/* ---------- 缘起 ---------- */
.page-about .about-origin {
  padding: clamp(44px, 7vw, 88px) 0;
  background: var(--about-tint);
}

.page-about .about-origin__grid {
  display: grid;
  gap: clamp(20px, 3.5vw, 44px);
}

.page-about .about-origin__body p {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-facts dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.page-about .about-facts dd {
  margin: 0;
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  font-weight: 600;
  color: var(--lake-800);
  line-height: 1.2;
}

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

/* ---------- 阶段演进 ---------- */
.page-about .about-phases {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--about-sand);
}

.page-about .about-phases__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .phase-list {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
}

.page-about .phase {
  background: rgba(255, 255, 255, 0.74);
  border-left: 3px solid var(--lake-600);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: clamp(18px, 3vw, 26px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .phase:hover,
.page-about .phase:focus-within {
  background: #ffffff;
  border-left-color: var(--sun-500);
  transform: translateX(4px);
}

.page-about .phase__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
}

.page-about .phase__num {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--lake-600);
  transition: color var(--dur) var(--ease);
}

.page-about .phase:hover .phase__num {
  color: var(--sun-500);
}

.page-about .phase__year {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--sun-500);
}

.page-about .phase h3 {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  font-weight: 500;
  color: var(--lake-800);
  margin: 0 0 8px;
  line-height: 1.4;
}

.page-about .phase p:last-child {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--about-ink-soft);
}

.page-about .about-phases__rail {
  display: none;
}

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

  .page-about .about-phases__rail {
    display: block;
  }
}

.page-about .rail-card {
  position: sticky;
  top: 32px;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--lake-800);
  padding: clamp(20px, 2.6vw, 30px);
}

.page-about .rail-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.page-about .rail-card__title {
  position: relative;
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lake-100);
}

.page-about .rail-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-about .rail-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 234, 242, 0.24);
  border-radius: var(--radius-s);
  color: var(--snow);
  font-size: 15px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .rail-link:hover,
.page-about .rail-link:focus-visible {
  background: var(--sun-500);
  border-color: var(--sun-500);
  color: #ffffff;
}

.page-about .rail-link > span:first-child {
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.86;
}

.page-about .rail-link__year {
  font-size: 12px;
  opacity: 0.82;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--snow);
}

.page-about .team-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-about .team-total {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--lake-600);
  border-radius: var(--radius-m);
  color: #ffffff;
}

.page-about .team-total__num {
  margin: 0;
  font-size: clamp(3rem, 8vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

.page-about .team-total__label {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--lake-100);
}

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

.page-about .team-roles li {
  border-top: 2px solid var(--sun-200);
  padding-top: 14px;
}

.page-about .team-roles li > span {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sun-500);
  margin-bottom: 6px;
}

.page-about .team-roles h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--lake-800);
  margin: 0 0 8px;
}

.page-about .team-roles p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--about-ink-soft);
}

.page-about .team-flow {
  list-style: none;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .team-flow li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--about-tint);
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  color: var(--lake-800);
}

.page-about .team-flow li > span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-s);
  background: var(--lake-600);
  color: #ffffff;
  font-size: 12px;
}

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

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

@media (min-width: 900px) {
  .page-about .team-grid {
    grid-template-columns: 3fr 9fr;
    align-items: stretch;
  }
}

/* ---------- 覆盖与回访 ---------- */
.page-about .about-reach {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--lake-800);
  color: var(--snow);
}

.page-about .about-reach::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(214, 234, 242, 0.09) 0 1px, transparent 1px 36px);
  pointer-events: none;
}

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

.page-about .about-reach h2 {
  color: #ffffff;
}

.page-about .about-reach .about-kicker {
  color: var(--sun-200);
}

.page-about .about-reach .about-sub {
  color: var(--lake-100);
}

.page-about .reach-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  margin-top: clamp(26px, 4vw, 44px);
}

.page-about .reach-stat {
  border-top: 1px solid rgba(214, 234, 242, 0.3);
  padding-top: 14px;
}

.page-about .reach-stat__num {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sun-500);
}

.page-about .reach-stat p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lake-100);
}

.page-about .reach-note {
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(18px, 3vw, 26px);
  background: rgba(214, 234, 242, 0.1);
  border-left: 3px solid var(--sun-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.page-about .reach-note p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--snow);
}

@media (min-width: 840px) {
  .page-about .reach-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 合作 ---------- */
.page-about .about-partners {
  padding: clamp(44px, 7vw, 96px) 0;
  background: var(--snow);
}

.page-about .about-partners__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}

.page-about .about-partners__copy h2 {
  margin-bottom: 18px;
}

.page-about .about-partners__copy p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--about-ink-soft);
}

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

.page-about .partner-tags li {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--lake-800);
  background: var(--lake-100);
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .partner-tags li:hover {
  background: var(--sun-200);
  color: var(--lake-800);
}

.page-about .about-partners__figure {
  margin: 0;
}

.page-about .about-partners__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  background: var(--about-tint);
}

.page-about .about-partners__figure .media__caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

@media (min-width: 900px) {
  .page-about .about-partners__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0 clamp(48px, 7vw, 88px);
  background: var(--lake-100);
}

.page-about .about-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(28px, 5vw, 62px);
  background: var(--snow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

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

.page-about .about-cta__text {
  max-width: 44em;
  margin: 18px 0 clamp(24px, 3.5vw, 34px);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--lake-800);
}

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

@media (prefers-reduced-motion: reduce) {
  .page-about .phase,
  .page-about .phase__num,
  .page-about .rail-link,
  .page-about .partner-tags li,
  .page-about [data-reveal] {
    transition: none;
  }

  .page-about .phase:hover,
  .page-about .phase:focus-within {
    transform: none;
  }

  .page-about [data-reveal].is-pending {
    opacity: 1;
    transform: none;
  }
}