.page-about{
  background:
    radial-gradient(1100px 560px at 6% -8%, rgba(14,59,58,.5), transparent 68%),
    radial-gradient(900px 520px at 102% 18%, rgba(58,46,110,.32), transparent 72%),
    var(--ink);
  color: var(--text);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px,5vw,54px) 0 clamp(44px,7vw,84px);
  background: linear-gradient(155deg, rgba(11,31,51,.98) 0%, rgba(14,59,58,.9) 54%, rgba(7,17,28,.99) 100%);
  border-bottom: 1px solid var(--line);
}

.page-about .about-hero::before{
  content: "";
  position: absolute;
  top: -22%;
  right: -12%;
  width: 58%;
  height: 148%;
  background: linear-gradient(200deg, rgba(58,46,110,.62), rgba(110,36,56,.32) 56%, transparent 82%);
  transform: rotate(-10deg);
  z-index: 0;
  pointer-events: none;
}

.page-about .about-hero-grid{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(157,245,231,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(157,245,231,.055) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  pointer-events: none;
}

.page-about .about-hero-inner{
  position: relative;
  z-index: 1;
}

.page-about .about-hero-copy{
  max-width: 830px;
  margin-top: clamp(20px,3.4vw,34px);
}

.page-about .about-hero .eyebrow{
  color: var(--cyan);
}

.page-about .about-hero h1{
  margin: 12px 0 0;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}

.page-about .about-lede{
  margin: clamp(18px,3vw,26px) 0 0;
  max-width: 720px;
  font-size: clamp(15px,1.5vw,17px);
  line-height: 1.95;
  color: var(--text-dim);
}

.page-about .hero-facts{
  list-style: none;
  margin: clamp(26px,4vw,38px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
}

.page-about .hero-facts li{
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-left: 13px;
  border-left: 1px solid var(--line-strong);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.page-about .hero-facts .mono{
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-soft);
}

.page-about .hero-key{
  font-weight: 700;
  color: var(--cyan-soft);
}

/* ---------- 主栅格 ---------- */
.page-about .about-layout{
  display: grid;
  gap: clamp(26px,4vw,52px);
  padding-top: clamp(44px,6vw,78px);
  padding-bottom: clamp(52px,7vw,96px);
}

@media (min-width: 960px){
  .page-about .about-layout{
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- 章节索引 ---------- */
.page-about .about-index{
  border: 1px solid var(--line);
  background: var(--glass);
  padding: 16px 18px;
}

@media (min-width: 960px){
  .page-about .about-index{
    position: sticky;
    top: 112px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.page-about .index-title{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-mute);
}

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

@media (min-width: 960px){
  .page-about .index-list{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
}

.page-about .index-list a{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: color .2s ease, border-color .2s ease;
}

.page-about .index-list a .mono{
  font-size: 12px;
  color: var(--cyan);
  opacity: .8;
}

.page-about .index-list a:hover,
.page-about .index-list a:focus-visible{
  color: var(--cyan-soft);
  border-bottom-color: var(--line-strong);
}

/* ---------- 章节 ---------- */
.page-about .about-body{
  min-width: 0;
}

.page-about .chapter{
  position: relative;
  padding: 0 0 clamp(46px,6vw,74px);
  scroll-margin-top: 118px;
}

.page-about .chapter + .chapter{
  padding-top: clamp(34px,4.5vw,54px);
  border-top: 1px solid var(--line);
}

.page-about .chapter-head{
  position: relative;
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
  margin-bottom: clamp(24px,3.4vw,34px);
}

.page-about .chapter--teal .chapter-head{ border-left-color: var(--cyan); }
.page-about .chapter--indigo .chapter-head{ border-left-color: #8E7BE0; }
.page-about .chapter--wine .chapter-head{ border-left-color: #C8657E; }

.page-about .chapter-no{
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--text-mute);
}

.page-about .chapter-title{
  margin: 10px 0 0;
  font-size: clamp(22px, 2.9vw, 34px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--text);
}

.page-about .chapter:target .chapter-title{
  color: var(--cyan-soft);
}

.page-about .chapter-note{
  margin: 14px 0 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-dim);
}

.page-about .chapter-footnote{
  margin: clamp(22px,3vw,30px) 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  background: var(--glass);
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-dim);
}

.page-about .inline-link{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  margin-left: 6px;
  white-space: nowrap;
}

.page-about .inline-link:hover,
.page-about .inline-link:focus-visible{
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* ---------- 图片 ---------- */
.page-about .about-figure{
  margin: 0 0 clamp(26px,3.6vw,38px);
  border: 1px solid var(--line);
  background: var(--ice);
  overflow: hidden;
}

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

.page-about .about-figure figcaption{
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: rgba(7,17,28,.6);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--text-mute);
}

/* ---------- 时间线 ---------- */
.page-about .timeline{
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}

.page-about .timeline::before{
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan), rgba(47,224,200,.08));
}

.page-about .tl-item{
  position: relative;
  margin: 0 0 14px;
}

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

.page-about .tl-item::before{
  content: "";
  position: absolute;
  left: -30px;
  top: 18px;
  width: 15px;
  height: 15px;
  background: var(--ice);
  border: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

.page-about .tl-node{
  border: 1px solid var(--line);
  background: var(--glass);
  transition: border-color .22s ease, background .22s ease;
}

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

.page-about .tl-node summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.page-about .tl-node summary::-webkit-details-marker{ display: none; }

.page-about .tl-node summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-mute);
}

.page-about .tl-node[open] summary::after{ content: "–"; }

.page-about .tl-node[open]{
  border-color: var(--line-strong);
  background: rgba(14,59,58,.32);
}

.page-about .tl-node[open] summary{
  border-bottom: 1px solid var(--line-soft);
}

.page-about .tl-stage{
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
  white-space: nowrap;
}

.page-about .tl-title{
  min-width: 0;
}

.page-about .tl-body{
  padding: 14px 18px 18px;
}

.page-about .tl-body p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text-dim);
}

/* ---------- 分段切换 ---------- */
.page-about .about-tabs{
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(58,46,110,.36), rgba(7,17,28,.7));
}

.page-about .about-tablist{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.page-about .about-tab{
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line-soft);
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.page-about .about-tab .mono{
  font-size: 13px;
  color: var(--cyan);
}

.page-about .about-tab:hover{
  color: var(--text);
  background: rgba(47,224,200,.05);
}

.page-about .about-tab[aria-selected="true"]{
  color: var(--text);
  background: rgba(47,224,200,.1);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.page-about .about-tab:focus-visible{
  outline: 1px solid var(--cyan);
  outline-offset: -3px;
}

.page-about .about-tabpanel{
  padding: clamp(18px,3vw,28px);
}

.page-about .about-tabpanel[hidden]{
  display: none;
}

.page-about .panel-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--cyan-soft);
}

.page-about .about-tabpanel > p{
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-dim);
}

.page-about .panel-points{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-about .panel-points li{
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
}

.page-about .panel-points li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  transform: rotate(45deg);
}

/* ---------- 指标栅格 ---------- */
.page-about .metric-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

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

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

.page-about .metric{
  padding: clamp(20px,2.8vw,28px);
  background: linear-gradient(180deg, rgba(11,31,51,.95), rgba(7,17,28,.92));
}

.page-about .metric-num{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-about .metric--ember .metric-num{
  color: var(--ember);
}

.page-about .metric-unit{
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-mute);
}

.page-about .metric-desc{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
}

/* ---------- 合作生态 ---------- */
.page-about .partner-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

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

.page-about .partner{
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(200,101,126,.75);
  background: rgba(110,36,56,.16);
  transition: border-color .22s ease, background .22s ease;
}

.page-about .partner:hover{
  border-color: var(--line-strong);
  border-left-color: var(--ember);
  background: rgba(110,36,56,.26);
}

.page-about .partner h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.page-about .partner p{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
}

/* ---------- 资质列表 ---------- */
.page-about .cred-list{
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(11,31,51,.8);
}

.page-about .cred-row{
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
}

.page-about .cred-row:first-child{
  border-top: 0;
}

@media (min-width: 760px){
  .page-about .cred-row{
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
    padding: 20px 24px;
  }
}

.page-about .cred-row dt{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
}

.page-about .cred-row dd{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-dim);
}

/* ---------- 行动区 ---------- */
.page-about .about-cta{
  position: relative;
  overflow: hidden;
  margin-top: clamp(10px,2vw,20px);
  padding: clamp(28px,5vw,52px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(58,46,110,.6), rgba(7,17,28,.94) 62%), var(--ice);
}

.page-about .about-cta::before{
  content: "";
  position: absolute;
  top: -60%;
  right: -18%;
  width: 52%;
  height: 220%;
  background: linear-gradient(200deg, rgba(255,90,54,.22), transparent 68%);
  transform: rotate(-14deg);
  pointer-events: none;
}

.page-about .cta-title{
  position: relative;
  margin: 0;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3;
  font-weight: 800;
  color: var(--text);
}

.page-about .cta-text{
  position: relative;
  margin: 14px 0 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-dim);
}

.page-about .cta-actions{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px,3vw,28px);
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  .page-about .about-tab,
  .page-about .index-list a,
  .page-about .tl-node,
  .page-about .partner{
    transition: none;
  }
}

@media (max-width: 599px){
  .page-about .about-tab{
    flex: 1 1 auto;
    justify-content: center;
    padding: 13px 12px;
    font-size: 14px;
  }
  .page-about .tl-node summary{
    font-size: 15px;
    padding: 14px 15px;
  }
  .page-about .timeline{
    padding-left: 24px;
  }
  .page-about .tl-item::before{
    left: -24px;
  }
  .page-about .timeline::before{
    left: 5px;
  }
  .page-about .chapter-head{
    padding-left: 14px;
  }
}
<<<END>>>