.page-about{
  --about-index-w:196px;
  --about-flow-gap:clamp(40px,7vw,76px);
  background:var(--deep);
  color:var(--ice);
  font-family:var(--font-body);
  overflow-x:clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(26px,5vw,52px) 0 clamp(38px,6vw,72px);
  background:
    radial-gradient(120% 92% at 8% -6%,rgba(27,75,122,.62),transparent 62%),
    radial-gradient(78% 62% at 92% 12%,rgba(122,108,255,.20),transparent 62%),
    radial-gradient(60% 50% at 60% 100%,rgba(255,91,53,.10),transparent 70%),
    var(--deep);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(159,179,202,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,179,202,.085) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 16% 0%,#000 12%,transparent 76%);
  mask-image:radial-gradient(120% 100% at 16% 0%,#000 12%,transparent 76%);
  pointer-events:none;
}
.page-about .about-hero__inner{position:relative;z-index:1}
.page-about .about-hero .crumbs{margin-bottom:clamp(22px,4vw,38px)}
.page-about .about-hero .eyebrow{margin:0 0 14px}
.page-about .h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px,8.4vw,86px);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--pure);
  word-break:break-word;
}
.page-about .h1 .hl{
  display:inline-block;
  color:var(--orange);
  transform:skewX(-2deg);
}
.page-about .about-hero .lead{
  margin:clamp(18px,3vw,28px) 0 0;
  max-width:62ch;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.8;
  color:rgba(243,247,255,.82);
}
.page-about .hero-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 14px;
  margin:clamp(28px,5vw,44px) 0 0;
  padding:22px 0 0;
  list-style:none;
  border-top:1px solid var(--line-strong);
}
.page-about .hero-facts li{min-width:0}
.page-about .hero-facts b{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(24px,3.4vw,34px);
  font-weight:600;
  line-height:1.1;
  color:var(--pure);
  letter-spacing:-.01em;
}
.page-about .hero-facts b i{
  font-style:normal;
  font-size:.5em;
  color:var(--signal);
  margin-left:4px;
  letter-spacing:0;
}
.page-about .hero-facts span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.6;
  color:var(--slate);
}

/* ---------- 主体骨架：章节索引 + 正文 ---------- */
.page-about .about-body{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,4vw,44px);
  padding-top:clamp(30px,5vw,56px);
  padding-bottom:clamp(50px,8vw,96px);
}
.page-about .about-rail{min-width:0}
.page-about .about-rail__title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--slate);
}
.page-about .about-index{
  display:flex;
  gap:8px;
  margin:0;
  padding:0 0 6px;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.page-about .about-index li{flex:0 0 auto}
.page-about .about-index a{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:99px;
  font-size:13px;
  line-height:1.4;
  color:rgba(243,247,255,.8);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.page-about .about-index a:hover,
.page-about .about-index a:focus-visible{
  border-color:rgba(255,91,53,.6);
  color:var(--pure);
  background:rgba(27,75,122,.45);
}
.page-about .idx-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--orange);
  letter-spacing:.06em;
}

.page-about .about-flow{
  display:grid;
  gap:var(--about-flow-gap);
  min-width:0;
}
.page-about .about-sec{
  min-width:0;
  padding-top:clamp(30px,4.5vw,48px);
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-about .about-sec:first-child{border-top:0;padding-top:0}
.page-about .sec-label{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-about .sec-label--dark{color:var(--echo)}
.page-about .about-sec .h2{
  margin:0 0 clamp(16px,2.4vw,24px);
  font-family:var(--font-display);
  font-size:clamp(25px,4.2vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--pure);
}
.page-about .about-sec p{
  margin:0 0 16px;
  max-width:70ch;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.82;
  color:rgba(243,247,255,.82);
}
.page-about .about-sec .muted{color:var(--slate)}

/* ---------- 三条并行的线 ---------- */
.page-about .pillars{
  display:grid;
  gap:14px;
  margin:clamp(22px,3.4vw,32px) 0 20px;
  padding:0;
  list-style:none;
}
.page-about .pillars li{
  position:relative;
  padding:20px 18px 22px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:linear-gradient(158deg,rgba(27,75,122,.55),rgba(12,42,74,.92));
  overflow:hidden;
}
.page-about .pillars li::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--ember) 45%,transparent);
}
.page-about .pillars .h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:clamp(17px,1.9vw,20px);
  letter-spacing:-.01em;
  color:var(--pure);
}
.page-about .pillars p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:rgba(243,247,255,.76);
}
.page-about .note{
  margin:18px 0 0;
  padding:12px 0 12px 14px;
  border-left:2px solid var(--orange);
  font-size:13px;
  line-height:1.75;
  color:var(--slate);
  max-width:66ch;
}
.page-about .note a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(53,214,255,.4);
}
.page-about .note a:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* ---------- 时间线 ---------- */
.page-about .tl-spark{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 clamp(18px,3vw,26px);
  opacity:.9;
}
.page-about .about-timeline{
  position:relative;
  margin:clamp(24px,4vw,34px) 0 0;
  padding:0 0 0 26px;
  list-style:none;
}
.page-about .about-timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--orange),var(--cyan) 55%,rgba(159,179,202,.16));
}
.page-about .tl-node{
  position:relative;
  margin:0 0 10px;
}
.page-about .tl-node::before{
  content:"";
  position:absolute;
  left:-25px;
  top:15px;
  width:12px;
  height:12px;
  box-sizing:border-box;
  border-radius:50%;
  border:2px solid var(--cyan);
  background:var(--deep);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.page-about .tl-node[open]::before{
  background:var(--orange);
  border-color:var(--ember);
}
.page-about .tl-node summary{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:rgba(12,42,74,.62);
  cursor:pointer;
  list-style:none;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.page-about .tl-node summary::-webkit-details-marker{display:none}
.page-about .tl-node summary:hover{border-color:var(--line-strong);background:rgba(27,75,122,.5)}
.page-about .tl-node summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.page-about .tl-node summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1;
  color:var(--cyan);
}
.page-about .tl-node[open] summary{
  border-color:rgba(255,91,53,.5);
  background:rgba(27,75,122,.6);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.page-about .tl-node[open] summary::after{content:"–";color:var(--orange)}
.page-about .tl-year{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--orange);
}
.page-about .tl-title{
  font-size:clamp(15px,1.7vw,18px);
  font-weight:700;
  line-height:1.45;
  color:var(--pure);
}
.page-about .tl-body{
  padding:14px 16px 4px;
  border:1px solid rgba(255,91,53,.32);
  border-top:0;
  border-radius:0 0 var(--r-s) var(--r-s);
  background:rgba(6,26,46,.72);
}
.page-about .tl-body p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.78;
  color:rgba(243,247,255,.78);
}

/* ---------- 团队 ---------- */
.page-about .team-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:clamp(22px,3.4vw,30px) 0 0;
  padding:0;
}
.page-about .team-stats > div{
  padding:16px 14px;
  border-radius:var(--r-s);
  border:1px solid var(--line);
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(122,108,255,.20),transparent 62%),
    rgba(12,42,74,.6);
}
.page-about .team-stats dt{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--slate);
}
.page-about .team-stats dd{
  margin:8px 0 0;
  font-family:var(--font-mono);
  font-size:clamp(18px,2.4vw,24px);
  font-weight:600;
  color:var(--signal);
}
.page-about .team-stats > div:nth-child(2) dd{color:var(--cyan)}
.page-about .team-stats > div:nth-child(3) dd{color:var(--ember)}
.page-about .team-stats > div:nth-child(4) dd{color:var(--pure)}

/* ---------- 校验与版本 ---------- */
.page-about .version-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:clamp(20px,3vw,28px) 0 0;
  font-size:13px;
}
.page-about .version-line .muted{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
}

/* ---------- 覆盖带 ---------- */
.page-about .about-band{
  border-top:0;
  padding:clamp(24px,4.4vw,52px);
  border-radius:var(--r-l);
  background:linear-gradient(152deg,#F3F7FF 0%,#E4EEFB 58%,#DAE8F8 100%);
  color:#0A1A2F;
  box-shadow:0 34px 70px -46px rgba(0,0,0,.9);
}
.page-about .about-band .h2{color:var(--ink)}
.page-about .about-band p{color:#2B3F5C}
.page-about .band-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 16px;
  margin:clamp(22px,3.6vw,32px) 0 0;
  padding:clamp(18px,3vw,26px) 0 0;
  list-style:none;
  border-top:1px solid rgba(27,75,122,.22);
}
.page-about .band-stats li{position:relative;min-width:0;padding-left:14px}
.page-about .band-stats li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}
.page-about .band-stats li:nth-child(3n+2)::before{background:var(--echo)}
.page-about .band-stats li:nth-child(3n)::before{background:var(--mint)}
.page-about .band-stats b{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(24px,3.6vw,38px);
  font-weight:600;
  line-height:1.05;
  color:#0C2A4A;
  letter-spacing:-.01em;
}
.page-about .band-stats b i{
  font-style:normal;
  font-size:.48em;
  margin-left:4px;
  color:var(--echo);
}
.page-about .band-stats span{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.6;
  color:#4A5E7A;
}
.page-about .band-foot{
  margin:20px 0 0!important;
  padding-top:16px;
  border-top:1px dashed rgba(27,75,122,.25);
  font-size:13px!important;
  line-height:1.7;
  color:#3D5170!important;
}

/* ---------- 下一步 ---------- */
.page-about .next-links{
  display:grid;
  gap:12px;
  margin:clamp(22px,3.4vw,30px) 0 0;
}
.page-about .next-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 18px 22px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:linear-gradient(150deg,rgba(27,75,122,.5),rgba(6,26,46,.86));
  text-decoration:none;
  color:var(--ice);
  transition:transform .28s var(--ease),border-color .28s var(--ease);
}
.page-about .next-card:hover,
.page-about .next-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,91,53,.6);
}
.page-about .next-card .k{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--slate);
}
.page-about .next-card strong{
  font-family:var(--font-display);
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--pure);
}
.page-about .next-card em{
  margin-top:8px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--cyan);
}

/* ---------- 图 ---------- */
.page-about .figure{margin:clamp(20px,3.4vw,30px) 0 0}
.page-about .figure__media{
  border-radius:var(--r-m);
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(12,42,74,.6);
}
.page-about .figure__media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-about .figure__cap{
  margin-top:10px;
  font-size:13px;
  line-height:1.7;
  color:var(--slate);
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .page-about .pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-about .next-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-about .band-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-about .hero-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-about .team-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1000px){
  .page-about .about-body{
    grid-template-columns:var(--about-index-w) minmax(0,1fr);
    gap:clamp(34px,4.6vw,68px);
  }
  .page-about .about-rail{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    align-self:start;
  }
  .page-about .about-index{
    display:block;
    overflow:visible;
    padding:0;
    border-left:2px solid var(--line-strong);
  }
  .page-about .about-index li{margin:0 0 2px}
  .page-about .about-index a{
    border:0;
    border-radius:0;
    border-left:2px solid transparent;
    margin-left:-2px;
    padding:9px 0 9px 14px;
    white-space:normal;
    font-size:14px;
    color:rgba(243,247,255,.72);
  }
  .page-about .about-index a:hover,
  .page-about .about-index a:focus-visible{
    background:transparent;
    border-left-color:var(--orange);
    color:var(--pure);
  }
  .page-about .about-sec p{max-width:66ch}
}

@media (min-width:1240px){
  .page-about .about-band{padding:clamp(34px,3.4vw,56px)}
  .page-about .pillars{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .page-about .next-card,
  .page-about .about-index a,
  .page-about .tl-node::before{transition:none}
  .page-about .next-card:hover{transform:none}
}
<<<END>>>