.page-about{
  --about-rail:14rem;
  position:relative;
  padding-bottom:calc(var(--joystick-h) + 2.5rem);
  background:
    radial-gradient(1100px 520px at 88% -8%,rgba(176,38,255,.18),transparent 62%),
    radial-gradient(900px 460px at 2% 14%,rgba(0,194,255,.11),transparent 60%);
}

@media (min-width:768px){
  .page-about{padding-bottom:clamp(3rem,7vw,5rem);}
}

.page-about::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(199,203,214,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(199,203,214,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 72%);
}

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

.page-about .breadcrumb{margin-top:1.25rem;font-size:.78rem;letter-spacing:.04em;}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(1.75rem,5vw,3rem) clamp(2.25rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}

.page-about .about-hero::after{
  content:"";
  position:absolute;
  right:-12%;
  top:-34%;
  width:min(660px,86vw);
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(176,38,255,.30),transparent 62%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}

.page-about .about-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
}

@media (min-width:940px){
  .page-about .about-hero-inner{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr);
    align-items:end;
  }
}

.page-about .about-hero-copy .eyebrow{
  margin:0 0 .9rem;
  color:var(--teal);
}

.page-about .about-hero h1{
  margin:0;
  font-size:clamp(2.4rem,7.4vw,5.4rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--fog);
  text-wrap:balance;
}

.page-about .about-hero h1 .hl{
  background:linear-gradient(100deg,var(--purple),var(--blue) 70%,var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.page-about .about-lead{
  margin:1.15rem 0 0;
  max-width:44ch;
  color:var(--silver);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  line-height:1.8;
}

.page-about .about-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.6rem;
}

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

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

.page-about .about-stats li{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.85rem 1rem;
  background:var(--ink-purple-2);
  font-size:.78rem;
  color:var(--silver);
  letter-spacing:.02em;
}

.page-about .about-stats .mono{
  font-size:clamp(1.3rem,2.8vw,1.75rem);
  font-weight:700;
  color:var(--teal);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

/* ---------- 双区布局 ---------- */
.page-about .about-layout{
  display:block;
  padding-top:clamp(2rem,5vw,3.5rem);
}

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

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

@media (min-width:1024px){
  .page-about .about-rail{
    display:block;
    position:sticky;
    top:calc(var(--header-h) + 2rem);
  }
}

.page-about .rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.15rem;
}

.page-about .rail-link{
  display:grid;
  grid-template-columns:1.9rem minmax(0,1fr);
  align-items:baseline;
  gap:.55rem;
  padding:.5rem 0 .5rem .9rem;
  border-left:1px solid var(--line);
  text-decoration:none;
  color:var(--silver);
  font-size:.85rem;
  line-height:1.35;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}

.page-about .rail-num{
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--purple);
}

.page-about .rail-link:hover,
.page-about .rail-link:focus-visible{
  color:var(--fog);
  border-left-color:var(--purple);
  background-image:linear-gradient(90deg,rgba(176,38,255,.16),transparent 70%);
  outline:none;
}

.page-about .rail-link:focus-visible{box-shadow:inset 0 0 0 1px rgba(176,38,255,.55);}

/* ---------- 章节 ---------- */
.page-about .about-chapter{
  padding-block:clamp(2rem,4.5vw,3.25rem);
  border-top:1px solid var(--line);
}

.page-about .about-chapter:first-child{border-top:0;padding-top:0;}

.page-about .chapter-head{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin-bottom:1.4rem;
}

.page-about .chapter-num{
  flex:none;
  font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:.82;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(176,38,255,.75);
  letter-spacing:-.02em;
}

.page-about .chapter-title{
  margin:.1rem 0 0;
  font-size:clamp(1.4rem,3.6vw,2.15rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--fog);
  text-wrap:balance;
}

.page-about .chapter-body{
  display:grid;
  gap:clamp(1.5rem,3.5vw,2.5rem);
}

@media (min-width:860px){
  .page-about .chapter-body{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    align-items:start;
  }
}

.page-about .chapter-body--single{grid-template-columns:minmax(0,1fr);}

.page-about .prose{
  max-width:46rem;
  color:var(--silver);
  font-size:.97rem;
  line-height:1.8;
}

.page-about .prose p{margin:0 0 1rem;}
.page-about .prose p:last-child{margin-bottom:0;}

.page-about .chapter-intro{
  margin:0 0 1.5rem;
  color:var(--silver);
  font-size:.97rem;
  line-height:1.8;
}

.page-about .chapter-figure{
  margin:0;
  align-self:start;
}

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

.page-about .chapter-figure figcaption{
  margin-top:.65rem;
  font-size:.75rem;
  letter-spacing:.03em;
  color:rgba(199,203,214,.72);
  border-left:2px solid var(--purple);
  padding-left:.6rem;
}

/* ---------- 时间线 ---------- */
.page-about .phase-track{
  list-style:none;
  margin:0;
  padding:0 0 0 2rem;
  display:grid;
  gap:.85rem;
  position:relative;
}

.page-about .phase-track::before{
  content:"";
  position:absolute;
  left:.3rem;
  top:.9rem;
  bottom:.9rem;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--purple),var(--blue) 55%,var(--teal));
  opacity:.55;
}

.page-about .phase{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(26,16,51,.85),rgba(10,10,18,.55));
  transition:border-color .2s ease,box-shadow .2s ease;
}

.page-about .phase::before{
  content:"";
  position:absolute;
  left:-2.35rem;
  top:1.05rem;
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--purple);
  box-shadow:0 0 12px rgba(176,38,255,.8);
  transition:border-color .2s ease,box-shadow .2s ease;
}

.page-about .phase[open]{
  border-color:rgba(176,38,255,.5);
  box-shadow:0 0 0 1px rgba(176,38,255,.16),0 14px 34px -22px rgba(176,38,255,.9);
}

.page-about .phase[open]::before{
  border-color:var(--teal);
  box-shadow:0 0 14px rgba(0,255,209,.85);
}

.page-about .page-about summary{list-style:none;}

.page-about .phase summary{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.55rem;
  padding:.95rem 1rem;
  cursor:pointer;
  list-style:none;
}

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

.page-about .phase summary:hover{background:rgba(176,38,255,.07);}
.page-about .phase summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--blue);
}

.page-about .phase-tag{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--blue);
}

.page-about .phase-title{
  font-size:1rem;
  font-weight:700;
  color:var(--fog);
}

.page-about .phase-body{
  padding:0 1rem 1rem;
  border-top:1px solid var(--line);
  margin-top:.1rem;
}

.page-about .phase-body p{
  margin:.85rem 0 0;
  color:var(--silver);
  font-size:.92rem;
  line-height:1.75;
}

/* ---------- 徽章 ---------- */
.page-about .grade-grid{
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}

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

.page-about .grade{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
  padding:1rem .9rem 1.1rem;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(26,16,51,.9),rgba(10,10,18,.65));
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.page-about .grade:hover,
.page-about .grade:focus-visible{
  transform:translateY(-2px);
  outline:none;
  border-color:currentColor;
  box-shadow:0 16px 34px -24px currentColor;
}

.page-about .grade-shape{
  width:46px;
  height:50px;
  display:block;
}

.page-about .grade-name{
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--fog);
}

.page-about .grade-note{
  margin:0;
  font-size:.78rem;
  line-height:1.6;
  color:rgba(199,203,214,.82);
}

.page-about .grade--s{color:var(--purple);}
.page-about .grade--a{color:var(--blue);}
.page-about .grade--b{color:var(--yellow);}
.page-about .grade--c{color:var(--red);}

/* ---------- 五维清单 ---------- */
.page-about .dim-list{
  list-style:none;
  margin:0 0 1.75rem;
  padding:0;
  border-top:1px solid var(--line);
}

.page-about .dim{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.25rem .9rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
}

@media (min-width:640px){
  .page-about .dim{
    grid-template-columns:9rem minmax(0,1fr) auto;
    align-items:baseline;
  }
}

.page-about .dim-name{
  font-size:.92rem;
  font-weight:700;
  color:var(--fog);
}

.page-about .dim-note{
  font-size:.82rem;
  line-height:1.6;
  color:rgba(199,203,214,.78);
}

.page-about .dim-max{
  font-size:.82rem;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
}

/* ---------- 团队 ---------- */
.page-about .team-grid{
  list-style:none;
  margin:0 0 1.75rem;
  padding:0;
  display:grid;
  gap:.85rem;
}

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

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

.page-about .team-card{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1rem .9rem;
  border:1px solid var(--line);
  border-top:2px solid rgba(176,38,255,.6);
  background:rgba(26,16,51,.55);
  transition:border-color .2s ease,background-color .2s ease;
}

.page-about .team-card:hover{
  border-color:rgba(0,194,255,.5);
  border-top-color:var(--teal);
  background:rgba(26,16,51,.85);
}

.page-about .team-num{
  font-size:1.9rem;
  line-height:1;
  font-weight:700;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
}

.page-about .team-name{
  margin:0;
  font-size:.95rem;
  font-weight:700;
  color:var(--fog);
}

.page-about .team-note{
  margin:0;
  font-size:.8rem;
  line-height:1.65;
  color:rgba(199,203,214,.8);
}

.page-about .team-more{margin-top:.35rem;}

.page-about .team-more summary{
  cursor:pointer;
  list-style:none;
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--blue);
  padding:.25rem 0;
}

.page-about .team-more summary::-webkit-details-marker{display:none;}

.page-about .team-more summary::after{content:" +";}

.page-about .team-more[open] summary::after{content:" −";}

.page-about .team-more summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--blue);
}

.page-about .team-tags{
  list-style:none;
  margin:.45rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.page-about .team-tags .chip{font-size:.68rem;}

/* ---------- 生态 ---------- */
.page-about .eco-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

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

.page-about .eco-stat{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.7rem .8rem;
  background:var(--ink-purple-2);
}

.page-about .eco-num{
  font-size:1.2rem;
  font-weight:700;
  color:var(--yellow);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.page-about .eco-label{
  font-size:.72rem;
  line-height:1.45;
  color:rgba(199,203,214,.78);
}

/* ---------- 后续入口 ---------- */
.page-about .about-next{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  padding-top:clamp(1.75rem,4vw,2.5rem);
  border-top:1px solid var(--line);
}

.page-about .next-title{
  margin:0 0 1.1rem;
  font-size:clamp(1.15rem,2.6vw,1.5rem);
  font-weight:800;
  color:var(--fog);
  letter-spacing:-.01em;
}

.page-about .next-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 .next-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

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

.page-about .next-card{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  min-height:100%;
  padding:1.1rem 1rem;
  background:var(--ink-purple-2);
  text-decoration:none;
  color:var(--fog);
  transition:background-color .2s ease,color .2s ease;
}

.page-about .next-name{
  font-size:.95rem;
  font-weight:700;
}

.page-about .next-desc{
  font-size:.78rem;
  line-height:1.6;
  color:rgba(199,203,214,.76);
}

.page-about .next-arrow{
  margin-top:auto;
  padding-top:.6rem;
  font-size:.9rem;
  color:var(--purple);
  transition:transform .2s ease,color .2s ease;
}

.page-about .next-card:hover,
.page-about .next-card:focus-visible{
  background:rgba(176,38,255,.16);
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(0,194,255,.55);
}

.page-about .next-card:hover .next-arrow,
.page-about .next-card:focus-visible .next-arrow{
  color:var(--teal);
  transform:translateX(4px);
}

@media (prefers-reduced-motion:reduce){
  .page-about .grade,
  .page-about .next-arrow,
  .page-about .phase,
  .page-about .rail-link{
    transition:none;
  }
}
<<<END>>>
