.page-about{
  --about-gap:clamp(2.6rem,7vw,5rem);
}

/* ============ 首屏 ============ */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  background:var(--yb-indigo);
  color:var(--yb-paper);
  padding:clamp(1.75rem,5vw,3rem) 0 clamp(4rem,10vw,7rem);
  isolation:isolate;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  top:-22%;
  right:-18%;
  width:58%;
  height:118%;
  background:linear-gradient(150deg,rgba(242,140,58,.30),rgba(46,111,216,.10) 58%,transparent);
  transform:rotate(11deg);
  border-radius:var(--yb-radius-lg);
  z-index:0;
  pointer-events:none;
}
.page-about .about-hero::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(70px,14vw,150px);
  background:var(--yb-paper);
  clip-path:polygon(0 66%,100% 0,100% 100%,0 100%);
  z-index:1;
  pointer-events:none;
}
.page-about .about-hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4.5vw,3rem);
}
.page-about .about-hero__copy{
  max-width:38rem;
}
.page-about .about-hero .yb-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
  font-family:var(--yb-font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(251,248,241,.62);
}
.page-about .about-hero .yb-breadcrumb li+li::before{
  content:"/";
  margin-right:.4rem;
  color:rgba(251,248,241,.32);
}
.page-about .about-hero .yb-breadcrumb a{
  color:rgba(251,248,241,.72);
  text-decoration:none;
}
.page-about .about-hero .yb-breadcrumb a:hover{
  color:var(--yb-glow);
}
.page-about .about-hero__eyebrow{
  margin:0;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yb-glow);
}
.page-about .about-hero__title{
  margin:.85rem 0 0;
  font-family:var(--yb-font-display);
  font-size:clamp(2rem,6.6vw,4rem);
  line-height:1.08;
  letter-spacing:-.015em;
}
.page-about .about-hero__lead{
  margin:1.15rem 0 0;
  max-width:44ch;
  font-size:clamp(.9875rem,2vw,1.0625rem);
  line-height:1.9;
  color:rgba(251,248,241,.82);
}
.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.6rem;
}
.page-about .about-hero__figure{
  margin:0;
  border-radius:var(--yb-radius-lg);
  overflow:hidden;
  border:1px solid var(--yb-line-dark);
  box-shadow:var(--yb-shadow);
  aspect-ratio:16/10;
  background:var(--yb-night);
}
.page-about .about-hero__figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============ 按钮 ============ */
.page-about .about-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.5rem;
  border-radius:999px;
  font-size:.9375rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .25s var(--yb-ease),background-color .25s var(--yb-ease),color .25s var(--yb-ease),border-color .25s var(--yb-ease);
}
.page-about .about-btn:hover{
  transform:translateY(-2px);
}
.page-about .about-btn--solid{
  background:var(--yb-orange);
  color:var(--yb-night);
}
.page-about .about-btn--solid:hover{
  background:var(--yb-glow);
}
.page-about .about-btn--line{
  border-color:rgba(251,248,241,.42);
  color:var(--yb-paper);
}
.page-about .about-btn--line:hover{
  border-color:var(--yb-glow);
  color:var(--yb-glow);
}
.page-about .about-btn--ghost{
  border-color:var(--yb-line-soft);
  color:var(--yb-paper);
}
.page-about .about-btn--ghost:hover{
  border-color:var(--yb-glow);
  color:var(--yb-glow);
}

/* ============ 章节骨架 ============ */
.page-about .about-chapter{
  padding:var(--about-gap) 0;
  position:relative;
}
.page-about .about-chapter--band{
  background:linear-gradient(180deg,rgba(94,127,163,.10),rgba(94,127,163,.03));
}
.page-about .about-chapter--tint{
  background:rgba(247,243,234,.72);
}
.page-about .about-chapter__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.75rem,2.6vw,1.75rem);
  align-items:start;
  margin-bottom:clamp(1.5rem,3.6vw,2.6rem);
}
.page-about .about-chapter__num{
  display:block;
  font-family:var(--yb-font-mono);
  font-size:clamp(1.5rem,4vw,2.5rem);
  line-height:1;
  color:var(--yb-mist);
  border-left:3px solid var(--yb-line-soft);
  padding:.1em 0 .1em .55rem;
  transition:color .4s var(--yb-ease),border-color .4s var(--yb-ease);
  user-select:none;
}
.page-about [data-chapter].is-inview .about-chapter__num,
.page-about .about-chapter:hover .about-chapter__num{
  color:var(--yb-orange);
  border-left-color:var(--yb-orange);
}
.page-about .about-chapter h2{
  margin:0;
  font-family:var(--yb-font-display);
  font-size:clamp(1.5rem,3.6vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--yb-indigo);
}
.page-about .about-chapter__kicker{
  margin:.6rem 0 0;
  font-size:.9375rem;
  line-height:1.7;
  color:var(--yb-mist);
}
.page-about .yb-prose p{
  margin:0 0 1rem;
  font-size:1rem;
  line-height:1.9;
  color:var(--yb-ink);
}
.page-about .yb-prose p:last-child{
  margin-bottom:0;
}
.page-about .yb-h3{
  margin:0;
  font-family:var(--yb-font-body);
  font-size:1.0625rem;
  font-weight:800;
  line-height:1.45;
  color:var(--yb-indigo);
}

/* ============ 01 起点 ============ */
.page-about .about-origin{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,2.5rem);
}
.page-about .about-origin__points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
  align-content:start;
}
.page-about .about-origin__points li{
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius-sm);
  padding:.85rem .75rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.page-about .about-origin__num{
  font-size:clamp(1.1rem,3vw,1.5rem);
  font-weight:700;
  color:var(--yb-orange);
  line-height:1;
}
.page-about .about-origin__points li span:last-child{
  font-size:.78rem;
  line-height:1.55;
  color:var(--yb-mist);
}

/* ============ 02 时间线 ============ */
.page-about .about-timeline-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,2.5rem);
}
.page-about .about-timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 .25rem;
  display:grid;
  gap:.65rem;
}
.page-about .about-timeline__item{
  position:relative;
  padding-left:1.55rem;
  border-left:1px solid var(--yb-line-soft);
}
.page-about .about-timeline__item::before{
  content:"";
  position:absolute;
  left:-6px;
  top:1.25rem;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--flag,var(--yb-orange));
  box-shadow:0 0 0 4px var(--yb-paper);
}
.page-about .about-timeline__item:nth-child(1){--flag:var(--yb-flag-blue);}
.page-about .about-timeline__item:nth-child(2){--flag:var(--yb-flag-red);}
.page-about .about-timeline__item:nth-child(3){--flag:var(--yb-flag-green);}
.page-about .about-timeline__item:nth-child(4){--flag:var(--yb-flag-yellow);}

.page-about .about-milestone{
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius);
  overflow:hidden;
}
.page-about .about-milestone[open]{
  border-color:rgba(242,140,58,.45);
}
.page-about .about-milestone summary{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  padding:clamp(.9rem,2.4vw,1.25rem) clamp(.95rem,2.6vw,1.5rem);
  cursor:pointer;
  list-style:none;
}
.page-about .about-milestone summary::-webkit-details-marker{
  display:none;
}
.page-about .about-milestone summary::after{
  content:"展开";
  margin-left:auto;
  font-family:var(--yb-font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--yb-mist);
  transition:color .25s var(--yb-ease);
}
.page-about .about-milestone[open] summary::after{
  content:"收起";
  color:var(--yb-orange);
}
.page-about .about-milestone__year{
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--yb-orange);
  min-width:3.2em;
}
.page-about .about-milestone__title{
  font-size:.9875rem;
  font-weight:800;
  color:var(--yb-indigo);
  line-height:1.5;
}
.page-about .about-milestone__body{
  padding:0 clamp(.95rem,2.6vw,1.5rem) clamp(.95rem,2.6vw,1.35rem);
}
.page-about .about-milestone__body p{
  margin:0;
  font-size:.9375rem;
  line-height:1.9;
  color:var(--yb-ink);
}
.page-about .about-timeline__figure{
  margin:0;
  align-self:start;
}
.page-about .about-timeline__figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--yb-radius);
  border:1px solid var(--yb-line);
  object-fit:cover;
}
.page-about .about-timeline__caption{
  display:block;
  margin-top:.65rem;
  font-family:var(--yb-font-mono);
  font-size:.75rem;
  line-height:1.7;
  color:var(--yb-mist);
}

/* ============ 03 目录 ============ */
.page-about .about-catalog{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,2.5rem);
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
}
.page-about .about-catalog__figure{
  margin:0;
}
.page-about .about-catalog__figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--yb-radius);
  border:1px solid var(--yb-line);
  object-fit:cover;
}
.page-about .about-layers{
  list-style:none;
  margin:0 0 clamp(1.75rem,4vw,2.5rem);
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
  counter-reset:none;
}
.page-about .about-layers__item{
  position:relative;
  padding:1.05rem 1.15rem;
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius-sm);
  border-left:4px solid var(--yb-orange);
}
.page-about .about-layers__idx{
  display:block;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--yb-mist);
  margin-bottom:.3rem;
}
.page-about .about-layers__item p{
  margin:.4rem 0 0;
  font-size:.9rem;
  line-height:1.8;
  color:var(--yb-ink);
}
.page-about .about-matrix__title{
  margin:0 0 1rem;
  font-family:var(--yb-font-body);
  font-size:1rem;
  font-weight:800;
  color:var(--yb-indigo);
}
.page-about .about-matrix{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
}
.page-about .about-matrix__cell{
  position:relative;
  padding:.9rem .85rem .9rem 1.35rem;
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius-sm);
  transition:transform .3s var(--yb-ease),border-color .3s var(--yb-ease),box-shadow .3s var(--yb-ease);
}
.page-about .about-matrix__cell::before{
  content:"";
  position:absolute;
  left:.6rem;
  top:.95rem;
  bottom:.95rem;
  width:4px;
  border-radius:2px;
  background:var(--flag,var(--yb-mist));
}
.page-about .about-matrix__cell:hover,
.page-about .about-matrix__cell:focus-within{
  transform:translateY(-3px);
  border-color:rgba(242,140,58,.55);
  box-shadow:var(--yb-shadow);
}
.page-about .about-matrix__cell:nth-child(5n+1){--flag:var(--yb-flag-blue);}
.page-about .about-matrix__cell:nth-child(5n+2){--flag:var(--yb-flag-red);}
.page-about .about-matrix__cell:nth-child(5n+3){--flag:var(--yb-flag-green);}
.page-about .about-matrix__cell:nth-child(5n+4){--flag:var(--yb-flag-yellow);}
.page-about .about-matrix__cell:nth-child(5n+5){--flag:var(--yb-orange);}
.page-about .about-matrix__name{
  display:block;
  font-size:.9rem;
  font-weight:800;
  line-height:1.4;
  color:var(--yb-indigo);
}
.page-about .about-matrix__count{
  display:block;
  margin-top:.35rem;
  font-size:.78rem;
  color:var(--yb-mist);
}
.page-about .about-matrix__foot{
  margin:1.1rem 0 0;
  font-size:.9rem;
  line-height:1.85;
  color:var(--yb-ink);
}
.page-about .about-matrix__foot a,
.page-about .about-partners__more a{
  color:var(--yb-orange);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid rgba(242,140,58,.35);
}
.page-about .about-matrix__foot a:hover,
.page-about .about-partners__more a:hover{
  border-bottom-color:var(--yb-orange);
}

/* ============ 04 团队 ============ */
.page-about .about-team{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,2.5rem);
}
.page-about .about-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
.page-about .about-step{
  position:relative;
  padding:1.05rem 1.15rem 1.05rem 1.3rem;
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius);
  transition:transform .3s var(--yb-ease),border-color .3s var(--yb-ease);
}
.page-about .about-step:hover{
  transform:translateX(4px);
  border-color:rgba(46,111,216,.42);
}
.page-about .about-step__n{
  display:inline-block;
  margin-bottom:.4rem;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--yb-flag-blue);
}
.page-about .about-step__title{
  margin:0;
  font-size:.9875rem;
  font-weight:800;
  color:var(--yb-indigo);
  line-height:1.45;
}
.page-about .about-step p{
  margin:.4rem 0 0;
  font-size:.875rem;
  line-height:1.8;
  color:var(--yb-ink);
}

/* ============ 05 合作与适用人群 ============ */
.page-about .about-partners{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem,3.5vw,2rem);
}
.page-about .about-partners__card{
  border-radius:var(--yb-radius-lg);
  padding:clamp(1.35rem,3.5vw,2rem);
}
.page-about .about-partners__card--dark{
  background:var(--yb-night);
  color:var(--yb-paper);
}
.page-about .about-partners__card--dark .yb-h3{
  color:var(--yb-glow);
}
.page-about .about-partners__card p{
  margin:.8rem 0 0;
  font-size:.9375rem;
  line-height:1.9;
  color:rgba(251,248,241,.82);
}
.page-about .about-partners__note{
  padding-top:.9rem;
  border-top:1px solid var(--yb-line-dark);
  font-size:.875rem !important;
  color:rgba(251,248,241,.7) !important;
}
.page-about .about-link{
  display:inline-block;
  margin-top:1.1rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--yb-glow);
  text-decoration:none;
  border-bottom:2px solid rgba(255,179,107,.4);
  padding-bottom:.1rem;
}
.page-about .about-link:hover{
  border-bottom-color:var(--yb-glow);
}
.page-about .about-audience{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
.page-about .about-audience__item{
  position:relative;
  padding:1.1rem 1.15rem;
  background:var(--yb-paper);
  border:1px solid var(--yb-line);
  border-radius:var(--yb-radius);
  border-top:3px solid var(--flag,var(--yb-mist));
}
.page-about .about-audience__tag{
  display:inline-block;
  margin-bottom:.5rem;
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--yb-night);
  background:var(--flag,var(--yb-mist));
}
.page-about .about-audience__item p{
  margin:.45rem 0 0;
  font-size:.9rem;
  line-height:1.8;
  color:var(--yb-ink);
}
.page-about .about-partners__more{
  margin:clamp(1.5rem,3.5vw,2.25rem) 0 0;
  font-size:.9375rem;
  line-height:1.85;
  color:var(--yb-ink);
}

/* ============ 06 原则 ============ */
.page-about .about-principles{
  background:var(--yb-indigo);
  color:var(--yb-paper);
}
.page-about .about-principles .about-chapter__head--dark h2{
  color:var(--yb-paper);
}
.page-about .about-principles .about-chapter__head--dark .about-chapter__kicker{
  color:rgba(251,248,241,.62);
}
.page-about .about-principles .about-chapter__num{
  color:rgba(251,248,241,.4);
  border-left-color:rgba(251,248,241,.18);
}
.page-about .about-principles:hover .about-chapter__num,
.page-about .about-principles.is-inview .about-chapter__num{
  color:var(--yb-glow);
  border-left-color:var(--yb-glow);
}
.page-about .about-principles__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
.page-about .about-principle{
  background:rgba(251,248,241,.055);
  border:1px solid var(--yb-line-dark);
  border-radius:var(--yb-radius);
  padding:clamp(1.15rem,3vw,1.65rem);
}
.page-about .about-principle__idx{
  display:block;
  margin-bottom:.55rem;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--yb-glow);
}
.page-about .about-principle .yb-h3{
  color:var(--yb-paper);
}
.page-about .about-principle p{
  margin:.55rem 0 0;
  font-size:.9rem;
  line-height:1.9;
  color:rgba(251,248,241,.76);
}
.page-about .about-principles__cta{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  padding-top:clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--yb-line-dark);
  display:grid;
  gap:1rem;
}
.page-about .about-principles__cta p{
  margin:0;
  font-size:.9375rem;
  line-height:1.85;
  color:rgba(251,248,241,.72);
  max-width:52ch;
}
.page-about .about-principles__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* ============ 响应式 ============ */
@media (min-width:600px){
  .page-about .about-matrix{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-about .about-layers{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-about .about-hero__grid{
    grid-template-columns:1.04fr .96fr;
    align-items:center;
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-about .about-hero__figure{
    transform:translateY(-1.75rem) rotate(-1.4deg);
  }
  .page-about .about-origin{
    grid-template-columns:1.35fr .65fr;
    align-items:start;
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-about .about-origin__points{
    grid-template-columns:1fr;
  }
  .page-about .about-timeline-wrap{
    grid-template-columns:1.3fr .7fr;
    gap:clamp(2rem,4vw,3rem);
  }
  .page-about .about-timeline__figure{
    position:sticky;
    top:clamp(6rem,10vw,8rem);
  }
  .page-about .about-catalog{
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-about .about-catalog__figure{
    order:2;
  }
  .page-about .about-catalog__text{
    order:1;
  }
  .page-about .about-matrix{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .about-team{
    grid-template-columns:.9fr 1.1fr;
    gap:clamp(2rem,4vw,3.5rem);
    align-items:start;
  }
  .page-about .about-partners{
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:clamp(1.5rem,3vw,2.5rem);
  }
  .page-about .about-audience{
    gap:.75rem;
  }
  .page-about .about-principles__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
  }
  .page-about .about-principles__cta{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:2rem;
  }
  .page-about .about-principles__actions{
    justify-content:flex-end;
  }
}

@media (min-width:1100px){
  .page-about .about-matrix{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7rem;
  }
  .page-about .about-matrix__cell{
    padding:1rem .95rem 1rem 1.5rem;
  }
  .page-about .about-audience__tag{
    font-size:.74rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .page-about .about-step:hover,
  .page-about .about-matrix__cell:hover,
  .page-about .about-btn:hover{
    transform:none;
  }
}
<<<END>>>