.page-about{
  background:var(--ink);
  color:var(--rock);
  overflow-x:hidden;
}

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

.page-about .about-block + .about-block{
  border-top:1px solid var(--line);
}

.page-about .about-block{
  padding-block:clamp(48px,7vw,86px);
}

.page-about figure{
  margin:0;
}

/* 面包屑 */
.page-about .about-crumb{
  margin-bottom:clamp(24px,4vw,40px);
}

.page-about .about-crumb .breadcrumb{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--rock);
}

/* 首屏 */
.page-about .about-hero{
  position:relative;
  padding-block:calc(var(--header-h) + 40px) clamp(40px,6vw,72px);
  background:
    radial-gradient(120% 85% at 88% -10%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(90% 70% at -5% 100%, rgba(63,169,245,.10), transparent 65%),
    var(--ink);
}

.page-about .about-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--rose) 55%,var(--blue) 78%,transparent);
  opacity:.55;
}

.page-about .about-hero-grid{
  display:grid;
  gap:clamp(26px,4vw,52px);
}

.page-about .about-kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}

.page-about .about-hero h1{
  font-size:clamp(30px,6.2vw,58px);
  font-weight:900;
  margin:0 0 22px;
  background:linear-gradient(96deg,var(--paper) 34%,var(--gold-bright) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.page-about .about-lede{
  font-size:clamp(16px,2.2vw,18px);
  line-height:1.78;
  color:var(--paper);
  border-left:2px solid var(--gold);
  padding-left:16px;
  margin:0 0 20px;
}

.page-about .about-hero-text p{
  margin:0 0 18px;
  line-height:1.8;
  max-width:38em;
}

.page-about .about-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-about .about-hero-media{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--moss),var(--ink));
}

.page-about .about-hero-media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}

/* 章节头 */
.page-about .slash-num{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:14px;
}

.page-about .slash-num::before{
  content:"";
  width:6px;
  height:16px;
  background:var(--clay);
  transform:skewX(-12deg);
}

.page-about .section-title{
  font-size:clamp(23px,3.6vw,38px);
  margin:0 0 12px;
  max-width:22em;
}

.page-about .section-desc{
  margin:0;
  color:var(--rock);
  line-height:1.75;
  max-width:36em;
  font-size:15px;
}

/* 起点与定位 */
.page-about .about-origin-grid{
  display:grid;
  gap:clamp(26px,4vw,44px);
  margin-top:clamp(28px,4vw,44px);
}

.page-about .about-origin-grid .prose p{
  margin:0 0 18px;
  line-height:1.82;
}

.page-about .about-origin-grid .prose p:last-child{
  margin-bottom:0;
}

.page-about .about-note{
  background:var(--deep);
  border:1px solid var(--line-gold);
  padding:24px 22px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}

.page-about .about-note-title{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold);
  margin:0 0 18px;
}

.page-about .about-note-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}

.page-about .about-note-list li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}

.page-about .about-note-list li:first-child{
  padding-top:0;
  border-top:0;
}

.page-about .about-note-idx{
  font-size:12px;
  color:var(--gold-bright);
  border:1px solid var(--line-gold);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-about .about-note-list strong{
  display:block;
  color:var(--paper);
  font-size:15px;
  margin-bottom:4px;
}

.page-about .about-note-list p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--rock);
}

/* 时间线 */
.page-about .about-tl-media{
  margin-top:clamp(26px,4vw,40px);
  border:1px solid var(--line);
  background:linear-gradient(100deg,var(--deep),var(--moss));
}

.page-about .about-tl-media img,
.page-about .team-media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}

.page-about .tl-index{
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin:22px 0 6px;
  padding-bottom:6px;
  scrollbar-width:thin;
}

.page-about .tl-index a{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--rock);
  border:1px solid var(--line);
  padding:6px 11px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.page-about .tl-index a:hover,
.page-about .tl-index a:focus-visible{
  color:var(--gold-bright);
  border-color:var(--line-gold);
}

.page-about .timeline{
  position:relative;
  margin-top:clamp(26px,4vw,38px);
  padding-left:30px;
}

.page-about .timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:14px;
  width:1px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,39,.25) 55%,var(--line-soft));
}

.page-about .tl-item{
  position:relative;
  margin-bottom:18px;
}

.page-about .tl-item::before{
  content:"";
  position:absolute;
  left:-30px;
  top:16px;
  width:11px;
  height:11px;
  border-radius:50%;
  border:2px solid var(--gold-bright);
  background:var(--ink);
  box-shadow:0 0 0 4px rgba(201,162,39,.12);
}

.page-about .tl-side{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
}

.page-about .tl-year{
  font-size:24px;
  line-height:1;
  color:var(--gold-bright);
  letter-spacing:.04em;
}

.page-about .tl-ver{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gold);
  border:1px solid var(--line-gold);
  padding:2px 6px;
}

.page-about .tl-card{
  background:var(--deep);
  border:1px solid var(--line);
  padding:16px 18px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:border-color .24s var(--ease),background-color .24s var(--ease);
}

.page-about .tl-card[open]{
  border-color:var(--line-gold);
  background:linear-gradient(160deg,var(--moss),var(--deep));
}

.page-about .tl-card summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

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

.page-about .tl-card summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--gold-bright);
  flex:0 0 auto;
}

.page-about .tl-card[open] summary::after{
  content:"–";
}

.page-about .tl-card-title{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  color:var(--paper);
  letter-spacing:.01em;
}

.page-about .tl-card p{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.78;
  color:var(--rock);
  border-top:1px solid var(--line-soft);
  padding-top:12px;
}

/* 团队 */
.page-about .team-media{
  margin-top:clamp(26px,4vw,40px);
  border:1px solid var(--line);
  background:linear-gradient(120deg,var(--moss),var(--deep));
}

.page-about .team-grid{
  display:grid;
  gap:14px;
  margin-top:clamp(18px,3vw,26px);
}

.page-about .team-card{
  background:var(--deep);
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  padding:22px 20px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}

.page-about .team-card-label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--clay);
}

.page-about .team-card-value{
  margin:0 0 12px;
  font-size:clamp(28px,4.4vw,38px);
  line-height:1;
  color:var(--gold-bright);
  display:flex;
  align-items:baseline;
  gap:6px;
}

.page-about .team-card-value span{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--rock);
  letter-spacing:.04em;
}

.page-about .team-card-text{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:var(--rock);
}

/* 安全体系 */
.page-about .safe-grid{
  display:grid;
  gap:14px;
  margin-top:clamp(26px,4vw,40px);
}

.page-about .safe-card{
  position:relative;
  background:linear-gradient(158deg,var(--moss),var(--deep) 70%);
  border:1px solid var(--line);
  padding:22px 20px 24px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:transform .24s var(--ease),border-color .24s var(--ease);
}

.page-about .safe-card:hover{
  border-color:var(--line-gold);
  transform:translateY(-3px);
}

.page-about .safe-card-idx{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--blue);
  margin-bottom:12px;
}

.page-about .safe-card h3{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  color:var(--paper);
  margin:0 0 10px;
}

.page-about .safe-card p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:var(--rock);
}

/* 数据带 */
.page-about .about-statband{
  position:relative;
  background:
    repeating-linear-gradient(115deg,rgba(201,162,39,.055) 0 1px,transparent 1px 15px),
    radial-gradient(90% 120% at 50% 0%,rgba(28,58,49,.6),transparent 70%),
    var(--ink);
  border-top:1px solid var(--line-gold);
}

.page-about .stats{
  display:grid;
  gap:12px;
  margin-top:clamp(26px,4vw,40px);
}

.page-about .stat{
  background:var(--deep);
  border:1px solid var(--line);
  padding:26px 20px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}

.page-about .stat:nth-child(2){
  background:linear-gradient(160deg,var(--moss),var(--deep));
}

.page-about .stat-num{
  margin:0 0 8px;
  font-size:clamp(30px,5vw,44px);
  line-height:1;
  color:var(--gold-bright);
  display:flex;
  align-items:baseline;
  gap:6px;
}

.page-about .stat-unit{
  font-size:13px;
  color:var(--rock);
  letter-spacing:.04em;
}

.page-about .stat-label{
  margin:0;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--rock);
}

/* 下一步 */
.page-about .about-next{
  display:grid;
  gap:12px;
  margin-top:clamp(28px,4vw,44px);
}

.page-about .next-item{
  display:block;
  text-decoration:none;
  background:rgba(16,35,30,.7);
  border:1px solid var(--line);
  border-top:2px solid var(--clay);
  padding:20px 18px 22px;
  transition:border-color .24s var(--ease),background-color .24s var(--ease);
}

.page-about .next-item:hover,
.page-about .next-item:focus-visible{
  border-color:var(--line-gold);
  border-top-color:var(--gold-bright);
  background:var(--moss);
}

.page-about .next-idx{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--rose);
  margin-bottom:10px;
}

.page-about .next-item strong{
  display:block;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--paper);
  margin-bottom:8px;
}

.page-about .next-item p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--rock);
}

/* 响应式 */
@media (min-width:640px){
  .page-about .team-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .page-about .safe-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-about .stats{
    grid-template-columns:repeat(2,1fr);
  }
  .page-about .about-next{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:900px){
  .page-about .about-hero-grid{
    grid-template-columns:1.3fr .7fr;
    align-items:end;
  }

  .page-about .about-origin-grid{
    grid-template-columns:1.35fr .65fr;
    align-items:start;
  }

  .page-about .timeline{
    padding-left:0;
    margin-top:clamp(34px,5vw,52px);
  }

  .page-about .timeline::before{
    left:50%;
    top:6px;
  }

  .page-about .tl-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:64px;
    align-items:start;
    margin-bottom:26px;
  }

  .page-about .tl-item::before{
    left:calc(50% - 6px);
    top:22px;
  }

  .page-about .tl-side{
    grid-row:1;
    margin-bottom:0;
    padding-top:18px;
  }

  .page-about .tl-card{
    grid-row:1;
  }

  .page-about .tl-item:nth-child(odd) .tl-side{
    grid-column:2;
    justify-content:flex-start;
  }

  .page-about .tl-item:nth-child(odd) .tl-card{
    grid-column:1;
    justify-self:end;
    width:100%;
  }

  .page-about .tl-item:nth-child(even) .tl-side{
    grid-column:1;
    justify-content:flex-end;
    text-align:right;
  }

  .page-about .tl-item:nth-child(even) .tl-card{
    grid-column:2;
    width:100%;
  }

  .page-about .about-note{
    position:sticky;
    top:calc(var(--header-h-sm) + 24px);
  }
}

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

@media (prefers-reduced-motion:reduce){
  .page-about .safe-card,
  .page-about .tl-card,
  .page-about .next-item{
    transition:none;
  }
  .page-about .safe-card:hover{
    transform:none;
  }
}
<<<END>>>