.page-about {
  background: var(--sf-paper);
  color: var(--sf-ink);
}

.page-about .about-num {
  display: block;
  font-size: clamp(30px, 5.2vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-about .about-unit {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  opacity: .82;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding-block: 0 clamp(44px, 7vw, 80px);
}

.page-about .about-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.page-about .about-hero__idx {
  color: var(--sf-orange);
  letter-spacing: .08em;
}

.page-about .about-hero__title {
  margin: 16px 0 0;
  max-width: 15em;
}

.page-about .about-hero__lede {
  margin-top: 20px;
  max-width: 44ch;
  color: var(--sf-cyan-soft);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .about-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-hero__fact {
  min-width: 140px;
  padding-left: 14px;
  border-left: 2px solid var(--sf-cyan);
  color: var(--sf-paper);
}

.page-about .about-hero__figurewrap {
  margin-top: 40px;
}

.page-about .about-hero__media {
  margin: 0;
  border-radius: var(--sf-radius-organic);
  overflow: hidden;
  border: 1px solid var(--sf-deep-3);
  background: linear-gradient(120deg, var(--sf-deep-2), var(--sf-deep-3));
}

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

/* ---------- 为什么 ---------- */
.page-about .about-why {
  padding-block: clamp(54px, 8vw, 96px);
}

.page-about .about-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-about .about-why__main .sf-prose + .sf-prose {
  margin-top: 16px;
}

.page-about .about-why__card {
  color: var(--sf-paper);
  border-radius: var(--sf-radius-m);
}

.page-about .about-why__cardtitle {
  margin-bottom: 18px;
}

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

.page-about .about-why__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.page-about .about-why__key {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sf-cyan);
  color: var(--sf-cyan);
  font-size: 13px;
}

.page-about .about-why__list strong {
  display: block;
  margin-bottom: 4px;
}

.page-about .about-why__list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sf-cyan-soft);
}

/* ---------- 阶段时间轴 ---------- */
.page-about .about-track {
  padding-block: clamp(56px, 8vw, 100px);
}

.page-about .about-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-about .about-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-about .about-head__idx {
  color: var(--sf-orange);
  letter-spacing: .08em;
}

.page-about .about-net .about-head__idx,
.page-about .about-lasting .about-head__idx {
  color: var(--sf-orange-2);
}

.page-about .about-head__lede {
  margin-top: 14px;
  color: var(--sf-cyan-soft);
}

.page-about .about-head--left .about-head__lede {
  color: inherit;
  opacity: .85;
}

.page-about .track-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-about .track-rail__inner {
  position: static;
}

.page-about .track-rail__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(168, 245, 238, .7);
}

.page-about .track-nav {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-about .track-nav__item {
  flex: 0 0 auto;
}

.page-about .track-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--sf-radius-s);
  border-bottom: 2px solid transparent;
  color: var(--sf-cyan-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--sf-ease), color .2s var(--sf-ease), border-color .2s var(--sf-ease);
}

.page-about .track-nav__num {
  color: var(--sf-cyan);
  font-size: 12px;
}

.page-about .track-nav__link:hover,
.page-about .track-nav__link:focus-visible {
  background: rgba(23, 232, 208, .12);
  color: #ffffff;
  border-bottom-color: var(--sf-orange);
}

.page-about .track-grid:has(#phase-1:hover) .track-nav__link[href="#phase-1"],
.page-about .track-grid:has(#phase-2:hover) .track-nav__link[href="#phase-2"],
.page-about .track-grid:has(#phase-3:hover) .track-nav__link[href="#phase-3"],
.page-about .track-grid:has(#phase-4:hover) .track-nav__link[href="#phase-4"],
.page-about .track-grid:has(#phase-5:hover) .track-nav__link[href="#phase-5"] {
  background: rgba(23, 232, 208, .16);
  color: #ffffff;
  border-bottom-color: var(--sf-orange);
}

.page-about .track-stack {
  display: grid;
  gap: 18px;
}

.page-about .track-card {
  position: relative;
  padding: 22px 20px;
  border-radius: var(--sf-radius-m);
  border: 1px solid rgba(199, 214, 230, .18);
  border-left: 3px solid var(--sf-cyan);
  background: linear-gradient(135deg, var(--sf-deep-2), #12315A);
  color: var(--sf-paper);
  transition: transform .2s var(--sf-ease), box-shadow .2s var(--sf-ease);
}

.page-about .track-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow-2);
}

.page-about .track-card--2 {
  border-left-color: var(--sf-cyan-2);
  background: linear-gradient(135deg, #0F2C54, #221F56);
}

.page-about .track-card--3 {
  border-left-color: var(--sf-cyan-3);
  background: linear-gradient(135deg, #2A2568, var(--sf-indigo));
}

.page-about .track-card--4 {
  border-left-color: var(--sf-orange);
  background: linear-gradient(135deg, var(--sf-indigo), #5C2449);
}

.page-about .track-card--5 {
  border-left-color: var(--sf-orange-2);
  background: linear-gradient(135deg, #652142, var(--sf-wine));
}

.page-about .track-card__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--sf-cyan-3);
}

.page-about .track-card--4 .track-card__kicker,
.page-about .track-card--5 .track-card__kicker {
  color: #FFC8A2;
}

.page-about .track-card__title {
  margin: 0 0 12px;
}

.page-about .track-card__text {
  margin: 0 0 16px;
  color: rgba(244, 248, 252, .86);
}

.page-about .track-card__acc {
  margin: 0;
  border: 0;
  background: transparent;
}

.page-about .track-card__acc .sf-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--sf-radius-s);
  border: 1px solid rgba(199, 214, 230, .28);
  background: rgba(244, 248, 252, .08);
  color: var(--sf-paper);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--sf-ease), border-color .2s var(--sf-ease);
}

.page-about .track-card__acc .sf-acc__btn:hover,
.page-about .track-card__acc .sf-acc__btn:focus-visible {
  background: rgba(23, 232, 208, .16);
  border-color: var(--sf-cyan);
}

.page-about .track-card__acc .sf-acc__icon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--sf-cyan);
  border-bottom: 2px solid var(--sf-cyan);
  transform: rotate(-45deg);
  transition: transform .2s var(--sf-ease);
}

.page-about .track-card__acc .sf-acc__btn[aria-expanded="true"] .sf-acc__icon {
  transform: rotate(45deg);
}

.page-about .track-card__acc .sf-acc__panel {
  padding-top: 12px;
}

.page-about .track-card__acc .sf-acc__panel[hidden] {
  display: none;
}

.page-about .track-points {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244, 248, 252, .88);
}

.page-about .track-points li::marker {
  color: var(--sf-cyan);
}

/* ---------- 服务网络 ---------- */
.page-about .about-net {
  padding-block: clamp(56px, 8vw, 100px);
  color: var(--sf-paper);
}

.page-about .about-net__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.page-about .about-net__title {
  margin: 12px 0 16px;
}

.page-about .about-net__text {
  color: rgba(244, 248, 252, .86);
}

.page-about .about-net__text + .about-net__text {
  margin-top: 14px;
}

.page-about .about-net__media {
  margin: 0;
  border-radius: var(--sf-radius-organic);
  overflow: hidden;
  border: 1px solid rgba(168, 245, 238, .3);
  background: linear-gradient(135deg, #2C2469, var(--sf-indigo));
}

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

.page-about .about-net__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-net__stat {
  padding: 18px 16px;
  border-radius: var(--sf-radius-m);
  border: 1px solid rgba(168, 245, 238, .28);
  background: rgba(6, 26, 51, .34);
}

.page-about .about-net__stat .about-num {
  color: var(--sf-cyan);
}

.page-about .about-net__stat .about-unit {
  color: rgba(244, 248, 252, .84);
}

.page-about .about-net__dots {
  height: 96px;
  margin-top: 30px;
  border-radius: var(--sf-radius-m);
  background-color: rgba(6, 26, 51, .3);
  background-image: radial-gradient(circle, rgba(168, 245, 238, .55) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
  background-position: 0 0;
}

.page-about .about-net__footnote {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 248, 252, .8);
}

/* ---------- 运营能力 ---------- */
.page-about .about-ops {
  padding-block: clamp(56px, 8vw, 100px);
}

.page-about .about-ops__media {
  margin: 0 0 28px;
  border-radius: var(--sf-radius-m);
  overflow: hidden;
  border: 1px solid var(--sf-line);
  background: linear-gradient(120deg, #E4EEF8, #D6E6F4);
}

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

.page-about .about-ops__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-about .about-ops__card {
  border-radius: var(--sf-radius-m);
}

.page-about .about-ops__num {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 700;
  color: var(--sf-cyan-2);
  letter-spacing: -0.01em;
}

.page-about .about-ops__card h3 {
  margin: 0 0 10px;
}

.page-about .about-ops__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- 长期使用 ---------- */
.page-about .about-lasting {
  padding-block: clamp(56px, 8vw, 100px);
}

.page-about .about-lasting__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.page-about .about-lasting__copy .sf-prose {
  margin-top: 14px;
}

.page-about .about-lasting__cta {
  margin: 26px 0 0;
}

.page-about .about-lasting__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-lasting__stat {
  padding: 18px 18px;
  border-radius: var(--sf-radius-m);
  border: 1px solid rgba(11, 167, 154, .35);
  background: rgba(255, 255, 255, .6);
}

.page-about .about-lasting__stat .about-num {
  color: var(--sf-cyan-2);
}

.page-about .about-lasting__stat .about-unit {
  color: var(--sf-ink);
}

.page-about .about-lasting__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}

.page-about .about-lasting__benefit {
  padding: 20px;
  border-radius: var(--sf-radius-m);
  border-left: 3px solid var(--sf-orange);
  background: var(--sf-paper);
  box-shadow: var(--sf-shadow-1);
}

.page-about .about-lasting__benefit h3 {
  margin: 0 0 10px;
}

.page-about .about-lasting__benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- 光轨收束 ---------- */
.page-about .about-rail {
  height: 3px;
  background: linear-gradient(90deg, var(--sf-cyan), var(--sf-orange) 68%, rgba(255, 138, 61, 0));
  opacity: .9;
}

/* ---------- 延伸入口 ---------- */
.page-about .about-next {
  padding-block: clamp(48px, 7vw, 88px);
}

.page-about .about-next__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .about-next__card {
  display: block;
  border-radius: var(--sf-radius-m);
  text-decoration: none;
  color: inherit;
}

.page-about .about-next__card h3 {
  margin: 0 0 10px;
}

.page-about .about-next__card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
}

.page-about .about-next__card .sf-card__go {
  font-weight: 700;
  color: var(--sf-cyan-2);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-net__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-ops__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-lasting__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .about-next__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-about .about-why__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
  }

  .page-about .track-grid {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .page-about .track-rail__inner {
    position: sticky;
    top: calc(var(--sf-header-h) + 28px);
  }

  .page-about .track-nav {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .track-nav__item + .track-nav__item {
    margin-top: 6px;
  }

  .page-about .track-nav__link {
    width: 100%;
    border-bottom: 0;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .page-about .track-nav__link:hover,
  .page-about .track-nav__link:focus-visible,
  .page-about .track-grid:has(#phase-1:hover) .track-nav__link[href="#phase-1"],
  .page-about .track-grid:has(#phase-2:hover) .track-nav__link[href="#phase-2"],
  .page-about .track-grid:has(#phase-3:hover) .track-nav__link[href="#phase-3"],
  .page-about .track-grid:has(#phase-4:hover) .track-nav__link[href="#phase-4"],
  .page-about .track-grid:has(#phase-5:hover) .track-nav__link[href="#phase-5"] {
    border-bottom-color: transparent;
    border-left-color: var(--sf-orange);
  }

  .page-about .about-net__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
  }

  .page-about .about-ops__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .about-lasting__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 52px;
  }

  .page-about .about-lasting__benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .about-next__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .track-card,
  .page-about .track-card__acc .sf-acc__btn,
  .page-about .track-card__acc .sf-acc__icon,
  .page-about .track-nav__link {
    transition: none;
  }

  .page-about .track-card:hover {
    transform: none;
  }
}