.page-about{
  --about-rail-w: 268px;
  --about-glow-cool: rgba(47,227,214,.16);
  --about-glow-warm: rgba(255,106,69,.14);
  background:
    radial-gradient(1100px 600px at 84% -8%, var(--about-glow-cool), transparent 62%),
    radial-gradient(820px 520px at 0% 6%, var(--about-glow-warm), transparent 58%),
    var(--abyss-950);
  color: var(--foam-050);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(28px,6vw,64px));
  padding-bottom: clamp(30px,5vw,54px);
}
.page-about .about-hero::after{
  content: "";
  position: absolute;
  right: -16%;
  top: -34%;
  width: 56%;
  height: 176%;
  background: linear-gradient(180deg, rgba(47,227,214,.12), rgba(47,227,214,0) 70%);
  transform: rotate(12deg);
  pointer-events: none;
}
.page-about .about-hero > .shell{
  position: relative;
  z-index: 1;
}

.page-about .hero-grid{
  display: grid;
  gap: clamp(26px,4vw,48px);
  align-items: center;
  margin-top: clamp(18px,3vw,30px);
}
@media (min-width:920px){
  .page-about .hero-grid{
    grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  }
}

.page-about .hero-copy h1{
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.15rem,6.2vw,4.2rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--foam-050);
}

.page-about .hero-lede{
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(.98rem,1.5vw,1.1rem);
  line-height: 1.85;
  color: rgba(234,245,246,.78);
}

.page-about .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px,3vw,32px);
}

.page-about .hero-media{
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-cool);
  background: linear-gradient(150deg, var(--abyss-800), var(--deep-600) 58%, var(--abyss-950));
  box-shadow: 0 34px 90px -46px rgba(47,227,214,.55);
}
.page-about .hero-media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  opacity: .94;
}

/* ---------- 双栏骨架 ---------- */
.page-about .about-body{
  display: grid;
  gap: clamp(28px,4vw,44px);
  padding-bottom: clamp(44px,7vw,92px);
}
@media (min-width:1060px){
  .page-about .about-body{
    grid-template-columns: minmax(0,1fr) var(--about-rail-w);
    gap: clamp(40px,4vw,64px);
    align-items: start;
  }
}
.page-about .about-main{ min-width: 0; }

/* ---------- 章节 ---------- */
.page-about .about-section{
  position: relative;
  padding: clamp(32px,4.5vw,52px) 0;
  border-top: 1px solid var(--line-quiet);
}
.page-about .about-main > .about-section:first-child{
  border-top: 0;
  padding-top: clamp(6px,1.6vw,18px);
}
.page-about .sec--cool{ --sec-accent: rgba(47,227,214,.38); }
.page-about .sec--warm{ --sec-accent: rgba(255,106,69,.38); }

.page-about .sec-head{
  display: flex;
  align-items: baseline;
  gap: clamp(12px,2vw,22px);
  margin-bottom: clamp(16px,2.4vw,26px);
}
.page-about .sec-num{
  flex: 0 0 auto;
  font-family: var(--font-data);
  font-weight: 200;
  font-size: clamp(2.4rem,6.2vw,4.1rem);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--sec-accent, rgba(47,227,214,.34));
}
.page-about .sec-head h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem,2.9vw,2.05rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--foam-050);
}

.page-about .sec-body{
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.84;
  color: rgba(234,245,246,.8);
}
.page-about .sec-body p{ margin: 0 0 1.05em; }
.page-about .sec-body p:last-child{ margin-bottom: 0; }

.page-about .tag-list{ margin-top: clamp(18px,2.6vw,26px); }

/* ---------- 团队 ---------- */
.page-about .crew-list{
  list-style: none;
  margin: clamp(20px,3vw,28px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width:640px){
  .page-about .crew-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.page-about .crew-list li{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-quiet);
  background: linear-gradient(160deg, rgba(10,39,64,.85), rgba(4,18,31,.62));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-about .crew-list li:hover{
  border-color: var(--line-warm);
  transform: translateY(-2px);
}
.page-about .crew-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--coral-200);
}
.page-about .crew-task{
  font-size: .85rem;
  line-height: 1.65;
  color: var(--slate-400);
}

/* ---------- 配图 ---------- */
.page-about .sec-figure{
  margin: 0 0 clamp(20px,3vw,28px);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-cool);
  background: linear-gradient(160deg, var(--abyss-800), var(--abyss-950));
}
.page-about .sec-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
.page-about .sec-figure--tall img{ aspect-ratio: 11 / 7; }

/* ---------- 生产流程 ---------- */
.page-about .flow-steps{
  list-style: none;
  margin: clamp(20px,3vw,28px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width:720px){
  .page-about .flow-steps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.page-about .flow-steps li{
  position: relative;
  padding: 18px 20px 18px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-quiet);
  background: rgba(10,39,64,.68);
}
.page-about .flow-steps li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 99px;
  background: var(--cyan-400);
  opacity: .72;
}
.page-about .flow-idx{
  display: block;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--cyan-400);
}
.page-about .flow-steps h3{
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--foam-050);
}
.page-about .flow-steps p{
  margin: 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--slate-400);
}

/* ---------- 合作生态 ---------- */
.page-about .eco-list{
  list-style: none;
  margin: clamp(20px,3vw,28px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-about .eco-item{ position: relative; }
.page-about .eco-tag{
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--pill);
  border: 1px solid var(--line-warm);
  background: rgba(255,106,69,.07);
  color: var(--coral-200);
  font-size: .88rem;
  line-height: 1.5;
  cursor: default;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-about .eco-tag:hover,
.page-about .eco-tag:focus-visible{
  background: rgba(255,106,69,.17);
  border-color: var(--coral-500);
  color: var(--foam-050);
  outline: none;
}
.page-about .eco-note{
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 4;
  width: max-content;
  max-width: min(240px, 78vw);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-warm);
  background: var(--abyss-800);
  color: rgba(234,245,246,.86);
  font-size: .78rem;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) linear;
  pointer-events: none;
}
.page-about .eco-tag:hover .eco-note,
.page-about .eco-tag:focus-visible .eco-note{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------- 驻地与联系 ---------- */
.page-about .contact-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px,3vw,28px);
}
.page-about .contact-chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--pill);
  border: 1px solid var(--line-cool-strong);
  background: rgba(47,227,214,.06);
  color: var(--cyan-200);
  font-size: .86rem;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-about .contact-chip:hover{
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  color: var(--ink-dark);
}

/* ---------- 发展节点 ---------- */
.page-about .tl-wrap{
  position: relative;
  margin-top: clamp(18px,3vw,26px);
  padding-top: 44px;
}
.page-about .tl-line{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  pointer-events: none;
}
.page-about .tl{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width:820px){
  .page-about .tl{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
}
.page-about .tl-item{
  position: relative;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-warm);
  background: linear-gradient(165deg, rgba(20,72,110,.5), rgba(4,18,31,.78));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-about .tl-item:hover{
  border-color: var(--coral-500);
  transform: translateY(-2px);
}
.page-about .tl-node{
  position: absolute;
  top: -28px;
  left: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 5px rgba(255,106,69,.14);
}
.page-about .tl-tag{
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--amber-300);
}
.page-about .tl-item h3{
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--foam-050);
}
.page-about .tl-item p{
  margin: 0;
  font-size: .84rem;
  line-height: 1.68;
  color: var(--slate-400);
}

/* ---------- 右侧数字索引栏 ---------- */
.page-about .about-rail{
  display: flex;
  flex-direction: column;
  gap: clamp(20px,3vw,28px);
  min-width: 0;
}
.page-about .rail-title{
  margin: 0 0 12px;
  font-family: var(--font-data);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.page-about .rail-stats{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-about .rail-stat{
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-cool);
  background: rgba(10,39,64,.55);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-about .rail-stat:hover{
  border-color: var(--line-cool-strong);
  background: rgba(10,39,64,.85);
}
.page-about .rail-stat-value{
  display: block;
  font-family: var(--font-data);
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--cyan-400);
}
.page-about .rail-stat--warm .rail-stat-value{ color: var(--coral-500); }
.page-about .rail-stat-label{
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  color: var(--slate-400);
}
.page-about .rail-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-about .rail-nav a{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  color: rgba(234,245,246,.7);
  font-size: .86rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-about .rail-nav a .mono{
  font-family: var(--font-data);
  font-size: .72rem;
  color: var(--slate-400);
}
.page-about .rail-nav a:hover{
  background: rgba(47,227,214,.08);
  border-left-color: var(--cyan-400);
  color: var(--cyan-200);
}

@media (min-width:1060px){
  .page-about .about-rail{
    position: sticky;
    top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 56px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

@media (max-width:1059px){
  .page-about .about-rail{ order: -1; }
  .page-about .rail-title{ margin-bottom: 8px; }
  .page-about .rail-stats,
  .page-about .rail-nav ul{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .page-about .rail-stat{
    flex: 0 0 auto;
    min-width: 148px;
  }
  .page-about .rail-nav ul li{ flex: 0 0 auto; }
  .page-about .rail-nav a{
    white-space: nowrap;
    border-left: 0;
    border: 1px solid var(--line-quiet);
    border-radius: var(--pill);
    padding: 8px 14px;
  }
  .page-about .rail-nav a:hover{ border-left-color: var(--line-quiet); }
}

/* ---------- 收尾 ---------- */
.page-about .about-cta{
  padding-bottom: clamp(52px,8vw,104px);
}
.page-about .cta-panel{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(26px,4.6vw,54px);
  border: 1px solid var(--line-cool);
  background: linear-gradient(135deg, var(--abyss-800), var(--deep-600) 56%, #0b2035);
}
.page-about .cta-panel::after{
  content: "";
  position: absolute;
  right: -12%;
  top: -44%;
  width: 52%;
  height: 184%;
  background: linear-gradient(180deg, rgba(255,106,69,.22), rgba(255,106,69,0) 72%);
  transform: rotate(12deg);
  pointer-events: none;
}
.page-about .cta-panel > *{ position: relative; z-index: 1; }
.page-about .cta-panel h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem,3.4vw,2.4rem);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--foam-050);
}
.page-about .cta-panel p{
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: .98rem;
  line-height: 1.82;
  color: rgba(234,245,246,.78);
}
.page-about .cta-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px,3vw,30px);
}

@media (max-width:520px){
  .page-about .sec-head{ flex-direction: column; gap: 6px; }
  .page-about .sec-num{ font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce){
  .page-about .crew-list li,
  .page-about .tl-item,
  .page-about .eco-tag,
  .page-about .eco-note,
  .page-about .rail-stat,
  .page-about .contact-chip,
  .page-about .rail-nav a{
    transition: none;
  }
  .page-about .crew-list li:hover,
  .page-about .tl-item:hover{ transform: none; }
}