.page-about{
  --about-rail:88px;
  --about-hair:rgba(43,90,73,.55);
  background:var(--pitch-ink);
  color:var(--chalk);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-wrap:break-word;
}

.page-about h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.16;
  letter-spacing:.01em;
  margin:12px 0 0;
  color:var(--chalk);
}

.page-about .about-text{
  margin:16px 0 0;
  font-size:15px;
  color:var(--sage-gray);
  max-width:var(--measure);
}

.page-about .about-lead{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.75;
  color:var(--sage-gray);
  max-width:56ch;
}

/* ---------- 首屏 ---------- */
.page-about .about-intro{
  position:relative;
  padding:calc(var(--topbar-h) + 36px) 0 0;
}
.page-about .about-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 78% at 82% -8%, rgba(61,255,193,.14), transparent 62%),
    radial-gradient(90% 60% at -4% 0%, rgba(255,155,74,.08), transparent 70%);
}
.page-about .about-intro .ng-container{
  position:relative;
  z-index:1;
}
.page-about .about-intro__grid{
  display:grid;
  gap:30px;
  margin-top:26px;
}
.page-about .about-intro__title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(38px,7.6vw,92px);
  line-height:1.02;
  letter-spacing:.01em;
  margin:16px 0 0;
  color:var(--chalk);
}
.page-about .about-intro__lead{
  margin:20px 0 0;
  font-size:15px;
  line-height:1.85;
  color:var(--sage-gray);
  max-width:48ch;
}
.page-about .about-intro__index{
  list-style:none;
  margin:0;
  padding:0 0 0 16px;
  border-left:1px solid var(--line-green);
}
.page-about .about-intro__index a{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--about-hair);
  color:var(--sage-gray);
  text-decoration:none;
  font-size:13px;
  transition:color var(--dur) ease;
}
.page-about .about-intro__index a span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--signal-mint);
}
.page-about .about-intro__index a:hover,
.page-about .about-intro__index a:focus-visible{
  color:var(--chalk);
}
.page-about .about-intro__index a:focus-visible{
  outline:2px solid var(--signal-mint);
  outline-offset:3px;
}
.page-about .about-stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:36px 0 0;
  padding:0;
  border-top:1px solid var(--line-green);
}
.page-about .about-stat{
  padding:18px 14px 20px 0;
  border-bottom:1px solid var(--about-hair);
}
.page-about .about-stat__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(26px,4.4vw,40px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--chalk);
  margin:0;
}
.page-about .about-stat__unit{
  font-size:.4em;
  font-weight:500;
  color:var(--signal-mint);
  margin-left:2px;
}
.page-about .about-stat__label{
  margin:10px 0 0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--sage-gray);
}

/* ---------- 起点 ---------- */
.page-about .about-origin__grid{
  display:grid;
  gap:30px;
}
.page-about .about-origin__figure{
  margin:0;
}
.page-about .about-origin__points{
  list-style:none;
  margin:24px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--line-green);
  display:grid;
  gap:12px;
}
.page-about .about-origin__points li{
  position:relative;
  padding-left:24px;
  font-size:14px;
  color:var(--sage-gray);
}
.page-about .about-origin__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:12px;
  height:1px;
  background:var(--signal-mint);
}

/* ---------- 服务原则 ---------- */
.page-about .about-path{
  display:block;
  width:100%;
  height:auto;
  margin:28px 0 4px;
}
.page-about .about-path__line{
  fill:none;
  stroke:var(--signal-mint);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.page-about .about-path__node{ fill:var(--chalk); }
.page-about .about-path__node--mint{ fill:var(--signal-mint); }
.page-about .about-path__node--orange{ fill:var(--score-orange); }
.page-about .about-path__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  fill:var(--sage-gray);
}
.page-about .about-principles{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.page-about .about-principle{
  background:var(--glass-moss);
  border:1px solid var(--line-green);
  border-radius:2px;
  padding:18px 18px 20px;
  backdrop-filter:blur(6px);
  transition:border-color var(--dur) ease, background var(--dur) ease;
}
.page-about .about-principle:hover,
.page-about .about-principle[open]{
  border-color:rgba(61,255,193,.45);
}
.page-about .about-principle__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  list-style:none;
  cursor:pointer;
}
.page-about .about-principle__head::-webkit-details-marker{ display:none; }
.page-about .about-principle__head:focus-visible{
  outline:2px solid var(--signal-mint);
  outline-offset:4px;
}
.page-about .about-principle__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--signal-mint);
}
.page-about .about-principle__title{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--chalk);
}
.page-about .about-principle__head::after{
  content:"展开";
  margin-left:auto;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sage-gray);
}
.page-about .about-principle[open] .about-principle__head::after{
  content:"收起";
  color:var(--signal-mint);
}
.page-about .about-principle__text{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--sage-gray);
  border-top:1px solid var(--about-hair);
  padding-top:14px;
}

/* ---------- 内容与数据 ---------- */
.page-about .about-collab__grid{
  display:grid;
  gap:30px;
}
.page-about .about-collab__aside{
  display:grid;
  gap:18px;
}
.page-about .about-roles{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.page-about .about-role{
  border-left:1px solid var(--line-green);
  padding:2px 0 14px 20px;
  transition:border-color var(--dur) ease;
}
.page-about .about-role:hover{
  border-left-color:var(--signal-mint);
}
.page-about .about-role__name{
  margin:0;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--chalk);
}
.page-about .about-role__text{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.78;
  color:var(--sage-gray);
}
.page-about .about-rhythm{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.page-about .about-rhythm__item{
  background:rgba(18,54,43,.5);
  border:1px solid var(--line-green);
  padding:14px 12px;
  display:grid;
  gap:2px;
}
.page-about .about-rhythm__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:var(--score-orange);
}
.page-about .about-rhythm__unit{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--score-orange);
  opacity:.8;
}
.page-about .about-rhythm__label{
  margin-top:6px;
  font-size:12px;
  color:var(--sage-gray);
}

/* ---------- 发展历程 ---------- */
.page-about .about-history__figure{
  margin:26px 0 0;
}
.page-about .about-tl{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  border-top:1px solid var(--line-green);
}
.page-about .about-tl__item{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--about-hair);
  transition:background var(--dur) ease;
}
.page-about .about-tl__rail{
  position:relative;
  padding-left:18px;
}
.page-about .about-tl__rail::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:-24px;
  width:1px;
  background:var(--line-green);
  transition:background var(--dur) ease;
}
.page-about .about-tl__year{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sage-gray);
  transition:color var(--dur) ease;
}
.page-about .about-tl__dot{
  position:absolute;
  left:-3px;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--line-green);
  transition:background var(--dur) ease, box-shadow var(--dur) ease;
}
.page-about .about-tl__item:hover .about-tl__year{
  color:var(--signal-mint);
}
.page-about .about-tl__item:hover .about-tl__dot{
  background:var(--signal-mint);
  box-shadow:0 0 0 4px var(--mint-soft);
}
.page-about .about-tl__item:hover .about-tl__rail::before{
  background:var(--signal-mint-deep);
}
.page-about .about-tl__title{
  margin:0;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--chalk);
}
.page-about .about-tl__text{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.78;
  color:var(--sage-gray);
  max-width:var(--measure);
}

/* ---------- 协作生态 ---------- */
.page-about .about-eco__grid{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.page-about .about-eco__card{
  position:relative;
  background:var(--glass-moss);
  border:1px solid var(--line-green);
  border-radius:2px;
  padding:22px 18px 24px;
  transition:border-color var(--dur) ease;
}
.page-about .about-eco__card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:36px;
  height:1px;
  background:var(--signal-mint);
}
.page-about .about-eco__card:hover{
  border-color:rgba(61,255,193,.4);
}
.page-about .about-eco__tag{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--signal-mint);
}
.page-about .about-eco__title{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--chalk);
}
.page-about .about-eco__text{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.78;
  color:var(--sage-gray);
}
.page-about .about-eco__note{
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line-green);
  font-size:13px;
  line-height:1.8;
  color:var(--sage-gray);
  max-width:60ch;
}

/* ---------- 下一步 ---------- */
.page-about .about-next{
  padding-bottom:clamp(56px,8vw,104px);
}
.page-about .about-next__panel{
  display:grid;
  gap:26px;
  padding:clamp(24px,5vw,48px);
  border:1px solid var(--line-green);
  border-radius:2px;
  background:
    linear-gradient(140deg, rgba(18,54,43,.78), rgba(4,20,15,.94)),
    radial-gradient(90% 80% at 90% 0%, rgba(61,255,193,.12), transparent 65%);
}
.page-about .about-next__text{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.8;
  color:var(--sage-gray);
  max-width:54ch;
}
.page-about .about-next__contact{
  margin:18px 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
  line-height:1.9;
  color:var(--signal-mint);
}
.page-about .about-next__actions{
  display:grid;
  gap:10px;
}
.page-about .about-next__actions .ng-btn{
  justify-content:center;
  text-align:center;
}

/* ---------- 断点 ---------- */
@media (min-width:760px){
  .page-about .about-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .about-stat{
    padding:22px 18px 24px 0;
    border-bottom:0;
    border-right:1px solid var(--about-hair);
  }
  .page-about .about-stat:last-child{
    border-right:0;
  }
  .page-about .about-rhythm{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-about .about-intro{
    padding-top:calc(var(--topbar-h) + 64px);
  }
  .page-about .about-intro__grid{
    grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr);
    gap:clamp(32px,5vw,72px);
    align-items:end;
    margin-top:34px;
  }
  .page-about .about-origin__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.72fr);
    gap:clamp(28px,5vw,64px);
    align-items:start;
  }
  .page-about .about-principles{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  .page-about .about-collab__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    gap:clamp(28px,5vw,60px);
    align-items:start;
  }
  .page-about .about-rhythm{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .about-tl__item{
    grid-template-columns:var(--about-rail) minmax(0,1fr);
    gap:26px;
    padding:26px 0;
  }
  .page-about .about-tl__rail{
    padding-left:22px;
  }
  .page-about .about-eco__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  .page-about .about-next__panel{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:40px;
  }
  .page-about .about-next__actions{
    min-width:216px;
  }
}

@media (max-width:639px){
  .page-about .about-path{
    display:none;
  }
  .page-about .about-intro__title{
    font-size:clamp(32px,9vw,44px);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about *{
    transition:none !important;
  }
}
<<<END>>>
