.page-about{
  --about-rail: 13.5rem;
  --about-line: rgba(232,237,245,.13);
  --about-line-soft: rgba(232,237,245,.07);
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: 1.8;
  overflow-x: clip;
  padding-bottom: clamp(40px,7vw,96px);
}

.page-about h1,
.page-about h2,
.page-about h3{
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}

.page-about p{ margin: 0 0 1.1em; }
.page-about a{ color: inherit; }
.page-about img{ max-width: 100%; }

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position: relative;
  display: grid;
  gap: clamp(24px,4vw,44px);
  padding: clamp(22px,4vw,52px) var(--gutter) clamp(30px,5vw,64px);
}
.page-about .about-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 78% at 88% 6%, rgba(255,45,149,.17), transparent 68%),
    radial-gradient(64% 84% at -6% 96%, rgba(0,229,255,.15), transparent 70%);
  pointer-events: none;
}
.page-about .about-hero__copy{ position: relative; }

.page-about .breadcrumb__list{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 clamp(18px,3vw,28px);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: .04em;
  color: var(--gray);
}
.page-about .breadcrumb__list li + li::before{
  content: "/";
  margin-right: .5rem;
  color: var(--rule-strong);
}
.page-about .breadcrumb__list a{ text-decoration: none; }
.page-about .breadcrumb__list a:hover{ color: var(--cyan); }

.page-about .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1rem;
}
.page-about .eyebrow::before{
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
}

.page-about .about-hero h1{
  font-size: var(--fs-1);
  line-height: 1.06;
  max-width: 22ch;
  margin-bottom: clamp(16px,2.4vw,24px);
}

.page-about .about-hero__lede{
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  line-height: 1.75;
  color: var(--text);
  max-width: 44ch;
  margin-bottom: clamp(20px,3vw,30px);
}

.page-about .about-hero__facts{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: 1px;
  list-style: none;
  margin: 0 0 clamp(22px,3vw,30px);
  padding: 0;
  background: var(--about-line);
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}
.page-about .about-hero__facts li{
  background: var(--ink);
  padding: .9rem .9rem .9rem 0;
  display: grid;
  gap: .2rem;
}
.page-about .about-hero__facts .mono{
  font-family: var(--font-mono);
  font-size: var(--fs-4);
  letter-spacing: .02em;
  color: var(--cyan);
}
.page-about .about-hero__fact-label{
  font-size: var(--fs-6);
  color: var(--gray);
}

.page-about .about-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-about .about-hero__actions .btn{ text-decoration: none; }

.page-about .about-hero__figure{
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--about-line);
  clip-path: polygon(0 0,100% 0,100% 92%,0 100%);
  overflow: hidden;
}
.page-about .about-hero__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 主体布局 ---------- */
.page-about .about-layout{
  display: grid;
  gap: clamp(20px,3vw,40px);
  padding: 0 var(--gutter);
  max-width: 1320px;
  margin: 0 auto;
}

.page-about .about-rail{ order: -1; }
.page-about .about-toc{
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  padding: .9rem 0;
}
.page-about .about-toc .toc__title{
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}
.page-about .about-toc .toc__list{
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .about-toc .toc__list a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  padding: .35rem .7rem;
  border: 1px solid var(--about-line);
  text-decoration: none;
  font-size: var(--fs-6);
  color: var(--gray);
  transition: color .18s ease, border-color .18s ease;
}
.page-about .about-toc .toc__list .mono{
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: .75rem;
}
.page-about .about-toc .toc__list a:hover,
.page-about .about-toc .toc__list a[aria-current="true"]{
  color: var(--text);
  border-color: var(--cyan);
}

.page-about .chapter{
  border-top: 1px solid var(--about-line);
  padding-top: clamp(26px,3.6vw,42px);
  margin-top: clamp(26px,3.6vw,42px);
}
.page-about .chapter:first-child{ margin-top: 0; }

.page-about .chapter__head{
  display: flex;
  align-items: baseline;
  gap: clamp(12px,2vw,20px);
  margin-bottom: clamp(14px,2vw,20px);
}
.page-about .chapter__number{
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: .1em;
  color: var(--accent);
  flex: none;
  padding-top: .35em;
}
.page-about .chapter__title{
  font-size: var(--fs-2);
  max-width: 24ch;
}

.page-about .chapter__lead{
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  line-height: 1.7;
  border-left: 2px solid var(--accent);
  padding-left: clamp(12px,2vw,18px);
  margin: 0 0 1.2em;
  max-width: 40ch;
}

.page-about .chapter p{ max-width: 62ch; }

.page-about .inline-link{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,.4);
}
.page-about .inline-link:hover{ border-bottom-color: var(--cyan); }

/* 数据条 */
.page-about .stat-strip{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  list-style: none;
  margin: clamp(20px,3vw,30px) 0 0;
  padding: 0;
  background: var(--about-line);
  border: 1px solid var(--about-line);
}
.page-about .stat-strip__item{
  background: var(--panel);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .15rem;
}
.page-about .stat-strip__num{
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: .01em;
  color: var(--text);
}
.page-about .stat-strip__label{
  font-size: var(--fs-6);
  color: var(--gray);
}

/* 双轨分屏 */
.page-about .split-zone{
  display: grid;
  gap: 1px;
  margin: 1.5rem 0;
  background: var(--about-line);
  border: 1px solid var(--about-line);
}
.page-about .split-zone__a,
.page-about .split-zone__b{
  background: var(--panel);
  padding: clamp(18px,2.6vw,26px);
  border-top: 2px solid var(--cyan);
}
.page-about .split-zone__b{ border-top-color: var(--magenta); }
.page-about .split-zone__title{
  font-size: var(--fs-4);
  margin: .8rem 0 .6rem;
}
.page-about .split-zone p{
  margin: 0;
  font-size: var(--fs-6);
  line-height: 1.85;
  color: var(--gray);
}
.page-about .tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  padding: .22rem .55rem;
  border: 1px solid currentColor;
}
.page-about .tag--a{ color: var(--cyan); }
.page-about .tag--b{ color: var(--magenta); }

/* 配图 */
.page-about .about-figure{
  margin: clamp(20px,3vw,30px) 0 0;
  border: 1px solid var(--about-line);
  background: var(--panel);
}
.page-about .about-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.page-about .about-figure--timeline img{ aspect-ratio: 2 / 1; }
.page-about .media__caption{
  display: block;
  padding: .8rem 1rem;
  font-size: var(--fs-6);
  color: var(--gray);
  border-top: 1px solid var(--about-line-soft);
}

/* 上线门槛两栏 */
.page-about .gate-grid{
  display: grid;
  gap: clamp(16px,2.4vw,26px);
  margin: 1.4rem 0;
}
.page-about .gate{
  border-left: 1px solid var(--about-line);
  padding-left: clamp(14px,2vw,20px);
}
.page-about .gate__kicker{
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: .1em;
  color: var(--cyan);
  margin: 0 0 .5rem;
}
.page-about .gate__kicker--b{ color: var(--magenta); }
.page-about .gate__title{
  font-size: var(--fs-4);
  margin: 0 0 .7rem;
}
.page-about .ticks{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-6);
  color: var(--gray);
}
.page-about .ticks li{
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .45rem;
}
.page-about .ticks li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  transform: rotate(45deg);
}
.page-about .ticks--b li::before{ background: var(--magenta); }

/* 耗时条 */
.page-about .timing{
  margin-top: 1.6rem;
  display: grid;
  gap: .9rem;
  max-width: 34rem;
}
.page-about .timing__row{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .5rem 1rem;
  font-size: var(--fs-6);
}
.page-about .timing__label{ color: var(--gray); }
.page-about .timing__value{ color: var(--text); }
.page-about .timing__track{
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  background: var(--about-line-soft);
  overflow: hidden;
}
.page-about .timing__fill{
  display: block;
  height: 100%;
}
.page-about .timing__fill--a{
  width: 72%;
  background: linear-gradient(90deg,var(--cyan),rgba(0,229,255,.35));
}
.page-about .timing__fill--b{
  width: 100%;
  background: linear-gradient(90deg,var(--magenta),rgba(255,45,149,.35));
}

/* 历程轴 */
.page-about .tl{
  margin: clamp(20px,3vw,32px) 0 0;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.page-about .tl__list{
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-about .tl-item{
  flex: 0 0 clamp(180px,58vw,220px);
  border-top: 1px solid var(--about-line);
  padding: 1.15rem 1rem 0 0;
  position: relative;
}
.page-about .tl-item::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
}
.page-about .tl-item--archive::before{ background: var(--amber); }
.page-about .tl-item--eco::before{ background: var(--lime); }
.page-about .tl-item--scale::before{ background: var(--magenta); }

.page-about .tl-item details{ border: 0; }
.page-about .tl-item summary{
  display: grid;
  gap: .25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-6);
}
.page-about .tl-item summary::-webkit-details-marker{ display: none; }
.page-about .tl-item__year{
  font-family: var(--font-mono);
  font-size: var(--fs-5);
  color: var(--text);
  letter-spacing: .04em;
}
.page-about .tl-item__name{
  color: var(--gray);
  position: relative;
  padding-right: 1rem;
}
.page-about .tl-item__name::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--accent);
}
.page-about .tl-item details[open] .tl-item__name::after{ content: "−"; }
.page-about .tl-item p{
  margin: .7rem 0 0;
  font-size: var(--fs-6);
  line-height: 1.75;
  color: var(--gray);
  padding-right: .5rem;
}

/* 生态卡 */
.page-about .eco-grid{
  display: grid;
  gap: 1px;
  background: var(--about-line);
  border: 1px solid var(--about-line);
  margin: 1.5rem 0;
}
.page-about .eco{
  background: var(--panel);
  padding: clamp(16px,2.4vw,24px);
  transition: border-color .18s ease, transform .18s ease;
  border-left: 1px solid transparent;
}
.page-about .eco:hover{
  border-left-color: var(--accent);
  transform: translateY(-2px);
}
.page-about .eco__kicker{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--gray);
  margin: 0 0 .5rem;
}
.page-about .eco__title{
  font-size: var(--fs-5);
  margin: 0 0 .6rem;
  line-height: 1.45;
}
.page-about .eco p{
  margin: 0;
  font-size: var(--fs-6);
  line-height: 1.8;
  color: var(--gray);
}

/* 资质清单 */
.page-about .creds{
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  border-top: 1px solid var(--about-line-soft);
}
.page-about .creds li{
  display: grid;
  gap: .15rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--about-line-soft);
  font-size: var(--fs-6);
}
.page-about .creds__key{
  font-family: var(--font-mono);
  letter-spacing: .08em;
  color: var(--cyan);
}

/* 问答 */
.page-about .qa{
  margin-top: 1.4rem;
  border-top: 1px solid var(--about-line-soft);
}
.page-about .qa__item{
  border-bottom: 1px solid var(--about-line-soft);
}
.page-about .qa__item summary{
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.9rem 1rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-5);
  letter-spacing: -.01em;
  color: var(--text);
}
.page-about .qa__item summary::-webkit-details-marker{ display: none; }
.page-about .qa__item summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: .85rem;
  font-family: var(--font-mono);
  color: var(--cyan);
}
.page-about .qa__item[open] summary::after{ content: "−"; }
.page-about .qa__item p{
  margin: 0 0 1.1rem;
  font-size: var(--fs-6);
  line-height: 1.85;
  color: var(--gray);
  max-width: 60ch;
}

.page-about .about-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(22px,3vw,32px);
}
.page-about .about-actions .btn{ text-decoration: none; }

/* ---------- 桌面增强 ---------- */
@media (min-width: 760px){
  .page-about .about-hero{
    grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    align-items: end;
  }
  .page-about .about-hero__figure{
    aspect-ratio: 4 / 5;
    align-self: stretch;
  }
  .page-about .stat-strip{ grid-template-columns: repeat(4,minmax(0,1fr)); }
  .page-about .split-zone{ grid-template-columns: 1fr 1fr; }
  .page-about .gate-grid{ grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); }
  .page-about .eco-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .page-about .creds li{
    grid-template-columns: 8.5rem minmax(0,1fr);
    align-items: baseline;
    gap: 1rem;
  }
  .page-about .about-figure--dual img{ aspect-ratio: 3 / 2; }
}

@media (min-width: 1000px){
  .page-about .about-layout{
    grid-template-columns: var(--about-rail) minmax(0,1fr);
    gap: clamp(32px,4vw,64px);
    align-items: start;
  }
  .page-about .about-rail{
    position: sticky;
    top: clamp(80px,12vh,120px);
  }
  .page-about .about-toc{ padding: 1rem 0 1.2rem; }
  .page-about .about-toc .toc__list{
    flex-direction: column;
    gap: .15rem;
    overflow: visible;
  }
  .page-about .about-toc .toc__list a{
    border: 0;
    border-left: 2px solid transparent;
    padding: .4rem 0 .4rem .8rem;
    white-space: normal;
    font-size: var(--fs-6);
    line-height: 1.5;
  }
  .page-about .about-toc .toc__list a:hover,
  .page-about .about-toc .toc__list a[aria-current="true"]{
    border-left-color: var(--cyan);
    color: var(--text);
  }
  .page-about .about-hero__lede{ font-size: var(--fs-3); max-width: 30ch; }
  .page-about .chapter__title{ font-size: var(--fs-2); }
}

@media (prefers-reduced-motion: reduce){
  .page-about .eco,
  .page-about .about-toc .toc__list a{ transition: none; }
  .page-about .eco:hover{ transform: none; }
}
<<<END>>>