.page-about{
  --about-muted:#4C6480;
  background:var(--ly-fog);
  color:var(--ly-ink);
  overflow-x:hidden;
}

/* 首屏 */
.page-about .about-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:24px 0 0;
  background:radial-gradient(120% 95% at 84% 0%,#123454 0%,var(--ly-deep) 58%);
  color:var(--ly-fog);
}
.page-about .about-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-16%;
  top:30%;
  width:72%;
  height:130%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,107,26,.16) 46%,rgba(122,92,255,.14) 100%);
  transform:skewY(-8deg);
  pointer-events:none;
}
.page-about .about-hero .ly-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13px;
}
.page-about .about-hero .ly-breadcrumb a{
  color:rgba(244,247,250,.66);
  text-decoration:none;
  transition:color var(--ly-fast) var(--ly-ease);
}
.page-about .about-hero .ly-breadcrumb a:hover,
.page-about .about-hero .ly-breadcrumb a:focus-visible{color:var(--ly-orange);}
.page-about .about-hero .ly-breadcrumb li+li::before{
  content:"/";
  margin-right:6px;
  color:rgba(244,247,250,.32);
}
.page-about .about-hero .ly-breadcrumb [aria-current="page"]{color:var(--ly-fog);}

.page-about .about-hero__inner{
  display:grid;
  gap:clamp(28px,5vw,48px);
  padding-top:clamp(26px,4.5vw,52px);
  padding-bottom:clamp(44px,7vw,84px);
}
.page-about .about-hero .ly-eyebrow{color:var(--ly-yellow);}
.page-about .about-hero h1{
  margin:14px 0 0;
  font-family:var(--ly-font-display);
  font-size:var(--ly-h1);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
}
.page-about .about-hero__lede{
  max-width:52ch;
  margin:20px 0 0;
  font-size:clamp(15px,1.8vw,17px);
  line-height:1.75;
  color:rgba(244,247,250,.82);
}
.page-about .about-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px,4vw,40px);
  margin:clamp(24px,4vw,34px) 0 0;
  padding:20px 0 0;
  list-style:none;
  border-top:1px solid rgba(46,90,122,.65);
}
.page-about .about-hero__facts li{display:flex;flex-direction:column;gap:4px;}
.page-about .about-hero__num{
  font-family:var(--ly-font-mono);
  font-size:clamp(22px,3vw,30px);
  font-weight:600;
  line-height:1;
  color:var(--ly-orange);
}
.page-about .about-hero__facts li:nth-child(2) .about-hero__num{color:var(--ly-mint);}
.page-about .about-hero__facts li:nth-child(3) .about-hero__num{color:var(--ly-yellow);}
.page-about .about-hero__cap{font-size:13px;color:rgba(244,247,250,.66);}
.page-about .about-hero__visual{position:relative;transform:rotate(-1.4deg);}
.page-about .about-hero__visual img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--ly-radius);
  object-fit:cover;
  clip-path:polygon(0 3%,100% 0,100% 92%,0 100%);
}
.page-about .about-hero__note{
  margin:12px 0 0;
  font-family:var(--ly-font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(244,247,250,.5);
}

/* 长卷主体 */
.page-about .about-body{
  display:grid;
  gap:clamp(26px,4vw,40px);
  padding-top:clamp(40px,6vw,72px);
  padding-bottom:clamp(48px,7vw,96px);
}

/* 章节导航 */
.page-about .about-toc{display:flex;flex-direction:column;gap:10px;}
.page-about .about-toc__label{
  margin:0;
  font-family:var(--ly-font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ly-line);
}
.page-about .about-toc__list{
  display:flex;
  gap:8px;
  margin:0;
  padding:0 0 6px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:thin;
}
.page-about .about-toc__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid rgba(46,90,122,.28);
  border-radius:999px;
  background:var(--ly-white);
  color:var(--ly-ink);
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--ly-fast) var(--ly-ease),border-color var(--ly-fast) var(--ly-ease),background var(--ly-fast) var(--ly-ease);
}
.page-about .about-toc__link .ly-mono{font-size:11px;color:var(--ly-orange);}
.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible{border-color:var(--ly-orange);color:var(--ly-orange);}
.page-about .about-toc__link.is-active,
.page-about .about-toc__link[aria-current]{
  background:var(--ly-orange);
  border-color:var(--ly-orange);
  color:var(--ly-white);
}
.page-about .about-toc__link.is-active .ly-mono,
.page-about .about-toc__link[aria-current] .ly-mono{color:var(--ly-white);}
.page-about .about-toc__vert{display:none;}

/* 章节流 */
.page-about .about-flow{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:clamp(52px,8vw,104px);
}
.page-about .about-chapter{
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid rgba(46,90,122,.16);
  scroll-margin-top:calc(var(--ly-header-h) + 20px);
}
.page-about .about-chapter:first-child{border-top:0;padding-top:0;}
.page-about .about-chapter__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:18px;
}
.page-about .about-chapter__no{
  font-family:var(--ly-font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--ly-orange);
  flex:none;
}
.page-about .about-chapter h2{
  margin:0;
  font-family:var(--ly-font-display);
  font-size:var(--ly-h2);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.015em;
}
.page-about .about-chapter__lede{
  max-width:60ch;
  margin:0 0 clamp(22px,3vw,34px);
  font-size:16px;
  line-height:1.8;
  color:var(--about-muted);
}

/* 01 演进 */
.page-about .about-milestones{display:grid;gap:16px;}
.page-about .about-mile{
  padding:clamp(18px,3vw,26px);
  border-radius:var(--ly-radius);
  background:var(--ly-white);
  box-shadow:0 10px 30px rgba(7,26,47,.06);
}
.page-about .about-mile h3{
  margin:12px 0 8px;
  font-family:var(--ly-font-display);
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
.page-about .about-mile p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--about-muted);
}

/* 02 原则 */
.page-about .about-diagram{margin:0 0 clamp(24px,4vw,36px);}
.page-about .about-diagram svg{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--ly-radius);
}
.page-about .about-diagram .bar{transition:opacity var(--ly-fast) var(--ly-ease);}
.page-about .about-diagram .bar:hover{opacity:.9;}
.page-about .about-diagram figcaption{
  margin-top:12px;
  font-family:var(--ly-font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--about-muted);
}
.page-about .about-principle-text{display:grid;gap:16px;max-width:66ch;}
.page-about .about-principle-text p{
  margin:0;
  font-size:15.5px;
  line-height:1.85;
  color:var(--about-muted);
}
.page-about .about-principle-text .ly-btn{justify-self:start;margin-top:4px;}

/* 03 团队 */
.page-about .about-team{display:grid;gap:14px;margin-bottom:clamp(22px,3vw,30px);}
.page-about .about-team__cell{
  padding:clamp(18px,3vw,26px);
  border-radius:var(--ly-radius);
  color:var(--ly-white);
  transition:transform var(--ly-fast) var(--ly-ease);
}
.page-about .about-team__cell:hover{transform:translateY(-4px);}
.page-about .about-team__num{
  font-family:var(--ly-font-mono);
  font-size:clamp(30px,5vw,44px);
  font-weight:600;
  line-height:1;
  color:var(--ly-white);
}
.page-about .about-team__cell h3{
  margin:8px 0 8px;
  font-family:var(--ly-font-display);
  font-size:20px;
  font-weight:700;
}
.page-about .about-team__cell p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:rgba(255,255,255,.86);
}
.page-about .about-team__cell--a{background:linear-gradient(150deg,#0E2A47,#1C4468);}
.page-about .about-team__cell--b{background:linear-gradient(150deg,#FF6B1A,#DE4E05);}
.page-about .about-team__cell--c{background:linear-gradient(150deg,#0F9E92,#14C8B8);color:#032A28;}
.page-about .about-team__cell--c .about-team__num{color:#032A28;}
.page-about .about-team__cell--c p{color:rgba(3,42,40,.8);}
.page-about .about-team__figure{margin:0 0 clamp(22px,3vw,30px);}
.page-about .about-team__figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--ly-radius);
  object-fit:cover;
}
.page-about .about-team__figure figcaption{
  margin-top:10px;
  font-size:13px;
  color:var(--about-muted);
}
.page-about .about-rhythm{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(46,90,122,.2);
}
.page-about .about-rhythm li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(46,90,122,.14);
  font-size:14.5px;
  line-height:1.7;
  color:var(--about-muted);
}
.page-about .about-rhythm__k{
  font-family:var(--ly-font-mono);
  font-size:12px;
  color:var(--ly-orange);
  padding-top:3px;
}
.page-about .about-rhythm strong{color:var(--ly-ink);font-weight:700;}

/* 04 场景 */
.page-about .about-scenes{display:grid;gap:16px;}
.page-about .about-scene{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(20px,3vw,28px);
  border:1px solid rgba(46,90,122,.12);
  border-radius:var(--ly-radius);
  background:var(--ly-white);
}
.page-about .about-scene__k{
  margin:0;
  font-family:var(--ly-font-mono);
  font-size:clamp(26px,4vw,34px);
  font-weight:600;
  line-height:1;
  color:var(--ly-violet);
}
.page-about .about-scene:nth-child(2) .about-scene__k{color:var(--ly-orange);}
.page-about .about-scene:nth-child(3) .about-scene__k{color:#0F9E92;}
.page-about .about-scene h3{
  margin:0;
  font-family:var(--ly-font-display);
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
.page-about .about-scene p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--about-muted);
}
.page-about .about-scene a{
  align-self:flex-start;
  margin-top:auto;
  padding-bottom:2px;
  border-bottom:2px solid var(--ly-orange);
  font-size:13.5px;
  font-weight:600;
  color:var(--ly-deep);
  text-decoration:none;
  transition:color var(--ly-fast) var(--ly-ease);
}
.page-about .about-scene a:hover,
.page-about .about-scene a:focus-visible{color:var(--ly-orange);}

/* 05 时间线 */
.page-about .about-timeline{
  display:flex;
  gap:16px;
  margin:0;
  padding:6px 0 22px;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.page-about .about-timeline li{
  position:relative;
  flex:0 0 78%;
  max-width:320px;
  scroll-snap-align:start;
  padding:22px 20px 20px;
  border-radius:var(--ly-radius);
  background:var(--ly-white);
  box-shadow:0 8px 24px rgba(7,26,47,.06);
}
.page-about .about-timeline li::before{
  content:"";
  position:absolute;
  left:20px;
  top:14px;
  width:44px;
  height:3px;
  background:var(--ly-yellow);
  transform:skewX(-30deg);
}
.page-about .about-timeline__year{
  display:block;
  margin-top:10px;
  font-family:var(--ly-font-mono);
  font-size:clamp(24px,4vw,32px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ly-deep);
}
.page-about .about-timeline h3{
  margin:8px 0 8px;
  font-family:var(--ly-font-display);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
}
.page-about .about-timeline p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--about-muted);
}

/* 结尾 */
.page-about .about-cta{
  background:var(--ly-deep);
  color:var(--ly-fog);
  padding:clamp(40px,6vw,72px) 0;
}
.page-about .about-cta__inner{display:grid;gap:16px;justify-items:start;}
.page-about .about-cta h2{
  margin:0;
  font-family:var(--ly-font-display);
  font-size:clamp(26px,3.4vw,38px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
}
.page-about .about-cta p{
  max-width:56ch;
  margin:0;
  font-size:15px;
  line-height:1.78;
  color:rgba(244,247,250,.78);
}
.page-about .about-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.page-about .about-cta .ly-btn--ghost{
  color:var(--ly-fog);
  border-color:rgba(244,247,250,.42);
  background:transparent;
}
.page-about .about-cta .ly-btn--ghost:hover,
.page-about .about-cta .ly-btn--ghost:focus-visible{
  color:var(--ly-deep);
  background:var(--ly-fog);
  border-color:var(--ly-fog);
}

/* 平板与桌面 */
@media (min-width:700px){
  .page-about .about-team{
    grid-template-columns:1.25fr 1fr;
    grid-template-areas:
      "a b"
      "a c";
  }
  .page-about .about-team__cell--a{grid-area:a;}
  .page-about .about-team__cell--b{grid-area:b;}
  .page-about .about-team__cell--c{grid-area:c;}
}

@media (min-width:760px){
  .page-about .about-milestones{grid-template-columns:repeat(12,1fr);}
  .page-about .about-milestones > *:nth-child(1){grid-column:1 / 9;}
  .page-about .about-milestones > *:nth-child(2){grid-column:4 / 12;transform:rotate(.9deg);}
  .page-about .about-milestones > *:nth-child(3){grid-column:2 / 10;transform:rotate(-.7deg);}
  .page-about .about-timeline li{flex:0 0 300px;}
}

@media (min-width:820px){
  .page-about .about-scenes{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:900px){
  .page-about .about-hero__inner{
    grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);
    align-items:end;
  }
}

@media (min-width:960px){
  .page-about .about-body{
    grid-template-columns:200px minmax(0,1fr);
    gap:clamp(32px,5vw,72px);
  }
  .page-about .about-toc{
    position:sticky;
    top:calc(var(--ly-header-h) + 18px);
    align-self:start;
    gap:14px;
  }
  .page-about .about-toc__list{
    flex-direction:column;
    gap:2px;
    overflow:visible;
    padding:0;
  }
  .page-about .about-toc__link{
    padding:7px 0 7px 14px;
    border:0;
    border-left:2px solid rgba(46,90,122,.22);
    border-radius:0;
    background:none;
    font-size:14px;
    white-space:normal;
  }
  .page-about .about-toc__link:hover,
  .page-about .about-toc__link:focus-visible{
    border-left-color:var(--ly-orange);
    color:var(--ly-orange);
  }
  .page-about .about-toc__link.is-active,
  .page-about .about-toc__link[aria-current]{
    background:none;
    border-left-color:var(--ly-orange);
    color:var(--ly-orange);
  }
  .page-about .about-toc__link.is-active .ly-mono,
  .page-about .about-toc__link[aria-current] .ly-mono{color:var(--ly-orange);}
  .page-about .about-toc__vert{
    display:block;
    margin:12px 0 0 16px;
    writing-mode:vertical-rl;
    font-family:var(--ly-font-mono);
    font-size:11px;
    letter-spacing:.3em;
    color:rgba(46,90,122,.62);
  }
  .page-about .about-chapter--open .about-diagram{width:min(100%,700px);}
  .page-about .about-principle-text{
    max-width:58ch;
    margin-left:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .about-hero__visual,
  .page-about .about-milestones > *{transform:none;}
  .page-about .about-team__cell:hover{transform:none;}
}
<<<END>>>