.page-about {
  --about-rail: 236px;
  --about-line: rgba(23, 59, 94, 0.85);
  --about-line-strong: rgba(56, 232, 232, 0.34);
  padding-block: clamp(16px, 3vw, 30px) clamp(56px, 8vw, 112px);
  background:
    radial-gradient(860px 460px at 86% -8%, rgba(56, 232, 232, 0.10), transparent 64%),
    radial-gradient(680px 420px at -4% 46%, rgba(26, 167, 184, 0.08), transparent 62%);
}

.page-about .about-hero {
  margin-top: clamp(14px, 2.6vw, 26px);
  border-block: 1px solid var(--about-line);
  background-image:
    linear-gradient(rgba(23, 59, 94, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 59, 94, 0.26) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: 12px 0;
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  padding-block: clamp(24px, 4vw, 52px);
}

.page-about .about-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6.2vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ice);
}

.page-about .about-hero__lede {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.85;
  color: var(--ice);
  opacity: 0.92;
}

.page-about .about-hero__sub {
  margin: 12px 0 0;
  max-width: 48ch;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.page-about .about-hero__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.84rem;
  color: var(--mist);
}

.page-about .about-hero__facts .mono {
  font-size: 1.15rem;
  color: var(--cyan);
  letter-spacing: 0.02em;
}

.page-about .about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .about-hero__frame {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--about-line-strong);
  border-radius: 2px;
  background: rgba(18, 50, 77, 0.42);
  backdrop-filter: blur(4px);
}

.page-about .about-hero__frame::before,
.page-about .about-hero__frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--cyan);
  opacity: 0.85;
  pointer-events: none;
}

.page-about .about-hero__frame::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.page-about .about-hero__frame::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
}

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

.page-about .about-hero__frame figcaption {
  margin-top: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-about .about-body {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  margin-top: clamp(28px, 5vw, 56px);
}

.page-about .about-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--about-line);
}

.page-about .about-rail__label {
  order: 0;
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--mist);
}

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

.page-about .about-rail__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--about-line);
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-rail__list a .mono {
  font-size: 0.68rem;
  color: rgba(56, 232, 232, 0.75);
}

.page-about .about-rail__list a:hover {
  color: var(--ice);
  border-color: var(--about-line-strong);
  background: rgba(56, 232, 232, 0.06);
}

.page-about .about-rail__list a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  color: var(--ice);
}

.page-about .about-top {
  order: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px dashed var(--about-line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.page-about .about-top:hover {
  color: var(--cyan);
  border-color: var(--about-line-strong);
}

.page-about .about-top:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-about .about-sec {
  padding-block: clamp(30px, 5vw, 56px);
  border-top: 1px solid var(--about-line);
}

.page-about .about-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.page-about .about-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.page-about .about-sec__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.8vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(56, 232, 232, 0.55);
}

.page-about .about-sec p {
  max-width: 66ch;
  margin: 0 0 14px;
  font-size: 0.96rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-about .about-cards {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.page-about .about-card {
  padding: 22px 20px 24px;
  border: 1px solid var(--about-line);
  border-radius: 3px;
  background: linear-gradient(165deg, rgba(11, 31, 58, 0.96), rgba(6, 17, 31, 0.92));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.page-about .about-card:hover {
  transform: translateY(-2px);
  border-color: var(--about-line-strong);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.page-about .about-card__idx {
  display: block;
  margin-bottom: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--amber);
}

.page-about .about-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ice);
}

.page-about .about-card p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-matrix {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}

.page-about .about-matrix line {
  stroke: rgba(56, 232, 232, 0.5);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.page-about .about-matrix circle {
  fill: var(--abyss);
  stroke: var(--cyan);
  stroke-width: 1.6;
}

.page-about .about-matrix circle.is-mid {
  stroke: var(--amber);
}

.page-about .about-matrix text {
  fill: var(--mist);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 1px;
}

.page-about .about-matrix .about-matrix__cap {
  fill: rgba(147, 175, 192, 0.62);
  font-size: 15px;
  letter-spacing: 2px;
}

.page-about .about-figure {
  margin: 26px 0 0;
  padding: 8px;
  border: 1px solid var(--about-line);
  background: rgba(11, 31, 58, 0.6);
}

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

.page-about .about-figure figcaption {
  margin-top: 9px;
  font-size: 0.76rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-about .about-flow {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.page-about .about-flow__step {
  padding: 20px 18px;
  border: 1px solid rgba(56, 232, 232, 0.2);
  border-radius: 3px;
  background: rgba(18, 50, 77, 0.5);
  backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-flow__step:hover {
  border-color: rgba(56, 232, 232, 0.58);
  background: rgba(18, 50, 77, 0.74);
}

.page-about .about-flow__step:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-color: rgba(56, 232, 232, 0.7);
}

.page-about .about-flow__step .mono {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.page-about .about-flow__step h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--ice);
}

.page-about .about-flow__step p {
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--about-line);
  background: var(--about-line);
}

.page-about .about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  background: var(--abyss);
}

.page-about .about-stat__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--ice);
}

.page-about .about-stat__n span {
  margin-left: 3px;
  font-size: 0.62em;
  color: var(--amber);
}

.page-about .about-stat__l {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .about-split {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: 28px;
}

.page-about .about-split__main p:last-of-type {
  margin-bottom: 0;
}

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

.page-about .about-topics li {
  padding: 6px 13px;
  border: 1px solid var(--about-line);
  border-radius: 999px;
  background: rgba(11, 31, 58, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ice);
}

.page-about .about-figure--side {
  margin-top: 0;
}

.page-about .about-timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--about-line);
  display: grid;
  gap: 24px;
}

.page-about .about-timeline li {
  position: relative;
}

.page-about .about-timeline li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: -27px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--abyss);
  border: 1px solid var(--cyan);
}

.page-about .about-timeline li:last-child::before {
  background: var(--amber);
  border-color: var(--amber);
}

.page-about .about-timeline h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--ice);
}

.page-about .about-timeline p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-sec--last {
  border-top: 1px solid var(--about-line);
}

.page-about .about-next {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-about .about-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--about-line);
  background: linear-gradient(120deg, rgba(11, 31, 58, 0.94), rgba(6, 17, 31, 0.86));
  color: var(--ice);
  text-decoration: none;
  font-size: 0.96rem;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.page-about .about-next a .mono {
  color: var(--cyan);
  font-size: 0.85rem;
}

.page-about .about-next a:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 232, 232, 0.6);
}

.page-about .about-next a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

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

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

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

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

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

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

  .page-about .about-rail {
    position: sticky;
    top: 96px;
    gap: 18px;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--about-line);
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
  }

  .page-about .about-rail__list a {
    justify-content: flex-start;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px dashed rgba(23, 59, 94, 0.75);
    border-radius: 0;
  }

  .page-about .about-rail__list a:hover {
    background: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-card,
  .page-about .about-flow__step,
  .page-about .about-next a,
  .page-about .about-rail__list a,
  .page-about .about-top {
    transition: none;
  }

  .page-about .about-card:hover,
  .page-about .about-next a:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <ol>
        <li><a href="/">入口总览</a></li>
        <li aria-current="page">品牌档案</li>
      </ol>
    </nav>
  </div>

  <section class="about-hero" aria-labelledby="about-title">
    <div class="container about-hero__grid">
      <div class="about-hero__copy">
        <p class="eyebrow">品牌档案 · 自 2018 年起持续维护</p>
        <h1 id="about-title">把每一次登录访问，写成您能照着做的步骤</h1>
        <p class="about-hero__lede">9登录主站把力气花在一件具体的事上：让您在任何一台设备、任何一个常用浏览器上，都能顺利找到入口并完成登录。</p>
        <p class="about-hero__sub">打不开、跳转异常、换手机换电脑之后登不上，您可以在这里找到分步说明、可以替换的做法，以及别人遇到过并已经处理好的同类情况。</p>
        <ul class="about-hero__facts">
          <li><span class="mono">36</span>期调试记录</li>
          <li><span class="mono">6</span>类主流浏览器</li>
          <li><span class="mono">12</span>类设备切换组合</li>
          <li><span class="mono">5</span>个资料分栏</li>
        </ul>
        <div class="about-hero__cta">
          <a class="btn btn--primary" href="/services/">打开登录服务面板</a>
          <a class="btn btn--ghost" href="/notes/">翻阅调试日志</a>
        </div>
      </div>
      <figure class="about-hero__frame">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深蓝色蓝图网格、细线与半透明面板组成的抽象调试实验室氛围图">
        <figcaption class="mono">坐标 09 / 调试台立面</figcaption>
      </figure>
    </div>
  </section>

  <div class="container about-body">
    <aside class="about-rail" aria-label="章节索引">
      <p class="about-rail__label mono">INDEX / 章节</p>
      <ol class="about-rail__list">
        <li><a href="#position"><span class="mono">01</span>为什么做登录支持</a></li>
        <li><a href="#audience"><span class="mono">02</span>三种卡住的地方</a></li>
        <li><a href="#team"><span class="mono">03</span>三个小组的协作</a></li>
        <li><a href="#flow"><span class="mono">04</span>一次支持四步</a></li>
        <li><a href="#archive"><span class="mono">05</span>反馈到归档</a></li>
        <li><a href="#growth"><span class="mono">06</span>八年积累</a></li>
        <li><a href="#continue"><span class="mono">07</span>下一步从这里</a></li>
      </ol>
      <a class="about-top" href="#main-content">返回顶部 ↑</a>
    </aside>

    <div class="about-content">
      <section id="position" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">01</span>
          <h2 class="section-title">为什么是登录支持这件事</h2>
        </header>
        <p>登录卡住的原因，往往不在入口本身。浏览器版本换了、缓存没清、网络环境不同、设备从手机换成平板，任何一处变化都可能让原本顺畅的流程停在中途。这类问题零散、重复，又很难用一句话解释清楚，于是我们把它当成日常工作的对象。</p>
        <p>做法并不复杂：把一次失败拆成几个能判断的环节，为每个环节写清楚现象、操作顺序和走不通时的替代办法。使用者照着做一遍，通常会发现问题出在哪一步；下一台设备再遇到同样的情形，翻到同一节即可。</p>
        <p>长期维护的意义也在这里。同一个问题第二次出现时，您不必从零描述一遍，也不必重新试错——我们写过，而且还在补充。</p>
      </section>

      <section id="audience" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">02</span>
          <h2 class="section-title">三种人，三种卡住的地方</h2>
        </header>
        <p>来查资料的人处境差别很大，写说明的时候我们按场景分开处理，让每个人都能直接跳到跟自己最接近的那一节。</p>
        <div class="about-cards">
          <article class="about-card">
            <span class="about-card__idx mono">场景 A</span>
            <h3>第一次找入口的访客</h3>
            <p>换了搜索引擎、换了浏览器，页面就是打不开。先照着浏览器设置那一栏走一遍，多数情况在十几分钟内就能自己解决，不用等人回复。</p>
          </article>
          <article class="about-card">
            <span class="about-card__idx mono">场景 B</span>
            <h3>家里几台设备轮着用</h3>
            <p>手机能进、电脑进不去，或者平板登过一次就再也没成功。设备迁移的说明专门对着这类情形写，把每台设备需要调整的地方分开列清。</p>
          </article>
          <article class="about-card">
            <span class="about-card__idx mono">场景 C</span>
            <h3>小型跨境办公团队</h3>
            <p>行政或负责 IT 的同事要把同一套说明发给全组。按五个资料分栏分下去，谁卡在哪一步，直接对上对应的那一节，省掉反复解释。</p>
          </article>
        </div>
      </section>

      <section id="team" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">03</span>
          <h2 class="section-title">三个小组，一条协作线</h2>
        </header>
        <p>资料不是一个人写的。内容编辑、浏览器兼容测试和用户支持三个职能小组围绕同一份问题清单工作：支持组把问题收进来，测试组确认现象和条件，编辑组把它写成能照做的中文步骤，再回到支持组验证一次。</p>

        <svg class="about-matrix" viewBox="0 0 640 124" role="img" aria-label="内容编辑、兼容测试与用户支持三个节点由一条横向连线相连的协作示意图">
          <line x1="96" y1="52" x2="320" y2="52"></line>
          <line x1="320" y1="52" x2="544" y2="52"></line>
          <circle cx="96" cy="52" r="7"></circle>
          <circle cx="320" cy="52" r="7" class="is-mid"></circle>
          <circle cx="544" cy="52" r="7"></circle>
          <text x="96" y="88" text-anchor="middle">内容编辑</text>
          <text x="320" y="88" text-anchor="middle">兼容测试</text>
          <text x="544" y="88" text-anchor="middle">用户支持</text>
          <text x="96" y="26" text-anchor="middle" class="about-matrix__cap">N-01</text>
          <text x="320" y="26" text-anchor="middle" class="about-matrix__cap">N-02</text>
          <text x="544" y="26" text-anchor="middle" class="about-matrix__cap">N-03</text>
        </svg>

        <div class="about-cards">
          <article class="about-card">
            <span class="about-card__idx mono">N-01</span>
            <h3>内容编辑</h3>
            <p>把零散的反馈整理成有编号、有前置说明的中文步骤。写完先自己走一遍，走不通就退回去改，不让读者替我们试错。</p>
          </article>
          <article class="about-card">
            <span class="about-card__idx mono">N-02</span>
            <h3>浏览器兼容测试</h3>
            <p>在六类主流浏览器和不同尺寸的屏幕上实跑一遍流程，确认步骤没有漏写条件，也确认同一句话在各类设备上都读得通。</p>
          </article>
          <article class="about-card">
            <span class="about-card__idx mono">N-03</span>
            <h3>用户支持</h3>
            <p>从邮箱和电话里接住问题，把高频的几类挑出来交给另外两组补进说明。反复被问到的问题，说明我们上一版没写明白。</p>
          </article>
        </div>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="内容编辑、兼容测试与用户支持三个节点通过霓虹青连线协作的抽象信息图" loading="lazy" decoding="async">
          <figcaption>三个小组共用一个问题池：谁先发现，谁先补充，其余两组在下一批里跟进。</figcaption>
        </figure>
      </section>

      <section id="flow" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">04</span>
          <h2 class="section-title">一次支持，走完四步</h2>
        </header>
        <p>无论您是自己查资料，还是通过邮箱和电话找到我们，处理的顺序是一样的。四步走完，问题通常已经落地，下次遇到同类情况也能自己判断。</p>
        <div class="about-flow">
          <div class="about-flow__step" tabindex="0">
            <span class="mono">STEP 01</span>
            <h3>定位问题</h3>
            <p>先弄清是在哪台设备、哪个浏览器、走到哪一步停住的。现象描述得越具体，后面越省时间。</p>
          </div>
          <div class="about-flow__step" tabindex="0">
            <span class="mono">STEP 02</span>
            <h3>匹配说明</h3>
            <p>按浏览器、设备类型和问题类型三种方式筛一遍，找到跟您情况最接近的那一节。</p>
          </div>
          <div class="about-flow__step" tabindex="0">
            <span class="mono">STEP 03</span>
            <h3>执行调试</h3>
            <p>按编号顺序操作，一步一确认；遇到分岔就选与您当前环境相符的那条走下去。</p>
          </div>
          <div class="about-flow__step" tabindex="0">
            <span class="mono">STEP 04</span>
            <h3>归档复核</h3>
            <p>问题解决后，把过程与批次编号对应起来；同类情况下次直接翻到同一处，不必重来。</p>
          </div>
        </div>
      </section>

      <section id="archive" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">05</span>
          <h2 class="section-title">从一条反馈，到一批归档</h2>
        </header>
        <p>每一条真正被问到的反馈，都会走完定位、成文、复测、归档这一条线。归档之后，说明就固定在一个批次里：同一批次内的内容可以互相对照，改动则开启新的一批，旧的一批继续保留，方便您回看自己当时用的是哪一版。</p>
        <div class="about-stats">
          <div class="about-stat">
            <span class="about-stat__n">36<span>期</span></span>
            <span class="about-stat__l">已整理调试记录</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__n">6<span>类</span></span>
            <span class="about-stat__l">主流浏览器覆盖</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__n">12<span>类</span></span>
            <span class="about-stat__l">设备切换组合</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__n">5<span>个</span></span>
            <span class="about-stat__l">资料主题分栏</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__n">4<span>项</span></span>
            <span class="about-stat__l">面板自检模块</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__n">60<span>余条</span></span>
            <span class="about-stat__l">中文常见问答</span>
          </div>
        </div>

        <div class="about-split">
          <div class="about-split__main">
            <p>资料按五个主题分栏，您可以从自己最确定的那一栏入手，不必从头读到尾。</p>
            <ul class="about-topics">
              <li>入口说明</li>
              <li>浏览器设置</li>
              <li>设备迁移</li>
              <li>测试面板</li>
              <li>常见问题</li>
            </ul>
            <p>每份记录都按批次编号、问题现象、操作步骤和复核备注四段来写。第 1 批到第 3 批的更新记录都还在，什么时候改过什么，翻一翻就能看到。测试版面板里的网络连通、浏览器兼容、缓存状态、设备识别四项自检，也各自对应到分栏中的具体说明。</p>
          </div>
          <figure class="about-figure about-figure--side">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="五列资料分栏与批次编号构成的矩阵图，深蓝底配琥珀金批次标记" loading="lazy" decoding="async">
            <figcaption>五个分栏对应五类问题，批次编号让同一份说明在多次修订后仍然找得回来。</figcaption>
          </figure>
        </div>
      </section>

      <section id="growth" class="about-sec" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">06</span>
          <h2 class="section-title">八年下来，攒成了什么</h2>
        </header>
        <p>从 2018 年到现在，这套资料没有推倒重来过，而是一批一批往上加。早期只解决最常见的一批打不开的情况，后来随着设备形态和浏览器版本变化，才逐渐补齐迁移、面板和问答三块。</p>
        <ol class="about-timeline">
          <li>
            <h3>2018 年 · 起步</h3>
            <p>从入口说明与浏览器设置两类内容开始，先把最常见的打不开、跳转不顺的情况写成固定格式的步骤，让第一次来的人有东西可查。</p>
          </li>
          <li>
            <h3>第 1 批至第 2 批 · 补齐场景</h3>
            <p>设备迁移与测试面板两块陆续加入，五个资料分栏成形。测试版面板扩展到网络连通、浏览器兼容、缓存状态、设备识别四项自检，用完自检基本能判断问题落在哪个方向。</p>
          </li>
          <li>
            <h3>第 3 批及以后 · 支持检索与提问</h3>
            <p>资料库开放按浏览器、设备类型和问题类型三种方式筛选，常见问答累积到 60 余条。每周汇总一次入口状态和浏览器兼容的变化，形成当周的归档摘要，历史版本继续保留。</p>
          </li>
        </ol>
      </section>

      <section id="continue" class="about-sec about-sec--last" data-reveal>
        <header class="about-sec__head">
          <span class="about-sec__num" aria-hidden="true">07</span>
          <h2 class="section-title">下一步从这里开始</h2>
        </header>
        <p>如果您已经知道自己卡在哪一步，直接去服务面板找对应的工具；如果只是想先看看别人遇到过什么，调试日志和问答支持更合适。</p>
        <div class="about-next">
          <a href="/services/">
            <span>登录服务面板</span>
            <span class="mono" aria-hidden="true">→</span>
          </a>
          <a href="/notes/">
            <span>调试日志</span>
            <span class="mono" aria-hidden="true">→</span>
          </a>
          <a href="/questions/">
            <span>问答支持</span>
            <span class="mono" aria-hidden="true">→</span>
          </a>
          <a href="/contact-us/">
            <span>联系通道</span>
            <span class="mono" aria-hidden="true">→</span>
          </a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-about {
  --about-rail: 236px;
  --about-line: rgba(23, 59, 94, 0.85);
  --about-line-strong: rgba(56, 232, 232, 0.34);
  padding-block: clamp(16px, 3vw, 30px) clamp(56px, 8vw, 112px);
  background:
    radial-gradient(860px 460px at 86% -8%, rgba(56, 232, 232, 0.10), transparent 64%),
    radial-gradient(680px 420px at -4% 46%, rgba(26, 167, 184, 0.08), transparent 62%);
}

.page-about .about-hero {
  margin-top: clamp(14px, 2.6vw, 26px);
  border-block: 1px solid var(--about-line);
  background-image:
    linear-gradient(rgba(23, 59, 94, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 59, 94, 0.26) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: 12px 0;
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  padding-block: clamp(24px, 4vw, 52px);
}

.page-about .about-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6.2vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ice);
}

.page-about .about-hero__lede {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.85;
  color: var(--ice);
  opacity: 0.92;
}

.page-about .about-hero__sub {
  margin: 12px 0 0;
  max-width: 48ch;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.page-about .about-hero__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.84rem;
  color: var(--mist);
}

.page-about .about-hero__facts .mono {
  font-size: 1.15rem;
  color: var(--cyan);
  letter-spacing: 0.02em;
}

.page-about .about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .about-hero__frame {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--about-line-strong);
  border-radius: 2px;
  background: rgba(18, 50, 77, 0.42);
  backdrop-filter: blur(4px);
}

.page-about .about-hero__frame::before,
.page-about .about-hero__frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--cyan);
  opacity: 0.85;
  pointer-events: none;
}

.page-about .about-hero__frame::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.page-about .about-hero__frame::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
}

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

.page-about .about-hero__frame figcaption {
  margin-top: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-about .about-body {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  margin-top: clamp(28px, 5vw, 56px);
}

.page-about .about-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--about-line);
}

.page-about .about-rail__label {
  order: 0;
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--mist);
}

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

.page-about .about-rail__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--about-line);
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-rail__list a .mono {
  font-size: 0.68rem;
  color: rgba(56, 232, 232, 0.75);
}

.page-about .about-rail__list a:hover {
  color: var(--ice);
  border-color: var(--about-line-strong);
  background: rgba(56, 232, 232, 0.06);
}

.page-about .about-rail__list a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  color: var(--ice);
}

.page-about .about-top {
  order: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px dashed var(--about-line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.page-about .about-top:hover {
  color: var(--cyan);
  border-color: var(--about-line-strong);
}

.page-about .about-top:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-about .about-sec {
  padding-block: clamp(30px, 5vw, 56px);
  border-top: 1px solid var(--about-line);
}

.page-about .about-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.page-about .about-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.page-about .about-sec__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.8vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(56, 232, 232, 0.55);
}

.page-about .about-sec p {
  max-width: 66ch;
  margin: 0 0 14px;
  font-size: 0.96rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-about .about-cards {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.page-about .about-card {
  padding: 22px 20px 24px;
  border: 1px solid var(--about-line);
  border-radius: 3px;
  background: linear-gradient(165deg, rgba(11, 31, 58, 0.96), rgba(6, 17, 31, 0.92));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.page-about .about-card:hover {
  transform: translateY(-2px);
  border-color: var(--about-line-strong);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.page-about .about-card__idx {
  display: block;
  margin-bottom: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--amber);
}

.page-about .about-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ice);
}

.page-about .about-card p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-matrix {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}

.page-about .about-matrix line {
  stroke: rgba(56, 232, 232, 0.5);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.page-about .about-matrix circle {
  fill: var(--abyss);
  stroke: var(--cyan);
  stroke-width: 1.6;
}

.page-about .about-matrix circle.is-mid {
  stroke: var(--amber);
}

.page-about .about-matrix text {
  fill: var(--mist);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 1px;
}

.page-about .about-matrix .about-matrix__cap {
  fill: rgba(147, 175, 192, 0.62);
  font-size: 15px;
  letter-spacing: 2px;
}

.page-about .about-figure {
  margin: 26px 0 0;
  padding: 8px;
  border: 1px solid var(--about-line);
  background: rgba(11, 31, 58, 0.6);
}

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

.page-about .about-figure figcaption {
  margin-top: 9px;
  font-size: 0.76rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-about .about-flow {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.page-about .about-flow__step {
  padding: 20px 18px;
  border: 1px solid rgba(56, 232, 232, 0.2);
  border-radius: 3px;
  background: rgba(18, 50, 77, 0.5);
  backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-flow__step:hover {
  border-color: rgba(56, 232, 232, 0.58);
  background: rgba(18, 50, 77, 0.74);
}

.page-about .about-flow__step:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-color: rgba(56, 232, 232, 0.7);
}

.page-about .about-flow__step .mono {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.page-about .about-flow__step h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--ice);
}

.page-about .about-flow__step p {
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--about-line);
  background: var(--about-line);
}

.page-about .about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  background: var(--abyss);
}

.page-about .about-stat__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--ice);
}

.page-about .about-stat__n span {
  margin-left: 3px;
  font-size: 0.62em;
  color: var(--amber);
}

.page-about .about-stat__l {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .about-split {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: 28px;
}

.page-about .about-split__main p:last-of-type {
  margin-bottom: 0;
}

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

.page-about .about-topics li {
  padding: 6px 13px;
  border: 1px solid var(--about-line);
  border-radius: 999px;
  background: rgba(11, 31, 58, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ice);
}

.page-about .about-figure--side {
  margin-top: 0;
}

.page-about .about-timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--about-line);
  display: grid;
  gap: 24px;
}

.page-about .about-timeline li {
  position: relative;
}

.page-about .about-timeline li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: -27px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--abyss);
  border: 1px solid var(--cyan);
}

.page-about .about-timeline li:last-child::before {
  background: var(--amber);
  border-color: var(--amber);
}

.page-about .about-timeline h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--ice);
}

.page-about .about-timeline p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-sec--last {
  border-top: 1px solid var(--about-line);
}

.page-about .about-next {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-about .about-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--about-line);
  background: linear-gradient(120deg, rgba(11, 31, 58, 0.94), rgba(6, 17, 31, 0.86));
  color: var(--ice);
  text-decoration: none;
  font-size: 0.96rem;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.page-about .about-next a .mono {
  color: var(--cyan);
  font-size: 0.85rem;
}

.page-about .about-next a:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 232, 232, 0.6);
}

.page-about .about-next a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

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

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

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

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

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

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

  .page-about .about-rail {
    position: sticky;
    top: 96px;
    gap: 18px;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--about-line);
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
  }

  .page-about .about-rail__list a {
    justify-content: flex-start;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px dashed rgba(23, 59, 94, 0.75);
    border-radius: 0;
  }

  .page-about .about-rail__list a:hover {
    background: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-card,
  .page-about .about-flow__step,
  .page-about .about-next a,
  .page-about .about-rail__list a,
  .page-about .about-top {
    transition: none;
  }

  .page-about .about-card:hover,
  .page-about .about-next a:hover {
    transform: none;
  }
}