.page-about{
  --rail-w:240px;
  --about-radius:28px;
  background:var(--ink);
  color:var(--mist);
  overflow-x:hidden;
}

.page-about .shell{
  min-width:0;
}

.page-about img{
  max-width:100%;
  height:auto;
}

/* ---------- 首屏 ---------- */

.page-about .about-hero{
  position:relative;
  padding-top:clamp(22px,3.4vw,46px);
  padding-bottom:clamp(30px,4vw,56px);
  background:
    radial-gradient(110% 84% at 86% 0%, rgba(47,230,208,.13), transparent 60%),
    radial-gradient(90% 70% at 2% 100%, rgba(255,138,61,.09), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--abyss) 100%);
}

.page-about .about-hero-grid{
  margin-top:clamp(22px,3vw,40px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,44px);
}

@media (min-width:960px){
  .page-about .about-hero-grid{
    grid-template-columns:minmax(0,1.42fr) minmax(0,.82fr);
    align-items:end;
  }
}

.page-about .about-kicker{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--amber);
}

.page-about h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(32px,5.6vw,68px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--white);
  max-width:18ch;
}

.page-about .about-hero-copy .lede{
  margin:clamp(16px,2vw,24px) 0 0;
  max-width:58ch;
  font-size:clamp(15px,1.55vw,17px);
  line-height:1.85;
  color:var(--mist);
}

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

.page-about .about-hero-panel{
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--about-radius);
  background:linear-gradient(160deg, rgba(20,29,43,.96) 0%, rgba(10,18,32,.94) 100%);
  border:1px solid rgba(47,230,208,.22);
}

.page-about .about-panel-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--cyan);
}

.page-about .about-facts{
  margin:18px 0 0;
  display:grid;
  gap:14px;
}

.page-about .about-fact{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(34,48,74,.95);
}

.page-about .about-fact:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.page-about .about-fact dt{
  font-size:14px;
  color:var(--mist);
}

.page-about .about-fact dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  line-height:1;
  color:var(--cyan);
}

.page-about .about-fact dd em{
  margin-left:5px;
  font-family:var(--font-body);
  font-size:13px;
  font-style:normal;
  color:var(--mist);
}

.page-about .about-panel-foot{
  margin:16px 0 0;
  font-size:13px;
  color:var(--mist);
  opacity:.85;
}

.page-about .about-hero-vnote{
  position:absolute;
  right:clamp(10px,1.6vw,26px);
  top:26%;
  display:none;
}

@media (min-width:1200px){
  .page-about .about-hero-vnote{
    display:block;
  }
}

/* ---------- 首屏主图 ---------- */

.page-about .about-hero-media{
  margin:0;
  padding:0 0 clamp(8px,1.6vw,20px);
  background:var(--abyss);
}

.page-about .about-hero-media .media-frame{
  position:relative;
  border-radius:var(--about-radius);
  overflow:hidden;
}

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

.page-about .about-hero-media .media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,18,32,0) 42%, rgba(7,12,20,.82) 100%);
  pointer-events:none;
}

/* ---------- 主体骨架 ---------- */

.page-about .about-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3vw,44px);
  padding:clamp(30px,4vw,54px) 0 clamp(44px,6vw,84px);
}

@media (min-width:1024px){
  .page-about .about-body{
    grid-template-columns:var(--rail-w) minmax(0,1fr);
    gap:clamp(40px,4.4vw,76px);
    align-items:start;
  }
}

/* ---------- 章节索引 ---------- */

.page-about .about-rail{
  min-width:0;
}

.page-about .about-rail-title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--cyan);
}

.page-about .about-rail-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}

.page-about .about-rail-nav::-webkit-scrollbar{
  display:none;
}

.page-about .spy-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.9);
  color:var(--mist);
  font-size:13px;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}

.page-about .spy-link .mono{
  font-size:12px;
  color:var(--grid);
  transition:color .16s ease;
}

.page-about .spy-link:hover{
  color:var(--white);
  border-color:rgba(47,230,208,.5);
}

.page-about .spy-link[aria-current="true"],
.page-about .spy-link[aria-current="page"]{
  color:var(--cyan);
  border-color:var(--cyan);
  background:rgba(47,230,208,.08);
  font-weight:600;
}

.page-about .spy-link[aria-current="true"] .mono,
.page-about .spy-link[aria-current="page"] .mono{
  color:var(--amber);
}

@media (min-width:1024px){
  .page-about .about-rail{
    position:sticky;
    top:96px;
  }

  .page-about .about-rail-nav{
    flex-direction:column;
    gap:0;
    overflow:visible;
    padding:0;
    border-left:2px solid rgba(34,48,74,.85);
  }

  .page-about .spy-link{
    position:relative;
    display:flex;
    border:0;
    border-radius:0;
    padding:11px 12px 11px 18px;
    background:none;
    font-size:14px;
    white-space:normal;
  }

  .page-about .spy-link::before{
    content:"";
    position:absolute;
    left:-2px;
    top:8px;
    bottom:8px;
    width:2px;
    background:var(--cyan);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .2s ease;
  }

  .page-about .spy-link:hover{
    border-color:transparent;
    background:rgba(47,230,208,.05);
  }

  .page-about .spy-link[aria-current="true"],
  .page-about .spy-link[aria-current="page"]{
    background:none;
  }

  .page-about .spy-link[aria-current="true"]::before,
  .page-about .spy-link[aria-current="page"]::before{
    transform:scaleY(1);
  }
}

/* ---------- 章节 ---------- */

.page-about .about-sections{
  min-width:0;
}

.page-about .about-section{
  position:relative;
  padding:clamp(34px,4.6vw,68px) 0;
  overflow:hidden;
}

.page-about .about-section:first-child{
  padding-top:0;
}

.page-about .about-section + .about-section{
  border-top:1px solid rgba(34,48,74,.7);
}

.page-about .about-section + .about-section::after{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:min(300px,46%);
  height:5px;
  border-radius:0 0 999px 999px;
  background:var(--grad);
  opacity:.45;
}

.page-about .about-section > *:not(.chapter-mark):not(.about-track-bg){
  position:relative;
  z-index:1;
}

.page-about .chapter-mark{
  position:absolute;
  top:clamp(18px,2.6vw,36px);
  right:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(92px,14vw,176px);
  line-height:.78;
  letter-spacing:-.05em;
  color:var(--grid);
  opacity:.5;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

.page-about .about-section:first-child .chapter-mark{
  top:0;
}

.page-about .section-index{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--amber);
}

.page-about .section-title{
  margin:0;
  max-width:22ch;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(23px,3.2vw,40px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--white);
}

.page-about .about-prose{
  margin-top:clamp(16px,2vw,26px);
  max-width:66ch;
}

.page-about .about-prose p{
  margin:0 0 1.15em;
  font-size:15.5px;
  line-height:1.85;
  color:var(--mist);
}

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

/* ---------- 成长轨迹 ---------- */

.page-about .about-section--track{
  position:relative;
}

.page-about .about-track-bg{
  position:absolute;
  right:0;
  bottom:0;
  width:min(660px,84%);
  height:auto;
  opacity:.15;
  border-radius:var(--about-radius);
  object-fit:cover;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
}

.page-about .tl{
  list-style:none;
  position:relative;
  margin:clamp(24px,3.2vw,40px) 0 0;
  padding:0 0 0 36px;
}

.page-about .tl::before{
  content:"";
  position:absolute;
  left:7px;
  top:10px;
  bottom:12px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 42%, var(--amber) 100%);
  opacity:.6;
}

.page-about .tl-item{
  position:relative;
  padding-bottom:clamp(22px,3vw,34px);
  outline:none;
}

.page-about .tl-item:last-child{
  padding-bottom:0;
}

.page-about .tl-item::before{
  content:"";
  position:absolute;
  left:-36px;
  top:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--cyan);
  box-shadow:0 0 0 4px rgba(47,230,208,.1);
  transition:background .2s ease, box-shadow .2s ease;
}

.page-about .tl-item:hover::before,
.page-about .tl-item:focus-visible::before{
  background:var(--cyan);
  box-shadow:0 0 0 7px rgba(47,230,208,.16);
}

.page-about .tl-era{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--amber);
}

.page-about .tl-title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px,2vw,21px);
  line-height:1.42;
  color:var(--white);
}

.page-about .tl-text{
  margin:0;
  max-width:62ch;
  font-size:15px;
  line-height:1.78;
  color:var(--mist);
}

.page-about .tl-note{
  margin:10px 0 0;
  padding-left:12px;
  border-left:2px solid rgba(47,230,208,.42);
  font-size:14px;
  line-height:1.72;
  color:var(--cyan);
}

@media (min-width:1024px){
  .page-about .tl-note{
    max-height:0;
    margin-top:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
  }

  .page-about .tl-item:hover .tl-note,
  .page-about .tl-item:focus-visible .tl-note,
  .page-about .tl-item:focus-within .tl-note{
    max-height:160px;
    margin-top:10px;
    opacity:1;
  }
}

/* ---------- 团队与轮值 ---------- */

.page-about .about-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(16px,2.2vw,26px);
}

@media (min-width:900px){
  .page-about .about-split{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:center;
  }
}

.page-about .about-figure{
  margin:0;
}

.page-about .about-figure .media-frame{
  border-radius:var(--about-radius);
  overflow:hidden;
  border:1px solid rgba(34,48,74,.8);
}

.page-about .about-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-about .shift-list{
  list-style:none;
  margin:clamp(22px,3vw,34px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(34,48,74,.75);
}

.page-about .shift-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
  padding:15px 18px;
  background:rgba(20,29,43,.88);
  font-size:15px;
  line-height:1.7;
  color:var(--mist);
}

.page-about .shift-list .mono{
  min-width:132px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--cyan);
}

.page-about .verify-strip{
  margin:clamp(18px,2.6vw,30px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-radius:18px;
  overflow:hidden;
  background:rgba(34,48,74,.75);
}

.page-about .verify-strip > div{
  padding:18px;
  background:rgba(20,29,43,.88);
}

.page-about .verify-strip dt{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--mist);
}

.page-about .verify-strip dd{
  margin:10px 0 0;
  font-size:15px;
  color:var(--white);
}

.page-about .verify-strip .mono{
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  color:var(--cyan);
}

/* ---------- 内容标准 ---------- */

.page-about .flow{
  list-style:none;
  margin:clamp(24px,3.2vw,38px) 0 0;
  padding:0;
  display:grid;
  gap:10px;
  grid-template-columns:minmax(0,1fr);
}

@media (min-width:880px){
  .page-about .flow{
    gap:0;
    grid-template-columns:1fr 1.12fr 1.28fr .96fr;
  }
}

.page-about .flow-step{
  position:relative;
  padding:22px 20px 24px;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(20,29,43,.95) 0%, rgba(10,18,32,.94) 100%);
  border:1px solid rgba(34,48,74,.85);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

@media (min-width:880px){
  .page-about .flow-step{
    border-radius:0;
  }

  .page-about .flow-step:first-child{
    border-radius:20px 0 0 20px;
  }

  .page-about .flow-step:last-child{
    border-radius:0 20px 20px 0;
  }

  .page-about .flow-step + .flow-step{
    border-left:0;
  }
}

.page-about .flow-step:hover{
  border-color:rgba(47,230,208,.55);
  box-shadow:0 0 0 1px rgba(47,230,208,.18);
  transform:translateY(-2px);
}

.page-about .flow-num{
  display:block;
  margin-bottom:14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--amber);
}

.page-about .flow-step h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:var(--white);
}

.page-about .flow-step p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:var(--mist);
}

.page-about .about-fields{
  margin-top:clamp(24px,3vw,36px);
}

.page-about .about-fields-title{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--mist);
}

.page-about .field-chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-about .field-chips li{
  padding:7px 14px;
  border-radius:999px;
  font-size:13px;
  color:var(--white);
  background:rgba(47,230,208,.08);
  border:1px solid rgba(47,230,208,.28);
}

/* ---------- 用户习惯 ---------- */

.page-about .user-stats{
  margin-top:clamp(22px,3vw,34px);
  display:grid;
  gap:clamp(14px,1.8vw,20px);
  grid-template-columns:minmax(0,1fr);
}

@media (min-width:760px){
  .page-about .user-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.page-about .user-stat{
  position:relative;
  padding:24px 22px 28px;
  border-radius:var(--about-radius);
  background:linear-gradient(165deg, rgba(20,29,43,.95) 0%, rgba(10,18,32,.92) 100%);
  border:1px solid rgba(34,48,74,.9);
  overflow:hidden;
}

.page-about .user-stat::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--grad);
  opacity:.75;
}

.page-about .user-stat-num{
  margin:0 0 14px;
  font-size:clamp(32px,4.4vw,50px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--white);
}

.page-about .user-stat-num span{
  margin-left:6px;
  font-size:.4em;
  letter-spacing:0;
  color:var(--cyan);
}

.page-about .user-stat h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--white);
}

.page-about .user-stat-desc{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}

/* ---------- 基地与备案 ---------- */

.page-about .base-grid{
  margin-top:clamp(18px,2.4vw,28px);
  display:grid;
  gap:clamp(20px,3vw,38px);
  grid-template-columns:minmax(0,1fr);
}

@media (min-width:900px){
  .page-about .base-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    align-items:start;
  }
}

.page-about .base-list{
  margin:0;
  display:grid;
  border-top:1px solid rgba(34,48,74,.85);
}

.page-about .base-list > div{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 20px;
  padding:16px 0;
  border-bottom:1px solid rgba(34,48,74,.85);
}

@media (min-width:620px){
  .page-about .base-list > div{
    grid-template-columns:136px minmax(0,1fr);
    align-items:baseline;
  }
}

.page-about .base-list dt{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--cyan);
}

.page-about .base-list dd{
  margin:0;
  font-size:15px;
  line-height:1.72;
  color:var(--white);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.page-about .base-more{
  margin:clamp(18px,2.4vw,26px) 0 0;
  font-size:14px;
  color:var(--mist);
}

.page-about .base-more a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 内容合作 ---------- */

.page-about .partner-list{
  list-style:none;
  margin:clamp(22px,3vw,34px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  grid-template-columns:minmax(0,1fr);
  border-radius:var(--about-radius);
  overflow:hidden;
  background:rgba(34,48,74,.75);
}

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

.page-about .partner-list li{
  padding:26px 22px 28px;
  background:rgba(20,29,43,.9);
}

.page-about .partner-list h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:var(--white);
}

.page-about .partner-list p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}

/* ---------- 结尾 ---------- */

.page-about .about-cta{
  padding:clamp(46px,6vw,88px) 0 clamp(52px,7vw,104px);
  background:linear-gradient(180deg, var(--ink) 0%, var(--abyss) 100%);
  border-top:1px solid rgba(34,48,74,.8);
}

.page-about .about-cta-inner{
  position:relative;
  padding:clamp(26px,3.6vw,52px);
  border-radius:var(--about-radius);
  border:1px solid rgba(47,230,208,.2);
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(47,230,208,.14), transparent 58%),
    linear-gradient(150deg, rgba(20,29,43,.96) 0%, rgba(10,18,32,.95) 100%);
}

.page-about .about-cta-inner h2{
  margin:0;
  max-width:20ch;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,3vw,36px);
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--white);
}

.page-about .about-cta-inner p{
  margin:14px 0 0;
  max-width:58ch;
  font-size:15px;
  line-height:1.82;
  color:var(--mist);
}

.page-about .about-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,2.6vw,30px);
}

/* ---------- 窄屏收口 ---------- */

@media (max-width:479px){
  .page-about .about-hero-actions .btn,
  .page-about .about-cta-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }

  .page-about .chapter-mark{
    font-size:80px;
    opacity:.38;
  }

  .page-about .tl{
    padding-left:28px;
  }

  .page-about .tl::before{
    left:6px;
  }

  .page-about .tl-item::before{
    left:-28px;
    width:14px;
    height:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-about .tl-item::before,
  .page-about .spy-link,
  .page-about .flow-step,
  .page-about .tl-note{
    transition:none;
  }

  .page-about .flow-step:hover{
    transform:none;
  }
}